[v8] migrate to monorepo

Author: Pessimistress

Diff for: .eslintignore

@@ -1,5 +1,6 @@
 dist/
 node_modules/
-test/src/utils/mapbox-gl-mock/*.js
+test/
+modules/**/test/
 **/vite.config.js
 examples/vite.config.local.js

Diff for: .eslintrc.cjs

@@ -1,4 +1,4 @@
-const {getESLintConfig} = require('ocular-dev-tools/configuration');
+const {getESLintConfig} = require('@vis.gl/dev-tools/configuration');
 
 module.exports = getESLintConfig({
   react: '16.8.2',
@@ -25,12 +25,14 @@ module.exports = getESLintConfig({
           '@typescript-eslint/no-unsafe-member-access': 0,
           '@typescript-eslint/no-unsafe-assignment': 0,
           'import/named': 0,
-          '@typescript-eslint/no-empty-function': ['warn', {allow: ['arrowFunctions']}],
-          '@typescript-eslint/restrict-template-expressions': 0,
           '@typescript-eslint/explicit-module-boundary-types': 0,
           '@typescript-eslint/no-unsafe-return': 0,
           '@typescript-eslint/no-unsafe-call': 0,
-          '@typescript-eslint/restrict-plus-operands': 0
+          '@typescript-eslint/restrict-plus-operands': 0,
+          '@typescript-eslint/no-explicit-any': 0,
+          '@typescript-eslint/no-unsafe-argument': 0,
+          '@typescript-eslint/no-shadow': 1,
+          '@typescript-eslint/no-redundant-type-constituents': 1
         }
       }
     ]

Diff for: .github/workflows/release.yml

@@ -6,31 +6,58 @@ on:
       - v*
 
 jobs:
-  release-notes:
-    runs-on: ubuntu-22.04
+  check_branch:
+    runs-on: ubuntu-latest
+    outputs:
+      should_build: ${{ steps.permitted.outputs.result }}
 
-    if: github.repository_owner == 'visgl'
+    steps:
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+
+      - name: Fetch remote branches
+        run: |
+          git fetch origin --depth=1
 
+      - name: Check if on permitted branch
+        id: permitted
+        run: |
+          result=
+          if git branch -a --contains $GITHUB_SHA | grep -q 'remotes/origin/master$'; then
+            result=true
+          elif git branch -a --contains $GITHUB_SHA | grep -q 'remotes/origin/.*-release$'; then
+            result=true
+          fi
+          echo "result=${result}" >> "$GITHUB_OUTPUT"
+
+  release:
+    runs-on: ubuntu-latest
+    needs: check_branch
     permissions:
       contents: write
 
+    if: ${{ github.repository_owner == 'visgl' && needs.check_branch.outputs.should_build }}
+
     env:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
 
     steps:
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
-
-      - name: Use Node.js
-        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
+      - uses: volta-cli/action@2d68418f32546fd191eb666e232b321d5726484d # v4.1.1
         with:
-          node-version: '18.x'
+          cache: 'yarn'
 
-      - name: Publish release
-        run: |
-          body=$(node scripts/github-release.js) &&
-          curl \
-            -X POST \
-            -H "Accept: application/vnd.github.v3+json" \
-            https://api.github.com/repos/visgl/react-map-gl/releases \
-            -d "${body}" \
-            -H "Authorization: token ${GITHUB_TOKEN}"
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build packages
+        run: npm run build
+      
+      - name: Run tests from transpiled code
+        run: npx ocular-test dist
+
+      - name: Login to NPM
+        run: npm config set "//registry.npmjs.org/:_authToken=${NPM_ACCESS_TOKEN}"
+
+      - name: Publish to NPM
+        run: npx ocular-publish from-git

Diff for: .github/workflows/test.yml

@@ -13,11 +13,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
-
-      - name: Use Node.js
-        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
+      - uses: volta-cli/action@2d68418f32546fd191eb666e232b321d5726484d # v4.1.1
         with:
-          node-version: '18.x'
+          cache: "yarn"
 
       - name: Install dependencies
         run: |
@@ -27,6 +25,7 @@ jobs:
         env:
           VITE_MAPBOX_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN_CI }}
         run: |
