@woodsportal/hubspot-kit 1.0.2

package/scripts/vite/ensure-dev-kit-shims.js

@@ -0,0 +1,49 @@
+import { existsSync, lstatSync, mkdirSync, rmSync, symlinkSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+import { moduleConfigPaths } from '../module-config-dir.mjs'
+
+function ensureSymlink(shimPath, target, { directory }) {
+  try {
+    if (existsSync(shimPath)) {
+      const stat = lstatSync(shimPath)
+      if (stat.isSymbolicLink()) {
+        return shimPath
+      }
+      rmSync(shimPath, { recursive: !directory, force: true })
+    }
+
+    mkdirSync(resolve(shimPath, '..'), { recursive: true })
+    symlinkSync(target, shimPath, directory ? 'dir' : 'file')
+    return shimPath
+  } catch {
+    return target
+  }
+}
+
+/**
+ * Symlink kit dev sources into the consumer repo so Vite serves them in-root
+ * (avoids @fs/ + broken react/jsx-dev-runtime / react-dom CJS interop).
+ */
+export function ensureDevKitShims(projectRoot, kitRoot) {
+  const { devDir } = moduleConfigPaths(projectRoot)
+
+  const moduleConfigRoot = ensureSymlink(
+    resolve(devDir, '.kit-module-config'),
+    resolve(kitRoot, 'src/dev-module-config'),
+    { directory: true },
+  )
+
+  const bootstrapShim = ensureSymlink(
+    resolve(devDir, '.kit-bootstrap.tsx'),
+    resolve(kitRoot, 'src/dev/bootstrap.tsx'),
+    { directory: false },
+  )
+
+  return { moduleConfigRoot, bootstrapShim }
+}
+
+/** @deprecated use ensureDevKitShims */
+export function ensureDevModuleConfigShim(projectRoot, kitRoot) {
+  return ensureDevKitShims(projectRoot, kitRoot).moduleConfigRoot
+}

package/scripts/vite/ensure-dev-module-config-shim.js

@@ -0,0 +1 @@
+export { ensureDevKitShims, ensureDevModuleConfigShim } from './ensure-dev-kit-shims.js'

package/scripts/vite/module-config-store.js

@@ -0,0 +1,242 @@
+/** @typedef {import('vite').Plugin} Plugin */
+
+import fs from 'node:fs'
+import fsp from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { moduleConfigPaths } from '../module-config-dir.mjs'
+
+const CONFIG_API = '/__dev/module-config'
+const BRANDING_API = '/__dev/branding-asset'
+const MAX_BODY_BYTES = 5 * 1024 * 1024
+
+/**
+ * Dev-only Vite middleware: persist module config + branding assets under dev.moduleConfigDir.
+ *
+ * @param {string} [projectRoot]
+ * @returns {Plugin}
+ */
+export default function moduleConfigStore(projectRoot) {
+  const root = projectRoot ?? path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..')
+  const {
+    moduleConfigDir,
+    devDir,
+    configDir,
+    localConfigPath,
+    exampleConfigPath,
+    assetsDir,
+    brandingAssetsUrlPrefix,
+    legacyBrandingAssetsUrlPrefixes = [],
+  } = moduleConfigPaths(root)
+
+  const legacyPrefixes = Array.isArray(legacyBrandingAssetsUrlPrefixes)
+    ? legacyBrandingAssetsUrlPrefixes
+    : []
+
+  return {
+    name: 'woodsportal-module-config-store',
+    apply: 'serve',
+    configureServer(server) {
+      ensureDirSync(devDir)
+      ensureDirSync(configDir)
+      ensureDirSync(assetsDir)
+
+      server.middlewares.use((req, res, next) => {
+        const url = req.url ?? ''
+        const assetsPrefix = [brandingAssetsUrlPrefix, ...legacyPrefixes].find((prefix) =>
+          url.startsWith(prefix),
+        )
+        if (!assetsPrefix) {
+          next()
+          return
+        }
+
+        const relative = decodeURIComponent(url.slice(assetsPrefix.length).split('?')[0] ?? '')
+        if (!relative || relative.includes('..')) {
+          res.statusCode = 400
+          res.end('Invalid path')
+          return
+        }
+
+        const filePath = path.join(assetsDir, relative)
+        if (!filePath.startsWith(assetsDir) || !fs.existsSync(filePath)) {
+          res.statusCode = 404
+          res.end('Not found')
+          return
+        }
+
+        const ext = path.extname(filePath).toLowerCase()
+        const types = {
+          '.png': 'image/png',
+          '.jpg': 'image/jpeg',
+          '.jpeg': 'image/jpeg',
+          '.gif': 'image/gif',
+          '.webp': 'image/webp',
+          '.svg': 'image/svg+xml',
+        }
+        res.setHeader('Content-Type', types[ext] ?? 'application/octet-stream')
+        fs.createReadStream(filePath).pipe(res)
+      })
+
+      server.middlewares.use(BRANDING_API, (req, res, next) => {
+        if (req.method !== 'POST') {
+          next()
+          return
+        }
+
+        readBody(req, res, async (body) => {
+          try {
+            const payload = JSON.parse(body)
+            const filename = sanitizeFilename(String(payload.filename ?? 'upload.bin'))
+            const data = String(payload.data ?? '')
+            const buffer = Buffer.from(data, 'base64')
+            if (buffer.length > MAX_BODY_BYTES) {
+              res.statusCode = 413
+              res.end('Payload too large')
+              return
+            }
+
+            const filePath = path.join(assetsDir, filename)
+            const tmpPath = `${filePath}.tmp`
+            await fsp.writeFile(tmpPath, buffer)
+            await fsp.rename(tmpPath, filePath)
+
+            writeJson(res, 200, {
+              src: `${brandingAssetsUrlPrefix}${encodeURIComponent(filename)}`,
+              filename,
+            })
+          } catch {
+            res.statusCode = 400
+            res.end('Invalid JSON')
+          }
+        })
+      })
+
+      server.middlewares.use(CONFIG_API, (req, res, next) => {
+        if (req.method === 'GET') {
+          void (async () => {
+            const local = await readConfigRecord(localConfigPath, 'local')
+            if (local) {
+              writeJson(res, 200, local)
+              return
+            }
+            const example = await readConfigRecord(exampleConfigPath, 'example')
+            if (example) {
+              writeJson(res, 200, example)
+              return
+            }
+            writeJson(res, 200, { version: 1, module: {}, updatedAt: null, source: 'empty' })
+          })()
+          return
+        }
+
+        if (req.method === 'PUT') {
+          readBody(req, res, (body) => {
+            void (async () => {
+              try {
+                const parsed = JSON.parse(body)
+                const record = {
+                  version: Number(parsed.version ?? 1),
+                  module: parsed.module ?? {},
+                  updatedAt: new Date().toISOString(),
+                  source: 'local',
+                }
+                await writeJsonAtomic(localConfigPath, record)
+                writeJson(res, 200, record)
+              } catch {
+                res.statusCode = 400
+                res.end('Invalid JSON')
+              }
+            })()
+          })
+          return
+        }
+
+        if (req.method === 'DELETE') {
+          void (async () => {
+            try {
+              if (fs.existsSync(localConfigPath)) {
+                await fsp.unlink(localConfigPath)
+              }
+              res.statusCode = 204
+              res.end()
+            } catch {
+              res.statusCode = 500
+              res.end('Delete failed')
+            }
+          })()
+          return
+        }
+
+        next()
+      })
+
+      console.log(
+        `\n\x1b[90m[module-config-store]\x1b[0m ${moduleConfigDir}/config/module-config.local.json + ${moduleConfigDir}/assets/branding/\n`,
+      )
+    },
+  }
+}
+
+function writeJson(res, status, payload) {
+  res.statusCode = status
+  res.setHeader('Content-Type', 'application/json')
+  res.end(JSON.stringify(payload))
+}
+
+function ensureDirSync(dir) {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true })
+  }
+}
+
+function sanitizeFilename(name) {
+  const base = path.basename(name).replace(/[^a-zA-Z0-9._-]/g, '-')
+  return base || 'upload.bin'
+}
+
+function readBody(req, res, onEnd) {
+  const chunks = []
+  let size = 0
+  req.on('data', (chunk) => {
+    size += chunk.length
+    if (size > MAX_BODY_BYTES) {
+      res.statusCode = 413
+      res.end('Payload too large')
+      req.destroy()
+      return
+    }
+    chunks.push(chunk)
+  })
+  req.on('end', () => {
+    onEnd(Buffer.concat(chunks).toString('utf8'))
+  })
+  req.on('error', () => {
+    res.statusCode = 500
+    res.end('Request error')
+  })
+}
+
+async function readConfigRecord(filePath, source) {
+  try {
+    const raw = await fsp.readFile(filePath, 'utf8')
+    const parsed = JSON.parse(raw)
+    return {
+      version: Number(parsed.version ?? 1),
+      module: parsed.module ?? {},
+      updatedAt: parsed.updatedAt ?? null,
+      source,
+    }
+  } catch {
+    return null
+  }
+}
+
+async function writeJsonAtomic(filePath, record) {
+  const dir = path.dirname(filePath)
+  ensureDirSync(dir)
+  const tmpPath = `${filePath}.tmp`
+  await fsp.writeFile(tmpPath, JSON.stringify(record, null, 2), 'utf8')
+  await fsp.rename(tmpPath, filePath)
+}

