npm - @symbo.ls/brender - Versions diffs - 3.5.0 → 3.6.1 - Mend

@symbo.ls/brender 3.5.0 → 3.6.1

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 (20) hide show

package/README.md CHANGED Viewed

@@ -63,7 +63,7 @@ Browser DOM (static)              DOMQL Tree (no nodes)         After hydrate()
 | `hydrate.js` | `collectBrNodes()` — scans DOM for data-br nodes; `hydrate()` — reconnects DOMQL tree to DOM |
 | `env.js` | `createEnv()` — linkedom virtual DOM with browser API stubs (requestAnimationFrame, history, location, etc.) |
 | `keys.js` | `resetKeys()`, `assignKeys()` — stamps data-br on DOM nodes; `mapKeysToElements()` — builds registry |
-| `metadata.js` | `extractMetadata()`, `generateHeadHtml()` — SEO meta tags from page definitions |
+| `metadata.js` | Re-exports from [`@symbo.ls/helmet`](../helmet/) — `extractMetadata()`, `generateHeadHtml()`, `resolveMetadata()`, `applyMetadata()` |
 | `load.js` | `loadProject()` — imports a symbols/ directory; `loadAndRenderAll()` — renders every route |
 | `index.js` | Re-exports everything |
@@ -168,13 +168,15 @@ Creates a linkedom virtual DOM environment with stubs for browser APIs that DOMQ
 ### `generateHeadHtml(metadata)`
-Converts a metadata object into HTML head tags:
+Converts a metadata object into HTML head tags. Provided by [`@symbo.ls/helmet`](../helmet/):
 ```js
 generateHeadHtml({ title: 'My Page', description: 'About', 'og:image': '/img.png' })
 // -> '<meta charset="UTF-8">\n<title>My Page</title>\n<meta name="description" content="About">\n<meta property="og:image" content="/img.png">'
 ```
+Metadata values can also be functions — see the [helmet plugin](../helmet/) for details.
 ## Examples
 The `examples/` directory contains runnable experiments. Copy a project's source into `examples/` first (gitignored), then run:
@@ -280,3 +282,17 @@ This means the server and client don't need to exchange the registry — as long
 - `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
 - `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
+## Theme support
+Brender defaults to `globalTheme: 'auto'`, generating CSS with both `prefers-color-scheme` media queries and `[data-theme]` selectors. The SSR output includes theme-switching CSS variables that work without JavaScript:
+```css
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) { --theme-document-background: #000; }
+}
+[data-theme="dark"] { --theme-document-background: #000; }
+[data-theme="ocean"] { --theme-document-background: #0a2e4e; }
+```
+Custom themes beyond dark/light are activated via `data-theme` attribute on the root element.

package/dist/cjs/env.js CHANGED Viewed

@@ -48,6 +48,29 @@ const createEnv = (html = "<!DOCTYPE html><html><head></head><body></body></html
     window.scrollTo = () => {
     };
   }
+  const createStorage = () => {
+    const store = {};
+    return {
+      getItem: (k) => store[k] ?? null,
+      setItem: (k, v) => {
+        store[k] = String(v);
+      },
+      removeItem: (k) => {
+        delete store[k];
+      },
+      clear: () => {
+        for (const k in store) delete store[k];
+      },
+      get length() {
+        return Object.keys(store).length;
+      },
+      key: (i) => Object.keys(store)[i] ?? null
+    };
+  };
+  if (!window.localStorage) window.localStorage = createStorage();
+  if (!window.sessionStorage) window.sessionStorage = createStorage();
+  if (!globalThis.localStorage) globalThis.localStorage = window.localStorage;
+  if (!globalThis.sessionStorage) globalThis.sessionStorage = window.sessionStorage;
   globalThis.window = window;
   globalThis.document = document;
   globalThis.Node = window.Node || globalThis.Node;

package/dist/cjs/index.js CHANGED Viewed