+          yarn lint
           yarn test ci
 
       - name: Coveralls

Diff for: .gitignore

@@ -9,9 +9,11 @@ npm-debug.log
 package-lock.json
 examples/**/yarn.lock
 test/**/yarn.lock
-*/**/package-lock.json
+**/package-lock.json
+**/tsconfig.tsbuildinfo
 yarn-error.log
 .DS_Store
 .reify-cache
+tsconfig.tsbuildinfo
 
 .idea

Diff for: .ocularrc.js

@@ -1,20 +1,17 @@
+/** @typedef {import('@vis.gl/dev-tools').OcularConfig} OcularConfig */
 import {resolve} from 'path';
 
+/** @type {OcularConfig} */
 export default {
   lint: {
-    paths: ['src', 'test', 'examples']
+    paths: ['modules', 'test', 'examples']
   },
 
-  typescript: {
-    project: 'tsconfig.build.json'
+  coverage: {
+    test: 'browser'
   },
 
   aliases: {
-    'react-map-gl/test': resolve('./test'),
-    'react-map-gl': resolve('./src')
-  },
-  nodeAliases: {
-    'react-dom': resolve('./test/src/utils/react-dom-mock.js')
   },
 
   browserTest: {
@@ -24,6 +21,10 @@ export default {
   entry: {
     test: 'test/node.js',
     'test-browser': 'test/browser.js',
-    size: ['test/size/all.js', 'test/size/map.js']
+    size: [
+      'test/size/mapbox-legacy.js',
+      'test/size/maplibre.js',
+      'test/size/mapbox.js'
+    ]
   }
 };

Diff for: babel.config.cjs

@@ -3,9 +3,7 @@ import {createRoot} from 'react-dom/client';
 import {ArcLayer} from '@deck.gl/layers/typed';
 import {DeckProps, PickingInfo} from '@deck.gl/core/typed';
 import {MapboxOverlay} from '@deck.gl/mapbox/typed';
-import {useControl} from 'react-map-gl';
-
-import Map, {NavigationControl} from 'react-map-gl';
+import Map, {useControl, NavigationControl} from 'react-map-gl';
 
 const TOKEN = ''; // Set your mapbox token here
 

Diff for: examples/deckgl-overlay/src/app.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-function ControlPanel(props) {
+function ControlPanel() {
   return (
     <div className="control-panel">
       <h3>Geocoder</h3>

Diff for: examples/geocoder/src/control-panel.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-function ControlPanel(props) {
+function ControlPanel() {
   return (
     <div className="control-panel">
       <h3>3D Terrain</h3>

Diff for: examples/terrain/src/control-panel.tsx

@@ -0,0 +1,7 @@
+{
+  "version": "8.0.0-alpha.0",
+  "npmClient": "yarn",
+  "packages": [
+    "modules/*"
+  ]
+}

Diff for: lerna.json

@@ -0,0 +1,62 @@
+{
+  "name": "react-map-gl",
+  "description": "React components for MapLibre GL JS and Mapbox GL JS",
+  "version": "8.0.0-alpha.0",
+  "keywords": [
+    "mapbox",
+    "maplibre",
+    "mapbox-gl",
+    "maplibre-gl",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/visgl/react-map-gl.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    "./mapbox": {
+      "types": "./dist/mapbox.d.ts",
+      "require": "./dist/mapbox.cjs",
+      "import": "./dist/mapbox.js"
+    },
+    "./maplibre": {
+      "types": "./dist/maplibre.d.ts",
+      "require": "./dist/maplibre.cjs",
+      "import": "./dist/maplibre.js"
+    },
+    "./mapbox-legacy": {
+      "types": "./dist/mapbox-legacy/index.d.ts",
+      "require": "./dist/mapbox-legacy/index.cjs",
+      "import": "./dist/mapbox-legacy/index.js"
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@vis.gl/react-maplibre": "8.0.0-alpha.0",
+    "@vis.gl/react-mapbox": "8.0.0-alpha.0"
+  },
+  "devDependencies": {
+    "@types/mapbox-gl": "3.4.0",
+    "mapbox-gl": "1.13.0"
+  },
+  "peerDependencies": {
+    "mapbox-gl": ">=1.13.0",
+    "maplibre-gl": ">=1.13.0",
+    "react": ">=16.3.0",
+    "react-dom": ">=16.3.0"
+  },
+  "peerDependenciesMeta": {
+    "mapbox-gl": {
+      "optional": true
+    },
+    "maplibre-gl": {
+      "optional": true
+    }
+  }
+}

Diff for: maplibre/package.json

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import {useContext, useEffect, useMemo, useState, useRef} from 'react';
-import {cloneElement} from 'react';
+import {useContext, useEffect, useMemo, useState, useRef, cloneElement} from 'react';
 import {MapContext} from './map';
 import assert from '../utils/assert';
 import {deepEqual} from '../utils/deep-equal';
@@ -13,7 +12,7 @@ import type {
   ImageSourceImplemtation,
   AnySourceImplementation
 } from '../types';
-import type {GeoJSONSourceRaw, ImageSourceRaw, VectorSourceRaw} from '../types/style-spec-maplibre';
+import type {GeoJSONSourceRaw, ImageSourceRaw, VectorSourceRaw} from '../types/style-spec-mapbox';
 
 export type SourceProps<SourceT> = (SourceT | CustomSource) & {
   id?: string;

Diff for: modules/main/README.md

@@ -34,7 +34,7 @@ const skipMethods = [
 
 export type MapRef<MapT extends MapInstance> = {
   getMap(): MapT;
-} & Omit<MapT, typeof skipMethods[number]>;
+} & Omit<MapT, (typeof skipMethods)[number]>;
 
 export default function createRef<
   StyleT extends MapStyle,
@@ -46,7 +46,7 @@ export default function createRef<
   }
 
   const map = mapInstance.map as MapInstanceInternal<MapT>;
-  const result: any = {
+  const ref: any = {
     getMap: () => map,
 
     // Overwrite getters to use our shadow transform
@@ -89,12 +89,12 @@ export default function createRef<
 
   for (const key of getMethodNames(map)) {
     // @ts-expect-error
-    if (!(key in result) && !skipMethods.includes(key)) {
-      result[key] = map[key].bind(map);
+    if (!(key in ref) && !skipMethods.includes(key)) {
+      ref[key] = map[key].bind(map);
     }
   }
 
-  return result;
+  return ref;
 }
 
 function getMethodNames(obj: Object) {

Diff for: modules/main/package.json

@@ -624,7 +624,7 @@ export default class Mapbox<
     }
   }
 
-  _onPointerEvent = (e: MapMouseEvent<MapT> | MapMouseEvent<MapT>) => {
+  _onPointerEvent = (e: MapMouseEvent<MapT>) => {
     if (e.type === 'mousemove' || e.type === 'mouseout') {
       this._updateHover(e);
     }
@@ -727,12 +727,14 @@ function getAccessTokenFromEnv(): string {
 
   // Note: This depends on bundler plugins (e.g. webpack) importing environment correctly
   try {
+    // eslint-disable-next-line no-process-env
     accessToken = accessToken || process.env.MapboxAccessToken;
   } catch {
     // ignore
   }
 
   try {
+    // eslint-disable-next-line no-process-env
     accessToken = accessToken || process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;
   } catch {
     // ignore

Diff for: src/components/attribution-control.ts renamed to modules/main/src/mapbox-legacy/components/attribution-control.ts

@@ -0,0 +1 @@
+export * from '@vis.gl/react-mapbox';

Diff for: src/components/fullscreen-control.tsx renamed to modules/main/src/mapbox-legacy/components/fullscreen-control.tsx

@@ -0,0 +1 @@
+export * from '@vis.gl/react-maplibre';