package/scripts/vite/plugins.d.ts

@@ -0,0 +1,9 @@
+declare module './scripts/vite/sdk-log-bridge.js' {
+  import type { Plugin } from 'vite'
+  export default function sdkLogBridge(): Plugin
+}
+
+declare module './scripts/vite/module-config-store.js' {
+  import type { Plugin } from 'vite'
+  export default function moduleConfigStore(projectRoot?: string): Plugin
+}

package/scripts/vite/portal-build-shared.js

@@ -0,0 +1,110 @@
+/**
+ * Shared Vite options for HubSpot portal builds (CDN + module).
+ */
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import tailwindPrefixPlugin from '../tailwind/prefix-plugin.js'
+import TailwindContentPlugin from '../tailwind/tailwind-content-plugin.js'
+import isPrefix from '../tailwind/prefix.env.js'
+import { portalBuildId as resolveBuildId } from '../resolve-portal-build-id.mjs'
+import { nodeEnvForPortalMode } from '../portal-env-mode.mjs'
+import { findProjectRoot } from '../project-root.mjs'
+import { importConsumerDep } from '../resolve-consumer-dep.mjs'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const root = findProjectRoot()
+
+const [{ default: viteReact }, { TanStackRouterVite }, { default: tailwindcss }] =
+  await Promise.all([
+    importConsumerDep('@vitejs/plugin-react'),
+    importConsumerDep('@tanstack/router-plugin/vite'),
+    importConsumerDep('@tailwindcss/vite'),
+  ])
+
+export function portalBuildId() {
+  return resolveBuildId()
+}
+
+export function portalDefine(mode) {
+  return {
+    'process.env.NODE_ENV': JSON.stringify(nodeEnvForPortalMode(mode)),
+    'process.env': {},
+    process: JSON.stringify({ env: {} }),
+    __PORTAL_BUILD_ID__: JSON.stringify(portalBuildId()),
+  }
+}
+
+function prodDevModuleConfigRouteStub(mode) {
+  if (!isPrefix(mode)) {
+    return null
+  }
+  const stub = resolve(root, 'src/routes/dev.module-config.prod-stub.tsx')
+  return {
+    name: 'woodsportal-prod-dev-route-stub',
+    enforce: 'pre',
+    resolveId(source) {
+      if (
+        source === './routes/dev.module-config' ||
+        source.endsWith('/routes/dev.module-config') ||
+        source.endsWith('/routes/dev.module-config.tsx')
+      ) {
+        return stub
+      }
+      return null
+    },
+  }
+}
+
+export function portalPlugins(mode, { codeSplitting = false, routeFileIgnorePattern } = {}) {
+  const routeIgnore = routeFileIgnorePattern ?? (isPrefix(mode) ? 'dev\\.' : undefined)
+  return [
+    prodDevModuleConfigRouteStub(mode),
+    TanStackRouterVite({
+      autoCodeSplitting: codeSplitting,
+      ...(routeIgnore ? { routeFileIgnorePattern: routeIgnore } : {}),
+    }),
+    viteReact({
+      babel: {
+        plugins: ['babel-plugin-react-compiler'],
+      },
+    }),
+    tailwindcss(),
+    ...(isPrefix(mode)
+      ? [tailwindPrefixPlugin(), TailwindContentPlugin()]
+      : []),
+  ]
+}
+
+export function portalResolve(mode) {
+  const kitRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../..')
+  /** @type {import('vite').AliasOptions} */
+  const alias = [
+    {
+      find: '@wphs/adapter',
+      replacement: resolve(root, './wphs.adapter.ts'),
+    },
+    {
+      find: '@/dev/module-config',
+      replacement: resolve(kitRoot, 'src/dev-module-config'),
+    },
+    {
+      find: '@',
+      replacement: resolve(root, './src'),
+    },
+  ]
+
+  const rumEnabled =
+    process.env.VITE_DATADOG_RUM_ENABLED === 'true' ||
+    process.env.VITE_DATADOG_RUM_ENABLED === '1'
+
+  if (!rumEnabled) {
+    alias.push({
+      find: '@datadog/browser-rum',
+      replacement: resolve(root, 'src/integrations/datadog-browser-rum-stub.ts'),
+    })
+  }
+
+  return { alias }
+}
+
+export { root, __dirname }

