@symbo.ls/brender 3.8.8 → 3.14.0

package/dist/esm/prefetch.js

@@ -7,7 +7,6 @@ const resolveParams = (params, mockState) => {
     try {
       const mockEl = {
         state: mockState || {},
-        props: {},
         call: () => void 0,
         __ref: {}
       };
@@ -191,7 +190,6 @@ const preEvaluateChildren = (def, inheritedState) => {
         try {
           const mockEl = {
             state: effectiveState,
-            props: {},
             call: (fn) => {
               if (fn === "getActiveLang" || fn === "getLang") return effectiveState?.lang || "ka";
               if (fn === "polyglot") return arguments[1] || "";

package/dist/esm/render.js

@@ -12,7 +12,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 {
@@ -20,7 +20,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";
 const ssrResolve = (map, key) => {
   if (!map || !key) return void 0;
   if (map[key] !== void 0) return map[key];
@@ -193,7 +193,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;
 };
@@ -288,7 +288,7 @@ const bundleCreateDomql = async () => {
         }
       });
       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 };
@@ -386,7 +386,7 @@ export const supabaseAdapter = () => ({name:'supabase'});
         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" };
       });
@@ -476,9 +476,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" },
@@ -487,14 +487,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" },
@@ -632,11 +632,7 @@ const render = async (data, options = {}) => {
       };
     }
   }
-  const ssrEmotion = createEmotionInstance({
-    key: "smbls",
-    container: document.head,
-    speedy: false
-  });
+  resetCss();
   const ctx = {
     state: baseState,
     ...stateOverrides ? { state: { ...baseState, ...stateOverrides } } : {},
@@ -654,6 +650,7 @@ 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 } : {},
@@ -661,8 +658,7 @@ 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 },
@@ -685,38 +681,17 @@ const render = async (data, options = {}) => {
   const brRegistry = buildPathRegistry(element);
   const metadata = extractMetadata(data, route, element, element?.state);
   const emotionCSS = [];
-  const emotionInstance = ctx.emotion || element && element.context && element.context.emotion;
-  if (emotionInstance && emotionInstance.cache) {
-    const cache = emotionInstance.cache;
-    if (cache.inserted) {
-      for (const key in cache.inserted) {
-        const rule = cache.inserted[key];
-        if (typeof rule === "string" && rule) emotionCSS.push(rule);
-      }
-    }
-    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);
         }
       }
-    }
-  }
-  if (!emotionCSS.length) {
-    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);
-          }
-        }
-        if (!emotionCSS.length) {
-          const content = style.textContent || "";
-          if (content) emotionCSS.push(content);
-        }
+      if (!emotionCSS.length) {
+        const content = style.textContent || "";
+        if (content) emotionCSS.push(content);
       }
     }
   }
