Fix dynamic imports in UMD

GitOrigin-RevId: dacaeec1fe093b17fed150df7d80dcf11f51f70d

Author: mapbox-github-ci-writer-1[bot]

.github/workflows/ci.yml

@@ -51,8 +51,8 @@ jobs:
     - run: npm run test-build
     - run: xvfb-run -a npm run test-esm
     - run: xvfb-run -a npm run test-csp
-    - run: npm run build -w vite-build-test
-    - run: npm run build -w webpack-build-test
+    - run: xvfb-run -a npm test -w vite-build-test
+    - run: xvfb-run -a npm test -w webpack-build-test
     - run: npm run test -w typescript-build-test
     - run: npm run build -w @mapbox/mapbox-gl-pmtiles-provider
     - run: npm run size

eslint.config.js

@@ -66,8 +66,9 @@ const IGNORED_PATHS = [
     './test/integration/tiles/**/*',
     './test/integration/tilesets/**/*',
     './test/integration/lib/operation-handlers.js',
-    './test/build/vite/**/*',
-    './test/build/webpack/**/*',
+    './test/build/{vite,webpack}/**/*',
+    './test/build/scenarios/**/*',
+    './test/build/browser-check.cjs',
     './test/build/typings/**/*',
     './test/build/style-spec.test.js',
 ];

package-lock.json

@@ -27,7 +27,8 @@ function buildType(build: string, minified: string) {
 const outputFile = buildType(BUILD, MINIFY);
 
 const bundlePreludeSource = fs.readFileSync(fileURLToPath(new URL('./rollup/bundle_prelude.js', import.meta.url)), 'utf8');
-const bundlePrelude = production ? transformSync(bundlePreludeSource, {target: browserslistToEsbuild(), minify: true}).code : bundlePreludeSource;
+// Not minified: it would strip the import() ignore comments that stop downstream bundlers rewriting the worker's import().
+const bundlePrelude = production ? transformSync(bundlePreludeSource, {target: browserslistToEsbuild()}).code : bundlePreludeSource;
 
 function preserveDynamicImport(): Plugin {
     return {
@@ -38,7 +39,7 @@ function preserveDynamicImport(): Plugin {
             return false;
         },
         renderDynamicImport() {
-            return {left: 'import(', right: ')'};
+            return {left: 'self.__mapboxImport(', right: ')'};
         }
     };
 }

rollup.config.ts

@@ -20,6 +20,9 @@
 
 let shared, worker, mapboxgl;
 
+// Use `self` to avoid mangling by downstream minifier
+if (typeof self !== 'undefined') self.__mapboxImport = (u) => import(/* webpackIgnore: true */ /* @vite-ignore */ u);
+
 function define(_, chunk) {
     if (!shared) {
         shared = chunk;
@@ -33,6 +36,7 @@ function define(_, chunk) {
         const workerBundleString =
             "self.onerror = function() { console.error('An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling'); }; " +
             "var sharedChunk = {}; " +
+            "self.__mapboxImport = (u) => import(u); " +
             "(" + shared + ")(undefined, sharedChunk); " +
             "(" + worker + ")(undefined, sharedChunk); " +
             "self.onerror = null;";

rollup/bundle_prelude.js

@@ -0,0 +1,60 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const http = require('node:http');
+const path = require('node:path');
+const serveStatic = require('serve-static');
+const {chromium} = require('playwright');
+
+const TILES = path.join(__dirname, '..', 'integration', 'tiles');
+const PROVIDER_DIST = path.join(__dirname, '..', '..', 'plugins', 'mapbox-gl-pmtiles-provider', 'dist');
+
+function serve(root) {
+    const middlewares = [serveStatic(root), serveStatic(PROVIDER_DIST), serveStatic(TILES)];
+    return http.createServer((req, res) => {
+        const notFound = () => { res.writeHead(404); res.end(); };
+        const middleware = middlewares.reduceRight((next, serve) => () => serve(req, res, next), notFound);
+        middleware();
+    });
+}
+
+async function expectNoErrors(browser, port, file) {
+    const tab = await browser.newPage();
+    try {
+        const errors = [];
+        tab.on('pageerror', (e) => errors.push(e.message));
+        tab.on('console', (m) => { if (m.type() === 'error') errors.push(m.text()); });
+        await tab.goto(`http://localhost:${port}/${file}`);
+        const gotTiles = await tab.waitForResponse((r) => r.url().endsWith('.pmtiles'), {timeout: 8000}).then(() => true, () => false);
+        // A broken worker import surfaces just after the .pmtiles fetch; let it flush.
+        await tab.waitForTimeout(100);
+        assert.deepEqual(errors, []);
+        assert.ok(gotTiles, 'page produced no .pmtiles request within 8s');
+    } finally {
+        try { await tab.close(); } catch { /* a crashed tab must not mask the assertion */ }
+    }
+}
+
+function testPages({label, root, files}) {
+    let browser, server, port;
+    test.before(async () => {
+        server = serve(root);
+        await new Promise((resolve) => server.listen(0, resolve));
+        ({port} = server.address());
+        try {
+            // CI installs full chromium via `playwright install --no-shell`; match vitest.config.base.ts.
+            browser = await chromium.launch({channel: process.env.CI === 'true' ? 'chromium' : 'chrome'});
+        } catch (e) {
+            throw new Error(`Chromium failed to launch (is Playwright installed? in CI, run under xvfb): ${e.message}`);
+        }
+    });
+    test.after(async () => {
+        if (browser) await browser.close();
+        if (server) await new Promise((resolve) => server.close(resolve));
+    });
+    for (const file of files) {
+        const name = file.replace('.html', '');
+        test(`${label}-${name} build loads a PMTiles source without errors`, {timeout: 15000}, () => expectNoErrors(browser, port, file));
+    }
+}
+
+module.exports = {testPages};

test/build/browser-check.cjs

@@ -0,0 +1,13 @@
+import * as mapboxgl from 'mapbox-gl/esm';
+
+mapboxgl.addTileProvider('pmtiles', `${location.origin}/mapbox-gl-pmtiles-provider.js`);
+
+const map = new mapboxgl.Map({
+    container: 'map',
+    testMode: true,
+    style: {version: 8, sources: {}, layers: []}
+});
+
+map.on('load', () => {
+    map.addSource('pmtiles', {type: 'vector', url: `${location.origin}/vector.pmtiles`});
+});

test/build/scenarios/pmtiles-esm.js

@@ -0,0 +1,13 @@
+import mapboxgl from 'mapbox-gl';
+
+mapboxgl.addTileProvider('pmtiles', `${location.origin}/mapbox-gl-pmtiles-provider.js`);
+
+const map = new mapboxgl.Map({
+    container: 'map',
+    testMode: true,
+    style: {version: 8, sources: {}, layers: []}
+});
+
+map.on('load', () => {
+    map.addSource('pmtiles', {type: 'vector', url: `${location.origin}/vector.pmtiles`});
+});

test/build/scenarios/pmtiles-umd.js

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" href="data:," />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Mapbox GL JS (ESM)</title>
     <style>
@@ -11,6 +12,6 @@
   </head>
   <body>
     <div id="map"></div>
-    <script type="module" src="/esm.js"></script>
+    <script type="module" src="../scenarios/pmtiles-esm.js"></script>
   </body>
 </html>