Switch to ESM module (#2281)

visgl · Sep 12, 2023 · ed70d8e · ed70d8e
1 parent 45c3615
commit ed70d8e
Show file tree

Hide file tree

Showing 16 changed files with 57 additions and 78 deletions.
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
diff --git 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 → babel.config.cjs b/babel.config.js → babel.config.cjs
diff --git 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
@@ -14,19 +14,32 @@
     "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",
     "maplibre",
     "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
@@ -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
@@ -1,7 +1,7 @@
-const {JSDOM} = require('jsdom');
+import {JSDOM} from 'jsdom';
 
 const dom = new JSDOM(`<!DOCTYPE html><div id="map"></div>`);
 /* 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
@@ -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 (
       <Map
         ref={mapRef}
@@ -135,7 +132,7 @@ test('Map#controlled#mirrow-back', async t => {
           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 (
       <Map
         ref={mapRef}
@@ -173,7 +167,7 @@ test('Map#controlled#delayed-update', async t => {
           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
@@ -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
@@ -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
@@ -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 <div>{element}</div>;
+}
diff --git 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 <div>{content}</div>;
-  };
-  return () => {
-    reactDom.createPortal = createPortal;
-  };
-}
diff --git a/tsconfig.esm.json → tsconfig.build.json b/tsconfig.esm.json → 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
diff --git 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
@@ -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==
 
-[email protected].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==
+[email protected].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"