@@ -739,8 +714,8 @@ const renderElement = async (elementDef, options = {}) => {
   const { context = {} } = 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");
   const components = { ...UIKIT_STUBS, ...context.components || {} };
   const utils = {
     ...domqlUtils,
@@ -773,6 +748,36 @@ const fixSvgContent = (html) => {
   );
 };
 let _cachedGlobalCSS = null;
+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;
   try {
@@ -855,7 +860,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 (existsSync2(src)) return { path: src };
@@ -963,7 +968,7 @@ const renderRoute = async (data, options = {}) => {
   const result = await render(data, { route, pathname, prefetch: true });
   if (!result) return null;
   const ds = data.designSystem || {};
-  const globalCSS = await generateGlobalCSS(ds, data.config || data.settings);
+  const globalCSS = await generateGlobalCSS(ds, pickProjectConfig(data));
   let prefetchedState = null;
   let activeLang = null;
   try {
@@ -1022,7 +1027,7 @@ const renderPage = async (data, route = "/", options = {}) => {
   }
   const emotionCSS = Array.from(_accumulatedEmotionCSS).join("\n");
   const ds = data.designSystem || {};
-  const globalCSS = await generateGlobalCSS(ds, data.config || data.settings);
+  const globalCSS = await generateGlobalCSS(ds, pickProjectConfig(data));
   const fontLinks = generateFontLinks(ds);
   const brKeyCount = Object.keys(result.registry).length;
   let isrBody = "";
@@ -1440,32 +1445,29 @@ const getExtendsCSS = (el) => {
   return null;
 };
 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;
     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 {
       try {
         const mockState = { root: {}, ...el.state || {} };
-        result = props[key](el, mockState);
+        result = el[key](el, mockState);
       } catch {
       }
     }
     if (result !== void 0 && result !== null && result !== false) {
       resolved[key] = result;
-    } else {
-      delete resolved[key];
     }
   }
-  return resolved || props;
+  return resolved || el;
 };
 const extractCSS = (element, ds) => {
   const mediaMap = ds?.media || {};

package/env.js

@@ -9,7 +9,11 @@ export const createEnv = (html = '<!DOCTYPE html><html><head></head><body></body
 
   // Stub APIs that DOMQL/smbls may call during rendering
   if (!window.requestAnimationFrame) {
-    window.requestAnimationFrame = (fn) => setTimeout(fn, 0)
+    window.requestAnimationFrame = (fn) => {
+      const id = setTimeout(fn, 0)
+      if (id?.unref) id.unref()
+      return id
+    }
   }
   if (!window.cancelAnimationFrame) {
     window.cancelAnimationFrame = (id) => clearTimeout(id)
@@ -58,11 +62,12 @@ export const createEnv = (html = '<!DOCTYPE html><html><head></head><body></body
     }
   }
 
-  // Expose linkedom constructors on globalThis so @domql/utils isDOMNode
+  // Expose linkedom constructors on globalThis so @symbo.ls/utils isDOMNode
   // can use instanceof checks (it reads from globalThis.Node, etc.)
   globalThis.window = window
   globalThis.document = document
   globalThis.Node = window.Node || globalThis.Node
+  globalThis.Element = window.Element || globalThis.Element
   globalThis.HTMLElement = window.HTMLElement || globalThis.HTMLElement
   globalThis.MutationObserver = window.MutationObserver
   globalThis.Window = window.constructor

package/hydrate.js

@@ -100,14 +100,14 @@ export const hydrate = (element, options = {}) => {
  * generates emotion class name, and applies it to the DOM node.
  */
 const renderCSS = (el, emotion, colorMap, mediaMap) => {
-  const { node, props } = el
-  if (!node || !props) return
+  const { node } = el
+  if (!node) return
 
   const css = {}
   let hasCss = false
 
-  for (const key in props) {
-    const val = props[key]
+  for (const key in el) {
+    const val = el[key]
 
     // @media breakpoint objects: @mobile, @tablet, etc.
     if (key.charCodeAt(0) === 64) {
@@ -181,7 +181,7 @@ const renderCSS = (el, emotion, colorMap, mediaMap) => {
   }
 
   // Preserve explicit class from props/attr
-  if (props.class) classes.push(props.class)
+  if (el.class) classes.push(el.class)
   if (el.attr?.class) classes.push(el.attr.class)
 
   // Handle classlist
@@ -203,7 +203,7 @@ const renderCSS = (el, emotion, colorMap, mediaMap) => {
   }
 
   // Clean up CSS prop attributes that leaked into HTML
-  for (const key in props) {
+  for (const key in el) {
     if (isCSS(key) && node.hasAttribute(key)) {
       node.removeAttribute(key)
     }
@@ -391,7 +391,7 @@ const CSS_PROPERTIES = new Set([
 ])
 
 /**
- * Binds DOM events from element.on and element.props onto the real node.
+ * Binds DOM events from element's onX properties onto the real node.
  */
 const DOMQL_LIFECYCLE = new Set([
   'render', 'create', 'init', 'start', 'complete', 'done',
@@ -400,56 +400,46 @@ const DOMQL_LIFECYCLE = new Set([
 ])
 
 const bindEvents = (el) => {
-  const { node, on, props } = el
+  const { node } = el
   if (!node) return
 
-  const handled = new Set()
-
-  if (on) {
-    for (const param in on) {
-      if (DOMQL_LIFECYCLE.has(param)) continue
-      if (typeof on[param] !== 'function') continue
-      handled.add(param)
-      addListener(node, param, on[param], el)
-    }
-  }
-
-  if (props) {
-    for (const key in props) {
-      if (key.length <= 2 || key[0] !== 'o' || key[1] !== 'n') continue
-      if (typeof props[key] !== 'function') continue
-      const third = key[2]
-      if (third !== third.toUpperCase()) continue
-      const eventName = third.toLowerCase() + key.slice(3)
-      if (handled.has(eventName) || DOMQL_LIFECYCLE.has(eventName)) continue
-      addListener(node, eventName, props[key], el)
-    }
+  if (!el.__ref.__eventCleanup) el.__ref.__eventCleanup = []
+
+  // v4: event handlers are flat on element as onX properties
+  for (const key in el) {
+    if (key.length <= 2 || key[0] !== 'o' || key[1] !== 'n') continue
+    if (typeof el[key] !== 'function') continue
+    const third = key[2]
+    if (third !== third.toUpperCase()) continue
+    const eventName = third.toLowerCase() + key.slice(3)
+    if (DOMQL_LIFECYCLE.has(eventName)) continue
+    addListener(node, eventName, el[key], el)
   }
 }
 
 const addListener = (node, eventName, handler, el) => {
-  node.addEventListener(eventName, (event) => {
-    const result = handler.call(el, event, el, el.state, el.context)
-    if (result && typeof result.then === 'function') {
-      result.catch(() => {})
+  const listener = (event) => {
+    try {
+      handler.call(el, event, el, el.state, el.context)
+    } catch (e) {
+      console.warn('[brender hydrate]', eventName, e.message)
     }
-  })
+  }
+  node.addEventListener(eventName, listener)
+  el.__ref.__eventCleanup.push(() => node.removeEventListener(eventName, listener))
 }
 
 /**
- * Walks the tree and fires on.render, on.renderRouter, on.done, on.create
+ * Walks the tree and fires onRender, onRenderRouter, onDone, onCreate
  * lifecycle events — the same ones that fire during normal DOMQL create.
  */
 const fireLifecycle = (el) => {
   if (!el || !el.__ref || !el.node) return
 
-  const on = el.on
-  if (on) {
-    fireEvent(on.render, el)
-    fireEvent(on.renderRouter, el)
-    fireEvent(on.done, el)
-    fireEvent(on.create, el)
-  }
+  fireEvent(el.onRender, el)
+  fireEvent(el.onRenderRouter, el)
+  fireEvent(el.onDone, el)
+  fireEvent(el.onCreate, el)
 
   if (el.__ref.__children) {
     for (const childKey of el.__ref.__children) {

package/load.js

@@ -71,7 +71,9 @@ export const loadProject = async (projectPath) => {
     functionsModule,
     methodsModule,
     designSystemModule,
-    filesModule
+    filesModule,
+    assetsModule,
+    sharedLibsModule
   ] = await Promise.all([
     bundleAndImport(join(symbolsDir, 'app.js')),
     bundleAndImport(join(symbolsDir, 'state.js')),
@@ -83,12 +85,14 @@ export const loadProject = async (projectPath) => {
     bundleAndImport(join(symbolsDir, 'functions', 'index.js')),
     bundleAndImport(join(symbolsDir, 'methods', 'index.js')),
     bundleAndImport(join(symbolsDir, 'designSystem', 'index.js')),
-    bundleAndImport(join(symbolsDir, 'files', 'index.js'))
+    bundleAndImport(join(symbolsDir, 'files', 'index.js')),
+    bundleAndImport(join(symbolsDir, 'assets', 'index.js')).catch(() => null),
+    bundleAndImport(join(symbolsDir, 'sharedLibraries.js')).catch(() => null)
   ])
 
   // Spread into plain objects — ESM module namespaces are non-extensible,
   // which breaks downstream code that adds properties (e.g. polyglot functions).
-  return {
+  const result = {
     app: { ...(appModule?.default || {}) },
     state: { ...(stateModule?.default || {}) },
     dependencies: { ...(depsModule?.default || {}) },
@@ -99,8 +103,23 @@ export const loadProject = async (projectPath) => {
     methods: { ...(methodsModule || {}) },
     designSystem: { ...(designSystemModule?.default || {}) },
     files: { ...(filesModule?.default || {}) },
-    config: { ...(configModule?.default || {}) }
+    assets: { ...(assetsModule?.default || {}) },
+    config: { ...(configModule?.default || {}) },
+    sharedLibraries: sharedLibsModule?.default || []
   }
+
+  // Pre-resolve string library references and merge into context
+  // so production builds have zero runtime overhead
+  if (result.sharedLibraries.length) {
+    const { resolveSharedLibraries, mergeSharedLibraries } = await import('@symbo.ls/utils')
+    const hasStrings = result.sharedLibraries.some(lib => typeof lib === 'string')
+    if (hasStrings) {
+      result.sharedLibraries = await resolveSharedLibraries(result.sharedLibraries)
+    }
+    mergeSharedLibraries(result, result.sharedLibraries)
+  }
+
+  return result
 }
 
 /**

package/package.json

@@ -1,21 +1,15 @@
 {
   "name": "@symbo.ls/brender",
-  "version": "3.8.8",
+  "version": "3.14.0",
   "license": "CC-BY-NC-4.0",
   "type": "module",
-  "module": "./dist/esm/index.js",
-  "main": "./dist/cjs/index.js",
+  "module": "./index.js",
+  "main": "./index.js",
   "exports": {
-    ".": {
-      "import": "./index.js",
-      "require": "./dist/cjs/index.js"
-    },
-    "./hydrate": {
-      "import": "./hydrate.js"
-    },
-    "./load": {
-      "import": "./load.js"
-    }
+    ".": "./index.js",
+    "./hydrate": "./hydrate.js",
+    "./load": "./load.js",
+    "./package.json": "./package.json"
   },
   "source": "index.js",
   "files": [
@@ -24,19 +18,20 @@
   ],
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild *.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
-    "build:cjs": "cross-env NODE_ENV=$NODE_ENV esbuild *.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:esm": "NODE_ENV=$NODE_ENV esbuild *.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:cjs": "NODE_ENV=$NODE_ENV esbuild *.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
     "build": "node ../../build/build.js",
-    "prepublish": "npm run build && npm run copy:package:cjs",
+    "prepublish": "bun run build && bun run copy:package:cjs",
     "render:survey": "node scripts/render.js survey",
     "render:rita": "node scripts/render.js rita",
-    "render:all": "npm run render:survey && npm run render:rita",
+    "render:all": "bun run render:survey && bun run render:rita",
     "liquidate:survey": "node scripts/liquidate.js survey",
     "liquidate:rita": "node scripts/liquidate.js rita",
     "dev:rita": "node examples/serve-rita.js"
   },
   "dependencies": {
-    "@symbo.ls/helmet": "^3.8.8",
+    "@symbo.ls/css": "^3.14.0",
+    "@symbo.ls/helmet": "^3.14.0",
     "linkedom": "^0.16.8"
   },
   "devDependencies": {

package/prefetch.js

@@ -24,7 +24,6 @@ const resolveParams = (params, mockState) => {
       // Build a mock element with basic call() support
       const mockEl = {
         state: mockState || {},
-        props: {},
         call: () => undefined,
         __ref: {}
       }
@@ -312,8 +311,7 @@ const preEvaluateChildren = (def, inheritedState) => {
         try {
           const mockEl = {
             state: effectiveState,
-            props: {},
-            call: (fn) => {
+                call: (fn) => {
               if (fn === 'getActiveLang' || fn === 'getLang') return effectiveState?.lang || 'ka'
               if (fn === 'polyglot') return arguments[1] || ''
               return undefined