From ed70d8e6b28807ce462aedc2871ceb9d273bf086 Mon Sep 17 00:00:00 2001 From: Xiaoji Chen Date: Tue, 12 Sep 2023 10:30:27 -0700 Subject: [PATCH] Switch to ESM module (#2281) --- .eslintrc.js => .eslintrc.cjs | 0 .ocularrc.js | 11 ++++++----- babel.config.js => babel.config.cjs | 0 maplibre/package.json | 6 +++--- package.json | 25 ++++++++++++++++++------ src/types/style-spec-maplibre.ts | 4 ++-- test/node.js | 4 ++-- test/src/components/map.spec.jsx | 24 +++++++++-------------- test/src/components/marker.spec.jsx | 5 +---- test/src/components/popup.spec.jsx | 5 +---- test/src/utils/react-dom-mock.js | 6 ++++++ test/src/utils/test-utils.jsx | 13 ------------ tsconfig.esm.json => tsconfig.build.json | 4 ++-- tsconfig.es5.json | 16 --------------- tsconfig.json | 4 ++-- yarn.lock | 8 ++++---- 16 files changed, 57 insertions(+), 78 deletions(-) rename .eslintrc.js => .eslintrc.cjs (100%) rename babel.config.js => babel.config.cjs (100%) create mode 100644 test/src/utils/react-dom-mock.js rename tsconfig.esm.json => tsconfig.build.json (81%) delete mode 100644 tsconfig.es5.json diff --git a/.eslintrc.js b/.eslintrc.cjs similarity index 100% rename from .eslintrc.js rename to .eslintrc.cjs diff --git a/.ocularrc.js b/.ocularrc.js index 06755746d..4d36f2eb0 100644 --- a/.ocularrc.js +++ b/.ocularrc.js @@ -1,18 +1,21 @@ -const {resolve} = require('path'); +import {resolve} from 'path'; -const config = { +export default { lint: { paths: ['src', 'test', 'examples'] }, typescript: { - project: 'tsconfig.json' + project: 'tsconfig.build.json' }, aliases: { 'react-map-gl/test': resolve('./test'), 'react-map-gl': resolve('./src') }, + nodeAliases: { + 'react-dom': resolve('./test/src/utils/react-dom-mock.js') + }, browserTest: { server: {wait: 5000} @@ -24,5 +27,3 @@ const config = { size: ['test/size/all.js', 'test/size/map.js'] } }; - -module.exports = config; diff --git a/babel.config.js b/babel.config.cjs similarity index 100% rename from babel.config.js rename to babel.config.cjs diff --git a/maplibre/package.json b/maplibre/package.json index b795f1671..c72d79df3 100644 --- a/maplibre/package.json +++ b/maplibre/package.json @@ -1,6 +1,6 @@ { "internal": true, - "main": "../dist/es5/exports-maplibre.js", - "module": "../dist/esm/exports-maplibre.js", - "types": "../dist/esm/exports-maplibre.d.ts" + "main": "../dist/exports-maplibre.cjs", + "module": "../dist/exports-maplibre.js", + "types": "../dist/exports-maplibre.d.ts" } diff --git a/package.json b/package.json index 2332b94df..9ff696d49 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,22 @@ "url": "https://github.com/visgl/react-map-gl.git" }, "license": "MIT", - "types": "dist/esm/index.d.ts", - "main": "dist/es5/index.js", - "module": "dist/esm/index.js", + "type": "module", + "types": "dist/index.d.ts", + "main": "dist/index.cjs", + "module": "dist/index.js", + "exports": { + ".": { + "import": "./dist/index.js", + "require": "./dist/index.cjs", + "types": "./dist/index.d.ts" + }, + "./maplibre": { + "import": "./dist/exports-maplibre.js", + "require": "./dist/exports-maplibre.cjs", + "types": "./dist/exports-maplibre.d.ts" + } + }, "files": [ "src", "dist", @@ -24,9 +37,9 @@ "README.md" ], "scripts": { - "typecheck": "tsc -p tsconfig.esm.json --noEmit", + "typecheck": "tsc -p tsconfig.build.json --noEmit", "bootstrap": "PUPPETEER_SKIP_DOWNLOAD=true yarn && ocular-bootstrap", - "build": "ocular-clean && tsc -b tsconfig.esm.json && tsc -b tsconfig.es5.json", + "build": "ocular-clean && ocular-build", "lint": "ocular-lint", "cover": "ocular-test cover", "publish-prod": "ocular-publish prod", @@ -59,7 +72,7 @@ "jsdom": "^16.5.0", "mapbox-gl": "^2.14.0", "maplibre-gl": "^2.4.0", - "ocular-dev-tools": "2.0.0-alpha.13", + "ocular-dev-tools": "2.0.0-alpha.15", "pre-commit": "^1.2.2", "react": "^18.0.0", "react-dom": "^18.0.0", diff --git a/src/types/style-spec-maplibre.ts b/src/types/style-spec-maplibre.ts index 672eb8e32..31d0fec1e 100644 --- a/src/types/style-spec-maplibre.ts +++ b/src/types/style-spec-maplibre.ts @@ -20,7 +20,7 @@ import type { RasterDEMSourceSpecification as RasterDemSource } from '@maplibre/maplibre-gl-style-spec'; -import {CanvasSourceSpecification as CanvasSourceRaw} from 'maplibre-gl'; +import type {CanvasSourceSpecification as CanvasSourceRaw} from 'maplibre-gl'; // Layers export type { @@ -47,7 +47,7 @@ export type AnyLayer = | SymbolLayer; // Sources -export { +export type { GeoJSONSourceRaw, VideoSourceRaw, ImageSourceRaw, diff --git a/test/node.js b/test/node.js index 9b8157549..ed67e839a 100644 --- a/test/node.js +++ b/test/node.js @@ -1,7 +1,7 @@ -const {JSDOM} = require('jsdom'); +import {JSDOM} from 'jsdom'; const dom = new JSDOM(`
`); /* global global */ global.document = dom.window.document; -require('./src'); +import './src'; diff --git a/test/src/components/map.spec.jsx b/test/src/components/map.spec.jsx index 3b5037e77..4ecb772d2 100644 --- a/test/src/components/map.spec.jsx +++ b/test/src/components/map.spec.jsx @@ -107,14 +107,13 @@ test('Map#controlled#no-update', async t => { }); }); -test('Map#controlled#mirrow-back', async t => { - t.plan(5); +test('Map#controlled#mirror-back', async t => { + t.plan(6); const mapRef = {current: null}; - let lastLat; - function onRender(e) { + function onRender(viewState) { const {lat} = mapRef.current.getCenter(); - t.is(lat, lastLat, `latitude should match state: ${lat}`); + t.is(lat, viewState.latitude, `latitude should match state: ${lat}`); } function App() { @@ -124,8 +123,6 @@ test('Map#controlled#mirrow-back', async t => { zoom: 4 }); - lastLat = viewState.latitude; - return ( { e.target.easeTo({center: [-122, 38], zoom: 14}); }} onMove={e => setViewState(e.viewState)} - onRender={onRender} + onRender={onRender.bind(null, viewState)} /> ); } @@ -146,13 +143,12 @@ test('Map#controlled#mirrow-back', async t => { }); test('Map#controlled#delayed-update', async t => { - t.plan(6); + t.plan(7); const mapRef = {current: null}; - let lastLat; - function onRender(e) { + function onRender(viewState) { const {lat} = mapRef.current.getCenter(); - t.is(lat, lastLat, `latitude should match state: ${lat}`); + t.is(lat, viewState.latitude, `latitude should match state: ${lat}`); } function App() { @@ -162,8 +158,6 @@ test('Map#controlled#delayed-update', async t => { zoom: 4 }); - lastLat = viewState.latitude; - return ( { e.target.easeTo({center: [-122, 38], zoom: 14}); }} onMove={e => setTimeout(() => setViewState(e.viewState))} - onRender={onRender} + onRender={onRender.bind(null, viewState)} /> ); } diff --git a/test/src/components/marker.spec.jsx b/test/src/components/marker.spec.jsx index d4d516ef1..242c4bfdb 100644 --- a/test/src/components/marker.spec.jsx +++ b/test/src/components/marker.spec.jsx @@ -3,11 +3,10 @@ import * as React from 'react'; import {create, act} from 'react-test-renderer'; import test from 'tape-promise/tape'; -import {createPortalMock, waitForMapLoad} from '../utils/test-utils'; +import {waitForMapLoad} from '../utils/test-utils'; import mapboxMock from '../utils/mapbox-gl-mock'; test('Marker', async t => { - const restoreMock = createPortalMock(); const mapRef = {current: null}; let map; @@ -93,7 +92,5 @@ test('Marker', async t => { map.unmount(); - restoreMock(); - t.end(); }); diff --git a/test/src/components/popup.spec.jsx b/test/src/components/popup.spec.jsx index d57b6fd74..30b950fdc 100644 --- a/test/src/components/popup.spec.jsx +++ b/test/src/components/popup.spec.jsx @@ -3,11 +3,10 @@ import * as React from 'react'; import {create, act} from 'react-test-renderer'; import test from 'tape-promise/tape'; -import {createPortalMock, waitForMapLoad} from '../utils/test-utils'; +import {waitForMapLoad} from '../utils/test-utils'; import mapboxMock from '../utils/mapbox-gl-mock'; test('Popup', async t => { - const restoreMock = createPortalMock(); const mapRef = {current: null}; let map; @@ -72,7 +71,5 @@ test('Popup', async t => { t.is(popup.options.className, 'classA', 'className is updated'); - restoreMock(); - t.end(); }); diff --git a/test/src/utils/react-dom-mock.js b/test/src/utils/react-dom-mock.js new file mode 100644 index 000000000..c79381bc9 --- /dev/null +++ b/test/src/utils/react-dom-mock.js @@ -0,0 +1,6 @@ +// This file is used as a replacement of the react-dom module during node tests +import * as React from 'react'; + +export function createPortal(element, container) { + return
{element}
; +} diff --git a/test/src/utils/test-utils.jsx b/test/src/utils/test-utils.jsx index 954e7df1d..18f14a587 100644 --- a/test/src/utils/test-utils.jsx +++ b/test/src/utils/test-utils.jsx @@ -1,5 +1,3 @@ -import * as React from 'react'; - /* global setTimeout */ export function sleep(milliseconds) { return new Promise(resolve => setTimeout(resolve, milliseconds)); @@ -17,14 +15,3 @@ export function waitForMapLoad(mapRef) { check(); }); } - -export function createPortalMock() { - const reactDom = require('react-dom'); - const createPortal = reactDom.createPortal; - reactDom.createPortal = function mockCreatePortal(content, container) { - return
{content}
; - }; - return () => { - reactDom.createPortal = createPortal; - }; -} diff --git a/tsconfig.esm.json b/tsconfig.build.json similarity index 81% rename from tsconfig.esm.json rename to tsconfig.build.json index cdf82f263..0920b2f84 100644 --- a/tsconfig.esm.json +++ b/tsconfig.build.json @@ -1,13 +1,13 @@ { "compilerOptions": { - "target": "es2018", + "target": "es2020", "jsx": "react", "moduleResolution": "node", "allowSyntheticDefaultImports": true, "module": "ES2020", "declaration": true, "sourceMap": true, - "outDir": "./dist/esm" + "outDir": "./dist" }, "include":[ "src/**/*" diff --git a/tsconfig.es5.json b/tsconfig.es5.json deleted file mode 100644 index f1bb3c0ca..000000000 --- a/tsconfig.es5.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "jsx": "react", - "moduleResolution": "node", - "allowSyntheticDefaultImports": true, - "module": "commonjs", - "downlevelIteration": true, - "declaration": true, - "sourceMap": true, - "outDir": "./dist/es5" - }, - "include": [ - "src/**/*" - ] -} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 562eee236..dd1d8b07f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { - "target": "es2018", - "module": "commonjs", + "target": "es2020", + "module": "es2020", "jsx": "react", "allowJs": true, "allowSyntheticDefaultImports": true, diff --git a/yarn.lock b/yarn.lock index 401d24af3..f7dcac95a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7517,10 +7517,10 @@ octokit-pagination-methods@^1.1.0: resolved "https://registry.yarnpkg.com/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz#cf472edc9d551055f9ef73f6e42b4dbb4c80bea4" integrity sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ== -ocular-dev-tools@2.0.0-alpha.13: - version "2.0.0-alpha.13" - resolved "https://registry.yarnpkg.com/ocular-dev-tools/-/ocular-dev-tools-2.0.0-alpha.13.tgz#4fc64baf9111e97fc7712ed081523253674d413e" - integrity sha512-1uw/WjBU7o+2sX7sL8warF5Mzy3TG2VkIdn+q6vE4ixUNAS15QzWqanABWkTbyUi9TtdOYmQMTbGgyZl0YiNVw== +ocular-dev-tools@2.0.0-alpha.15: + version "2.0.0-alpha.15" + resolved "https://registry.yarnpkg.com/ocular-dev-tools/-/ocular-dev-tools-2.0.0-alpha.15.tgz#50431fb004f5bcde35c3a1a77f15bdc1eb6e13ad" + integrity sha512-3+8CNM5D608PBXiEGM6FDFclPcMYtCBxNPPjUqrbwEJiEcmuv4dgl7xdkoZqAvOkIuQ4gPDdozS5o6ddxk8fqQ== dependencies: "@babel/cli" "^7.14.5" "@babel/core" "^7.14.5"