@woodsportal/hubspot-kit 1.0.35 → 1.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woodsportal/hubspot-kit",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "description": "WoodsCLI — HubSpot CMS dev kit by WoodsPortal. wp CLI, Vite presets, module-config overlay, and theme/module build pipelines.",
   "type": "module",
   "main": "./dist/index.js",
@@ -51,7 +51,7 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "test": "node --import tsx --test 'src/lib/**/*.test.ts' 'src/schema/**/*.test.ts' 'src/vite/**/*.test.ts' 'scripts/portal-build-id.test.mjs' 'scripts/vite/ensure-dev-kit-shims.test.mjs' && vitest run src/dev-module-config/__tests__/normalize-repeater-items.test.ts src/dev-module-config/__tests__/module-config-transform.test.ts src/dev-module-config/__tests__/flatten-visible-fields.test.ts",
+    "test": "node --import tsx --test 'src/lib/**/*.test.ts' 'src/schema/**/*.test.ts' 'src/vite/**/*.test.ts' 'scripts/portal-build-id.test.mjs' 'scripts/vite/ensure-dev-kit-shims.test.mjs' 'scripts/vite/consumer-react-aliases.test.mjs' && vitest run src/dev-module-config/__tests__/normalize-repeater-items.test.ts src/dev-module-config/__tests__/module-config-transform.test.ts src/dev-module-config/__tests__/flatten-visible-fields.test.ts",
     "test:examples": "node examples/smoke/run-matrix.mjs --tier static",
     "lint": "eslint src",
     "verify": "npm run typecheck && npm run test && npm run test:examples && npm run build",

package/scripts/run-dev.mjs

@@ -1,107 +1,29 @@
 #!/usr/bin/env node
 /**
- * Local dev server — loads Vite and plugins from the consumer project's node_modules
- * (configFile: false) so the kit does not need its own vite install.
+ * Local dev server — programmatic Vite (configFile: false) avoids fragile
+ * vite.config.* loading on some Node versions and keeps one config source.
  */
-import { existsSync } from 'node:fs'
-import { resolve } from 'node:path'
-
-import { importConsumerDep } from './resolve-consumer-dep.mjs'
 import { findProjectRoot, getKitRoot } from './project-root.mjs'
+import { importConsumerDep } from './resolve-consumer-dep.mjs'
+import { createDevServerViteConfig } from './vite/create-dev-server-config.mjs'
 
 const projectRoot = findProjectRoot()
 const kitRoot = getKitRoot()
 const port = Number(process.env.WP_HS_DEV_PORT ?? process.argv[2] ?? 3000)
 
-const [
-  { ensureDevKitShims },
-  { default: resolveFromProjectRoot },
-  { default: sdkLogBridge },
-  { default: moduleConfigStore },
-  { createDevReactPluginOptions },
-  { default: isPrefix },
-  { default: bootstrapShimResolver },
-  { readWoodsportalConfig },
-  { createServer },
-  viteReactMod,
-  tanstackMod,
-  tailwindcssMod,
-] = await Promise.all([
-  import('./vite/ensure-dev-kit-shims.js'),
-  import('./vite/resolve-from-project-root.js'),
-  import('./vite/sdk-log-bridge.js'),
-  import('./vite/module-config-store.js'),
-  import('./vite/react-dev-plugin-options.js'),
-  import('./tailwind/prefix.env.js'),
-  import('./vite/bootstrap-shim-resolver.js'),
-  import('./read-woodsportal-config.mjs'),
-  importConsumerDep('vite'),
-  importConsumerDep('@vitejs/plugin-react'),
-  importConsumerDep('@tanstack/router-plugin/vite'),
-  importConsumerDep('@tailwindcss/vite'),
-])
-
-const viteReact = viteReactMod.default ?? viteReactMod
-const { TanStackRouterVite } = tanstackMod
-const tailwindcss = tailwindcssMod.default ?? tailwindcssMod
-
-const { moduleConfigRoot, bootstrapShim, bootstrapGreenfieldShim } = ensureDevKitShims(
-  projectRoot,
-  kitRoot,
-)
-const { config } = readWoodsportalConfig(projectRoot)
-const routesDir = resolve(projectRoot, 'src/routes')
-const hasTanStackRoutes = existsSync(routesDir)
+process.env.WP_HS_PROJECT_ROOT = projectRoot
 
