@uniweb/build 0.8.19 → 0.8.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.8.19",
+  "version": "0.8.20",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {
@@ -17,7 +17,8 @@
     "./dev": "./src/dev/index.js",
     "./prerender": "./src/prerender.js",
     "./i18n": "./src/i18n/index.js",
-    "./search": "./src/search/index.js"
+    "./search": "./src/search/index.js",
+    "./import-map-plugin": "./src/import-map-plugin.js"
   },
   "files": [
     "src"
@@ -52,9 +53,9 @@
     "@uniweb/theming": "0.1.2"
   },
   "optionalDependencies": {
-    "@uniweb/schemas": "0.2.1",
     "@uniweb/content-reader": "1.1.4",
-    "@uniweb/runtime": "0.6.14"
+    "@uniweb/runtime": "0.6.15",
+    "@uniweb/schemas": "0.2.1"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
@@ -63,7 +64,7 @@
     "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-react": "^4.0.0 || ^5.0.0",
     "vite-plugin-svgr": "^4.0.0",
-    "@uniweb/core": "0.5.13"
+    "@uniweb/core": "0.5.14"
   },
   "peerDependenciesMeta": {
     "vite": {

package/src/import-map-plugin.js

@@ -0,0 +1,145 @@
+/**
+ * Import Map Plugin
+ *
+ * Shared Vite plugin that emits import-map bridge modules so that
+ * foundations loaded via dynamic import() can resolve bare specifiers
+ * (react, @uniweb/core, etc.) to the same instances used by the host app.
+ *
+ * Production: emits deterministic chunks at _importmap/*.js with explicit
+ * named re-exports, and injects a <script type="importmap"> into the HTML.
+ *
+ * Used by:
+ * - Site builds (runtime mode + extensions)  — packages/build/src/site/config.js
+ * - Runtime shell build                      — packages/runtime/vite.config.app.js
+ * - Dynamic-runtime (editor preview)         — packages/uniweb-editor/dynamic-runtime/
+ *
+ * @module @uniweb/build/import-map-plugin
+ */
+
+/** Default externals shared between foundations and hosts */
+const DEFAULT_EXTERNALS = [
+  'react',
+  'react-dom',
+  'react/jsx-runtime',
+  'react/jsx-dev-runtime',
+  '@uniweb/core',
+]
+
+const IMPORT_MAP_PREFIX = '\0importmap:'
+
+/** Valid JS identifier — filters out non-identifier keys from CJS modules */
+const isValidId = (k) => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(k)
+
+/**
+ * Create the import map Vite plugin.
+ *
+ * @param {Object} [options]
+ * @param {string[]} [options.externals] - Package specifiers to bridge (default: react, react-dom, @uniweb/core, etc.)
+ * @param {string} [options.name] - Plugin name (default: 'uniweb:import-map')
+ * @param {string} [options.basePath] - Base path prefix for import map URLs in HTML (default: '/')
+ * @param {string} [options.resolveFrom] - Absolute path to resolve bare specifiers from inside virtual modules.
+ *   Needed when the host project doesn't have the externals as direct dependencies (e.g., site builds
+ *   under pnpm strict mode resolve from the foundation directory instead).
+ * @param {Object} [options.devBridges] - Map of specifier → dev-mode URL for import map injection in dev.
+ *   When provided, the import map is injected in both dev and prod (with different URLs).
+ *   When omitted, the import map is only injected in prod (dev uses other mechanisms like transformRequest).
+ * @returns {import('vite').Plugin}
+ */
+export function importMapPlugin({
+  externals = DEFAULT_EXTERNALS,
+  name = 'uniweb:import-map',
+  basePath = '/',
+  resolveFrom,
+  devBridges,
+} = {}) {
+  let isBuild = false
+
+  return {
+    name,
+
+    configResolved(config) {
+      isBuild = config.command === 'build'
+    },
+
+    resolveId(id, importer) {
+      if (id.startsWith(IMPORT_MAP_PREFIX)) return id
+      // Bare specifiers inside our virtual modules (e.g. '@uniweb/core' re-exported
+      // from '\0importmap:@uniweb/core') can't be resolved by Rollup because virtual
+      // modules have no filesystem context. When a resolveFrom path is provided,
+      // resolve from there (e.g. the foundation directory under pnpm strict mode).
+      if (resolveFrom && importer?.startsWith(IMPORT_MAP_PREFIX) && externals.includes(id)) {
+        return this.resolve(id, resolveFrom, { skipSelf: true })
+      }
+    },
+
+    async load(id) {
+      if (!id.startsWith(IMPORT_MAP_PREFIX)) return
+      const pkg = id.slice(IMPORT_MAP_PREFIX.length)
+
+      // Generate explicit named re-exports (not `export *`) because CJS
+      // packages like React only expose a default via `export *`, losing
+      // individual named exports (useState, jsx, etc.) that foundations need.
+      try {
+        const mod = await import(pkg)
+        const names = Object.keys(mod).filter((k) => k !== '__esModule' && isValidId(k))
+        const hasDefault = 'default' in mod
+        const named = names.filter((k) => k !== 'default')
+        const lines = []
+        if (named.length) {
+          lines.push(`export { ${named.join(', ')} } from '${pkg}'`)
+        }
+        if (hasDefault) {
+          lines.push(`export { default } from '${pkg}'`)
+        }
+        return lines.join('\n') || 'export {}'
+      } catch {
+        // Fallback: generic re-export (may not preserve named exports for CJS)
+        return `export * from '${pkg}'`
+      }
+    },
+
+    // Emit deterministic chunks for each external (production only).
+    // preserveSignature: 'exports-only' tells Rollup to preserve the original
+    // export names (useState, jsx, etc.) instead of mangling them.
+    buildStart() {
+      if (!isBuild) return
+      for (const ext of externals) {
+        this.emitFile({
+          type: 'chunk',
+          id: `${IMPORT_MAP_PREFIX}${ext}`,
+          fileName: `_importmap/${ext.replace(/\//g, '-')}.js`,
+          preserveSignature: 'exports-only',
+        })
+      }
+    },
+
+    // Inject the import map into the HTML.
+    // In prod: always injects with basePath-prefixed _importmap/ URLs.
+    // In dev: only injects if devBridges are provided (otherwise, the consumer
+    //   handles dev-mode resolution via other mechanisms like transformRequest).
+    transformIndexHtml: {
+      order: 'pre',
+      handler(html) {
+        const imports = {}
+
+        if (isBuild) {
+          for (const ext of externals) {
+            imports[ext] = `${basePath}_importmap/${ext.replace(/\//g, '-')}.js`
+          }
+        } else if (devBridges) {
+          Object.assign(imports, devBridges)
+        } else {
+          // No dev injection — consumer handles dev mode separately
+          return html
+        }
+
+        const importMap = JSON.stringify({ imports }, null, 2)
+        const script = `    <script type="importmap">\n${importMap}\n    </script>\n`
+        // Import map must appear before any module scripts
+        return html.replace('<head>', '<head>\n' + script)
+      },
+    },
+  }
+}
+
+export { DEFAULT_EXTERNALS }

package/src/site/config.js

@@ -24,6 +24,7 @@ import { existsSync, readFileSync } from 'node:fs'
 import { resolve, dirname, join } from 'node:path'
 import yaml from 'js-yaml'
 import { generateEntryPoint, shouldRegenerateForFile } from '../generate-entry.js'
+import { importMapPlugin } from '../import-map-plugin.js'
 
 /**
  * Normalize a base path for Vite compatibility
@@ -343,105 +344,73 @@ export async function defineSiteConfig(options = {}) {
 
   if (noopFoundationPlugin) plugins.push(noopFoundationPlugin)
 
-  // Import map plugin for runtime mode production builds
+  // Import map plugin for runtime mode production builds.
   // Emits re-export modules for each externalized package (react, @uniweb/core, etc.)
-  // so the browser can resolve bare specifiers in the dynamically-imported foundation
-  const IMPORT_MAP_EXTERNALS = [
-    'react',
-    'react-dom',
-    'react/jsx-runtime',
-    'react/jsx-dev-runtime',
-    '@uniweb/core'
-  ]
-  const IMPORT_MAP_PREFIX = '\0importmap:'
-
-  const importMapPlugin = needsImportMap ? (() => {
-    let isBuild = false
-
-    return {
-      name: 'uniweb:import-map',
-
-      configResolved(config) {
-        isBuild = config.command === 'build'
-      },
-
-      resolveId(id, importer) {
-        if (id.startsWith(IMPORT_MAP_PREFIX)) return id
-        // Bare specifiers inside our virtual modules (e.g. '@uniweb/core' re-exported
-        // from '\0importmap:@uniweb/core') can't be resolved by Rollup because virtual
-        // modules have no filesystem context. Resolve from the foundation directory where
-        // @uniweb/core is a direct dependency (the site may not have it under pnpm strict).
-        if (importer?.startsWith(IMPORT_MAP_PREFIX) && IMPORT_MAP_EXTERNALS.includes(id)) {
-          const resolveFrom = foundationInfo.path
-            ? resolve(foundationInfo.path, 'package.json')
-            : resolve(siteRoot, 'main.js')
-          return this.resolve(id, resolveFrom, { skipSelf: true })
-        }
-      },
+  // so the browser can resolve bare specifiers in the dynamically-imported foundation.
+  // In dev mode, Vite's transformRequest() handles bare specifier resolution instead.
+  if (needsImportMap) {
+    plugins.push(importMapPlugin({
+      basePath: base || '/',
+      // Under pnpm strict mode, the site may not have @uniweb/core in its own
+      // node_modules. Resolve from the foundation directory where it's a direct dep.
+      resolveFrom: foundationInfo.path
+        ? resolve(foundationInfo.path, 'package.json')
+        : resolve(siteRoot, 'main.js'),
+    }))
+  }
 
-      async load(id) {
-        if (!id.startsWith(IMPORT_MAP_PREFIX)) return
-        const pkg = id.slice(IMPORT_MAP_PREFIX.length)
-        // Dynamically discover exports at build time by importing the package.
-        // We generate explicit named re-exports (not `export *`) because CJS
-        // packages like React only expose a default via `export *`, losing
-        // individual named exports (useState, jsx, etc.) that foundations need.
-        try {
-          const mod = await import(pkg)
-          const names = Object.keys(mod).filter(k => k !== '__esModule')
-          const hasDefault = 'default' in mod
-          const named = names.filter(k => k !== 'default')
-          const lines = []
-          if (named.length) {
-            lines.push(`export { ${named.join(', ')} } from '${pkg}'`)
-          }
-          if (hasDefault) {
-            lines.push(`export { default } from '${pkg}'`)
+  // Preload hints for runtime-loaded foundations and extensions.
+  // In runtime mode, foundation JS is loaded via import() and CSS is injected
+  // dynamically in JavaScript — the browser doesn't discover them until JS executes.
+  // These <link> tags let the browser start fetching during HTML parsing.
+  // Shell mode is excluded: URLs come from __DATA__ at serve time (unicloud handles it).
+  if (isRuntimeMode && !isShellMode) {
+    plugins.push({
+      name: 'uniweb:foundation-preload',
+      transformIndexHtml: {
+        order: 'post',
+        handler() {
+          const tags = []
+
+          // Foundation JS modulepreload
+          if (foundationConfig.url) {
+            tags.push({
+              tag: 'link',
+              attrs: { rel: 'modulepreload', href: foundationConfig.url },
+              injectTo: 'head',
+            })
           }
-          return lines.join('\n') || `export {}`
-        } catch {
-          // Fallback: generic re-export (may not preserve named exports for CJS)
-          return `export * from '${pkg}'`
-        }
-      },
 
-      // Emit deterministic chunks for each external (production only).
-      // preserveSignature: 'exports-only' tells Rollup to preserve the original
-      // export names (useState, jsx, etc.) instead of mangling them.
-      // In dev mode, Vite's transformRequest() resolves bare specifiers instead.
-      buildStart() {
-        if (!isBuild) return
-        for (const ext of IMPORT_MAP_EXTERNALS) {
-          this.emitFile({
-            type: 'chunk',
-            id: `${IMPORT_MAP_PREFIX}${ext}`,
-            fileName: `_importmap/${ext.replace(/\//g, '-')}.js`,
-            preserveSignature: 'exports-only'
-          })
-        }
-      },
+          // Foundation CSS — injected as a real <link> so the browser fetches it
+          // during HTML parsing instead of waiting for loadFoundationCSS() in JS.
+          // The runtime's dynamic <link> deduplicates (same URL, already cached).
+          if (foundationConfig.cssUrl) {
+            tags.push({
+              tag: 'link',
+              attrs: { rel: 'stylesheet', href: foundationConfig.cssUrl },
+              injectTo: 'head',
+            })
+          }
 
-      // Inject the import map into the HTML (production only).
-      // In dev mode, Vite's transformRequest() handles bare specifier resolution.
-      transformIndexHtml: {
-        order: 'pre',
-        handler(html) {
-          if (!isBuild) return html
-          const basePath = base || '/'
-          const imports = {}
-          for (const ext of IMPORT_MAP_EXTERNALS) {
-            imports[ext] = `${basePath}_importmap/${ext.replace(/\//g, '-')}.js`
+          // Extension JS modulepreload (CSS left to runtime — we can't reliably
+          // derive CSS URLs for all extension formats)
+          const extensions = siteConfig.extensions || []
+          for (const ext of extensions) {
+            const url = typeof ext === 'string' ? ext : ext?.url
+            if (url) {
+              tags.push({
+                tag: 'link',
+                attrs: { rel: 'modulepreload', href: url },
+                injectTo: 'head',
+              })
+            }
           }
-          const importMap = JSON.stringify({ imports }, null, 2)
-          const script = `    <script type="importmap">\n${importMap}\n    </script>\n`
-          // Import map must appear before any module scripts
-          return html.replace('<head>', '<head>\n' + script)
-        }
-      }
-    }
-  })() : null
 
-  if (importMapPlugin) plugins.push(importMapPlugin)
+          return tags
+        },
+      },
+    })
+  }
 
   // Build foundation config for runtime
   const foundationConfig = {