@symbo.ls/brender 3.6.4 → 3.6.7

package/dist/cjs/render.js

@@ -35,12 +35,227 @@ __export(render_exports, {
 });
 module.exports = __toCommonJS(render_exports);
 var import_path = require("path");
+var import_fs = require("fs");
+var import_os = require("os");
+var import_crypto = require("crypto");
 var import_env = require("./env.js");
 var import_keys = require("./keys.js");
 var import_metadata = require("./metadata.js");
 var import_hydrate = require("./hydrate.js");
+var import_prefetch = require("./prefetch.js");
 var import_linkedom = require("linkedom");
 const import_meta = {};
+const structuredCloneDeep = (obj, seen = /* @__PURE__ */ new WeakMap()) => {
+  if (obj === null || typeof obj !== "object") return obj;
+  if (seen.has(obj)) return seen.get(obj);
+  if (Array.isArray(obj)) {
+    const arr = [];
+    seen.set(obj, arr);
+    for (const v of obj) arr.push(typeof v === "object" && v !== null ? structuredCloneDeep(v, seen) : v);
+    return arr;
+  }
+  const clone = {};
+  seen.set(obj, clone);
+  for (const k of Object.keys(obj)) {
+    const v = obj[k];
+    clone[k] = typeof v === "object" && v !== null ? structuredCloneDeep(v, seen) : v;
+  }
+  return clone;
+};
+const safeJsonReplacer = () => {
+  const seen = /* @__PURE__ */ new WeakSet();
+  return (key, value) => {
+    if (typeof value === "function") return void 0;
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) return void 0;
+      seen.add(value);
+    }
+    return value;
+  };
+};
+let _cachedCreateDomql = null;
+const bundleCreateDomql = async () => {
+  if (_cachedCreateDomql) return _cachedCreateDomql;
+  const brenderDir = new URL(".", import_meta.url).pathname;
+  const monorepoRoot = (0, import_path.resolve)(brenderDir, "../..");
+  const entry = (0, import_path.resolve)(monorepoRoot, "packages", "smbls", "src", "createDomql.js");
+  const esbuild = await import("esbuild");
+  const outFile = (0, import_path.join)((0, import_os.tmpdir)(), `br_createDomql_${(0, import_crypto.randomBytes)(6).toString("hex")}.mjs`);
+  const workspacePlugin = {
+    name: "workspace-resolve",
+    setup(build) {
+      build.onResolve({ filter: /^smbls/ }, (args) => {
+        const subpath = args.path.replace(/^smbls\/?/, "");
+        if (!subpath) {
+          const src = (0, import_path.resolve)(monorepoRoot, "packages", "smbls", "src", "index.js");
+          if ((0, import_fs.existsSync)(src)) return { path: src };
+        }
+        const full = (0, import_path.resolve)(monorepoRoot, "packages", "smbls", subpath);
+        if ((0, import_fs.existsSync)(full)) return { path: full };
+        if ((0, import_fs.existsSync)(full + ".js")) return { path: full + ".js" };
+        const idx = (0, import_path.resolve)(full, "index.js");
+        if ((0, import_fs.existsSync)(idx)) return { path: idx };
+      });
+      build.onResolve({ filter: /^domql$/ }, (args) => {
+        const src = (0, import_path.resolve)(monorepoRoot, "packages", "domql", "src", "index.js");
+        if ((0, import_fs.existsSync)(src)) return { path: src };
+        const dist = (0, import_path.resolve)(monorepoRoot, "packages", "domql", "index.js");
+        if ((0, import_fs.existsSync)(dist)) return { path: dist };
+      });
+      build.onResolve({ filter: /^@symbo\.ls\// }, (args) => {
+        const pkg = args.path.replace("@symbo.ls/", "");
+        if (pkg === "sync") return { path: "sync-stub", namespace: "brender-stub" };
+        for (const dir of ["packages", "plugins"]) {
+          const src = (0, import_path.resolve)(monorepoRoot, dir, pkg, "src", "index.js");
+          if ((0, import_fs.existsSync)(src)) return { path: src };
+          const dist = (0, import_path.resolve)(monorepoRoot, dir, pkg, "index.js");
+          if ((0, import_fs.existsSync)(dist)) return { path: dist };
+        }
+        const blank = (0, import_path.resolve)(monorepoRoot, "packages", "default-config", "blank", "index.js");
+        if (pkg === "default-config" && (0, import_fs.existsSync)(blank)) return { path: blank };
+      });
+      build.onResolve({ filter: /^@domql\// }, (args) => {
+        const pkg = args.path.replace("@domql/", "");
+        const src = (0, import_path.resolve)(monorepoRoot, "packages", "domql", "packages", pkg, "src", "index.js");
+        if ((0, import_fs.existsSync)(src)) return { path: src };
+        const dist = (0, import_path.resolve)(monorepoRoot, "packages", "domql", "packages", pkg, "index.js");
+        if ((0, import_fs.existsSync)(dist)) return { path: dist };
+      });
+      build.onResolve({ filter: /^css-in-props/ }, (args) => {
+        const base = (0, import_path.resolve)(monorepoRoot, "packages", "css-in-props");
+        const subpath = args.path.replace(/^css-in-props\/?/, "");
+        if (subpath) {
+          const full = (0, import_path.resolve)(base, subpath);
+          const idx2 = (0, import_path.resolve)(full, "index.js");
+          if ((0, import_fs.existsSync)(idx2)) return { path: idx2 };
+          if ((0, import_fs.existsSync)(full + ".js")) return { path: full + ".js" };
+          if ((0, import_fs.existsSync)(full)) return { path: full };
+        }
+        const src = (0, import_path.resolve)(base, "src", "index.js");
+        if ((0, import_fs.existsSync)(src)) return { path: src };
+        const idx = (0, import_path.resolve)(base, "index.js");
+        if ((0, import_fs.existsSync)(idx)) return { path: idx };
+      });
+      build.onResolve({ filter: /^@emotion\// }, (args) => {
+        const nm = (0, import_path.resolve)(monorepoRoot, "node_modules", args.path);
+        if ((0, import_fs.existsSync)(nm)) {
+          const pkg = (0, import_path.resolve)(nm, "package.json");
+          if ((0, import_fs.existsSync)(pkg)) {
+            try {
+              const p = JSON.parse((0, import_fs.readFileSync)(pkg, "utf8"));
+              const main = p.module || p.main || "dist/emotion-css.esm.js";
+              return { path: (0, import_path.resolve)(nm, main) };
+            } catch {
+            }
+          }
+          return { path: nm };
+        }
+      });
+      build.onResolve({ filter: /\.json$/ }, (args) => {
+        if (args.resolveDir) {
+          const full = (0, import_path.resolve)(args.resolveDir, args.path);
+          if ((0, import_fs.existsSync)(full)) return { path: full };
+        }
+      });
+      build.onLoad({ filter: /smbls\/.*options\.js$/ }, async (args) => {
+        if (!args.path.includes("smbls/") || !args.path.endsWith("options.js")) return;
+        let contents = (0, import_fs.readFileSync)(args.path, "utf8");
+        contents = contents.replace(
+          /import\s*\{[^}]*version[^}]*\}\s*from\s*['"][^'"]*package\.json['"][^;\n]*/,
+          "const version = '0.0.0'"
+        );
+        contents = contents.replace(
+          /import\s*\{[^}]*createRequire[^}]*\}\s*from\s*['"]module['"][^;\n]*/g,
+          "// createRequire removed for brender build"
+        );
+        return { contents, loader: "js" };
+      });
+      build.onLoad({ filter: /smbls\/.*init\.js$/ }, async (args) => {
+        if (!args.path.includes("smbls/") || !args.path.endsWith("init.js")) return;
+        let contents = (0, import_fs.readFileSync)(args.path, "utf8");
+        contents = contents.replace(
+          /import\s*\{[^}]*createRequire[^}]*\}\s*from\s*['"]module['"][^;\n]*/g,
+          "// createRequire removed for brender build"
+        );
+        return { contents, loader: "js" };
+      });
+      build.onLoad({ filter: /.*/, namespace: "brender-stub" }, () => {
+        return { contents: "export const SyncComponent = {}; export const Inspect = {}; export const Notifications = {}; export default {}", loader: "js" };
+      });
+      build.onLoad({ filter: /smbls\/src\/router\.js$/ }, async (args) => {
+        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 } }`
+        );
+        return { contents, loader: "js" };
+      });
+      build.onLoad({ filter: /fetchOnCreate\.js$/ }, async (args) => {
+        if (!args.path.includes("smbls/")) return;
+        let contents = (0, import_fs.readFileSync)(args.path, "utf8");
+        contents = contents.replace(
+          /window\s*&&\s*window\.location\s*\?\s*window\.location\.host\.includes/g,
+          "window && window.location && window.location.host ? window.location.host.includes"
+        );
+        return { contents, loader: "js" };
+      });
+    }
+  };
+  await esbuild.build({
+    entryPoints: [entry],
+    bundle: true,
+    format: "esm",
+    platform: "node",
+    outfile: outFile,
+    write: true,
+    logLevel: "warning",
+    plugins: [workspacePlugin],
+    nodePaths: [(0, import_path.resolve)(monorepoRoot, "node_modules")],
+    supported: { "import-attributes": false },
+    external: [
+      "fs",
+      "path",
+      "os",
+      "crypto",
+      "url",
+      "http",
+      "https",
+      "stream",
+      "util",
+      "events",
+      "buffer",
+      "child_process",
+      "worker_threads",
+      "net",
+      "tls",
+      "dns",
+      "dgram",
+      "zlib",
+      "assert",
+      "querystring",
+      "string_decoder",
+      "readline",
+      "perf_hooks",
+      "async_hooks",
+      "v8",
+      "vm",
+      "cluster",
+      "inspector",
+      "module",
+      "process",
+      "tty",
+      "color-contrast-checker",
+      "linkedom"
+    ]
+  });
+  const mod = await import(`file://${outFile}`);
+  try {
+    (0, import_fs.unlinkSync)(outFile);
+  } catch {
+  }
+  _cachedCreateDomql = mod;
+  return mod;
+};
 const UIKIT_STUBS = {
   Box: {},
   Focusable: {},
@@ -105,22 +320,55 @@ const UIKIT_STUBS = {
   Text: { tag: "span" }
 };
 const render = async (data, options = {}) => {
-  const { route = "/", state: stateOverrides, context: contextOverrides } = options;
+  const { route = "/", state: stateOverrides, context: contextOverrides, prefetch = false } = options;
+  let prefetchedPages;
+  if (prefetch) {
+    try {
+      const pages = data.pages || {};
+      prefetchedPages = { ...pages };
+      const stateUpdates = await (0, import_prefetch.prefetchPageData)(data, route);
+      if (stateUpdates.size) {
+        const pageDef = JSON.parse(JSON.stringify(pages[route], (key, value) => {
+          if (typeof value === "function") return void 0;
+          return value;
+        }));
+        const copyFunctions = (src, dst) => {
+          if (!src || !dst) return;
+          for (const k in src) {
+            if (typeof src[k] === "function") {
+              dst[k] = src[k];
+            } else if (typeof src[k] === "object" && src[k] !== null && !Array.isArray(src[k]) && typeof dst[k] === "object" && dst[k] !== null) {
+              copyFunctions(src[k], dst[k]);
+            }
+          }
+        };
+        copyFunctions(pages[route], pageDef);
+        (0, import_prefetch.injectPrefetchedState)(pageDef, stateUpdates);
+        prefetchedPages[route] = pageDef;
+      }
+    } catch {
+      prefetchedPages = data.pages;
+    }
+  }
   const { window, document } = (0, import_env.createEnv)();
   const body = document.body;
   window.location.pathname = route;
-  const smblsSrc = new URL("../../packages/smbls/src/createDomql.js", import_meta.url);
-  const { createDomqlElement } = await import(smblsSrc.href);
-  const app = data.app || {};
+  const _prevDoc = globalThis.document;
+  const _prevLoc = globalThis.location;
+  globalThis.document = document;
+  globalThis.location = window.location;
+  const { createDomqlElement } = await bundleCreateDomql();
+  const app = structuredCloneDeep(data.app || {});
   const ctx = {
-    state: { ...data.state, ...stateOverrides || {} },
-    dependencies: data.dependencies || {},
-    components: data.components || {},
-    snippets: data.snippets || {},
-    pages: data.pages || {},
+    state: structuredCloneDeep(data.state || {}),
+    ...stateOverrides ? { state: { ...structuredCloneDeep(data.state || {}), ...stateOverrides } } : {},
+    dependencies: structuredCloneDeep(data.dependencies || {}),
+    components: structuredCloneDeep(data.components || {}),
+    snippets: structuredCloneDeep(data.snippets || {}),
+    pages: structuredCloneDeep(prefetchedPages || data.pages || {}),
     functions: data.functions || {},
     methods: data.methods || {},
-    designSystem: data.designSystem || {},
+    designSystem: structuredCloneDeep(data.designSystem || {}),
     files: data.files || {},
     ...data.config || data.settings || {},
     // Virtual DOM environment
@@ -132,11 +380,52 @@ const render = async (data, options = {}) => {
   };
   (0, import_keys.resetKeys)();
   const element = await createDomqlElement(app, ctx);
+  await new Promise((r) => setTimeout(r, 50));
   (0, import_keys.assignKeys)(body);
   const registry = (0, import_keys.mapKeysToElements)(element);
   const metadata = (0, import_metadata.extractMetadata)(data, route);
-  const html = body.innerHTML;
-  return { html, metadata, registry, element };
+  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);
+          }
+        }
+      }
+    }
+  }
+  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);
+        }
+      }
+    }
+  }
+  const html = fixSvgContent(body.innerHTML);
+  if (_prevDoc !== void 0) globalThis.document = _prevDoc;
+  else delete globalThis.document;
+  if (_prevLoc !== void 0) globalThis.location = _prevLoc;
+  else delete globalThis.location;
+  return { html, metadata, registry, element, emotionCSS, document, window };
 };
 const renderElement = async (elementDef, options = {}) => {
   const { context = {} } = options;
@@ -179,15 +468,15 @@ let _cachedGlobalCSS = null;
 const generateGlobalCSS = async (ds, config) => {
   if (_cachedGlobalCSS) return _cachedGlobalCSS;
   try {
-    const { existsSync, writeFileSync, unlinkSync } = await import("fs");
-    const { tmpdir } = await import("os");
-    const { randomBytes } = await import("crypto");
+    const { existsSync: existsSync2, writeFileSync: writeFileSync2, unlinkSync: unlinkSync2 } = await import("fs");
+    const { tmpdir: tmpdir2 } = await import("os");
+    const { randomBytes: randomBytes2 } = await import("crypto");
     const esbuild = await import("esbuild");
-    const dsJson = JSON.stringify(ds || {});
-    const cfgJson = JSON.stringify(config || {});
-    const tmpEntry = (0, import_path.join)(tmpdir(), `br_global_${randomBytes(6).toString("hex")}.mjs`);
-    const tmpOut = (0, import_path.join)(tmpdir(), `br_global_${randomBytes(6).toString("hex")}_out.mjs`);
-    writeFileSync(tmpEntry, `
+    const dsJson = JSON.stringify(ds || {}, safeJsonReplacer());
+    const cfgJson = JSON.stringify(config || {}, safeJsonReplacer());
+    const tmpEntry = (0, import_path.join)(tmpdir2(), `br_global_${randomBytes2(6).toString("hex")}.mjs`);
+    const tmpOut = (0, import_path.join)(tmpdir2(), `br_global_${randomBytes2(6).toString("hex")}_out.mjs`);
+    writeFileSync2(tmpEntry, `
       import { set, getActiveConfig, getFontFaceString } from '@symbo.ls/scratch'
       import { DEFAULT_CONFIG } from '@symbo.ls/default-config'
 
@@ -235,17 +524,17 @@ const generateGlobalCSS = async (ds, config) => {
           const pkg = args.path.replace("@symbo.ls/", "");
           for (const dir of ["packages", "plugins"]) {
             const src = (0, import_path.resolve)(monorepoRoot, dir, pkg, "src", "index.js");
-            if (existsSync(src)) return { path: src };
+            if (existsSync2(src)) return { path: src };
             const dist = (0, import_path.resolve)(monorepoRoot, dir, pkg, "index.js");
-            if (existsSync(dist)) return { path: dist };
+            if (existsSync2(dist)) return { path: dist };
           }
           const blank = (0, import_path.resolve)(monorepoRoot, "packages", "default-config", "blank", "index.js");
-          if (pkg === "default-config" && existsSync(blank)) return { path: blank };
+          if (pkg === "default-config" && existsSync2(blank)) return { path: blank };
         });
         build.onResolve({ filter: /^@domql\// }, (args) => {
           const pkg = args.path.replace("@domql/", "");
           const src = (0, import_path.resolve)(monorepoRoot, "packages", "domql", "packages", pkg, "src", "index.js");
-          if (existsSync(src)) return { path: src };
+          if (existsSync2(src)) return { path: src };
         });
       }
     };
@@ -263,11 +552,11 @@ const generateGlobalCSS = async (ds, config) => {
     const mod = await import(`file://${tmpOut}`);
     const data = mod.default || {};
     try {
-      unlinkSync(tmpEntry);
+      unlinkSync2(tmpEntry);
     } catch {
     }
     try {
-      unlinkSync(tmpOut);
+      unlinkSync2(tmpOut);
     } catch {
     }
     const cssVars = data.CSS_VARS || {};
@@ -320,8 +609,10 @@ ${frameRules}
     return _cachedGlobalCSS;
   }
 };