-const prefixPlugins = isPrefix('dev')
-  ? [
-      (await import('./tailwind/prefix-plugin.js')).default(),
-      (await import('./tailwind/tailwind-content-plugin.js')).default(),
-    ]
-  : []
+const userConfig = await createDevServerViteConfig({ projectRoot, kitRoot, port })
+const resolved =
+  typeof userConfig === 'function'
+    ? await userConfig({ mode: 'dev', command: 'serve' })
+    : await userConfig
 
+const { createServer } = await importConsumerDep('vite')
 const server = await createServer({
-  root: projectRoot,
+  ...resolved,
   configFile: false,
   mode: 'dev',
-  plugins: [
-    bootstrapShimResolver({ bootstrapShim, bootstrapGreenfieldShim, kitRoot }),
-    resolveFromProjectRoot(projectRoot, kitRoot),
-    sdkLogBridge(),
-    moduleConfigStore(projectRoot),
-    ...(hasTanStackRoutes ? [TanStackRouterVite({ autoCodeSplitting: false })] : []),
-    viteReact(createDevReactPluginOptions()),
-    tailwindcss(),
-    ...prefixPlugins,
-  ],
-  resolve: {
-    preserveSymlinks: true,
-    dedupe: ['react', 'react-dom'],
-    alias: {
-      '@/dev/module-config': moduleConfigRoot,
-      '@wphs/bootstrap': bootstrapShim,
-      '@wphs/bootstrap-greenfield': bootstrapGreenfieldShim,
-      '@woodsportal/hubspot-kit/dev/bootstrap': bootstrapShim,
-      '@woodsportal/hubspot-kit/dev/bootstrap-greenfield': bootstrapGreenfieldShim,
-      '@wphs/adapter': resolve(projectRoot, config?.dev?.adapter ?? './wphs.adapter.ts'),
-      '@': resolve(projectRoot, './src'),
-    },
-  },
-  optimizeDeps: {
-    include: ['react', 'react-dom', 'react/jsx-dev-runtime', 'react/jsx-runtime'],
-    exclude: ['woodsportal-client-sdk', 'woodsportal-client-sdk/auth', 'woodsportal-client-sdk/crm'],
-  },
-  define: {
-    'process.env.NODE_ENV': JSON.stringify('development'),
-    'process.env': {},
-    process: JSON.stringify({ env: {} }),
-  },
-  server: {
-    port,
-    fs: {
-      allow: [projectRoot, kitRoot],
-    },
-  },
 })
 
 await server.listen()

package/scripts/vite/consumer-react-aliases.js

@@ -0,0 +1,31 @@
+import { createRequire } from 'node:module'
+import { resolve } from 'node:path'
+import { pathToFileURL } from 'node:url'
+
+/** Subpath runtimes only — do not alias top-level `react` / `react-dom` (breaks `react/jsx-runtime`). */
+const REACT_RUNTIME_SPECS = [
+  'react/jsx-runtime',
+  'react/jsx-dev-runtime',
+  'react-dom/client',
+  'react/compiler-runtime',
+]
+
+/**
+ * Pin React runtimes to the consumer's node_modules so kit UI under `.wphs/` or
+ * `node_modules/@woodsportal/hubspot-kit` never loads a mismatched CJS copy in the browser.
+ */
+export function consumerReactAliases(projectRoot) {
+  const require = createRequire(pathToFileURL(resolve(projectRoot, 'package.json')))
+  /** @type {Record<string, string>} */
+  const alias = {}
+
+  for (const spec of REACT_RUNTIME_SPECS) {
+    try {
+      alias[spec] = require.resolve(spec)
+    } catch {
+      // consumer may omit optional subpaths until install completes
+    }
+  }
+
+  return alias
+}

package/scripts/vite/consumer-react-aliases.test.mjs

