Skip to content

Commit ed70d8e

Browse files
Switch to ESM module (#2281)
1 parent 45c3615 commit ed70d8e

16 files changed

+57
-78
lines changed
File renamed without changes.

.ocularrc.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
1-
const {resolve} = require('path');
1+
import {resolve} from 'path';
22

3-
const config = {
3+
export default {
44
lint: {
55
paths: ['src', 'test', 'examples']
66
},
77

88
typescript: {
9-
project: 'tsconfig.json'
9+
project: 'tsconfig.build.json'
1010
},
1111

1212
aliases: {
1313
'react-map-gl/test': resolve('./test'),
1414
'react-map-gl': resolve('./src')
1515
},
16+
nodeAliases: {
17+
'react-dom': resolve('./test/src/utils/react-dom-mock.js')
18+
},
1619

1720
browserTest: {
1821
server: {wait: 5000}
@@ -24,5 +27,3 @@ const config = {
2427
size: ['test/size/all.js', 'test/size/map.js']
2528
}
2629
};
27-
28-
module.exports = config;
File renamed without changes.

maplibre/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"internal": true,
3-
"main": "../dist/es5/exports-maplibre.js",
4-
"module": "../dist/esm/exports-maplibre.js",
5-
"types": "../dist/esm/exports-maplibre.d.ts"
3+
"main": "../dist/exports-maplibre.cjs",
4+
"module": "../dist/exports-maplibre.js",
5+
"types": "../dist/exports-maplibre.d.ts"
66
}

package.json

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,32 @@
1414
"url": "https://github.com/visgl/react-map-gl.git"
1515
},
1616
"license": "MIT",
17-
"types": "dist/esm/index.d.ts",
18-
"main": "dist/es5/index.js",
19-
"module": "dist/esm/index.js",
17+
"type": "module",
18+
"types": "dist/index.d.ts",
19+
"main": "dist/index.cjs",
20+
"module": "dist/index.js",
21+
"exports": {
22+
".": {
23+
"import": "./dist/index.js",
24+
"require": "./dist/index.cjs",
25+
"types": "./dist/index.d.ts"
26+
},
27+
"./maplibre": {
28+
"import": "./dist/exports-maplibre.js",
29+
"require": "./dist/exports-maplibre.cjs",
30+
"types": "./dist/exports-maplibre.d.ts"
31+
}
32+
},
2033
"files": [
2134
"src",
2235
"dist",
2336
"maplibre",
2437
"README.md"
2538
],
2639
"scripts": {
27-
"typecheck": "tsc -p tsconfig.esm.json --noEmit",
40+
"typecheck": "tsc -p tsconfig.build.json --noEmit",
2841
"bootstrap": "PUPPETEER_SKIP_DOWNLOAD=true yarn && ocular-bootstrap",
29-
"build": "ocular-clean && tsc -b tsconfig.esm.json && tsc -b tsconfig.es5.json",
42+
"build": "ocular-clean && ocular-build",
3043
"lint": "ocular-lint",
3144
"cover": "ocular-test cover",
3245
"publish-prod": "ocular-publish prod",
@@ -59,7 +72,7 @@
5972
"jsdom": "^16.5.0",
6073
"mapbox-gl": "^2.14.0",
6174
"maplibre-gl": "^2.4.0",
62-
"ocular-dev-tools": "2.0.0-alpha.13",
75+
"ocular-dev-tools": "2.0.0-alpha.15",
6376
"pre-commit": "^1.2.2",
6477
"react": "^18.0.0",
6578
"react-dom": "^18.0.0",

src/types/style-spec-maplibre.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import type {
2020
RasterDEMSourceSpecification as RasterDemSource
2121
} from '@maplibre/maplibre-gl-style-spec';
2222

23-
import {CanvasSourceSpecification as CanvasSourceRaw} from 'maplibre-gl';
23+
import type {CanvasSourceSpecification as CanvasSourceRaw} from 'maplibre-gl';
2424

2525
// Layers
2626
export type {
@@ -47,7 +47,7 @@ export type AnyLayer =
4747
| SymbolLayer;
4848

4949
// Sources
50-
export {
50+
export type {
5151
GeoJSONSourceRaw,
5252
VideoSourceRaw,
5353
ImageSourceRaw,

test/node.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
const {JSDOM} = require('jsdom');
1+
import {JSDOM} from 'jsdom';
22

33
const dom = new JSDOM(`<!DOCTYPE html><div id="map"></div>`);
44
/* global global */
55
global.document = dom.window.document;
66

7-
require('./src');
7+
import './src';

test/src/components/map.spec.jsx

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -107,14 +107,13 @@ test('Map#controlled#no-update', async t => {
107107
});
108108
});
109109

110-
test('Map#controlled#mirrow-back', async t => {
111-
t.plan(5);
110+
test('Map#controlled#mirror-back', async t => {
111+
t.plan(6);
112112

113113
const mapRef = {current: null};
114-
let lastLat;
115-
function onRender(e) {
114+
function onRender(viewState) {
116115
const {lat} = mapRef.current.getCenter();
117-
t.is(lat, lastLat, `latitude should match state: ${lat}`);
116+
t.is(lat, viewState.latitude, `latitude should match state: ${lat}`);
118117
}
119118

120119
function App() {
@@ -124,8 +123,6 @@ test('Map#controlled#mirrow-back', async t => {
124123
zoom: 4
125124
});
126125

127-
lastLat = viewState.latitude;
128-
129126
return (
130127
<Map
131128
ref={mapRef}
@@ -135,7 +132,7 @@ test('Map#controlled#mirrow-back', async t => {
135132
e.target.easeTo({center: [-122, 38], zoom: 14});
136133
}}
137134
onMove={e => setViewState(e.viewState)}
138-
onRender={onRender}
135+
onRender={onRender.bind(null, viewState)}
139136
/>
140137
);
141138
}
@@ -146,13 +143,12 @@ test('Map#controlled#mirrow-back', async t => {
146143
});
147144

148145
test('Map#controlled#delayed-update', async t => {
149-
t.plan(6);
146+
t.plan(7);
150147

151148
const mapRef = {current: null};
152-
let lastLat;
153-
function onRender(e) {
149+
function onRender(viewState) {
154150
const {lat} = mapRef.current.getCenter();
155-
t.is(lat, lastLat, `latitude should match state: ${lat}`);
151+
t.is(lat, viewState.latitude, `latitude should match state: ${lat}`);
156152
}
157153

158154
function App() {
@@ -162,8 +158,6 @@ test('Map#controlled#delayed-update', async t => {
162158
zoom: 4
163159
});
164160

165-
lastLat = viewState.latitude;
166-
167161
return (
168162
<Map
169163
ref={mapRef}
@@ -173,7 +167,7 @@ test('Map#controlled#delayed-update', async t => {
173167
e.target.easeTo({center: [-122, 38], zoom: 14});
174168
}}
175169
onMove={e => setTimeout(() => setViewState(e.viewState))}
176-
onRender={onRender}
170+
onRender={onRender.bind(null, viewState)}
177171
/>
178172
);
179173
}

test/src/components/marker.spec.jsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ import * as React from 'react';
33
import {create, act} from 'react-test-renderer';
44
import test from 'tape-promise/tape';
55

6-
import {createPortalMock, waitForMapLoad} from '../utils/test-utils';
6+
import {waitForMapLoad} from '../utils/test-utils';
77
import mapboxMock from '../utils/mapbox-gl-mock';
88

99
test('Marker', async t => {
10-
const restoreMock = createPortalMock();
1110
const mapRef = {current: null};
1211

1312
let map;
@@ -93,7 +92,5 @@ test('Marker', async t => {
9392

9493
map.unmount();
9594

96-
restoreMock();
97-
9895
t.end();
9996
});

test/src/components/popup.spec.jsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ import * as React from 'react';
33
import {create, act} from 'react-test-renderer';
44
import test from 'tape-promise/tape';
55

6-
import {createPortalMock, waitForMapLoad} from '../utils/test-utils';
6+
import {waitForMapLoad} from '../utils/test-utils';
77
import mapboxMock from '../utils/mapbox-gl-mock';
88

99
test('Popup', async t => {
10-
const restoreMock = createPortalMock();
1110
const mapRef = {current: null};
1211

1312
let map;
@@ -72,7 +71,5 @@ test('Popup', async t => {
7271

7372
t.is(popup.options.className, 'classA', 'className is updated');
7473

75-
restoreMock();
76-
7774
t.end();
7875
});

test/src/utils/react-dom-mock.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// This file is used as a replacement of the react-dom module during node tests
2+
import * as React from 'react';
3+
4+
export function createPortal(element, container) {
5+
return <div>{element}</div>;
6+
}

test/src/utils/test-utils.jsx

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from 'react';
2-
31
/* global setTimeout */
42
export function sleep(milliseconds) {
53
return new Promise(resolve => setTimeout(resolve, milliseconds));
@@ -17,14 +15,3 @@ export function waitForMapLoad(mapRef) {
1715
check();
1816
});
1917
}
20-
21-
export function createPortalMock() {
22-
const reactDom = require('react-dom');
23-
const createPortal = reactDom.createPortal;
24-
reactDom.createPortal = function mockCreatePortal(content, container) {
25-
return <div>{content}</div>;
26-
};
27-
return () => {
28-
reactDom.createPortal = createPortal;
29-
};
30-
}

tsconfig.esm.json renamed to tsconfig.build.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"compilerOptions": {
3-
"target": "es2018",
3+
"target": "es2020",
44
"jsx": "react",
55
"moduleResolution": "node",
66
"allowSyntheticDefaultImports": true,
77
"module": "ES2020",
88
"declaration": true,
99
"sourceMap": true,
10-
"outDir": "./dist/esm"
10+
"outDir": "./dist"
1111
},
1212
"include":[
1313
"src/**/*"

tsconfig.es5.json

Lines changed: 0 additions & 16 deletions
This file was deleted.

tsconfig.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"compilerOptions": {
3-
"target": "es2018",
4-
"module": "commonjs",
3+
"target": "es2020",
4+
"module": "es2020",
55
"jsx": "react",
66
"allowJs": true,
77
"allowSyntheticDefaultImports": true,

yarn.lock

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7517,10 +7517,10 @@ octokit-pagination-methods@^1.1.0:
75177517
resolved "https://registry.yarnpkg.com/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz#cf472edc9d551055f9ef73f6e42b4dbb4c80bea4"
75187518
integrity sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==
75197519

7520-
7521-
version "2.0.0-alpha.13"
7522-
resolved "https://registry.yarnpkg.com/ocular-dev-tools/-/ocular-dev-tools-2.0.0-alpha.13.tgz#4fc64baf9111e97fc7712ed081523253674d413e"
7523-
integrity sha512-1uw/WjBU7o+2sX7sL8warF5Mzy3TG2VkIdn+q6vE4ixUNAS15QzWqanABWkTbyUi9TtdOYmQMTbGgyZl0YiNVw==
7520+
7521+
version "2.0.0-alpha.15"
7522+
resolved "https://registry.yarnpkg.com/ocular-dev-tools/-/ocular-dev-tools-2.0.0-alpha.15.tgz#50431fb004f5bcde35c3a1a77f15bdc1eb6e13ad"
7523+
integrity sha512-3+8CNM5D608PBXiEGM6FDFclPcMYtCBxNPPjUqrbwEJiEcmuv4dgl7xdkoZqAvOkIuQ4gPDdozS5o6ddxk8fqQ==
75247524
dependencies:
75257525
"@babel/cli" "^7.14.5"
75267526
"@babel/core" "^7.14.5"

0 commit comments

Comments
 (0)