@woodsportal/hubspot-kit 1.0.31 → 1.0.34

package/templates/module-hybrid-cdn/src/cdn/app-entry.ts

@@ -1,9 +1,13 @@
 /**
  * CDN application chunk — mounts after vendor.js (HubSpot require_js order).
+ *
+ * Build-time: main.prod.css → app.{buildId}.css (merged into module.css at post-build).
+ * Runtime: skip JS CSS imports — HubSpot serves module.css on published pages.
  */
-import '@/assets/css/main.dev.css'
+import '@/assets/css/main.prod.css'
 
 import { resolvePortalApiEndpoint } from '@/portal/api-endpoint'
+import { ensurePortalCdnStylesheetIfNeeded } from '@/portal/ensure-portal-cdn-stylesheet'
 import { mountPortal } from '@/portal/mount-portal'
 
 declare const __PORTAL_BUILD_ID__: string | undefined
@@ -31,7 +35,14 @@ async function autoMount() {
   if (!document.getElementById('app')) {
     return
   }
-  await mountPortal()
+  await ensurePortalCdnStylesheetIfNeeded()
+  await mountPortal({ skipRuntimeCss: true })
 }
 
-void autoMount()
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => {
+    void autoMount()
+  })
+} else {
+  void autoMount()
+}

package/templates/module-hybrid-cdn/src/features/starter/components/starter-home.tsx

@@ -1,23 +1,21 @@
 import { useStarterPreview } from '../hooks/use-starter-preview'
 import { STARTER_FEATURES, WOODSCLI_ABOUT } from '../content/woodscli-guide-content'
 
