@symbo.ls/brender 3.8.9 → 3.14.0

package/render.js

@@ -15,7 +15,7 @@ let _funcqlPlugin = null
 const getFuncqlPlugin = async () => {
   if (_funcqlPlugin) return _funcqlPlugin
   try {
-    const mod = await import('@domql/funcql')
+    const mod = await import('@symbo.ls/funcql')
     _funcqlPlugin = mod.funcqlPlugin
     return _funcqlPlugin
   } catch {
@@ -23,7 +23,7 @@ const getFuncqlPlugin = async () => {
   }
 }
 import { parseHTML } from 'linkedom'
-import createEmotionInstance from '@emotion/css/create-instance'
+import { css, injectGlobal, reset as resetCss } from '@symbo.ls/css'
 
 // Lightweight SSR polyglot functions — resolve translations from context
 // without needing the full polyglot plugin runtime
@@ -244,7 +244,7 @@ const resolveDomqlPackage = (ws, pkg, ...subpath) => {
   if (ws.isMonorepo) {
     return resolve(ws.monorepoRoot, 'packages', 'domql', 'packages', pkg, ...subpath)
   }
-  const pkgJson = tryRequireResolve(ws, `@domql/${pkg}/package.json`)
+  const pkgJson = tryRequireResolve(ws, `@symbo.ls/${pkg}/package.json`)
   if (pkgJson) return resolve(dirname(pkgJson), ...subpath)
   return null
 }
@@ -361,9 +361,9 @@ const bundleCreateDomql = async () => {
           }
         }
       })