package/scripts/vite/react-dev-plugin-options.js

@@ -0,0 +1,21 @@
+/**
+ * Shared @vitejs/plugin-react options for local dev.
+ * Kit dev-module-config must skip react-compiler (CJS/ESM interop when loaded from kit path)
+ * but still use the React plugin's Babel JSX pipeline — do not use plugin `exclude`.
+ */
+const DEV_KIT_UI_RE = /[/\\]dev-module-config[/\\]|[/\\]\.kit-bootstrap\.tsx$|[/\\]dev[/\\]bootstrap\.tsx$/
+
+export function createDevReactPluginOptions() {
+  return {
+    babel: {
+      plugins: [
+        [
+          'babel-plugin-react-compiler',
+          {
+            sources: (filename) => !DEV_KIT_UI_RE.test(filename),
+          },
+        ],
+      ],
+    },
+  }
+}

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

@@ -0,0 +1,31 @@
+import { createRequire } from 'node:module'
+import { resolve } 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).
+ */
+export default function resolveFromProjectRoot(projectRoot, kitRoot) {
+  const require = createRequire(pathToFileURL(resolve(projectRoot, 'package.json')))
+  const kitRootNorm = resolve(kitRoot)
+
+  return {
+    name: 'wp-resolve-from-project-root',
+    enforce: 'pre',
+    resolveId(source, importer) {
+      if (!importer) return null
+      if (source.startsWith('.') || source.startsWith('/') || source.startsWith('\0')) {
+        return null
+      }
+      if (!resolve(importer).startsWith(kitRootNorm)) {
+        return null
+      }
+      try {
+        return require.resolve(source)
+      } catch {
+        return null
+      }
+    },
+  }
+}