@@ -0,0 +1,32 @@
+import assert from 'node:assert/strict'
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join, resolve } from 'node:path'
+import { describe, it } from 'node:test'
+
+import { consumerReactAliases } from './consumer-react-aliases.js'
+
+describe('consumerReactAliases', () => {
+  it('resolves react jsx runtimes from the consumer project root', () => {
+    const root = mkdtempSync(join(tmpdir(), 'wp-react-alias-'))
+    try {
+      mkdirSync(join(root, 'node_modules', 'react'), { recursive: true })
+      writeFileSync(
+        join(root, 'node_modules', 'react', 'package.json'),
+        JSON.stringify({
+          name: 'react',
+          exports: {
+            './jsx-dev-runtime': './jsx-dev-runtime.js',
+          },
+        }),
+      )
+      writeFileSync(join(root, 'node_modules', 'react', 'jsx-dev-runtime.js'), 'export {}')
+      writeFileSync(join(root, 'package.json'), JSON.stringify({ name: 'fixture', type: 'module' }))
+
+      const alias = consumerReactAliases(root)
+      assert.match(alias['react/jsx-dev-runtime'], /node_modules[/\\]react[/\\]jsx-dev-runtime\.js$/)
+    } finally {
+      rmSync(root, { recursive: true, force: true })
+    }
+  })
+})

package/scripts/vite/create-dev-server-config.mjs

