fix(build): share one ESM module graph across the root, /server and /3d entries

jest.bundle.config.js

@@ -0,0 +1,17 @@
+const path = require('path');
+
+module.exports = {
+  roots: ['<rootDir>/tests/bundle'],
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '^@vis.gl/react-google-maps/3d$': '<rootDir>/dist/3d/index.modern.mjs',
+    '^@vis.gl/react-google-maps/server$': '<rootDir>/dist/server/index.modern.mjs',
+    '^@vis.gl/react-google-maps$': '<rootDir>/dist/index.modern.mjs'
+  },
+  transform: {
+    '^.+.tsx?$': [
+      'ts-jest',
+      {tsconfig: path.join(__dirname, 'tsconfig.test.json')}
+    ]
+  }
+};

jest.config.js

@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = {
   roots: ['<rootDir>'],
   testEnvironment: 'jsdom',
-  testPathIgnorePatterns: ['/node_modules/', '/dist/', '/__utils__/'],
+  testPathIgnorePatterns: ['/node_modules/', '/dist/', '/__utils__/', '/tests/'],
   transform: {
     '^.+.tsx?$': [
       'ts-jest',

package.json

@@ -12,23 +12,27 @@
   "module": "dist/index.modern.mjs",
   "exports": {
     ".": {
-      "require": "./dist/index.umd.js",
       "types": "./dist/index.d.ts",
+      "require": "./dist/index.umd.js",
       "default": "./dist/index.modern.mjs"
     },
     "./server": {
-      "require": "./dist/server/index.umd.js",
       "types": "./dist/server/index.d.ts",
+      "require": "./dist/server/index.umd.js",
       "default": "./dist/server/index.modern.mjs"
     },
     "./3d": {
-      "require": "./dist/3d/index.umd.js",
       "types": "./dist/3d/index.d.ts",
+      "require": "./dist/3d/index.umd.js",
       "default": "./dist/3d/index.modern.mjs"
     },
     "./examples.css": "./dist/examples.css"
   },
   "types": "dist/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "./dist/examples.css"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/visgl/react-google-maps.git"
@@ -52,7 +56,9 @@
     "test:tsc:examples": "bash ./scripts/typecheck-examples.sh",
     "test:prettier": "prettier --check ./src ./examples",
     "test:unit": "jest",
-    "test": "npm-run-all -p test:linter test:prettier test:tsc -s test:unit",
+    "test:bundle": "npm run build && NODE_OPTIONS=--experimental-vm-modules jest --config jest.bundle.config.js",
+    "lint:pub": "publint",
+    "test": "npm-run-all -p test:linter test:prettier test:tsc -s test:unit test:bundle lint:pub",
     "prepublishOnly": "npm run test && npm run build",
     "prepack": "npm-run-all clean build"
   },
@@ -84,8 +90,8 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.3",
     "@types/jest": "^30.0.0",
@@ -100,6 +106,7 @@
     "jest-environment-jsdom": "^30.4.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.9.6",
+    "publint": "^0.3.24",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "rollup": "^4.62.4",

rollup.config.mjs

@@ -26,46 +26,63 @@ const plugins = [
   })
 ];
 
-const createConfig = (input, outputBase) => [
-  // ESM and UMD builds
-  {
-    input,
-    output: [
-      {
-        file: `${outputBase}.modern.mjs`,
-        format: 'es',
-        sourcemap: true
-      },
-      {
-        file: `${outputBase}.umd.js`,
-        format: 'umd',
-        name: 'ReactGoogleMaps',
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-          'react/jsx-runtime': 'React',
-          'fast-deep-equal': 'fastDeepEqual'
-        },
-        sourcemap: true
-      }
-    ],
-    external,
-    plugins
+const entries = {
+  index: './src/index.ts',
+  'server/index': './src/server/index.ts',
+  '3d/index': './src/3d/index.ts'
+};
+
+// One ESM build for every entry, so the modules they share (the APIProvider
+// and map contexts above all) are emitted once as chunks and each entry
+// imports the same instance. Built one entry at a time, `/3d` and the root
+// each carried their own `APIProviderContext`, and a `Map3D` imported from
+// `/3d` could not see the `APIProvider` imported from the root.
+const esmConfig = {
+  input: entries,
+  output: {
+    dir: 'dist',
+    format: 'es',
+    entryFileNames: '[name].modern.mjs',
+    chunkFileNames: 'chunks/[name]-[hash].mjs',
+    sourcemap: true
   },
-  // TypeScript declarations
-  {
-    input,
-    output: {
-      file: `${outputBase}.d.ts`,
-      format: 'es'
+  external,
+  plugins
+};
+
+// UMD cannot code-split; each entry stays self-contained.
+const umdConfig = (input, outputBase) => ({
+  input,
+  output: {
+    file: `${outputBase}.umd.js`,
+    format: 'umd',
+    name: 'ReactGoogleMaps',
+    globals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      'react/jsx-runtime': 'React',
+      'fast-deep-equal': 'fastDeepEqual'
     },
-    external,
-    plugins: [dts()]
-  }
-];
+    sourcemap: true
+  },
+  external,
+  plugins
+});
+
+const dtsConfig = (input, outputBase) => ({
+  input,
+  output: {
+    file: `${outputBase}.d.ts`,
+    format: 'es'
+  },
+  external,
+  plugins: [dts()]
+});
 
 export default [
-  ...createConfig('./src/index.ts', './dist/index'),
-  ...createConfig('./src/server/index.ts', './dist/server/index'),
-  ...createConfig('./src/3d/index.ts', './dist/3d/index')
+  esmConfig,
+  ...Object.entries(entries).flatMap(([name, input]) => [
+    umdConfig(input, `./dist/${name}`),
+    dtsConfig(input, `./dist/${name}`)
+  ])
 ];