@@ -23,6 +23,7 @@ __export(index_exports, {
   default: () => index_default,
   extractMetadata: () => import_metadata.extractMetadata,
   generateHeadHtml: () => import_metadata.generateHeadHtml,
+  generateSitemap: () => import_sitemap.generateSitemap,
   hydrate: () => import_hydrate.hydrate,
   loadAndRenderAll: () => import_load.loadAndRenderAll,
   loadProject: () => import_load.loadProject,
@@ -40,6 +41,7 @@ var import_load = require("./load.js");
 var import_render = require("./render.js");
 var import_metadata = require("./metadata.js");
 var import_hydrate = require("./hydrate.js");
+var import_sitemap = require("./sitemap.js");
 var index_default = {
   createEnv: import_env.createEnv,
   resetKeys: import_keys.resetKeys,
@@ -54,5 +56,6 @@ var index_default = {
   extractMetadata: import_metadata.extractMetadata,
   generateHeadHtml: import_metadata.generateHeadHtml,
   collectBrNodes: import_hydrate.collectBrNodes,
-  hydrate: import_hydrate.hydrate
+  hydrate: import_hydrate.hydrate,
+  generateSitemap: import_sitemap.generateSitemap
 };

package/dist/cjs/load.js CHANGED Viewed

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var load_exports = {};
 __export(load_exports, {
@@ -22,15 +32,51 @@ __export(load_exports, {
 });
 module.exports = __toCommonJS(load_exports);
 var import_path = require("path");
-const loadProject = async (projectPath) => {
-  const symbolsDir = (0, import_path.resolve)(projectPath, "symbols");
-  const tryImport = async (modulePath) => {
+var import_fs = require("fs");
+var import_os = require("os");
+var import_crypto = require("crypto");
+const bundleAndImport = async (entryPath) => {
+  if (!(0, import_fs.existsSync)(entryPath)) return null;
+  let esbuild;
+  try {
+    esbuild = await import("esbuild");
+  } catch {
     try {
-      return await import(modulePath);
+      return await import(entryPath);
     } catch {
       return null;
     }
-  };
+  }
+  const outFile = (0, import_path.join)((0, import_os.tmpdir)(), `brender_${(0, import_crypto.randomBytes)(8).toString("hex")}.mjs`);
+  try {
+    await esbuild.build({
+      entryPoints: [entryPath],
+      bundle: true,
+      format: "esm",
+      platform: "node",
+      outfile: outFile,
+      write: true,
+      logLevel: "silent",
+      // Mark node builtins as external
+      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"]
+    });
+    const mod = await import(`file://${outFile}`);
+    return mod;
+  } catch {
+    try {
+      return await import(entryPath);
+    } catch {
+      return null;
+    }
+  } finally {
+    try {
+      (0, import_fs.unlinkSync)(outFile);
+    } catch {
+    }
+  }
+};
+const loadProject = async (projectPath) => {
+  const symbolsDir = (0, import_path.resolve)(projectPath, "symbols");
   const [
     appModule,
     stateModule,
@@ -44,17 +90,17 @@ const loadProject = async (projectPath) => {
     designSystemModule,
     filesModule
   ] = await Promise.all([
-    tryImport((0, import_path.join)(symbolsDir, "app.js")),
-    tryImport((0, import_path.join)(symbolsDir, "state.js")),
-    tryImport((0, import_path.join)(symbolsDir, "config.js")),
-    tryImport((0, import_path.join)(symbolsDir, "dependencies.js")),
-    tryImport((0, import_path.join)(symbolsDir, "components", "index.js")),
-    tryImport((0, import_path.join)(symbolsDir, "snippets", "index.js")),
-    tryImport((0, import_path.join)(symbolsDir, "pages", "index.js")),
-    tryImport((0, import_path.join)(symbolsDir, "functions", "index.js")),
-    tryImport((0, import_path.join)(symbolsDir, "methods", "index.js")),
-    tryImport((0, import_path.join)(symbolsDir, "designSystem", "index.js")),
-    tryImport((0, import_path.join)(symbolsDir, "files", "index.js"))
+    bundleAndImport((0, import_path.join)(symbolsDir, "app.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "state.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "config.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "dependencies.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "components", "index.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "snippets", "index.js")),
+    bundleAndImport((0, import_path.join)(symbolsDir, "pages", "index.js")),
+    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"))
   ]);
   return {
     app: appModule?.default || {},

package/dist/cjs/metadata.js CHANGED Viewed

@@ -17,86 +17,10 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var metadata_exports = {};
 __export(metadata_exports, {
-  extractMetadata: () => extractMetadata,
-  generateHeadHtml: () => generateHeadHtml
+  applyMetadata: () => import_helmet.applyMetadata,
+  extractMetadata: () => import_helmet.extractMetadata,
+  generateHeadHtml: () => import_helmet.generateHeadHtml,
+  resolveMetadata: () => import_helmet.resolveMetadata
 });
 module.exports = __toCommonJS(metadata_exports);
-const extractMetadata = (data, route = "/") => {
-  const pages = data.pages || {};
-  const page = pages[route];
-  let metadata = {};
-  if (data.integrations?.seo) {
-    metadata = { ...data.integrations.seo };
-  }
-  if (page) {
-    const pageMeta = page.metadata || page.helmet || {};
-    metadata = { ...metadata, ...pageMeta };
-    if (!metadata.title && page.state?.title) {
-      metadata.title = page.state.title;
-    }
-    if (!metadata.description && page.state?.description) {
-      metadata.description = page.state.description;
-    }
-  }
-  if (!metadata.title) {
-    metadata.title = data.name || "Symbols";
-  }
-  return metadata;
-};
-const generateHeadHtml = (metadata) => {
-  const esc = (text) => {
-    if (text === null || text === void 0) return "";
-    const map = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;" };
-    return text.toString().replace(/[&<>"']/g, (m) => map[m]);
-  };
-  const tags = [
-    '<meta charset="UTF-8">',
-    '<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">'
-  ];
-  for (const [key, value] of Object.entries(metadata)) {
-    if (!value && value !== 0 && value !== false) continue;
-    if (key === "title") {
-      tags.push(`<title>${esc(value)}</title>`);
-      continue;
-    }
-    if (key === "canonical") {
-      tags.push(`<link rel="canonical" href="${esc(value)}">`);
-      continue;
-    }
-    if (key === "alternate" && Array.isArray(value)) {
-      value.forEach((alt) => {
-        if (typeof alt === "object") {
-          const attrs = Object.entries(alt).map(([k, v]) => `${k}="${esc(v)}"`).join(" ");
-          tags.push(`<link rel="alternate" ${attrs}>`);
-        }
-      });
-      continue;
-    }
-    const propertyPrefixes = ["og:", "article:", "product:", "fb:", "profile:", "book:", "business:", "music:", "video:"];
-    const namePrefixes = ["twitter:", "DC:", "DCTERMS:"];
-    const isProperty = propertyPrefixes.some((p) => key.startsWith(p));
-    const isName = namePrefixes.some((p) => key.startsWith(p));
-    if (key.startsWith("http-equiv:")) {
-      const httpKey = key.replace("http-equiv:", "");
-      tags.push(`<meta http-equiv="${esc(httpKey)}" content="${esc(value)}">`);
-    } else if (key.startsWith("itemprop:")) {
-      const itemKey = key.replace("itemprop:", "");
-      tags.push(`<meta itemprop="${esc(itemKey)}" content="${esc(value)}">`);
-    } else if (isProperty) {
-      if (Array.isArray(value)) {
-        value.forEach((v) => tags.push(`<meta property="${esc(key)}" content="${esc(v)}">`));
-      } else {
-        tags.push(`<meta property="${esc(key)}" content="${esc(value)}">`);
-      }
-    } else if (isName) {
-      tags.push(`<meta name="${esc(key)}" content="${esc(value)}">`);
-    } else if (key !== "favicon" && key !== "favicons") {
-      if (Array.isArray(value)) {
-        value.forEach((v) => tags.push(`<meta name="${esc(key)}" content="${esc(v)}">`));
-      } else if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-        tags.push(`<meta name="${esc(key)}" content="${esc(value)}">`);
-      }
-    }
-  }
-  return tags.join("\n");
-};
+var import_helmet = require("@symbo.ls/helmet");