@@ -0,0 +1,114 @@
+/**
+ * Shared Vite dev-server config for `vite.config.dev.mjs` and `scripts/run-dev.mjs`.
+ */
+import { existsSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+import { importConsumerDep } from '../resolve-consumer-dep.mjs'
+import { findProjectRoot, getKitRoot } from '../project-root.mjs'
+import { readWoodsportalConfig } from '../read-woodsportal-config.mjs'
+import { consumerReactAliases } from './consumer-react-aliases.js'
+
+export async function createDevServerViteConfig(options = {}) {
+  const port = options.port ?? Number(process.env.WP_HS_DEV_PORT ?? 3000)
+  const projectRoot = options.projectRoot ?? findProjectRoot()
+  const kitRoot = options.kitRoot ?? getKitRoot()
+
+  const [
+    { ensureDevKitShims },
+    { default: bootstrapShimResolver },
+    { default: resolveFromProjectRoot },
+    { default: sdkLogBridge },
+    { default: moduleConfigStore },
+    { createDevReactPluginOptions },
+    { default: isPrefix },
+  ] = await Promise.all([
+    import('./ensure-dev-kit-shims.js'),
+    import('./bootstrap-shim-resolver.js'),
+    import('./resolve-from-project-root.js'),
+    import('./sdk-log-bridge.js'),
+    import('./module-config-store.js'),
+    import('./react-dev-plugin-options.js'),
+    import('../tailwind/prefix.env.js'),
+  ])
+
+  const { moduleConfigRoot, bootstrapShim, bootstrapGreenfieldShim } = ensureDevKitShims(
+    projectRoot,
+    kitRoot,
+  )
+  const { config } = readWoodsportalConfig(projectRoot)
+  const routesDir = resolve(projectRoot, 'src/routes')
+  const hasTanStackRoutes = existsSync(routesDir)
+
+  const { defineConfig } = await importConsumerDep('vite')
+  const [{ default: viteReact }, { TanStackRouterVite }, { default: tailwindcss }] = await Promise.all([
+    importConsumerDep('@vitejs/plugin-react'),
+    importConsumerDep('@tanstack/router-plugin/vite'),
+    importConsumerDep('@tailwindcss/vite'),
+  ])
+
+  return defineConfig(async ({ mode, command }) => {
+    const prefixPlugins = isPrefix(mode)
+      ? [
+          (await import('../tailwind/prefix-plugin.js')).default(),
+          (await import('../tailwind/tailwind-content-plugin.js')).default(),
+        ]
+      : []
+
+    return {
+      root: projectRoot,
+      plugins: [
+        bootstrapShimResolver({ bootstrapShim, bootstrapGreenfieldShim, kitRoot }),
+        resolveFromProjectRoot(projectRoot, kitRoot),
+        ...(command === 'serve' && mode === 'dev'
+          ? [sdkLogBridge(), moduleConfigStore(projectRoot)]
+          : []),
+        ...(hasTanStackRoutes ? [TanStackRouterVite({ autoCodeSplitting: false })] : []),
+        viteReact(createDevReactPluginOptions()),
+        tailwindcss(),
+        ...prefixPlugins,
+      ],
+      resolve: {
+        dedupe: ['react', 'react-dom'],
+        alias: {
+          ...consumerReactAliases(projectRoot),
+          '@/dev/module-config': moduleConfigRoot,
+          '@wphs/bootstrap': bootstrapShim,
+          '@wphs/bootstrap-greenfield': bootstrapGreenfieldShim,
+          '@woodsportal/hubspot-kit/dev/bootstrap': bootstrapShim,
+          '@woodsportal/hubspot-kit/dev/bootstrap-greenfield': bootstrapGreenfieldShim,
+          '@wphs/adapter': resolve(projectRoot, config?.dev?.adapter ?? './wphs.adapter.ts'),
+          '@': resolve(projectRoot, './src'),
+        },
+      },
+      optimizeDeps: {
+        include: [
+          'react',
+          'react-dom',
+          'react/jsx-dev-runtime',
+          'react/jsx-runtime',
+          'react-dom/client',
+        ],
+        exclude: [
+          'woodsportal-client-sdk',
+          'woodsportal-client-sdk/auth',
+          'woodsportal-client-sdk/crm',
+        ],
+      },
+      define: {
+        'import.meta.env.VITE_WPHS_MODULE_NAME': JSON.stringify(
+          config?.module?.name ?? config?.theme?.name ?? 'module',
+        ),
+        'process.env.NODE_ENV': JSON.stringify(mode === 'dev' ? 'development' : 'production'),
+        'process.env': {},
+        process: JSON.stringify({ env: {} }),
+      },
+      server: {
+        port,
+        fs: {
+          allow: [projectRoot, kitRoot],
+        },
+      },
+    }
+  })
+}

package/scripts/vite/resolve-from-project-root.js

@@ -1,14 +1,24 @@
 import { createRequire } from 'node:module'
-import { resolve } from 'node:path'
+import { resolve, sep } from 'node:path'
 import { pathToFileURL } from 'node:url'
 
 /**
- * When Vite transforms files under @woodsportal/hubspot-kit, bare imports must
- * resolve from the consumer project's node_modules (not the kit package root).
+ * When Vite transforms kit dev UI (`.wphs/`, package src, or dev-module-config),
+ * bare imports must resolve from the consumer project's node_modules.
  */
 export default function resolveFromProjectRoot(projectRoot, kitRoot) {
   const require = createRequire(pathToFileURL(resolve(projectRoot, 'package.json')))
   const kitRootNorm = resolve(kitRoot)
+  const wphsNorm = resolve(projectRoot, '.wphs')
+
+  function isKitUiImporter(importer) {
+    const norm = resolve(importer)
+    if (norm.startsWith(kitRootNorm)) return true
+    if (norm.includes(`${sep}.wphs${sep}`) || norm.includes(`${sep}.wphs`)) return true
+    if (norm.includes(`${sep}dev-module-config${sep}`)) return true
+    if (norm.includes(`${sep}.kit-module-config${sep}`)) return true
+    return false
+  }
 
   return {
     name: 'wp-resolve-from-project-root',
@@ -18,7 +28,7 @@ export default function resolveFromProjectRoot(projectRoot, kitRoot) {
       if (source.startsWith('.') || source.startsWith('/') || source.startsWith('\0')) {
         return null
       }
-      if (!resolve(importer).startsWith(kitRootNorm)) {
+      if (!isKitUiImporter(importer)) {
         return null
       }
       try {

package/vite/vite.config.dev.mjs

@@ -1,107 +1,3 @@
-import { importConsumerDep } from '../scripts/resolve-consumer-dep.mjs'
+import { createDevServerViteConfig } from '../scripts/vite/create-dev-server-config.mjs'
 
-export default loadDevViteConfig()
-
-async function loadDevViteConfig() {
-  const [
-    { findProjectRoot, getKitRoot },
-    { readWoodsportalConfig },
-    { ensureDevKitShims },
-    { default: bootstrapShimResolver },
-    { default: resolveFromProjectRoot },
-    { default: sdkLogBridge },
-    { default: moduleConfigStore },
-    { createDevReactPluginOptions },
-    { default: isPrefix },
-  ] = await Promise.all([
-    import('../scripts/project-root.mjs'),
-    import('../scripts/read-woodsportal-config.mjs'),
-    import('../scripts/vite/ensure-dev-kit-shims.js'),
-    import('../scripts/vite/bootstrap-shim-resolver.js'),
-    import('../scripts/vite/resolve-from-project-root.js'),
-    import('../scripts/vite/sdk-log-bridge.js'),
-    import('../scripts/vite/module-config-store.js'),
-    import('../scripts/vite/react-dev-plugin-options.js'),
-    import('../scripts/tailwind/prefix.env.js'),
-  ])
-
-  const { existsSync } = await import('node:fs')
-  const { resolve } = await import('node:path')
-
-  const kitRoot = getKitRoot()
-  const projectRoot = findProjectRoot()
-  const { moduleConfigRoot, bootstrapShim, bootstrapGreenfieldShim } = ensureDevKitShims(
-    projectRoot,
-    kitRoot,
-  )
-  const { config } = readWoodsportalConfig(projectRoot)
-  const routesDir = resolve(projectRoot, 'src/routes')
-  const hasTanStackRoutes = existsSync(routesDir)
-
-  // Load vite before plugins: parallel import of vite + @vitejs/plugin-react breaks on Node 20+ (CJS/ESM interop).
-  const { defineConfig } = await importConsumerDep('vite')
-  const [{ default: viteReact }, { TanStackRouterVite }, { default: tailwindcss }] = await Promise.all([
-    importConsumerDep('@vitejs/plugin-react'),
-    importConsumerDep('@tanstack/router-plugin/vite'),
-    importConsumerDep('@tailwindcss/vite'),
-  ])
-
-  return defineConfig(async ({ mode, command }) => {
-    const prefixPlugins = isPrefix(mode)
-      ? [
-          (await import('../scripts/tailwind/prefix-plugin.js')).default(),
-          (await import('../scripts/tailwind/tailwind-content-plugin.js')).default(),
-        ]
-      : []
-
-    return {
-      root: projectRoot,
-      plugins: [
-        bootstrapShimResolver({ bootstrapShim, bootstrapGreenfieldShim, kitRoot }),
-        resolveFromProjectRoot(projectRoot, kitRoot),
-        ...(command === 'serve' && mode === 'dev'
-          ? [sdkLogBridge(), moduleConfigStore(projectRoot)]
-          : []),
-        ...(hasTanStackRoutes ? [TanStackRouterVite({ autoCodeSplitting: false })] : []),
-        viteReact(createDevReactPluginOptions()),
-        tailwindcss(),
-        ...prefixPlugins,
-      ],
-      resolve: {
-        preserveSymlinks: true,
-        dedupe: ['react', 'react-dom'],
-        alias: {
-          '@/dev/module-config': moduleConfigRoot,
-          '@wphs/bootstrap': bootstrapShim,
-          '@wphs/bootstrap-greenfield': bootstrapGreenfieldShim,
-          '@woodsportal/hubspot-kit/dev/bootstrap': bootstrapShim,
-          '@woodsportal/hubspot-kit/dev/bootstrap-greenfield': bootstrapGreenfieldShim,
-          '@wphs/adapter': resolve(projectRoot, config?.dev?.adapter ?? './wphs.adapter.ts'),
-          '@': resolve(projectRoot, './src'),
-        },
-      },
-      optimizeDeps: {
-        include: ['react', 'react-dom', 'react/jsx-dev-runtime', 'react/jsx-runtime'],
-        exclude: [
-          'woodsportal-client-sdk',
-          'woodsportal-client-sdk/auth',
-          'woodsportal-client-sdk/crm',
-        ],
-      },
-      define: {
-        'import.meta.env.VITE_WPHS_MODULE_NAME': JSON.stringify(
-          config?.module?.name ?? config?.theme?.name ?? 'module',
-        ),
-        'process.env.NODE_ENV': JSON.stringify(mode === 'dev' ? 'development' : 'production'),
-        'process.env': {},
-        process: JSON.stringify({ env: {} }),
-      },
-      server: {
-        port: 3000,
-        fs: {
-          allow: [projectRoot, kitRoot],
-        },
-      },
-    }
-  })
-}
+export default createDevServerViteConfig()