src/3d/index.ts

@@ -12,3 +12,4 @@ export type * from '../components/3d/types';
 export * from '../components/map-3d';
 export * from '../components/marker-3d';
 export * from '../components/popover';
+export * from '../hooks/use-map-3d';

src/deprecated-3d-exports.ts

@@ -27,6 +27,7 @@ import type {
 } from './components/marker-3d';
 import {Popover as PopoverImpl} from './components/popover';
 import type {PopoverProps as PopoverPropsImpl} from './components/popover';
+import {useMap3D as useMap3DImpl} from './hooks/use-map-3d';
 
 /**
  * @deprecated Import from `@vis.gl/react-google-maps/3d` instead.
@@ -112,3 +113,7 @@ export const Popover = PopoverImpl;
  * @deprecated Import from `@vis.gl/react-google-maps/3d` instead.
  */
 export type PopoverProps = PopoverPropsImpl;
+/**
+ * @deprecated Import from `@vis.gl/react-google-maps/3d` instead.
+ */
+export const useMap3D = useMap3DImpl;

src/index.ts

@@ -21,7 +21,6 @@ export * from './hooks/use-api-loading-status';
 export * from './hooks/use-api-is-loaded';
 export * from './hooks/use-maps-library';
 export * from './hooks/use-map';
-export * from './hooks/use-map-3d';
 export * from './libraries/lat-lng-utils';
 export * from './libraries/api-loading-status';
 export {limitTiltRange} from './libraries/limit-tilt-range';

tests/bundle/bundle.test.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import {renderToString} from 'react-dom/server';
+
+import * as root from '@vis.gl/react-google-maps';
+import * as threeD from '@vis.gl/react-google-maps/3d';
+
+describe('Bundle Integration', () => {
+  test('shared contexts and components are identical instances across entrypoints', () => {
+    expect(root.GoogleMaps3DContext).toBe(threeD.GoogleMaps3DContext);
+    expect(root.Marker3DContext).toBe(threeD.Marker3DContext);
+    expect(root.Map3D).toBe(threeD.Map3D);
+    expect(root.Marker3D).toBe(threeD.Marker3D);
+    expect(root.Popover).toBe(threeD.Popover);
+    expect(root.useMap3D).toBe(threeD.useMap3D);
+  });
+
+  test('<Map3D> from /3d renders inside <APIProvider> from root without throwing', () => {
+    expect(() => {
+      renderToString(
+        React.createElement(
+          root.APIProvider,
+          {apiKey: 'test-api-key'},
+          React.createElement(threeD.Map3D, {mode: 'SATELLITE'})
+        )
+      );
+    }).not.toThrow();
+  });
+});

tsconfig.json

@@ -14,7 +14,8 @@
 
     "skipLibCheck": true,
     "paths": {
-      "@vis.gl/react-google-maps": ["./src"]
+      "@vis.gl/react-google-maps": ["./src"],
+      "@vis.gl/react-google-maps/*": ["./src/*"]
     }
   },
   "include": ["./src/**/*", "./types/**/*"],

tsconfig.test.json

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["./src/**/*", "./types/**/*"],
+  "include": ["./src/**/*", "./types/**/*", "./tests/**/*"],
   "exclude": ["./examples/**/*"],
   "compilerOptions": {
     "noEmit": false,