Package structure changes and dependency updates

.github/workflows/publish.yml

@@ -26,7 +26,8 @@ jobs:
         run: |
           VERSION=$(node tools/next-dev-version.js)
           npm --no-git-tag-version version ${VERSION}
-          npm publish --tag dev
+          cp package.json lib
+          npm publish --tag dev lib
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
   publish-tag:
@@ -44,6 +45,7 @@ jobs:
         run: node tools/newest-tag.js --tag ${GITHUB_REF_NAME}
       - name: Publish
         run: |
-          npm publish
+          cp package.json lib
+          npm publish lib
         env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

lib/Map.js

@@ -16,7 +16,7 @@
 import OLMap from 'ol/Map.js';
 import propTypes from 'prop-types';
 import {Component, createElement, createRef, forwardRef} from 'react';
-import {render, updateInstanceFromProps} from '../renderer/render.js';
+import {render, updateInstanceFromProps} from './internal/render.js';
 
 const defaultDivStyle = {
   height: '100%',

lib/Overlay.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import OLOverlay from 'ol/Overlay.js';
-import {OVERLAY} from '../config.js';
+import {OVERLAY} from './internal/config.js';
 import {createElement, forwardRef} from 'react';
 
 const Overlay = forwardRef((props, ref) => {

lib/View.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import OLView from 'ol/View.js';
-import {VIEW} from '../config.js';
+import {VIEW} from './internal/config.js';
 import {createElement, forwardRef} from 'react';
 
 const View = forwardRef((props, ref) => {

renderer/render.js → lib/internal/render.js

@@ -6,7 +6,7 @@ import Overlay from 'ol/Overlay.js';
 import ReactReconciler from 'react-reconciler';
 import Source from 'ol/source/Source.js';
 import View from 'ol/View.js';
-import {CONTROL, INTERACTION, LAYER, OVERLAY, SOURCE, VIEW} from '../config.js';
+import {CONTROL, INTERACTION, LAYER, OVERLAY, SOURCE, VIEW} from './config.js';
 import {
   ConcurrentRoot,
   DefaultEventPriority,

lib/layer/MapboxVector.js

@@ -14,12 +14,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import OLMapboxVector from 'ol/layer/MapboxVector.js';
 import propTypes from 'prop-types';
+import {MapboxVectorLayer as OLMBVectorLayer} from 'ol-mapbox-style';
 import {createElement, forwardRef} from 'react';
 
 const MapboxVector = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLMapboxVector, ref, ...props}, children);
+  return createElement(
+    'layer',
+    {cls: OLMBVectorLayer, ref, ...props},
+    children
+  );
 });
 
 MapboxVector.propTypes = {

lib/source/Stamen.js → lib/source/StadiaMaps.js

@@ -14,11 +14,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import OLStamen from 'ol/source/Stamen.js';
+import OLStadiaMaps from 'ol/source/StadiaMaps.js';
 import {createElement, forwardRef} from 'react';
 
-const Stamen = forwardRef((props, ref) => {
-  return createElement('source', {cls: OLStamen, ref, ...props});
+const StadiaMaps = forwardRef((props, ref) => {
+  return createElement('source', {cls: OLStadiaMaps, ref, ...props});
 });
 
-export default Stamen;
+export default StadiaMaps;

package.json

@@ -16,11 +16,6 @@
     "clean": "node tools/clean.js"
   },
   "license": "Apache-2.0",
-  "files": [
-    "config.js",
-    "lib",
-    "renderer"
-  ],
   "dependencies": {
     "react-reconciler": "^0.29.0"
   },
@@ -42,7 +37,8 @@
     "import-meta-resolve": "^3.0.0",
     "jsdom": "^22.0.0",
     "mustache": "^4.2.0",
-    "ol": "^7.5.1",
+    "ol": "^8.1.0",
+    "ol-mapbox-style": "^12.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

site/src/components/examples/Vector.jsx

@@ -7,7 +7,7 @@ import View from '../../../../lib/View.js';
 
 const format = new GeoJSON();
 
-function Basic() {
+function Vector() {
   const [urbanColor, setUrbanColor] = useState('gray');
 
   return (
@@ -47,4 +47,4 @@ function Basic() {
   );
 }
 
-export default Basic;
+export default Vector;

site/src/pages/examples/[slug].astro

@@ -38,7 +38,7 @@ const rawSource = await fs.readFile(
 );
 
 const source = await highlight(
-  rawSource.replaceAll('../../../../lib/', '@planet/maps/lib/')
+  rawSource.replaceAll('../../../../lib/', '@planet/maps/')
 );
 
 const {Content} = await example.render();

site/src/pages/index.astro

@@ -3,11 +3,11 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 import {highlight} from '../util/highlight.js';
 
 const source = await highlight(`
-import Map from '@planet/maps/lib/Map';
-import OSM from '@planet/maps/lib/source/OSM';
-import ScaleLine from '@planet/maps/lib/control/ScaleLine';
-import View from '@planet/maps/lib/View';
-import TileLayer from '@planet/maps/lib/layer/WebGLTile';
+import Map from '@planet/maps/Map';
+import OSM from '@planet/maps/source/OSM';
+import ScaleLine from '@planet/maps/control/ScaleLine';
+import View from '@planet/maps/View';
+import TileLayer from '@planet/maps/layer/WebGLTile';
 
 function MyApp() {
   return (
@@ -70,6 +70,13 @@ function MyApp() {
         updating the <code>center</code> prop of a <code>&lt;View&gt;</code> component
         will call <code>setCenter</code> on the underlying view.
       </li>
+      <li>
+        🎁 As a convenience, the <code>@planet/maps/layer/MapboxVector</code> module
+        exports a component for constructing a <code>MapboxVectorLayer</code> from the
+        <a href="https://github.com/openlayers/ol-mapbox-style"><code>ol-mapbox-style</code> library</a>.
+        If you use this component, run <code>npm install ol-mapbox-style</code> to add
+        the dependency to your project.
+      </li>
     </ul>
   </section>
   <section>

templates/layer.js.mustache

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {{importName}} from '{{importPath}}';
+import {{importSpecifier}} from '{{importPath}}';
 import {createElement, forwardRef} from 'react';
 import propTypes from 'prop-types';
 

tools/clean.js

@@ -1,5 +1,5 @@
 import fs from 'fs-extra';
-import {directories} from '../config.js';
+import {directories} from '../lib/internal/config.js';
 import {dirname, join} from 'node:path';
 import {fileURLToPath} from 'node:url';
 

tools/generate.js

@@ -1,7 +1,7 @@
 import Mustache from 'mustache';
 import fs from 'fs-extra';
 import {ESLint} from 'eslint';
-import {directories, ignore} from '../config.js';
+import {LAYER, directories, ignore} from '../lib/internal/config.js';
 import {dirname, join} from 'node:path';
 import {fileURLToPath} from 'node:url';
 import {resolve} from 'import-meta-resolve';
@@ -28,18 +28,40 @@ async function main() {
       String(await fs.readFile(join(templatesDir, `${type}.js.mustache`)));
 
     const names = await getNames(join(olDir, directories[type]));
+
+    const details = [];
     for (const name of names) {
       const commonPath = join(directories[type], name);
       if (ignore.includes(commonPath)) {
         continue;
       }
+
+      const importName = `OL${name.replace('.js', '')}`;
       const context = {
-        importName: `OL${name.replace('.js', '')}`,
+        importSpecifier: importName,
+        importName,
         importPath: `ol/${commonPath}`,
         elementType: type,
         constructorName: name.replace('.js', ''),
       };
+      details.push({commonPath, context});
+    }
+
+    // special case for ol-mapbox-style
+    if (type === LAYER) {
+      details.push({
+        commonPath: 'layer/MapboxVector.js',
+        context: {
+          importSpecifier: '{MapboxVectorLayer as OLMBVectorLayer}',
+          importName: 'OLMBVectorLayer',
+          importPath: 'ol-mapbox-style',
+          elementType: type,
+          constructorName: 'MapboxVector',
+        },
+      });
+    }
 
+    for (const {commonPath, context} of details) {
       let output = Mustache.render(templateData, context);
       const outputPath = join(libDir, commonPath);
       const results = await eslint.lintText(output, {filePath: outputPath});