Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch to ESM module #2281

Merged
merged 4 commits into from
Sep 12, 2023
Merged

Switch to ESM module #2281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d409d31
wip
Pessimistress Sep 11, 2023
451b4fc
bump dev tools
Pessimistress Sep 11, 2023
fc05216
Fix tests
Pessimistress Sep 12, 2023
1011464
Add comments
Pessimistress Sep 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 .eslintrc.js → .eslintrc.cjs
View file
Open in desktop
File renamed without changes.
11 changes: 6 additions & 5 deletions .ocularrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
Expand All @@ -24,5 +27,3 @@ const config = {
size: ['test/size/all.js', 'test/size/map.js']
}
};

module.exports = config;
0 babel.config.js → babel.config.cjs
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions maplibre/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
25 changes: 19 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/types/style-spec-maplibre.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -47,7 +47,7 @@ export type AnyLayer =
| SymbolLayer;

// Sources
export {
export type {
GeoJSONSourceRaw,
VideoSourceRaw,
ImageSourceRaw,
Expand Down
4 changes: 2 additions & 2 deletions test/node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
24 changes: 9 additions & 15 deletions test/src/components/map.spec.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Pessimistress marked this conversation as resolved.
Show resolved Hide resolved
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() {
Expand All @@ -124,8 +123,6 @@ test('Map#controlled#mirrow-back', async t => {
zoom: 4
});

lastLat = viewState.latitude;

return (
<Map
ref={mapRef}
Expand All @@ -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)}
/>
);
}
Expand All @@ -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() {
Expand All @@ -162,8 +158,6 @@ test('Map#controlled#delayed-update', async t => {
zoom: 4
});

lastLat = viewState.latitude;

return (
<Map
ref={mapRef}
Expand All @@ -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)}
/>
);
}
Expand Down
5 changes: 1 addition & 4 deletions test/src/components/marker.spec.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -93,7 +92,5 @@ test('Marker', async t => {

map.unmount();

restoreMock();

t.end();
});
5 changes: 1 addition & 4 deletions test/src/components/popup.spec.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -72,7 +71,5 @@ test('Popup', async t => {

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

restoreMock();

t.end();
});
6 changes: 6 additions & 0 deletions test/src/utils/react-dom-mock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hoping to learn what this does. Where is this used now? I only see the usage getting deleted.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is used as an alias for react-dom during node tests, configured in ocularrc. Before we were hijacking the function with require('react-dom').createPortal = createPortalMock, but that no longer works in the ESM (import/export) world.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, ok got it. Could you comment that it's aliased in ocularrc?

return <div>{element}</div>;
}
13 changes: 0 additions & 13 deletions test/src/utils/test-utils.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import * as React from 'react';

/* global setTimeout */
export function sleep(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
Expand All @@ -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;
};
}
4 changes: 2 additions & 2 deletions tsconfig.esm.json → tsconfig.build.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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/**/*"
Expand Down
16 changes: 0 additions & 16 deletions tsconfig.es5.json
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"compilerOptions": {
"target": "es2018",
"module": "commonjs",
"target": "es2020",
"module": "es2020",
"jsx": "react",
"allowJs": true,
"allowSyntheticDefaultImports": true,
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down