-function heroClass(style: ReturnType<typeof useStarterPreview>['heroStyle']): string {
-  if (style === 'minimal') {
-    return 'bg-[var(--mc-bg-shell,#f5f8fa)] text-[var(--mc-text,#33475b)] border-b border-[var(--mc-border,#cbd6e2)]'
-  }
-  if (style === 'bold') {
-    return 'bg-[#1c1c1f] text-white'
-  }
-  return 'bg-gradient-to-br from-[var(--starter-accent,#0091ae)] to-[#ff7a59] text-white'
-}
-
 export function StarterHome() {
   const { title, tagline, showFeatureCards, accentColor, heroStyle } = useStarterPreview()
 
   return (
     <>
       <div style={{ ['--starter-accent' as string]: accentColor }}>
-        <section className={`px-6 py-14 sm:px-10 sm:py-16 ${heroClass(heroStyle)}`}>
+        <section
+          className={
+            heroStyle === 'minimal'
+              ? 'px-6 py-14 sm:px-10 sm:py-16 bg-[var(--mc-bg-shell,#f5f8fa)] text-[var(--mc-text,#33475b)] border-b border-[var(--mc-border,#cbd6e2)]'
+              : heroStyle === 'bold'
+                ? 'px-6 py-14 sm:px-10 sm:py-16 bg-[#1c1c1f] text-white'
+                : 'px-6 py-14 sm:px-10 sm:py-16 bg-gradient-to-br from-[var(--starter-accent,#0091ae)] to-[#ff7a59] text-white'
+          }
+        >
           <div className="mx-auto max-w-4xl">
             <p className="mb-2 text-xs font-semibold uppercase tracking-widest opacity-80">
               {WOODSCLI_ABOUT.package} · local dev

package/templates/module-hybrid-cdn/src/features/starter/hooks/starter-preview-values.ts

@@ -12,18 +12,36 @@ function normalizeHeroStyle(raw: unknown): StarterPreviewValues['heroStyle'] {
   return 'gradient'
 }
 
+/** CONTENT-tab fields may live under a `content` group (fields.json) or flat legacy keys. */
+function readContentField(module: Record<string, unknown>, key: string): unknown {
+  const content = module.content
+  if (content && typeof content === 'object' && key in (content as Record<string, unknown>)) {
+    return (content as Record<string, unknown>)[key]
+  }
+  return module[key]
+}
+
+/** STYLE-tab fields may live under a `styles` group (fields.json) or flat legacy keys. */
+function readStyleField(module: Record<string, unknown>, key: string): unknown {
+  const styles = module.styles
+  if (styles && typeof styles === 'object' && key in (styles as Record<string, unknown>)) {
+    return (styles as Record<string, unknown>)[key]
+  }
+  return module[key]
+}
+
 export function mapStarterPreviewValues(module: Record<string, unknown>): StarterPreviewValues {
-  const accent = module.accent_color as { color?: string } | undefined
+  const accent = readStyleField(module, 'accent_color') as { color?: string } | undefined
 
   return {
-    title: String(module.title ?? 'My HubSpot Portal'),
+    title: String(readContentField(module, 'title') ?? 'My HubSpot Portal'),
     tagline: String(
-      module.tagline ??
+      readContentField(module, 'tagline') ??
         'Customize this preview with Ctrl+Shift+Z, then replace this page with your portal app.',
     ),
-    showFeatureCards: module.show_feature_cards !== false,
+    showFeatureCards: readContentField(module, 'show_feature_cards') !== false,
     accentColor: accent?.color ?? '#0091ae',
-    heroStyle: normalizeHeroStyle(module.hero_style),
+    heroStyle: normalizeHeroStyle(readStyleField(module, 'hero_style')),
   }
 }
 

package/templates/module-hybrid-cdn/src/features/starter/hooks/use-starter-preview.dev.ts

@@ -12,6 +12,7 @@ export function subscribeStarterPreview(
 ): () => void {
   const refresh = () => onChange(mapStarterPreviewValues(getModuleFieldValues()))
 
+  refresh()
   window.addEventListener(MODULE_CONFIG_CHANGED, refresh)
   return () => window.removeEventListener(MODULE_CONFIG_CHANGED, refresh)
 }

package/templates/module-hybrid-cdn/src/hubspot/bootstrap.ts

@@ -1,6 +1,12 @@
 /**
  * Thin HubSpot module.js bootstrap — JS app loads from CDN via require_js in module.html.
+ *
+ * CSS imports are extracted to module.css by the HubSpot Vite build (same pattern as
+ * digitalwoods.io-woodsportal-client-frontend). HubSpot CMS editor does not reliably
+ * load external jsDelivr stylesheets from module.html.
  */
+import '@/assets/css/main.prod.css'
+
 declare global {
   interface Window {
     WoodsPortalHubSpotBootstrap?: { ready: true }

package/templates/module-hybrid-cdn/src/portal/ensure-portal-cdn-stylesheet.ts

@@ -0,0 +1,115 @@
+declare global {
+  interface Window {
+    hubSpotData?: {
+      assetBaseUrl?: string
+      buildId?: string
+      isInEditor?: boolean
+    }
+    hsInEditor?: boolean
+  }
+}
+
+/** Resolve app.{buildId}.css on the CDN mirror (jsDelivr / custom base). */
+export function portalCdnStylesheetUrl(): string | null {
+  const base = window.hubSpotData?.assetBaseUrl?.replace(/\/$/, '')
+  const buildId = window.hubSpotData?.buildId?.trim()
+  if (!base || !buildId) {
+    return null
+  }
+  return `${base}/app.${buildId}.css`
+}
+
+function isHubSpotCmsEditor(): boolean {
+  if (typeof window === 'undefined') {
+    return false
+  }
+  return (
+    window.hubSpotData?.isInEditor === true ||
+    window.hsInEditor === true
+  )
+}
+
+/** True when HubSpot already loaded merged module.css with dw-prefixed portal utilities. */
+export function hasPrefixedPortalStylesLoaded(): boolean {
+  if (typeof document === 'undefined') {
+    return false
+  }
+
+  for (const link of document.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]')) {
+    if (/module\.css/i.test(link.href)) {
+      return true
+    }
+  }
+
+  try {
+    for (const sheet of document.styleSheets) {
+      try {
+        const rules = sheet.cssRules
+        for (let i = 0; i < Math.min(rules.length, 100); i++) {
+          const text = rules[i]?.cssText ?? ''
+          if (text.includes('dw\\:') || text.includes('.dw:')) {
+            return true
+          }
+        }
+      } catch {
+        // Cross-origin stylesheets are not readable.
+      }
+    }
+  } catch {
+    // ignore
+  }
+
+  return false
+}
+
+/** Editor-only fallback when module.css did not load (external CDN CSS blocked in iframe). */
+export function needsPortalCdnStylesheetFallback(): boolean {
+  if (!isHubSpotCmsEditor()) {
+    return false
+  }
+  return !hasPrefixedPortalStylesLoaded()
+}
+
+function waitForStylesheet(link: HTMLLinkElement): Promise<void> {
+  if (link.sheet) {
+    return Promise.resolve()
+  }
+
+  return new Promise((resolve) => {
+    link.addEventListener('load', () => resolve(), { once: true })
+    link.addEventListener('error', () => resolve(), { once: true })
+  })
+}
+
+/** Inject CDN app.{buildId}.css when HubSpot editor preview skipped module.css. */
+export async function ensurePortalCdnStylesheet(): Promise<void> {
+  const href = portalCdnStylesheetUrl()
+  if (!href) {
+    return
+  }
+
+  const marker = 'data-portal-cdn-css'
+  const existing = document.querySelector<HTMLLinkElement>(`link[${marker}]`)
+  if (existing) {
+    if (existing.href === href) {
+      await waitForStylesheet(existing)
+      return
+    }
+    existing.remove()
+  }
+
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = href
+  link.crossOrigin = 'anonymous'
+  link.setAttribute(marker, 'true')
+  document.head.appendChild(link)
+  await waitForStylesheet(link)
+}
+
+export async function ensurePortalCdnStylesheetIfNeeded(): Promise<void> {
+  if (!needsPortalCdnStylesheetFallback()) {
+    return
+  }
+  await ensurePortalCdnStylesheet()
+}

package/templates/module-hybrid-cdn/src/portal/mount-portal.tsx

@@ -1,12 +1,42 @@
 import ReactDOM from 'react-dom/client'
 
+import isPrefix from '@woodsportal/hubspot-kit/scripts/tailwind/prefix.env.js'
+
 import { App } from '@/app'
 
-/** Production mount — same App shell as woodsportal-client-frontend CDN app chunk. */
-export async function mountPortal() {
-  const root = document.getElementById('app')
-  if (!root) {
+async function loadCss() {
+  if (isPrefix(import.meta.env.MODE)) {
+    await import('@/assets/css/main.prod.css')
+  } else {
+    await import('@/assets/css/main.dev.css')
+  }
+}
+
+export type MountPortalOptions = {
+  /** HubSpot serves module.css — skip duplicate global styles on CDN app chunk */
+  includeGlobalStyles?: boolean
+  /** HubSpot loads app styles via module.css — skip runtime CSS imports in CDN app chunk */
+  skipRuntimeCss?: boolean
+  /** Kit dev entry renders App separately with module-config shell */
+  skipAppRender?: boolean
+}
+
+/** Mount the portal into `#app` (CDN app chunk, monolith, or production paths). */
+export async function mountPortal(options: MountPortalOptions = {}) {
+  const { skipRuntimeCss = false, skipAppRender = false } = options
+
+  if (!skipRuntimeCss) {
+    await loadCss()
+  }
+
+  if (skipAppRender) {
+    return
+  }
+
+  const rootElement = document.getElementById('app')
+  if (!rootElement) {
     return
   }
-  ReactDOM.createRoot(root).render(<App />)
+
+  ReactDOM.createRoot(rootElement).render(<App />)
 }

package/templates/module-hybrid-cdn/woodscli.json

@@ -2,7 +2,7 @@
   "configVersion": 1,
   "projectType": "module-hybrid-cdn",
   "module": {"name": "my-portal-module", "uploadPath": "dw-modules/my-portal-module.module", "outDir": "dist/MyPortal.Module"},
-  "cdn": {"mode": "jsdelivr", "buildIdFile": ".portal-build-id", "mirror": "portal.cdn.json"},
+  "cdn": {"mode": "jsdelivr", "buildIdFile": ".module-build-id", "mirror": "portal.cdn.json"},
   "entries": {"app": "src/cdn/app-entry.ts", "vendor": "src/cdn/vendor-entry.ts", "hubspotBootstrap": "src/hubspot/bootstrap.ts", "localDev": "src/main.tsx"},
   "dev": {"moduleConfigDir": ".wphs", "adapter": "./wphs.adapter.ts", "fieldsJson": "public/fields.json"}
 }

package/templates/module-monolith/public/fields.json

@@ -23,22 +23,29 @@
     "default": true
   },
   {
-    "name": "accent_color",
-    "label": "Accent color",
-    "type": "color",
+    "type": "group",
+    "name": "styles",
+    "label": "Styles",
     "tab": "STYLE",
-    "default": { "color": "#0091ae", "opacity": 100 }
-  },
-  {
-    "name": "hero_style",
-    "label": "Hero style",
-    "type": "choice",
-    "tab": "STYLE",
-    "choices": [
-      ["gradient", "Gradient"],
-      ["minimal", "Minimal"],
-      ["bold", "Bold"]
-    ],
-    "default": "gradient"
+    "children": [
+      {
+        "name": "accent_color",
+        "label": "Accent color",
+        "type": "color",
+        "default": { "color": "#0091ae", "opacity": 100 }
+      },
+      {
+        "name": "hero_style",
+        "label": "Hero style",
+        "type": "choice",
+        "display": "select",
+        "choices": [
+          ["gradient", "Gradient"],
+          ["minimal", "Minimal"],
+          ["bold", "Bold"]
+        ],
+        "default": "gradient"
+      }
+    ]
   }
 ]

package/templates/module-monolith/public/meta.json

@@ -0,0 +1,9 @@
+{
+  "label": "WoodsPortal monolith module",
+  "css_assets": [],
+  "external_js": [],
+  "global": false,
+  "host_template_types": ["PAGE", "BLOG_POST", "BLOG_LISTING"],
+  "content_types": ["SITE_PAGE", "LANDING_PAGE", "BLOG_POST", "BLOG_LISTING"],
+  "is_available_for_new_content": true
+}

package/templates/module-monolith/src/features/starter/components/starter-home.tsx

@@ -1,23 +1,21 @@
 import { useStarterPreview } from '../hooks/use-starter-preview'
 import { STARTER_FEATURES, WOODSCLI_ABOUT } from '../content/woodscli-guide-content'
 
-function heroClass(style: ReturnType<typeof useStarterPreview>['heroStyle']): string {
-  if (style === 'minimal') {
-    return 'bg-[var(--mc-bg-shell,#f5f8fa)] text-[var(--mc-text,#33475b)] border-b border-[var(--mc-border,#cbd6e2)]'
-  }
-  if (style === 'bold') {
-    return 'bg-[#1c1c1f] text-white'
-  }
-  return 'bg-gradient-to-br from-[var(--starter-accent,#0091ae)] to-[#ff7a59] text-white'
-}
-
 export function StarterHome() {
   const { title, tagline, showFeatureCards, accentColor, heroStyle } = useStarterPreview()
 
   return (
     <>
       <div style={{ ['--starter-accent' as string]: accentColor }}>
-        <section className={`px-6 py-14 sm:px-10 sm:py-16 ${heroClass(heroStyle)}`}>
+        <section
+          className={
+            heroStyle === 'minimal'
+              ? 'px-6 py-14 sm:px-10 sm:py-16 bg-[var(--mc-bg-shell,#f5f8fa)] text-[var(--mc-text,#33475b)] border-b border-[var(--mc-border,#cbd6e2)]'
+              : heroStyle === 'bold'
+                ? 'px-6 py-14 sm:px-10 sm:py-16 bg-[#1c1c1f] text-white'
+                : 'px-6 py-14 sm:px-10 sm:py-16 bg-gradient-to-br from-[var(--starter-accent,#0091ae)] to-[#ff7a59] text-white'
+          }
+        >
           <div className="mx-auto max-w-4xl">
             <p className="mb-2 text-xs font-semibold uppercase tracking-widest opacity-80">
               {WOODSCLI_ABOUT.package} · local dev

package/templates/module-monolith/src/features/starter/hooks/starter-preview-values.ts

@@ -12,18 +12,36 @@ function normalizeHeroStyle(raw: unknown): StarterPreviewValues['heroStyle'] {
   return 'gradient'
 }
 
+/** CONTENT-tab fields may live under a `content` group (fields.json) or flat legacy keys. */
+function readContentField(module: Record<string, unknown>, key: string): unknown {
+  const content = module.content
+  if (content && typeof content === 'object' && key in (content as Record<string, unknown>)) {
+    return (content as Record<string, unknown>)[key]
+  }
+  return module[key]
+}
+
+/** STYLE-tab fields may live under a `styles` group (fields.json) or flat legacy keys. */
+function readStyleField(module: Record<string, unknown>, key: string): unknown {
+  const styles = module.styles
+  if (styles && typeof styles === 'object' && key in (styles as Record<string, unknown>)) {
+    return (styles as Record<string, unknown>)[key]
+  }
+  return module[key]
+}
+
 export function mapStarterPreviewValues(module: Record<string, unknown>): StarterPreviewValues {
-  const accent = module.accent_color as { color?: string } | undefined
+  const accent = readStyleField(module, 'accent_color') as { color?: string } | undefined
 
   return {
-    title: String(module.title ?? 'My HubSpot Portal'),
+    title: String(readContentField(module, 'title') ?? 'My HubSpot Portal'),
     tagline: String(
-      module.tagline ??
+      readContentField(module, 'tagline') ??
         'Customize this preview with Ctrl+Shift+Z, then replace this page with your portal app.',
     ),
-    showFeatureCards: module.show_feature_cards !== false,
+    showFeatureCards: readContentField(module, 'show_feature_cards') !== false,
     accentColor: accent?.color ?? '#0091ae',
-    heroStyle: normalizeHeroStyle(module.hero_style),
+    heroStyle: normalizeHeroStyle(readStyleField(module, 'hero_style')),
   }
 }
 

package/templates/module-monolith/src/features/starter/hooks/use-starter-preview.dev.ts

@@ -12,6 +12,7 @@ export function subscribeStarterPreview(
 ): () => void {
   const refresh = () => onChange(mapStarterPreviewValues(getModuleFieldValues()))
 
+  refresh()
   window.addEventListener(MODULE_CONFIG_CHANGED, refresh)
   return () => window.removeEventListener(MODULE_CONFIG_CHANGED, refresh)
 }

package/templates/module-monolith/woodscli.json

@@ -8,7 +8,7 @@
   },
   "cdn": {
     "mode": "none",
-    "buildIdFile": ".portal-build-id",
+    "buildIdFile": ".module-build-id",
     "mirror": "portal.cdn.json"
   },
   "entries": {

package/vite/vite.config.dev.mjs

@@ -1,11 +1,7 @@
-import { defineConfig } from 'vite'
-import viteReact from '@vitejs/plugin-react'
-import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
 import { existsSync } from 'node:fs'
-import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import tailwindcss from '@tailwindcss/vite'
+import { resolve } from 'node:path'
 
+import { importConsumerDep } from '../scripts/resolve-consumer-dep.mjs'
 import tailwindPrefixPlugin from '../scripts/tailwind/prefix-plugin.js'
 import TailwindContentPlugin from '../scripts/tailwind/tailwind-content-plugin.js'
 import sdkLogBridge from '../scripts/vite/sdk-log-bridge.js'
@@ -25,8 +21,18 @@ const { config } = readWoodsportalConfig(projectRoot)
 const routesDir = resolve(projectRoot, 'src/routes')
 const hasTanStackRoutes = existsSync(routesDir)
 
-export default defineConfig(({ mode, command }) => {
-  return {
+export default loadDevViteConfig()
+
+async function loadDevViteConfig() {
+  // 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(({ mode, command }) => ({
     root: projectRoot,
     plugins: [
       bootstrapShimResolver({ bootstrapShim, bootstrapGreenfieldShim, kitRoot }),
@@ -72,5 +78,5 @@ export default defineConfig(({ mode, command }) => {
         allow: [projectRoot, kitRoot],
       },
     },
-  }
-})
+  }))
+}