Skip to content

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

Open
rpinckne wants to merge 1 commit into
visgl:mainfrom
rpinckne:fix/shared-esm-chunks
Open

rpinckne wants to merge 1 commit into
visgl:mainfrom
rpinckne:fix/shared-esm-chunks

Conversation

@rpinckne

Copy link
Copy Markdown

Problem

rollup.config.mjs builds each entry on its own, so dist/3d/index.modern.mjs carries its own copy of every module it shares with the root, React contexts included. A Map3D imported from @vis.gl/react-google-maps/3d therefore reads a different APIProviderContext than the APIProvider imported from @vis.gl/react-google-maps, and throws:

<Map3D> can only be used inside an <APIProvider> component.

That pairing is exactly what the 1.10.0 deprecation notices and examples/map-3d point people at (the example imports APIProvider from the root and Map3D from /3d). The root Pin likewise cannot see a /3d Marker3D, because it reads the root Marker3DContext.

Reproduction against the published 1.10.0 package:

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'

root.GoogleMaps3DContext === threeD.GoogleMaps3DContext // false
renderToString(React.createElement(root.APIProvider, { apiKey: 'x' },
  React.createElement(threeD.Map3D, { mode: 'SATELLITE' }))) // throws

Change

The ESM output becomes one code-split build over all three entries (index, server/index, 3d/index): shared modules are emitted once under dist/chunks/ and every entry imports the same instance. UMD cannot code-split, so those builds stay self-contained, and the per-entry .d.ts builds are unchanged. package.json#files already whitelists dist, so the chunks ship.

Built layout:

dist/index.modern.mjs          → ./chunks/popover-*.mjs, ./chunks/static-map-*.mjs
dist/3d/index.modern.mjs       → ../chunks/popover-*.mjs
dist/server/index.modern.mjs   → ../chunks/static-map-*.mjs
dist/{index,3d/index,server/index}.{umd.js,d.ts}   (as before)

Verification

Same script as above against the build from this branch: GoogleMaps3DContext, Marker3DContext, Map3D, Marker3D, and Popover are identical objects across the two entries, and the root APIProvider + /3d Map3D render. npm test passes (23 suites), npm run build produces the layout above.

An app that imports both entries now also loads the shared code once instead of twice.

…3d entries

Each entry was bundled on its own, so `dist/3d/index.modern.mjs` carried its own copy of every shared module, contexts included. A `Map3D` imported from `/3d` therefore read a different `APIProviderContext` than the `APIProvider` imported from the root and threw "<Map3D> can only be used inside an <APIProvider> component", which is exactly the pairing the map-3d example and the deprecation notices point people at. The root `Pin` likewise could not see a `/3d` `Marker3D`.

The ESM output is now one code-split build over all three entries: shared modules land once under `dist/chunks/` and every entry imports the same instance. UMD cannot code-split, so those builds and the per-entry .d.ts files are unchanged.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant