set worker url explicit, add esm tests

Author: birkskyum

build/rollup/maplibregl.esm.js

@@ -30,7 +30,7 @@ const configs = [
     config('src/source/worker.ts', `dist/maplibre-gl-csp-worker${outputPostfix}.js`, 'iife'),
 
     // ESM builds for CSP
-    config('src/index_esm.ts', `dist/maplibre-gl-csp${outputPostfix}.mjs`, 'es'),
+    config('src/index.ts', `dist/maplibre-gl-csp${outputPostfix}.mjs`, 'es'),
     config('src/source/worker.ts', `dist/maplibre-gl-csp-worker${outputPostfix}.mjs`, 'es')
 ];
 

rollup.config.csp.ts

@@ -63,77 +63,39 @@ const config: RollupOptions[] = [{
         // only they get built, but not the merged dev build js
         ...production ? [] : [watchStagingPlugin]
     ],
-},
-// ESM build configuration
-{
-    // First pass for ESM: Split into ES modules
-    input: ['src/index_esm.ts', 'src/source/worker.ts'],
-    output: {
-        dir: 'staging/esm',
-        format: 'es',
-        sourcemap: 'inline',
-        indent: false,
-        chunkFileNames: '[name].js',
-        entryFileNames: (chunkInfo) => {
-            // Rename index_esm to index for consistency
-            if (chunkInfo.name === 'index_esm') return 'index.js';
-            return '[name].js';
+}];
+
+// ESM builds (following CSP pattern - separate main and worker files)
+// Users must explicitly call setWorkerUrl() when using these builds
+const esmConfig: RollupOptions[] = [
+    {
+        // ESM main bundle
+        input: 'src/index.ts',
+        output: {
+            file: production ? 'dist/maplibre-gl.mjs' : 'dist/maplibre-gl-dev.mjs',
+            format: 'es',
+            sourcemap: true,
+            indent: false,
+            banner
         },
-        minifyInternalExports: production,
-        manualChunks: (id) => {
-        // Shared utilities go into a shared chunk
-            if (id.includes('src/util/') ||
-            id.includes('src/style-spec/') ||
-            id.includes('src/data/')) {
-                return 'shared';
-            }
-        }
-    },
-    onwarn: (message) => {
-        console.error(message);
-        throw message;
-    },
-    treeshake: production,
-    plugins: plugins(production)
-}, {
-// Second pass for ESM: Bundle with module worker support
-    input: 'build/rollup/maplibregl.esm.js',
-    output: {
-        file: esmOutputFile,
-        format: 'es',
-        sourcemap: true,
-        indent: false,
-        banner
+        treeshake: production,
+        plugins: plugins(production)
     },
-    watch: {
-        buildDelay: 1000
-    },
-    treeshake: false,
-    plugins: [
-        sourcemaps(),
-        {
-            name: 'watch-esm-staging',
-            buildStart() {
-                if (!production) {
-                    this.addWatchFile('staging/esm/index.js');
-                    this.addWatchFile('staging/esm/worker.js');
-                    this.addWatchFile('staging/esm/shared.js');
-                }
-            }
-        }
-    ]
-}, {
-// Separate ESM worker bundle
-    input: 'src/source/worker.ts',
-    output: {
-        file: production ? 'dist/maplibre-gl-worker.mjs' : 'dist/maplibre-gl-worker-dev.mjs',
-        format: 'es',
-        sourcemap: true,
-        indent: false,
-        banner
-    },
-    treeshake: production,
-    plugins: plugins(production)
-}];
+    {
+        // ESM worker bundle
+        input: 'src/source/worker.ts',
+        output: {
+            file: production ? 'dist/maplibre-gl-worker.mjs' : 'dist/maplibre-gl-worker-dev.mjs',
+            format: 'es',
+            sourcemap: true,
+            indent: false,
+            banner
+        },
+        treeshake: production,
+        plugins: plugins(production)
+    }
+];
+
+config.push(...esmConfig);
 
 export default config;

rollup.config.ts

@@ -0,0 +1,74 @@
+import {describe, test, expect} from 'vitest';
+import fs from 'fs';
+import path from 'path';
+
+describe('ESM build', () => {
+    test('ESM main bundle exists and exports expected API', () => {
+        const esmPath = path.join(process.cwd(), 'dist/maplibre-gl-dev.mjs');
+        expect(fs.existsSync(esmPath)).toBe(true);
+        
+        const content = fs.readFileSync(esmPath, 'utf8');
+        
+        // Check for ES module exports at the end of the file
+        expect(content).toMatch(/export\s+\{[^}]+\};\s*$/m);
+        expect(content).toContain('Map');
+        expect(content).toContain('Marker');
+        expect(content).toContain('Popup');
+        expect(content).toContain('setWorkerUrl');
+        expect(content).toContain('getWorkerUrl');
+        
+        // The bundle should use ES module format (export statements)
+        // Note: Some dependencies may contain module.exports internally,
+        // but the bundle itself should export using ES module syntax
+        expect(content).toMatch(/^export\s+\{/m);
+    });
+    
+    test('ESM worker bundle exists', () => {
+        const workerPath = path.join(process.cwd(), 'dist/maplibre-gl-worker-dev.mjs');
+        expect(fs.existsSync(workerPath)).toBe(true);
+        
+        const content = fs.readFileSync(workerPath, 'utf8');
+        
+        // Worker should be an ES module
+        // The worker doesn't export anything but should not use AMD
+        expect(content).not.toContain('define.amd');
+        
+        // Should contain worker-specific code
+        expect(content).toContain('Actor');
+    });
+    
+    test('Production ESM builds exist', () => {
+        // These might not exist if only dev build was run
+        const mainProd = path.join(process.cwd(), 'dist/maplibre-gl.mjs');
+        const workerProd = path.join(process.cwd(), 'dist/maplibre-gl-worker.mjs');
+        
+        if (fs.existsSync(mainProd)) {
+            const content = fs.readFileSync(mainProd, 'utf8');
+            expect(content).toContain('export {');
+        }
+        
+        if (fs.existsSync(workerProd)) {
+            const content = fs.readFileSync(workerProd, 'utf8');
+            // Should be ES module format with export statement
+            expect(content).toContain('export');
+        }
+    });
+    
+    test('CSP ESM builds follow same pattern', () => {
+        const cspMain = path.join(process.cwd(), 'dist/maplibre-gl-csp-dev.mjs');
+        const cspWorker = path.join(process.cwd(), 'dist/maplibre-gl-csp-worker-dev.mjs');
+        
+        if (fs.existsSync(cspMain)) {
+            const content = fs.readFileSync(cspMain, 'utf8');
+            expect(content).toContain('export {');
+            // Should be ES module format with export statement
+            expect(content).toContain('export');
+        }
+        
+        if (fs.existsSync(cspWorker)) {
+            const content = fs.readFileSync(cspWorker, 'utf8');
+            // Should be ES module format with export statement
+            expect(content).toContain('export');
+        }
+    });
+});

src/index_esm.ts

@@ -41,7 +41,10 @@
 </body>
 
 <script type="module">
-    import maplibregl from '../../dist/maplibre-gl-dev.mjs';
+    import * as maplibregl from '../../dist/maplibre-gl-dev.mjs';
+    
+    // Set the worker URL for ESM build (CSP-style pattern)
+    maplibregl.setWorkerUrl('../../dist/maplibre-gl-worker-dev.mjs');
 
     const map = new maplibregl.Map({
         container: 'map',