package/scripts/vite/sdk-log-bridge.js

@@ -0,0 +1,104 @@
+/** @typedef {import('vite').Plugin} Plugin */
+
+const SDK_LOG_PATH = '/__sdk-log'
+
+const LEVEL_STYLE = {
+  debug: { color: '\x1b[90m', label: 'DEBUG' },
+  info: { color: '\x1b[36m', label: 'INFO ' },
+  warn: { color: '\x1b[33m', label: 'WARN ' },
+  error: { color: '\x1b[31m', label: 'ERROR' },
+}
+
+/**
+ * Dev-only Vite middleware: browser SDK logs → Vite terminal.
+ * Active when running `yarn dev` / `vite serve` in development mode.
+ *
+ * @returns {Plugin}
+ */
+export default function sdkLogBridge() {
+  return {
+    name: 'woodsportal-sdk-log-bridge',
+    apply: 'serve',
+    configureServer(server) {
+      server.middlewares.use(SDK_LOG_PATH, (req, res, next) => {
+        if (req.method !== 'POST') {
+          if (req.method === 'GET' || req.method === 'HEAD') {
+            res.statusCode = 405
+            res.setHeader('Allow', 'POST')
+            res.end('Method Not Allowed')
+            return
+          }
+          next()
+          return
+        }
+
+        const chunks = []
+        req.on('data', (chunk) => chunks.push(chunk))
+        req.on('end', () => {
+          try {
+            const body = Buffer.concat(chunks).toString('utf8')
+            const entry = JSON.parse(body)
+            printSdkLog(entry)
+            res.statusCode = 204
+            res.end()
+          } catch {
+            res.statusCode = 400
+            res.end('Invalid JSON')
+          }
+        })
+        req.on('error', () => {
+          res.statusCode = 500
+          res.end('Request error')
+        })
+      })
+
+      console.log(
+        '\n\x1b[90m[sdk-log-bridge]\x1b[0m WoodsPortal SDK runtime logs → this terminal\n',
+      )
+    },
+  }
+}
+
+/**
+ * @param {{ level?: string, context?: string, message?: string, meta?: unknown, error?: unknown }} entry
+ */
+function printSdkLog(entry) {
+  const level = entry.level ?? 'info'
+  const style = LEVEL_STYLE[level] ?? LEVEL_STYLE.info
+  const context = entry.context ?? 'sdk'
+  const reset = '\x1b[0m'
+  const dim = '\x1b[90m'
+  const head = `${style.color}${style.label}${reset} ${dim}[woodsportal-sdk]${reset} ${context}`
+
+  if (level === 'error') {
+    const parts = [head]
+    if (entry.error != null) {
+      parts.push(formatPayload(entry.error))
+    }
+    if (entry.meta != null && Object.keys(entry.meta).length > 0) {
+      parts.push(formatPayload(entry.meta))
+    }
+    console.error(parts.join(' '))
+    return
+  }
+
+  const line = [head]
+  if (entry.message) {
+    line.push(entry.message)
+  }
+  if (entry.meta != null && Object.keys(entry.meta).length > 0) {
+    line.push(formatPayload(entry.meta))
+  }
+  console.log(line.join(' '))
+}
+
+function formatPayload(value) {
+  if (typeof value === 'string') {
+    return value
+  }
+  try {
+    return JSON.stringify(value)
+  } catch {
+    return String(value)
+  }
+}

