@woodsportal/hubspot-kit 1.0.41-dev.1 → 1.0.41-dev.3

package/src/dev-module-config/ui/module-config-overlay-side.ts

@@ -1,12 +1,22 @@
 export type ModuleConfigOverlaySide = 'left' | 'right'
 
-const STORAGE_KEY = 'woodsportal:module-config-overlay-side'
+const STORAGE_KEY = 'wp.d.cfg.side'
+const LEGACY_STORAGE_KEY = 'woodsportal:module-config-overlay-side'
 
 export function loadModuleConfigOverlaySide(): ModuleConfigOverlaySide {
   if (typeof window === 'undefined') return 'right'
   try {
-    const value = window.localStorage.getItem(STORAGE_KEY)
-    return value === 'left' ? 'left' : 'right'
+    const value =
+      window.localStorage.getItem(STORAGE_KEY) ??
+      window.localStorage.getItem(LEGACY_STORAGE_KEY)
+    if (value === 'left' || value === 'right') {
+      if (!window.localStorage.getItem(STORAGE_KEY)) {
+        window.localStorage.setItem(STORAGE_KEY, value)
+        window.localStorage.removeItem(LEGACY_STORAGE_KEY)
+      }
+      return value
+    }
+    return 'right'
   } catch {
     return 'right'
   }

package/src/dev-module-config/ui/module-config-toolbar-theme.ts

@@ -1,6 +1,7 @@
 export type ModuleConfigToolbarTheme = 'light' | 'dark'
 
-const STORAGE_KEY = 'woodsportal:module-config-toolbar-theme'
+const STORAGE_KEY = 'wp.d.cfg.theme'
+const LEGACY_STORAGE_KEY = 'woodsportal:module-config-toolbar-theme'
 
 export function detectPortalTheme(): ModuleConfigToolbarTheme {
   if (typeof document === 'undefined') return 'light'
@@ -10,8 +11,16 @@ export function detectPortalTheme(): ModuleConfigToolbarTheme {
 export function loadModuleConfigToolbarTheme(): ModuleConfigToolbarTheme {
   if (typeof window === 'undefined') return 'light'
   try {
-    const stored = window.localStorage.getItem(STORAGE_KEY)
-    if (stored === 'dark' || stored === 'light') return stored
+    const stored =
+      window.localStorage.getItem(STORAGE_KEY) ??
+      window.localStorage.getItem(LEGACY_STORAGE_KEY)
+    if (stored === 'dark' || stored === 'light') {
+      if (!window.localStorage.getItem(STORAGE_KEY)) {
+        window.localStorage.setItem(STORAGE_KEY, stored)
+        window.localStorage.removeItem(LEGACY_STORAGE_KEY)
+      }
+      return stored
+    }
   } catch {
     // ignore
   }

package/vite/vite.config.cdn-app.mjs

@@ -8,37 +8,50 @@ import {
   root,
 } from '../scripts/vite/portal-build-shared.js'
 
-const vendorGlobals = {
-  react: 'WoodsPortalVendor.React',
-  'react/jsx-runtime': 'WoodsPortalVendor.jsxRuntime',
-  'react/jsx-dev-runtime': 'WoodsPortalVendor.jsxDevRuntime',
-  'react-dom': 'WoodsPortalVendor.ReactDOM',
-  'react-dom/client': 'WoodsPortalVendor.ReactDOMClient',
-}
+const buildId = portalBuildId()
 
-export default defineConfig(({ mode }) => ({
-  plugins: portalPlugins(mode, { codeSplitting: false }),
-  resolve: portalResolve(mode),
-  define: portalDefine(mode),
-  build: {
-    outDir: resolve(root, 'dist/cdn'),
-    emptyOutDir: false,
-    copyPublicDir: false,
-    cssCodeSplit: false,
-    lib: {
-      entry: resolve(root, 'src/cdn/app-entry.ts'),
-      name: 'WoodsPortalApp',
-      fileName: () => `app.${portalBuildId()}.js`,
-      formats: ['iife'],
+/** Longest-match first — bare `react` must not swallow `react/jsx-runtime`. */
+const reactShimAliases = [
+  { find: 'react/jsx-runtime', replacement: resolve(root, 'src/cdn/shims/react-jsx-runtime.ts') },
+  { find: 'react/jsx-dev-runtime', replacement: resolve(root, 'src/cdn/shims/react-jsx-runtime.ts') },
+  { find: 'react-dom/client', replacement: resolve(root, 'src/cdn/shims/react-dom-client.ts') },
+  { find: 'react-dom', replacement: resolve(root, 'src/cdn/shims/react-dom.ts') },
+  { find: 'react', replacement: resolve(root, 'src/cdn/shims/react.ts') },
+]
+
+export default defineConfig(({ mode }) => {
+  const baseResolve = portalResolve(mode)
+  return {
+    // Relative base so dynamic import() resolves lazy chunks from jsDelivr (same dir as app.js), not HubSpot origin.
+    base: './',
+    // TanStack autoCodeSplitting + ESM CDN entry caused router.init stack overflow on HubSpot.
+    // Keep Rollup lazy chunks via React.lazy() / dynamic import(); route modules stay in the app entry.
+    plugins: portalPlugins(mode, { codeSplitting: false }),
+    resolve: {
+      ...baseResolve,
+      alias: [...reactShimAliases, ...(baseResolve.alias ?? [])],
     },
-    rollupOptions: {
-      external: Object.keys(vendorGlobals),
-      output: {
-        globals: vendorGlobals,
-        inlineDynamicImports: true,
-        assetFileNames: `app.${portalBuildId()}.css`,
+    define: portalDefine(mode),
+    build: {
+      outDir: resolve(root, 'dist/cdn'),
+      emptyOutDir: false,
+      copyPublicDir: false,
+      cssCodeSplit: false,
+      rollupOptions: {
+        input: resolve(root, 'src/cdn/app-entry.ts'),
+        output: {
+          format: 'es',
+          entryFileNames: `app.${buildId}.js`,
+          chunkFileNames: `chunks/[name].${buildId}.[hash].js`,
+          assetFileNames: (assetInfo) => {
+            if (assetInfo.name?.endsWith('.css')) {
+              return `app.${buildId}.css`
+            }
+            return `assets/[name].[hash][extname]`
+          },
+        },
       },
+      minify: true,
     },
-    minify: true,
-  },
-}))
+  }
+})

package/vite/vite.config.cdn-audit.mjs

@@ -0,0 +1,34 @@
+/**
+ * CDN app bundle audit — rollup visualizer treemap for dist/cdn/app.*.js graph.
+ * Usage: yarn vite build --config vite.config.cdn-audit.mjs --mode prod
+ */
+import { defineConfig, mergeConfig } from 'vite'
+import { resolve } from 'node:path'
+import { importConsumerDep } from '../scripts/resolve-consumer-dep.mjs'
+import { root } from '../scripts/vite/portal-build-shared.js'
+import cdnAppConfig from './vite.config.cdn-app.mjs'
+
+const { default: visualizer } = await importConsumerDep('rollup-plugin-visualizer')
+
+export default defineConfig((env) =>
+  mergeConfig(typeof cdnAppConfig === 'function' ? cdnAppConfig(env) : cdnAppConfig, {
+    build: {
+      sourcemap: true,
+      rollupOptions: {
+        plugins: [
+          visualizer({
+            filename: resolve(root, 'docs/audit/cdn-bundle-stats.html'),
+            gzipSize: true,
+            brotliSize: true,
+            template: 'treemap',
+          }),
+          visualizer({
+            filename: resolve(root, 'docs/audit/cdn-bundle-visualizer.json'),
+            json: true,
+            gzipSize: true,
+          }),
+        ],
+      },
+    },
+  }),
+)

package/vite/vite.config.cdn-esm.mjs

@@ -10,7 +10,7 @@ import {
 
 /** Phase 2: ESM CDN build with route code-splitting (not used for HubSpot module.js). */
 export default defineConfig(({ mode }) => ({
-  plugins: portalPlugins(mode, { codeSplitting: true }),
+  plugins: portalPlugins(mode, { codeSplitting: false }),
   resolve: portalResolve(mode),
   define: portalDefine(mode),
   build: {