+let _cachedEmotionCSS = null;
 const resetGlobalCSSCache = () => {
   _cachedGlobalCSS = null;
+  _cachedEmotionCSS = null;
 };
 const renderRoute = async (data, options = {}) => {
   const { route = "/" } = options;
@@ -364,13 +655,21 @@ const renderRoute = async (data, options = {}) => {
   };
 };
 const renderPage = async (data, route = "/", options = {}) => {
-  const { lang = "en", themeColor, isr } = options;
-  const result = await renderRoute(data, { route });
+  const { lang, themeColor, isr, prefetch = true } = options;
+  const htmlLang = lang || data.state?.lang || data.app?.metadata?.lang || "en";
+  const result = await render(data, { route, prefetch });
   if (!result) return null;
   const metadata = { ...result.metadata };
   if (themeColor) metadata["theme-color"] = themeColor;
   const headTags = (0, import_metadata.generateHeadHtml)(metadata);
-  const globalCSS = result.globalCSS || {};
+  if (!_cachedEmotionCSS && result.emotionCSS && result.emotionCSS.length) {
+    _cachedEmotionCSS = result.emotionCSS.join("\n");
+  }
+  const emotionCSS = _cachedEmotionCSS || (result.emotionCSS || []).join("\n");
+  const ds = data.designSystem || {};
+  const globalCSS = await generateGlobalCSS(ds, data.config || data.settings);
+  const fontLinks = generateFontLinks(ds);
+  const brKeyCount = Object.keys(result.registry).length;
   let isrBody = "";
   if (isr && isr.clientScript) {
     const depth = route === "/" ? 0 : route.replace(/^\/|\/$/g, "").split("/").length;
@@ -395,26 +694,26 @@ const renderPage = async (data, route = "/", options = {}) => {
 <script type="module" src="${prefix}${isr.clientScript}"><\/script>`;
   }
   const html = `<!DOCTYPE html>
-<html lang="${lang}">
+<html lang="${htmlLang}">
 <head>
 ${headTags}
-${result.fontLinks}
+${fontLinks}
 ${globalCSS.fontFaceCSS ? `<style>${globalCSS.fontFaceCSS}</style>` : ""}
 <style>
 ${globalCSS.rootRule || ""}
-${result.resetCss}
+${globalCSS.resetRules || ""}
 ${globalCSS.keyframeRules || ""}
 </style>
-<style data-emotion="smbls">
-${result.css}
-</style>
+${emotionCSS ? `<style data-emotion="smbls">
+${emotionCSS}
+</style>` : ""}
 </head>
 <body>
 ${result.html}
 ${isrBody}
 </body>
 </html>`;
-  return { html, route, brKeyCount: result.brKeyCount };
+  return { html, route, brKeyCount };
 };
 const LETTER_TO_INDEX = {
   U: -6,

package/dist/esm/index.js

@@ -1,10 +1,11 @@
 import { createEnv } from "./env.js";
 import { resetKeys, assignKeys, mapKeysToElements } from "./keys.js";
 import { loadProject, loadAndRenderAll } from "./load.js";
-import { render, renderElement, renderRoute, renderPage } from "./render.js";
+import { render, renderElement, renderRoute, renderPage, resetGlobalCSSCache } from "./render.js";
 import { extractMetadata, generateHeadHtml } from "./metadata.js";
 import { collectBrNodes, hydrate } from "./hydrate.js";
 import { generateSitemap } from "./sitemap.js";
+import { prefetchPageData, injectPrefetchedState } from "./prefetch.js";
 var index_default = {
   createEnv,
   resetKeys,
@@ -16,11 +17,14 @@ var index_default = {
   renderElement,
   renderRoute,
   renderPage,
+  resetGlobalCSSCache,
   extractMetadata,
   generateHeadHtml,
   collectBrNodes,
   hydrate,
-  generateSitemap
+  generateSitemap,
+  prefetchPageData,
+  injectPrefetchedState
 };
 export {
   assignKeys,
@@ -31,12 +35,15 @@ export {
   generateHeadHtml,
   generateSitemap,
   hydrate,
+  injectPrefetchedState,
   loadAndRenderAll,
   loadProject,
   mapKeysToElements,
+  prefetchPageData,
   render,
   renderElement,
   renderPage,
   renderRoute,
+  resetGlobalCSSCache,
   resetKeys
 };