@mapvx/web-components-ssr 1.1.1 → 1.2.0-dev.2

package/README.md

@@ -32,8 +32,9 @@ import '@mapvx/web-components-ssr/dist/browser/styles.css'
 **HTML:**
 
 ```html
-<!-- Include the component files -->
-<script src="node_modules/@mapvx/web-components-ssr/dist/browser/main.js"></script>
+<!-- Include the component files. `type="module"` is required: the bundle is an
+     ES module that lazy-loads sibling `chunk-*.js` files from the same folder. -->
+<script type="module" src="node_modules/@mapvx/web-components-ssr/dist/browser/main.js"></script>
 <link rel="stylesheet" href="node_modules/@mapvx/web-components-ssr/dist/browser/styles.css" />
 ```
 
@@ -105,8 +106,11 @@ Configure assets in `angular.json` and use script tags in `index.html`:
 Then reference the files in your `index.html`:
 
 ```html
-<!-- Web Component Scripts -->
-<script src="website-component/main.js" defer></script>
+<!-- Web Component Scripts. `type="module"` is required: the bundle is an ES module
+     that lazy-loads sibling `chunk-*.js` files, so it must not be a classic script
+     (a classic script fails with "Unexpected token 'export'"). `defer` is implicit
+     for modules, and the `glob: "**/*"` asset rule above already copies the chunks. -->
+<script type="module" src="website-component/main.js"></script>
 
 <!-- Web Component Styles -->
 <link rel="stylesheet" href="website-component/styles.css" />
@@ -152,8 +156,12 @@ npm install @mapvx/web-components-ssr-helpers
 ### Via CDN (unpkg)
 
 ```html
-<!-- Include the component files -->
-<script src="https://unpkg.com/@mapvx/web-components-ssr@latest/dist/browser/main.js"></script>
+<!-- Include the component files. `type="module"` is required: the bundle is an
+     ES module that lazy-loads sibling `chunk-*.js` files from the same URL prefix. -->
+<script
+  type="module"
+  src="https://unpkg.com/@mapvx/web-components-ssr@latest/dist/browser/main.js"
+></script>
 <link
   rel="stylesheet"
   href="https://unpkg.com/@mapvx/web-components-ssr@latest/dist/browser/styles.css"
@@ -559,13 +567,13 @@ The `userAction` event provides detailed information about user interactions wit
 
 #### UserAction Types
 
-| Type                 | Description                                | Data Structure                          |
+| Type | Description | Data Structure |
 | -------------------- | ------------------------------------------ | --------------------------------------- | ------------ |
-| `select-filter`      | Emitted when a filter is selected          | `{ filter: string }`                    |
-| `show-place`         | Emitted when a place is displayed          | `{ placeId: string, alias: string       | undefined }` |
-| `select-destination` | Emitted when a destination is selected     | `{ destinationId: string, alias: string | undefined }` |
-| `search`             | Emitted when a search is performed         | `{ searchTerm: string }`                |
-| `return-to-home`     | Emitted when user returns to the home view | `{ filter: string }`                    |
+| `select-filter` | Emitted when a filter is selected | `{ filter: string }` |
+| `show-place` | Emitted when a place is displayed | `{ placeId: string, alias: string       | undefined }` |
+| `select-destination` | Emitted when a destination is selected | `{ destinationId: string, alias: string | undefined }` |
+| `search` | Emitted when a search is performed | `{ searchTerm: string }` |
+| `return-to-home` | Emitted when user returns to the home view | `{ filter: string }` |
 
 #### UserAction Usage Examples
 
@@ -807,10 +815,14 @@ npm install @mapvx/web-components-ssr @mapvx/web-components-ssr-helpers
 ```javascript
 #!/usr/bin/env node
 
-import { existsSync, mkdirSync, copyFileSync } from 'fs'
+import { existsSync, mkdirSync, copyFileSync, readdirSync } from 'fs'
 import { join } from 'path'
 
-const sourcePath = 'node_modules/@mapvx/web-components-ssr/dist/browser/main.js'
+// The bundle is an ES module that lazy-loads sibling `chunk-*.js` files via relative
+// `import('./chunk-*.js')` calls, so every .js file must be copied and the chunks must
+// keep their original names. Copying main.js alone leaves the component unable to boot.
+const sourceDir = 'node_modules/@mapvx/web-components-ssr/dist/browser'
+const sourcePath = join(sourceDir, 'main.js')
 const targetDir = 'public/mapvx-website'
 const targetPath = join(targetDir, 'bundle.js')
 
@@ -824,6 +836,11 @@ if (!existsSync(targetDir)) {
 }
 
 copyFileSync(sourcePath, targetPath)
+
+for (const chunk of readdirSync(sourceDir).filter((f) => f.endsWith('.js') && f !== 'main.js')) {
+  copyFileSync(join(sourceDir, chunk), join(targetDir, chunk))
+}
+
 console.log(`✅ Bundle copied successfully!`)
 ```
 
@@ -840,7 +857,7 @@ export default async function HomePage() {
 
   return (
     <div>
-      <Script src='/mapvx-website/bundle.js' />
+      <Script type='module' src='/mapvx-website/bundle.js' />
       <mapvx-website
         api-key={process.env.NEXT_PUBLIC_MAPVX_API_KEY}
         institution-id={process.env.NEXT_PUBLIC_MAPVX_INSTITUTION_ID}