From 5a3be9239f980a636108efaefe01bf05fa1095a9 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Thu, 26 Oct 2023 08:27:26 -0600 Subject: [PATCH] Package structure changes and dependency updates --- .github/workflows/publish.yml | 8 +++++--- lib/Map.js | 2 +- lib/Overlay.js | 2 +- lib/View.js | 2 +- config.js => lib/internal/config.js | 0 {renderer => lib/internal}/render.js | 2 +- {renderer => lib/internal}/update.js | 0 lib/layer/MapboxVector.js | 8 ++++++-- lib/source/{Stamen.js => StadiaMaps.js} | 8 ++++---- package-lock.json | 22 +++++++++++---------- package.json | 8 ++------ site/src/components/examples/Vector.jsx | 4 ++-- site/src/pages/examples/[slug].astro | 2 +- site/src/pages/index.astro | 17 +++++++++++----- templates/layer.js.mustache | 2 +- tools/clean.js | 2 +- tools/generate.js | 26 +++++++++++++++++++++++-- 17 files changed, 74 insertions(+), 41 deletions(-) rename config.js => lib/internal/config.js (100%) rename {renderer => lib/internal}/render.js (99%) rename {renderer => lib/internal}/update.js (100%) rename lib/source/{Stamen.js => StadiaMaps.js} (78%) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 82823bd..e54079d 100644 --- a/.github/workflows/publish.yml +++ b/.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}} \ No newline at end of file + NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} diff --git a/lib/Map.js b/lib/Map.js index 77efc35..9394f44 100644 --- a/lib/Map.js +++ b/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%', diff --git a/lib/Overlay.js b/lib/Overlay.js index 87b218d..9d23a65 100644 --- a/lib/Overlay.js +++ b/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) => { diff --git a/lib/View.js b/lib/View.js index 9f3cd8d..a65be5e 100644 --- a/lib/View.js +++ b/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) => { diff --git a/config.js b/lib/internal/config.js similarity index 100% rename from config.js rename to lib/internal/config.js diff --git a/renderer/render.js b/lib/internal/render.js similarity index 99% rename from renderer/render.js rename to lib/internal/render.js index bf33a2e..bb3644d 100644 --- a/renderer/render.js +++ b/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, diff --git a/renderer/update.js b/lib/internal/update.js similarity index 100% rename from renderer/update.js rename to lib/internal/update.js diff --git a/lib/layer/MapboxVector.js b/lib/layer/MapboxVector.js index 223bf72..31c4cd6 100644 --- a/lib/layer/MapboxVector.js +++ b/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 = { diff --git a/lib/source/Stamen.js b/lib/source/StadiaMaps.js similarity index 78% rename from lib/source/Stamen.js rename to lib/source/StadiaMaps.js index ba0db52..07d9e41 100644 --- a/lib/source/Stamen.js +++ b/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; diff --git a/package-lock.json b/package-lock.json index 170e238..c44f7a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,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", @@ -8475,14 +8476,13 @@ } }, "node_modules/ol": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/ol/-/ol-7.5.1.tgz", - "integrity": "sha512-CFXDhO8YdQt7I+zwrGYSONo/ZM2oLr7vUvxqpLEUyy+USaQjUeE8L6FBOWIPboopGVhnSVYd5hdEirn9ifKBZQ==", + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/ol/-/ol-8.1.0.tgz", + "integrity": "sha512-cx3SH2plpFS9fM8pp1nCypgQXGJD7Mcb1E3mEySmy5XEw1DUEo+kkNzgtAZz5qupekqi7aU9iBJEjCoMfqvO2Q==", "dev": true, "dependencies": { "earcut": "^2.2.3", "geotiff": "^2.0.7", - "ol-mapbox-style": "^10.1.0", "pbf": "3.2.1", "rbush": "^3.0.1" }, @@ -8492,14 +8492,16 @@ } }, "node_modules/ol-mapbox-style": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-10.6.0.tgz", - "integrity": "sha512-s86QhCoyyKVRsYkvPzzdWd///bhYh3onWrBq4lNXnCd9G/hS6AoK023kn4zlDESVlTBDTWLz8vhOistp0M3TXA==", + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-12.0.0.tgz", + "integrity": "sha512-rrIFh1BuXdMfl9XwKobpz7sKLAVchseowQlGdgN3WRbCnovSdTeC5RSw1lgnC334kY74y9CQ7cY2WOR5nbnpHg==", "dev": true, "dependencies": { "@mapbox/mapbox-gl-style-spec": "^13.23.1", - "mapbox-to-css-font": "^2.4.1", - "ol": "^7.3.0" + "mapbox-to-css-font": "^2.4.1" + }, + "peerDependencies": { + "ol": "8.x || 7.x" } }, "node_modules/once": { diff --git a/package.json b/package.json index ed38a97..762f73b 100644 --- a/package.json +++ b/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", diff --git a/site/src/components/examples/Vector.jsx b/site/src/components/examples/Vector.jsx index 05374a5..fe987e6 100644 --- a/site/src/components/examples/Vector.jsx +++ b/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; diff --git a/site/src/pages/examples/[slug].astro b/site/src/pages/examples/[slug].astro index cfaca45..5801130 100644 --- a/site/src/pages/examples/[slug].astro +++ b/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(); diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro index faab596..3120a87 100644 --- a/site/src/pages/index.astro +++ b/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 center prop of a <View> component will call setCenter on the underlying view. +
  • + 🎁 As a convenience, the @planet/maps/layer/MapboxVector module + exports a component for constructing a MapboxVectorLayer from the + ol-mapbox-style library. + If you use this component, run npm install ol-mapbox-style to add + the dependency to your project. +
    • diff --git a/templates/layer.js.mustache b/templates/layer.js.mustache index 0c8bcea..eec8cb9 100644 --- a/templates/layer.js.mustache +++ b/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'; diff --git a/tools/clean.js b/tools/clean.js index a5e60c0..e591a2d 100644 --- a/tools/clean.js +++ b/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'; diff --git a/tools/generate.js b/tools/generate.js index e591442..5820a07 100644 --- a/tools/generate.js +++ b/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});