-      // Resolve @domql/* packages
+      // Resolve @symbo.ls/* packages
       build.onResolve({ filter: /^@domql\// }, args => {
-        const pkg = args.path.replace('@domql/', '')
+        const pkg = args.path.replace('@symbo.ls/', '')
         if (ws.isMonorepo) {
           const src = resolve(ws.monorepoRoot, 'packages', 'domql', 'packages', pkg, 'src', 'index.js')
           if (existsSync(src)) return { path: src }
@@ -472,7 +472,7 @@ const bundleCreateDomql = async () => {
         let contents = readFileSync(args.path, 'utf8')
         contents = contents.replace(
           /import\s*\{\s*Link\s*\}\s*from\s*['"]smbls['"]/,
-          `const Link = { tag: 'a', attr: { href: (el) => el.props?.href } }`
+          `const Link = { tag: 'a', attr: { href: (el) => el.href } }`
         )
         return { contents, loader: 'js' }
       })
@@ -545,9 +545,9 @@ const UIKIT_STUBS = {
   Link: {
     tag: 'a',
     attr: {
-      href: (el) => el.props?.href,
-      target: (el) => el.props?.target,
-      rel: (el) => el.props?.rel
+      href: (el) => el.href,
+      target: (el) => el.target,
+      rel: (el) => el.rel
     }
   },
   A: { extends: 'Link' },
@@ -556,14 +556,14 @@ const UIKIT_STUBS = {
     tag: 'img',
     attr: {
       src: (el) => {
-        let src = el.props?.src
+        let src = el.src
         if (typeof src === 'string' && src.includes('{{')) {
           src = el.call('replaceLiteralsWithObjectFields', src, el.state)
         }
         return src
       },
-      alt: (el) => el.props?.alt,
-      loading: (el) => el.props?.loading
+      alt: (el) => el.alt,
+      loading: (el) => el.loading
     }
   },
   Image: { extends: 'Img' },
@@ -769,15 +769,8 @@ export const render = async (data, options = {}) => {
     }
   }
 
-  // Create SSR emotion instance with speedy: false.
-  // In linkedom, emotion's insertRule() doesn't handle @media rules properly,
-  // so responsive CSS is lost. Non-speedy mode uses text nodes instead,
-  // which preserves @media rules in cache.inserted as strings.
-  const ssrEmotion = createEmotionInstance({
-    key: 'smbls',
-    container: document.head,
-    speedy: false
-  })
+  // Reset the atomic CSS engine for this render pass
+  resetCss()
 
   const ctx = {
     state: baseState,
@@ -796,6 +789,7 @@ export const render = async (data, options = {}) => {
     methods: data.methods || {},
     designSystem: structuredCloneDeep(data.designSystem || {}),
     files: data.files || {},
+    sharedLibraries: data.sharedLibraries || [],
     ...config,
     // Override polyglot with SSR-enriched version
     ...(polyglotConfig ? { polyglot: polyglotConfig } : {}),
@@ -803,8 +797,7 @@ export const render = async (data, options = {}) => {
     document,
     window,
     parent: { node: body },
-    // Use SSR emotion instance (non-speedy) for proper @media rule extraction
-    initOptions: { emotion: ssrEmotion },
+    initOptions: {},
     // Disable sourcemap tracking in SSR — it causes stack overflows
     // when state contains large data arrays (articles, events, etc.)
     domqlOptions: { sourcemap: false },
@@ -846,47 +839,19 @@ export const render = async (data, options = {}) => {
   // (e.g. detail page titles from fetched data) can be resolved
   const metadata = extractMetadata(data, route, element, element?.state)
 
-  // Extract emotion-generated CSS
-  // Emotion uses insertRule() (CSSOM) which doesn't populate textContent in linkedom.
-  // We extract from: (1) emotion cache.inserted, (2) CSSOM sheet rules, (3) textContent fallback.
+  // Extract CSS from style tags in virtual head (atomic CSS engine writes here)
   const emotionCSS = []
-  const emotionInstance = ctx.emotion || (element && element.context && element.context.emotion)
-  if (emotionInstance && emotionInstance.cache) {
-    const cache = emotionInstance.cache
-    // cache.inserted: hash → CSS string (or true if inserted via CSSOM)
-    if (cache.inserted) {
-      for (const key in cache.inserted) {
-        const rule = cache.inserted[key]
-        if (typeof rule === 'string' && rule) emotionCSS.push(rule)
-      }
-    }
-    // Extract from CSSOM sheet rules (covers insertRule-based insertion)
-    if (cache.sheet && cache.sheet.tags) {
-      for (const tag of cache.sheet.tags) {
-        if (tag.sheet && tag.sheet.cssRules) {
-          for (const rule of tag.sheet.cssRules) {
-            if (rule.cssText) emotionCSS.push(rule.cssText)
-          }
+  const head = document.head || document.querySelector('head')
+  if (head) {
+    for (const style of head.querySelectorAll('style')) {
+      if (style.sheet && style.sheet.cssRules) {
+        for (const rule of style.sheet.cssRules) {
+          if (rule.cssText) emotionCSS.push(rule.cssText)
         }
       }
-    }
-  }
-  // Fallback: scan all style tags in virtual head
-  if (!emotionCSS.length) {
-    const head = document.head || document.querySelector('head')
-    if (head) {
-      for (const style of head.querySelectorAll('style')) {
-        // Try CSSOM rules first
-        if (style.sheet && style.sheet.cssRules) {
-          for (const rule of style.sheet.cssRules) {
-            if (rule.cssText) emotionCSS.push(rule.cssText)
-          }
-        }
-        // Fallback to textContent
-        if (!emotionCSS.length) {
-          const content = style.textContent || ''
-          if (content) emotionCSS.push(content)
-        }
+      if (!emotionCSS.length) {
+        const content = style.textContent || ''
+        if (content) emotionCSS.push(content)
       }
     }
   }
@@ -928,8 +893,8 @@ export const renderElement = async (elementDef, options = {}) => {
   const { window, document } = createEnv()
   const body = document.body
 
-  const { create } = await import('@domql/element')
-  const domqlUtils = await import('@domql/utils')
+  const { create } = await import('@symbo.ls/element')
+  const domqlUtils = await import('@symbo.ls/utils')
 
   // Merge minimal uikit stubs so DOMQL resolves extends chains
   // (e.g. extends: 'Link' → tag: 'a', extends: 'Flex' → display: flex)
@@ -993,6 +958,37 @@ const fixSvgContent = (html) => {
  */
 let _cachedGlobalCSS = null
 
+// Frank serializes a project's `config.js` exports at the TOP LEVEL of the
+// data payload (not under `data.config`), so `globalTheme` / `themeStorageKey`
+// / `useReset` / etc. live alongside `components` / `pages` / `designSystem`.
+// Both renderRoute and renderPage used to call `generateGlobalCSS(ds,
+// data.config || data.settings)` which resolved to undefined for any project
+// pushed through frank — every config flag silently dropped, including
+// `globalTheme: 'light'`. The hardcoded `globalTheme: 'auto'` default in
+// generateGlobalCSS then won, prod always rendered in matchMedia-detected
+// theme regardless of what the project declared. Helper picks the config
+// flags from `data` whichever shape they arrive in.
+const SCRATCH_CONFIG_FLAGS = [
+  'globalTheme', 'themeStorageKey', 'themeRoot',
+  'useReset', 'useVariable', 'useFontImport', 'useIconSprite', 'useSvgSprite',
+  'useDocumentTheme', 'useDefaultConfig', 'useDefaultIcons',
+  'useThemeSuffixedVars', 'verbose', 'semanticIcons',
+]
+const pickProjectConfig = (data) => {
+  if (!data || typeof data !== 'object') return null
+  if (data.config && typeof data.config === 'object') return data.config
+  const out = {}
+  let any = false
+  for (const flag of SCRATCH_CONFIG_FLAGS) {
+    if (Object.prototype.hasOwnProperty.call(data, flag)) {
+      out[flag] = data[flag]
+      any = true
+    }
+  }
+  if (any) return out
+  return data.settings || null
+}
+
 const generateGlobalCSS = async (ds, config) => {
   if (_cachedGlobalCSS) return _cachedGlobalCSS
 
@@ -1058,7 +1054,7 @@ const generateGlobalCSS = async (ds, config) => {
     // Detect workspace layout (monorepo vs npm install)
     const ws = detectWorkspace()
 
-    // Workspace resolve plugin: maps @symbo.ls/* and @domql/* to source paths
+    // Workspace resolve plugin: maps @symbo.ls/* and @symbo.ls/* to source paths
     const workspacePlugin = {
       name: 'workspace-resolve',
       setup (build) {
@@ -1085,7 +1081,7 @@ const generateGlobalCSS = async (ds, config) => {
           }
         })
         build.onResolve({ filter: /^@domql\// }, args => {
-          const pkg = args.path.replace('@domql/', '')
+          const pkg = args.path.replace('@symbo.ls/', '')
           if (ws.isMonorepo) {
             const src = resolve(ws.monorepoRoot, 'packages', 'domql', 'packages', pkg, 'src', 'index.js')
             if (existsSync(src)) return { path: src }
@@ -1232,7 +1228,7 @@ export const renderRoute = async (data, options = {}) => {
   if (!result) return null
 
   const ds = data.designSystem || {}
-  const globalCSS = await generateGlobalCSS(ds, data.config || data.settings)
+  const globalCSS = await generateGlobalCSS(ds, pickProjectConfig(data))
 
   // Extract prefetched state and language for metadata resolution
   let prefetchedState = null
@@ -1329,7 +1325,7 @@ export const renderPage = async (data, route = '/', options = {}) => {
 
   // Generate global CSS (variables, reset, keyframes) via scratch pipeline
   const ds = data.designSystem || {}
-  const globalCSS = await generateGlobalCSS(ds, data.config || data.settings)
+  const globalCSS = await generateGlobalCSS(ds, pickProjectConfig(data))
 
   // Generate font links from design system
   const fontLinks = generateFontLinks(ds)
@@ -1754,33 +1750,30 @@ const getExtendsCSS = (el) => {
  * Uses fallback mock state if element state is incomplete.
  */
 const resolveElementProps = (el) => {
-  const { props } = el
-  if (!props) return props
   let resolved
-  for (const key in props) {
-    if (typeof props[key] !== 'function') continue
+  for (const key in el) {
+    if (typeof el[key] !== 'function') continue
     // Skip non-CSS props and component children
     if (NON_CSS_PROPS.has(key)) continue
     if (key.charCodeAt(0) >= 65 && key.charCodeAt(0) <= 90) continue
     if (key.startsWith('on')) continue
-    if (!resolved) resolved = { ...props }
+    if (key.startsWith('__')) continue
+    if (!resolved) resolved = {}
     let result
     try {
-      result = props[key](el, el.state || {})
+      result = el[key](el, el.state || {})
     } catch {
       // State prototype chain may be incomplete in SSR — try with mock
       try {
         const mockState = { root: {}, ...(el.state || {}) }
-        result = props[key](el, mockState)
+        result = el[key](el, mockState)
       } catch { /* skip prop */ }
     }
     if (result !== undefined && result !== null && result !== false) {
       resolved[key] = result
-    } else {
-      delete resolved[key]
     }
   }
-  return resolved || props
+  return resolved || el
 }
 
 const extractCSS = (element, ds) => {