npm - @symbo.ls/brender - Versions diffs - 3.8.8 → 3.14.0 - Mend

@symbo.ls/brender 3.8.8 → 3.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/README.md CHANGED Viewed

@@ -113,14 +113,14 @@ const result = await render(data, { route: '/about' })
 // result.html       -> full page HTML with data-br keys
 // result.metadata   -> { title, description, og:image, ... }
-// result.emotionCSS -> array of CSS rule strings from emotion
+// result.css        -> array of CSS rule strings from the atomic CSS engine
 // result.registry   -> { br-key: domqlElement }
 // result.element    -> root DOMQL element
 ```
 ### `renderPage(data, route, options?)`
-Renders a complete, ready-to-serve HTML page. Combines `render()` output with metadata, CSS (emotion + global), fonts, and optional ISR client bundle.
+Renders a complete, ready-to-serve HTML page. Combines `render()` output with metadata, CSS (atomic + global), fonts, and optional ISR client bundle.
 ```js
 import { renderPage, loadProject } from '@symbo.ls/brender'
@@ -345,11 +345,11 @@ This means the server and client don't need to exchange the registry — as long
 - `renderElement()` uses `@domql/element` create directly — lightweight, no smbls bootstrap. Good for individual components
 - `render()` uses the full `smbls/src/createDomql.js` pipeline — handles routing, designSystem initialization, uikit defaults, the works. Needed for complete apps
-- The smbls source is bundled with esbuild (cached after first call) because the monorepo uses extensionless/directory imports that Node.js ESM can't resolve natively. The esbuild plugin patches SSR-incompatible code (window references, createRequire, circular imports) and stubs out browser-only packages (@symbo.ls/sync)
+- The smbls source is bundled with esbuild (cached after first call) because the monorepo uses extensionless/directory imports that Node.js ESM can't resolve natively. The esbuild plugin patches SSR-incompatible code (window references, createRequire, circular imports) and stubs out browser-only packages
 - `render()` sets `globalThis.document` and `globalThis.location` before each render to match the linkedom virtual env, then restores them after. This allows the bundled smbls code (which reads `window = globalThis`) to work in SSR
 - `hydrate.js` is browser-only code (no linkedom dependency) — it's exported separately via `@symbo.ls/brender/hydrate`
 - `createEnv()` sets `globalThis.window/document/Node/HTMLElement` because `@domql/utils` `isDOMNode` uses `instanceof` checks against global constructors
