@woodsportal/hubspot-kit 1.0.37 → 1.0.39-dev.0

package/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+### CI / CodeBuild
+- **`woodsportal-<env>-cb-hubspot-kit-publish`** — `hubspot-kit-npm-publish.yml` runs `npm run verify` then publishes `@woodsportal/hubspot-kit` (`next` on `dev`, `latest` on `main`). Client-frontend node-push installs kit from npm via `HUBSPOT_KIT_NPM_TAG` override.
+
 ### Module build id (collaborative CDN deploys)
 - **Rename** `.portal-build-id` → `.module-build-id` (channel baseline); `wp migrate --yes` upgrades legacy projects
 - **Auto-bump** on `wp deploy` and `wp build --cdn-only` — `{baseline}.{devSlug}.{seq}` in gitignored `.wphs/state/module-build-id.json`
@@ -19,6 +22,16 @@
 - **CSS entries** — shared `tailwind.css.config.css`; documented never-merge rules on `main.dev.css` / `main.prod.css`
 - **`wp doctor`** — CSS pipeline checks (prefix, `.temp` @source, `skipRuntimeCss`, `module.css` dw utilities, CDN `require_css` warning)
 
+## 1.0.39 — 2026-06-08
+
+### Dev server
+- **Module-config overlay** — sync runtime state on mount and after init (fixes stuck "Loading module config…" when Vite loads duplicate module copies); pin `@woodsportal/hubspot-kit/src/dev-module-config` to `.wphs/.kit-module-config`
+
+## 1.0.38 — 2026-06-08
+
+### Dev server
+- **Module-config overlay** — stop force-resolving `react` / `react-dom` to CJS `index.js` for kit UI under `.wphs/`; fixes `createContext` / named export errors in the browser on `yarn local`
+
 ## 1.0.37 — 2026-06-08
 
 ### Dev server

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woodsportal/hubspot-kit",
-  "version": "1.0.37",
+  "version": "1.0.39-dev.0",
   "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/resolve-consumer-dep.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": "node --import tsx --test 'src/lib/**/*.test.ts' 'src/schema/**/*.test.ts' 'src/vite/**/*.test.ts' 'scripts/portal-build-id.test.mjs' 'scripts/resolve-consumer-dep.test.mjs' 'scripts/vite/ensure-dev-kit-shims.test.mjs' 'scripts/vite/consumer-react-aliases.test.mjs' 'scripts/vite/resolve-from-project-root.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",
@@ -87,12 +87,26 @@
     "vite": "^6.0.0"
   },
   "peerDependenciesMeta": {
-    "@tailwindcss/vite": { "optional": true },
-    "@tanstack/router-plugin": { "optional": true },
-    "@vitejs/plugin-react": { "optional": true },
-    "babel-plugin-react-compiler": { "optional": true },
-    "react": { "optional": true },
-    "react-dom": { "optional": true },
-    "vite": { "optional": true }
+    "@tailwindcss/vite": {
+      "optional": true
+    },
+    "@tanstack/router-plugin": {
+      "optional": true
+    },
+    "@vitejs/plugin-react": {
+      "optional": true
+    },
+    "babel-plugin-react-compiler": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
   }
 }

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

@@ -73,6 +73,7 @@ export async function createDevServerViteConfig(options = {}) {
         alias: {
           ...consumerReactAliases(projectRoot),
           '@/dev/module-config': moduleConfigRoot,
+          '@woodsportal/hubspot-kit/src/dev-module-config': moduleConfigRoot,
           '@wphs/bootstrap': bootstrapShim,
           '@wphs/bootstrap-greenfield': bootstrapGreenfieldShim,
           '@woodsportal/hubspot-kit/dev/bootstrap': bootstrapShim,

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

@@ -2,6 +2,22 @@ import { resolve, sep } from 'node:path'
 
 import { resolveConsumerDep } from '../resolve-consumer-dep.mjs'
 
+/** Let Vite dedupe + optimizeDeps handle React; forced absolute paths serve CJS in the browser. */
+export const SKIP_CONSUMER_RESOLVE_SPECS = new Set([
+  'react',
+  'react-dom',
+  'react/jsx-runtime',
+  'react/jsx-dev-runtime',
+  'react-dom/client',
+  'react/compiler-runtime',
+])
+
+function shouldSkipConsumerResolve(source) {
+  if (SKIP_CONSUMER_RESOLVE_SPECS.has(source)) return true
+  if (source.startsWith('react/') || source.startsWith('react-dom/')) return true
+  return false
+}
+
 /**
  * When Vite transforms kit dev UI (`.wphs/`, package src, or dev-module-config),
  * bare imports must resolve from the consumer project's node_modules.
@@ -29,6 +45,9 @@ export default function resolveFromProjectRoot(projectRoot, kitRoot) {
       if (!isKitUiImporter(importer)) {
         return null
       }
+      if (shouldSkipConsumerResolve(source)) {
+        return null
+      }
       try {
         return resolveConsumerDep(source, projectRoot)
       } catch {

package/scripts/vite/resolve-from-project-root.test.mjs

@@ -0,0 +1,37 @@
+import assert from 'node:assert/strict'
+import { resolve } from 'node:path'
+import { describe, it } from 'node:test'
+
+import { consumerDepFixtureRoot } from '../test-fixtures/consumer-dep-fixture-root.mjs'
+import resolveFromProjectRoot, {
+  SKIP_CONSUMER_RESOLVE_SPECS,
+} from './resolve-from-project-root.js'
+
+describe('resolveFromProjectRoot', () => {
+  const kitRoot = resolve(consumerDepFixtureRoot, 'kit')
+  const kitUiFile = resolve(consumerDepFixtureRoot, '.wphs/.kit-module-config/ui/ModuleConfigNavContext.tsx')
+  const appFile = resolve(consumerDepFixtureRoot, 'src/app.tsx')
+
+  const plugin = resolveFromProjectRoot(consumerDepFixtureRoot, kitRoot)
+  const resolveId = /** @type {(source: string, importer: string) => Promise<string | null>} */ (
+    plugin.resolveId.bind(plugin)
+  )
+
+  it('does not force-resolve react for kit UI (avoids CJS index.js in browser)', async () => {
+    assert.ok(SKIP_CONSUMER_RESOLVE_SPECS.has('react'))
+    assert.equal(await resolveId('react', kitUiFile), null)
+  })
+
+  it('does not force-resolve react/jsx-dev-runtime for kit UI (alias + optimizeDeps)', async () => {
+    assert.equal(await resolveId('react/jsx-dev-runtime', kitUiFile), null)
+  })
+
+  it('still resolves other deps from the consumer for kit UI', async () => {
+    const resolved = await resolveId('vite', kitUiFile)
+    assert.match(resolved ?? '', /node_modules[/\\]vite[/\\]/)
+  })
+
+  it('ignores non-kit importers', async () => {
+    assert.equal(await resolveId('vite', appFile), null)
+  })
+})