package/scripts/watch-hubspot.mjs

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+/**
+ * HubSpot CMS watch — uses woodscli.json upload paths.
+ */
+import { spawn, spawnSync } from 'node:child_process'
+import { watch } from 'node:fs'
+import { resolve } from 'node:path'
+
+import { moduleOutDir, moduleUploadPath, readWoodsportalConfig, themeUploadPath } from './read-woodsportal-config.mjs'
+
+const { root, config } = readWoodsportalConfig()
+const rebuild = process.argv.includes('--rebuild')
+const isProd = process.argv.includes('--prod')
+const buildScript = isProd ? 'build:prod' : 'build:dev'
+
+const isTheme = config?.projectType === 'theme-starter'
+const hubspotModulePath = moduleOutDir(root)
+const hubspotUploadTarget = moduleUploadPath(root)
+const theme = themeUploadPath(root)
+
+const watchRoots = isTheme
+  ? [theme.srcDir]
+  : ['src', 'public'].map((dir) => resolve(root, dir))
+
+function log(msg) {
+  console.log(`[watch] ${msg}`)
+}
+
+function runYarn(script) {
+  const result = spawnSync('yarn', [script], { cwd: root, stdio: 'inherit' })
+  if (result.status !== 0) process.exit(result.status ?? 1)
+}
+
+function runBuild() {
+  if (isTheme) {
+    log('Theme project — no module build step')
+    return
+  }
+  log(`Running ${buildScript} …`)
+  runYarn(buildScript)
+}
+
+function startCmsWatch() {
+  const src = isTheme ? theme.srcDir : hubspotModulePath
+  const target = isTheme ? theme.uploadPath : hubspotUploadTarget
+  log(`Starting hs cms watch ${src} → ${target}`)
+  return spawn('hs', ['cms', 'watch', src, target], { cwd: root, stdio: 'inherit' })
+}
+
+function startRebuildWatcher() {
+  let debounceTimer = null
+  let building = false
+  let pending = false
+
+  const triggerBuild = () => {
+    if (building) {
+      pending = true
+      return
+    }
+    building = true
+    try {
+      runBuild()
+    } finally {
+      building = false
+      if (pending) {
+        pending = false
+        triggerBuild()
+      }
+    }
+  }
+
+  const scheduleBuild = () => {
+    if (debounceTimer) clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(triggerBuild, 500)
+  }
+
+  for (const watchRoot of watchRoots) {
+    watch(watchRoot, { recursive: true }, () => scheduleBuild())
+  }
+}
+
+if (!isTheme) runBuild()
+const cms = startCmsWatch()
+if (rebuild && !isTheme) startRebuildWatcher()
+
+cms.on('exit', (code) => process.exit(code ?? 0))