-- Emotion CSS is extracted from the CSSOM sheet rules (emotion uses `insertRule()` which doesn't populate `textContent` in linkedom)
+- CSS is extracted from the atomic CSS engine's generated rules
 - `onRender` callbacks that do network requests or call `s.update()` will error during SSR — this is expected and harmless since the HTML is already produced before those callbacks fire
 - Data prefetching (`prefetch.js`) walks page definitions to find `fetch` declarations, then executes them against the DB adapter before rendering. Fetched data is injected into page state so components render with real content

package/dist/cjs/env.js CHANGED Viewed

@@ -24,7 +24,11 @@ var import_linkedom = require("linkedom");
 const createEnv = (html = "<!DOCTYPE html><html><head></head><body></body></html>") => {
   const { window, document } = (0, import_linkedom.parseHTML)(html);
   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);
@@ -87,6 +91,7 @@ const createEnv = (html = "<!DOCTYPE html><html><head></head><body></body></html
   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/dist/cjs/hydrate.js CHANGED Viewed

@@ -76,12 +76,12 @@ const hydrate = (element, options = {}) => {
   return { element, linked, unlinked };
 };
 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];
     if (key.charCodeAt(0) === 64) {
       const breakpoint = mediaMap[key.slice(1)];
       if (breakpoint && typeof val === "object") {
@@ -135,7 +135,7 @@ const renderCSS = (el, emotion, colorMap, mediaMap) => {
   if (typeof el.key === "string" && el.key.charCodeAt(0) === 95 && el.key.charCodeAt(1) !== 95) {
     classes.push(el.key.slice(1));
   }
-  if (props.class) classes.push(props.class);
+  if (el.class) classes.push(el.class);
   if (el.attr?.class) classes.push(el.attr.class);
   const classlist = el.classlist;
   if (classlist) {
@@ -152,7 +152,7 @@ const renderCSS = (el, emotion, colorMap, mediaMap) => {
   if (classes.length) {
     node.setAttribute("class", classes.join(" "));
   }
-  for (const key in props) {
+  for (const key in el) {
     if (isCSS(key) && node.hasAttribute(key)) {
       node.removeAttribute(key);
     }
@@ -503,47 +503,36 @@ const DOMQL_LIFECYCLE = /* @__PURE__ */ new Set([
   "error"
 ]);
 const bindEvents = (el) => {
-  const { node, on, props } = el;
+  const { node } = el;
   if (!node) return;
-  const handled = /* @__PURE__ */ 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 = [];
+  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));
 };
 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) {
       const child = el[childKey];

package/dist/cjs/load.js CHANGED Viewed

@@ -88,7 +88,9 @@ const loadProject = async (projectPath) => {
     functionsModule,
     methodsModule,
     designSystemModule,
-    filesModule
+    filesModule,
+    assetsModule,
+    sharedLibsModule
   ] = await Promise.all([
     bundleAndImport((0, import_path.join)(symbolsDir, "app.js")),
     bundleAndImport((0, import_path.join)(symbolsDir, "state.js")),
@@ -100,9 +102,11 @@ const loadProject = async (projectPath) => {
     bundleAndImport((0, import_path.join)(symbolsDir, "functions", "index.js")),
     bundleAndImport((0, import_path.join)(symbolsDir, "methods", "index.js")),
     bundleAndImport((0, import_path.join)(symbolsDir, "designSystem", "index.js")),
-    bundleAndImport((0, import_path.join)(symbolsDir, "files", "index.js"))
+    bundleAndImport((0, import_path.join)(symbolsDir, "files", "index.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "assets", "index.js")).catch(() => null),
+    bundleAndImport((0, import_path.join)(symbolsDir, "sharedLibraries.js")).catch(() => null)
   ]);
-  return {
+  const result = {
     app: { ...appModule?.default || {} },
     state: { ...stateModule?.default || {} },
     dependencies: { ...depsModule?.default || {} },
@@ -113,8 +117,19 @@ const loadProject = async (projectPath) => {
     methods: { ...methodsModule || {} },
     designSystem: { ...designSystemModule?.default || {} },
     files: { ...filesModule?.default || {} },
-    config: { ...configModule?.default || {} }
+    assets: { ...assetsModule?.default || {} },
+    config: { ...configModule?.default || {} },
+    sharedLibraries: sharedLibsModule?.default || []
   };
+  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;
 };
 const loadAndRenderAll = async (projectPath, renderFn) => {
   const data = await loadProject(projectPath);

package/dist/cjs/prefetch.js CHANGED Viewed

@@ -41,7 +41,6 @@ const resolveParams = (params, mockState) => {
     try {
       const mockEl = {
         state: mockState || {},
-        props: {},
         call: () => void 0,
         __ref: {}
       };
@@ -225,7 +224,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/cjs/render.js CHANGED Viewed

@@ -47,13 +47,13 @@ var import_metadata = require("./metadata.js");
 var import_hydrate = require("./hydrate.js");
 var import_prefetch = require("./prefetch.js");
 var import_linkedom = require("linkedom");
-var import_create_instance = __toESM(require("@emotion/css/create-instance"), 1);
+var import_css = require("@symbo.ls/css");
 const import_meta = {};
 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 {
@@ -232,7 +232,7 @@ const resolveDomqlPackage = (ws, pkg, ...subpath) => {
   if (ws.isMonorepo) {
     return (0, import_path.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 (0, import_path.resolve)((0, import_path.dirname)(pkgJson), ...subpath);
   return null;
 };
@@ -327,7 +327,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 = (0, import_path.resolve)(ws.monorepoRoot, "packages", "domql", "packages", pkg, "src", "index.js");
           if ((0, import_fs.existsSync)(src)) return { path: src };
@@ -425,7 +425,7 @@ export const supabaseAdapter = () => ({name:'supabase'});
         let contents = (0, import_fs.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" };
       });
@@ -515,9 +515,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" },
@@ -526,14 +526,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" },
@@ -671,11 +671,7 @@ const render = async (data, options = {}) => {
       };
     }
   }
-  const ssrEmotion = (0, import_create_instance.default)({
-    key: "smbls",
-    container: document.head,
-    speedy: false
-  });
+  (0, import_css.reset)();
   const ctx = {
     state: baseState,
     ...stateOverrides ? { state: { ...baseState, ...stateOverrides } } : {},
@@ -693,6 +689,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 } : {},
@@ -700,8 +697,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 },
@@ -724,38 +720,17 @@ const render = async (data, options = {}) => {
   const brRegistry = buildPathRegistry(element);
   const metadata = (0, import_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);
       }
     }
   }
@@ -778,8 +753,8 @@ const renderElement = async (elementDef, options = {}) => {
   const { context = {} } = options;
   const { window, document } = (0, import_env.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,
@@ -812,6 +787,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 {
@@ -894,7 +899,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 = (0, import_path.resolve)(ws.monorepoRoot, "packages", "domql", "packages", pkg, "src", "index.js");
             if (existsSync2(src)) return { path: src };
@@ -1002,7 +1007,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 {
@@ -1061,7 +1066,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 = "";
@@ -1479,32 +1484,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/dist/esm/env.js CHANGED Viewed

@@ -2,7 +2,11 @@ import { parseHTML } from "linkedom";
 const createEnv = (html = "<!DOCTYPE html><html><head></head><body></body></html>") => {
   const { window, document } = parseHTML(html);
   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);
@@ -65,6 +69,7 @@ const createEnv = (html = "<!DOCTYPE html><html><head></head><body></body></html
   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/dist/esm/hydrate.js CHANGED Viewed

@@ -53,12 +53,12 @@ const hydrate = (element, options = {}) => {
   return { element, linked, unlinked };
 };
 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];
     if (key.charCodeAt(0) === 64) {
       const breakpoint = mediaMap[key.slice(1)];
       if (breakpoint && typeof val === "object") {
@@ -112,7 +112,7 @@ const renderCSS = (el, emotion, colorMap, mediaMap) => {
   if (typeof el.key === "string" && el.key.charCodeAt(0) === 95 && el.key.charCodeAt(1) !== 95) {
     classes.push(el.key.slice(1));
   }
-  if (props.class) classes.push(props.class);
+  if (el.class) classes.push(el.class);
   if (el.attr?.class) classes.push(el.attr.class);
   const classlist = el.classlist;
   if (classlist) {
@@ -129,7 +129,7 @@ const renderCSS = (el, emotion, colorMap, mediaMap) => {
   if (classes.length) {
     node.setAttribute("class", classes.join(" "));
   }
-  for (const key in props) {
+  for (const key in el) {
     if (isCSS(key) && node.hasAttribute(key)) {
       node.removeAttribute(key);
     }
@@ -480,47 +480,36 @@ const DOMQL_LIFECYCLE = /* @__PURE__ */ new Set([
   "error"
 ]);
 const bindEvents = (el) => {
-  const { node, on, props } = el;
+  const { node } = el;
   if (!node) return;
-  const handled = /* @__PURE__ */ 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 = [];
+  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));
 };
 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) {
       const child = el[childKey];

package/dist/esm/load.js CHANGED Viewed

@@ -55,7 +55,9 @@ const loadProject = async (projectPath) => {
     functionsModule,
     methodsModule,
     designSystemModule,
-    filesModule
+    filesModule,
+    assetsModule,
+    sharedLibsModule
   ] = await Promise.all([
     bundleAndImport(join(symbolsDir, "app.js")),
     bundleAndImport(join(symbolsDir, "state.js")),
@@ -67,9 +69,11 @@ 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)
   ]);
-  return {
+  const result = {
     app: { ...appModule?.default || {} },
     state: { ...stateModule?.default || {} },
     dependencies: { ...depsModule?.default || {} },
@@ -80,8 +84,19 @@ const loadProject = async (projectPath) => {
     methods: { ...methodsModule || {} },
     designSystem: { ...designSystemModule?.default || {} },
     files: { ...filesModule?.default || {} },
-    config: { ...configModule?.default || {} }
+    assets: { ...assetsModule?.default || {} },
+    config: { ...configModule?.default || {} },
+    sharedLibraries: sharedLibsModule?.default || []
   };
+  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;
 };
 const loadAndRenderAll = async (projectPath, renderFn) => {
   const data = await loadProject(projectPath);