package/src/dev-module-config/runtime/module-config-runtime.ts

@@ -64,6 +64,7 @@ export async function initModuleConfigRuntime(): Promise<ModuleConfigState> {
   ])
   state = buildState(schema, defaults, overrides)
   applyRuntimeSideEffects(state)
+  window.dispatchEvent(new CustomEvent(MODULE_CONFIG_CHANGED, { detail: state }))
   return state
 }
 

package/src/dev-module-config/ui/ModuleConfigShell.tsx

@@ -53,6 +53,7 @@ function ModuleConfigShellInner({
     isApplying,
     validationErrors,
     persistenceSource,
+    initError,
     setFieldValue,
     applyChanges,
     discardDraft,
@@ -124,7 +125,11 @@ function ModuleConfigShellInner({
   const developerOptionToggleField = state?.schema.find((field) => field.name === 'developer_option')
 
   if (!state) {
-    return <div className={`p-4 ${hsTypography.helper}`}>Loading module config…</div>
+    return (
+      <div className={`p-4 ${hsTypography.helper}`}>
+        {initError ?? 'Loading module config…'}
+      </div>
+    )
   }
 
   const onExport = () => {

package/src/dev-module-config/ui/use-module-config.ts

@@ -18,6 +18,7 @@ export function useModuleConfig() {
   const [validationErrors, setValidationErrors] = useState<Array<ValidationError>>([])
   const [persistenceSource, setPersistenceSource] = useState<'local' | 'example' | 'empty'>('empty')
   const [isApplying, setIsApplying] = useState(false)
+  const [initError, setInitError] = useState<string | null>(null)
 
   const isDirty =
     JSON.stringify(draftValues) !== JSON.stringify(appliedValues)
@@ -26,6 +27,45 @@ export function useModuleConfig() {
     void loadWorkspaceMeta().then((source) => setPersistenceSource(source ?? 'empty'))
   }, [appliedValues])
 
+  useEffect(() => {
+    let cancelled = false
+
+    const syncFromRuntime = (next: ModuleConfigState) => {
+      if (cancelled) return
+      setState(next)
+      setDraftValues(next.moduleValues)
+      setAppliedValues(next.moduleValues)
+      setValidationErrors([])
+    }
+
+    const existing = getModuleConfigState()
+    if (existing) {
+      syncFromRuntime(existing)
+      return () => {
+        cancelled = true
+      }
+    }
+
+    void ensureModuleConfigReady()
+      .then((ready) => {
+        if (ready) syncFromRuntime(ready)
+      })
+      .catch((error) => {
+        console.error('[module-config] Failed to initialize', error)
+        if (!cancelled) {
+          setInitError(
+            error instanceof Error
+              ? error.message
+              : 'Failed to load module config. Check that /fields.json is available.',
+          )
+        }
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
   useEffect(() => {
     const onChange = (event: Event) => {
       const detail = (event as CustomEvent<ModuleConfigState>).detail
@@ -110,6 +150,7 @@ export function useModuleConfig() {
     isApplying,
     validationErrors,
     persistenceSource,
+    initError,
     setFieldValue,
     applyChanges,
     discardDraft,
@@ -117,8 +158,9 @@ export function useModuleConfig() {
   }
 }
 
-export async function ensureModuleConfigReady() {
+export async function ensureModuleConfigReady(): Promise<ModuleConfigState | null> {
   if (!getModuleConfigState()) {
     await initModuleConfigRuntime()
   }
+  return getModuleConfigState()
 }