@symbo.ls/brender 3.8.9 → 3.14.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 (31) hide show
  1. package/README.md +4 -4
  2. package/dist/esm/env.js +1 -75
  3. package/dist/esm/hydrate.js +1 -546
  4. package/dist/esm/index.js +1 -53
  5. package/dist/esm/keys.js +1 -43
  6. package/dist/esm/load.js +1 -99
  7. package/dist/esm/metadata.js +1 -7
  8. package/dist/esm/prefetch.js +1 -237
  9. package/dist/esm/render.js +50 -1510
  10. package/dist/esm/scripts/liquidate.js +11 -0
  11. package/dist/esm/scripts/render.js +12 -0
  12. package/dist/esm/sitemap.js +10 -19
  13. package/package.json +21 -16
  14. package/dist/cjs/env.js +0 -94
  15. package/dist/cjs/hydrate.js +0 -565
  16. package/dist/cjs/index.js +0 -72
  17. package/dist/cjs/keys.js +0 -62
  18. package/dist/cjs/load.js +0 -128
  19. package/dist/cjs/metadata.js +0 -26
  20. package/dist/cjs/prefetch.js +0 -266
  21. package/dist/cjs/render.js +0 -1600
  22. package/dist/cjs/sitemap.js +0 -41
  23. package/env.js +0 -71
  24. package/hydrate.js +0 -472
  25. package/index.js +0 -54
  26. package/keys.js +0 -54
  27. package/load.js +0 -122
  28. package/metadata.js +0 -5
  29. package/prefetch.js +0 -365
  30. package/render.js +0 -1894
  31. package/sitemap.js +0 -28
package/dist/esm/scripts/liquidate.js ADDED
@@ -0,0 +1,11 @@
1
+ import{resolve as L}from"path";import{parseHTML as M}from"linkedom";import{renderElement as x,collectBrNodes as D,hydrate as O}from"../index.js";import{loadProject as v}from"../load.js";import{css as K}from"@symbo.ls/css";const[g,S]=process.argv.slice(2);g||(console.error("Usage: node liquidate.js <project> [route]"),process.exit(1));const j=L(import.meta.dirname,"..","examples",g),m=S||"/";console.log(`
2
+ Liquidation experiment: ${g} "${m}"
3
+ `),console.log(` Step 1: Render DOMQL -> HTML (server side)
4
+ `);const s=await v(j),f=s.pages[m];f||(console.error(` Route "${m}" not found. Available:`,Object.keys(s.pages)),process.exit(1));const w={components:s.components,snippets:s.snippets||{},designSystem:s.designSystem,state:s.state,functions:s.functions||{},methods:s.methods||{}},c=await x(f,{context:w}),E=Object.keys(c.registry).length;console.log(` HTML: ${c.html.length} chars`),console.log(` data-br keys assigned: ${E}`),console.log(),console.log(` Step 2: Parse HTML into DOM (simulating browser)
5
+ `);const{document:C}=M(`<html><body>${c.html}</body></html>`),p=C.body,h=D(p),y=Object.keys(h);console.log(` DOM nodes with data-br: ${y.length}`),console.log(` Sample: ${y.slice(0,5).join(", ")}...`),console.log(),console.log(` Step 3: DOMQL element tree ready
6
+ `);const a=c.element;let _=0;const u=e=>{if(!(!e||!e.__ref)&&(_++,e.__ref.__children))for(const o of e.__ref.__children){const n=e[o];n?.__ref&&u(n)}};u(a),console.log(` DOMQL elements: ${_}`),console.log(` Root key: ${a.key}`),console.log(` Root tag: <${a.tag}>`),console.log(),console.log(` Step 4: Hydrate \u2014 remap DOMQL elements to DOM nodes
7
+ `);const{element:N,linked:q,unlinked:A}=O(a,{root:p,renderEvents:!1,cssEngine:K,designSystem:s.designSystem});let $=0,b=0;const r=[],k=(e,o="")=>{if(!e||!e.__ref)return;const n=o?`${o}.${e.key}`:e.key,t=e.__ref.__brKey;if(t&&e.node){$++;const l=e.node.tagName?.toLowerCase()||"?",d=e.node.textContent?.slice(0,50)||"";r.push({brKey:t,path:n,tag:l,text:d})}else t&&(b++,r.push({brKey:t,path:n,tag:"?",text:"UNLINKED"}));if(e.__ref.__children)for(const l of e.__ref.__children){const d=e[l];d?.__ref&&k(d,n)}};k(N),console.log(` Linked: ${$} elements`),console.log(` Unlinked: ${b} elements`),console.log(),console.log(` Step 5: data-br -> DOMQL element mapping
8
+ `);const Q=r.slice(0,20);for(const{brKey:e,path:o,tag:n,text:t}of Q){const l=t.length>40?t.slice(0,40)+"...":t;console.log(` ${e.padEnd(8)} <${n.padEnd(8)}> ${o}`),l&&console.log(`${"".padEnd(22)}${l}`)}r.length>20&&console.log(` ... and ${r.length-20} more`),console.log(),console.log(` Step 6: Mutate via DOMQL (proves elements own their nodes)
9
+ `);const i=r.find(e=>e.text&&e.text.length>5&&e.tag!=="svg");if(i){const e=Object.values(c.registry).find(o=>o.__ref?.__brKey===i.brKey);if(e?.node){const o=e.node.textContent?.slice(0,50);e.node.textContent="[LIQUIDATED] "+o;const n=e.node.textContent?.slice(0,60);console.log(` Target: ${i.brKey} (${i.path})`),console.log(` Before: "${o}"`),console.log(` After: "${n}"`),console.log();const t=h[i.brKey];console.log(` DOM check: "${t.textContent?.slice(0,60)}"`),console.log(` Same ref: ${t===e.node}`)}}console.log(`
10
+ Liquidation complete.`),console.log(` DOMQL tree owns the DOM. Updates flow through elements, not innerHTML.
11
+ `);
package/dist/esm/scripts/render.js ADDED
@@ -0,0 +1,12 @@
1
+ import{resolve as l}from"path";import{writeFileSync as d,mkdirSync as $}from"fs";import{renderElement as x}from"../index.js";import{loadProject as O}from"../load.js";const[a,u]=process.argv.slice(2);a||(console.error("Usage: node render.js <project> [route]"),console.error(" e.g. node render.js survey"),process.exit(1));const p=l(import.meta.dirname,"..","examples"),S=l(p,a),g=l(p,`${a}_built`);console.log(`Loading ${a}...`);const o=await O(S);console.log("Project loaded:"),console.log(" pages:",Object.keys(o.pages)),console.log(" components:",Object.keys(o.components)),console.log(" state keys:",Object.keys(o.state).length),console.log(" designSystem keys:",Object.keys(o.designSystem)),console.log();const h=u?[u]:Object.keys(o.pages);console.log(`Rendering ${h.length} route(s)...
2
+ `);for(const e of h){const i=o.pages[e];if(!i){console.error(` Route "${e}" not found`);continue}try{const t=await x(i,{context:{components:o.components,snippets:o.snippets||{},designSystem:o.designSystem,state:o.state,functions:o.functions||{},methods:o.methods||{}}}),n=e==="/"?"index":e.slice(1).replace(/\//g,"-");$(g,{recursive:!0});const s=`<!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <title>${a} - ${e}</title>
8
+ </head>
9
+ <body>
10
+ ${t.html}
11
+ </body>
12
+ </html>`,r=l(g,`${n}.html`);d(r,s,"utf-8");const m=l(g,`${n}-tree.json`),b=j(t.element);d(m,JSON.stringify(b,null,2),"utf-8");const y=l(g,`${n}-registry.json`),f={};for(const[_,c]of Object.entries(t.registry))f[_]={key:c.key,tag:c.tag||c.node?.tagName?.toLowerCase(),path:c.__ref?.path?.join(".")||c.key,text:c.text!=null?String(c.text).slice(0,60):void 0};d(y,JSON.stringify(f,null,2),"utf-8");const k=Object.keys(t.registry);console.log(` ${e}`),console.log(` -> ${r}`),console.log(` -> ${t.html.length} chars, ${k.length} data-br keys`),console.log(` -> tree: ${m}`),console.log(` -> registry: ${y}`),console.log()}catch(t){console.error(` Error rendering ${e}:`,t.message),console.error(t.stack)}}console.log("Done.");function j(e,i=0){if(!e||i>15)return null;const t={tag:e.tag||e.node?.tagName?.toLowerCase(),key:e.key};e.text!=null&&(t.text=e.text),e.__ref?.extends&&(t.extends=e.__ref.extends),e.__ref?.__brKey&&(t.brKey=e.__ref.__brKey);const n={};for(const[s,r]of Object.entries(e))r&&typeof r=="object"&&r.node&&s!=="parent"&&s!=="__ref"&&s!=="context"&&s!=="state"&&!s.startsWith("_")&&(n[s]=j(r,i+1));return Object.keys(n).length>0&&(t.children=n),t}
package/dist/esm/sitemap.js CHANGED
@@ -1,22 +1,13 @@
1
- function generateSitemap(baseUrl, routes) {
2
- const urls = Object.entries(routes).map(([path, config]) => {
3
- const metadata = config.metadata || {};
4
- const canonical = metadata.canonical || `${baseUrl}${path === "/" ? "" : path}`;
5
- return `
6
- <url>
7
- <loc>${canonical}</loc>
8
- <lastmod>${(/* @__PURE__ */ new Date()).toISOString()}</lastmod>
9
- <changefreq>weekly</changefreq>
10
- <priority>${path === "/" ? "1.0" : "0.8"}</priority>
11
- </url>`;
12
- });
13
- return `<?xml version="1.0" encoding="UTF-8"?>
1
+ function s(e,n){return`<?xml version="1.0" encoding="UTF-8"?>
14
2
  <urlset
15
3
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
16
4
  xmlns:xhtml="http://www.w3.org/1999/xhtml">
17
- ${urls.join("\n")}
18
- </urlset>`;
19
- }
20
- export {
21
- generateSitemap
22
- };
5
+ ${Object.entries(n).map(([t,a])=>`
6
+ <url>
7
+ <loc>${(a.metadata||{}).canonical||`${e}${t==="/"?"":t}`}</loc>
8
+ <lastmod>${new Date().toISOString()}</lastmod>
9
+ <changefreq>weekly</changefreq>
10
+ <priority>${t==="/"?"1.0":"0.8"}</priority>
11
+ </url>`).join(`
12
+ `)}
13
+ </urlset>`}export{s as generateSitemap};
package/package.json CHANGED
@@ -1,42 +1,47 @@
1
1
  {
2
2
  "name": "@symbo.ls/brender",
3
- "version": "3.8.9",
3
+ "version": "3.14.1",
4
4
  "license": "CC-BY-NC-4.0",
5
5
  "type": "module",
6
6
  "module": "./dist/esm/index.js",
7
- "main": "./dist/cjs/index.js",
8
7
  "exports": {
9
8
  ".": {
10
- "import": "./index.js",
11
- "require": "./dist/cjs/index.js"
9
+ "development": "./index.js",
10
+ "import": "./dist/esm/index.js",
11
+ "default": "./dist/esm/index.js"
12
12
  },
13
+ "./package.json": "./package.json",
13
14
  "./hydrate": {
14
- "import": "./hydrate.js"
15
+ "development": "./hydrate.js",
16
+ "import": "./dist/esm/hydrate.js",
17
+ "default": "./dist/esm/hydrate.js"
15
18
  },
16
19
  "./load": {
17
- "import": "./load.js"
20
+ "development": "./load.js",
21
+ "import": "./dist/esm/load.js",
22
+ "default": "./dist/esm/load.js"
18
23
  }
19
24
  },
20
25
  "source": "index.js",
21
26
  "files": [
22
27
  "dist",
23
- "*.js"
28
+ "*.md",
29
+ "LICENSE"
24
30
  ],
25
31
  "scripts": {
26
- "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
27
- "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",
28
- "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",
29
- "build": "node ../../build/build.js",
30
- "prepublish": "npm run build && npm run copy:package:cjs",
32
+ "build:esm": "esbuild $(find . -type f -name \"*.js\" -not -path \"*/dist/*\" -not -path \"*/node_modules/*\" -not -path \"*/__tests__/*\" -not -path \"*/test/*\" -not -name \"*.test.js\") --target=es2022 --format=esm --outbase=. --outdir=dist/esm --minify --log-level=warning",
31
33
  "render:survey": "node scripts/render.js survey",
32
34
  "render:rita": "node scripts/render.js rita",
33
- "render:all": "npm run render:survey && npm run render:rita",
35
+ "render:all": "bun run render:survey && bun run render:rita",
34
36
  "liquidate:survey": "node scripts/liquidate.js survey",
35
37
  "liquidate:rita": "node scripts/liquidate.js rita",
36
- "dev:rita": "node examples/serve-rita.js"
38
+ "dev:rita": "node examples/serve-rita.js",
39
+ "build": "rimraf dist && npm run build:esm",
40
+ "prepublishOnly": "npm run build"
37
41
  },
38
42
  "dependencies": {
39
- "@symbo.ls/helmet": "^3.8.9",
43
+ "@symbo.ls/css": "^3.14.0",
44
+ "@symbo.ls/helmet": "^3.14.0",
40
45
  "linkedom": "^0.16.8"
41
46
  },
42
47
  "devDependencies": {
@@ -44,6 +49,6 @@
44
49
  },
45
50
  "sideEffects": false,
46
51
  "publishConfig": {
47
- "access": "public"
52
+ "access": "restricted"
48
53
  }
49
54
  }
package/dist/cjs/env.js DELETED
@@ -1,94 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
- var __getOwnPropNames = Object.getOwnPropertyNames;
4
- var __hasOwnProp = Object.prototype.hasOwnProperty;
5
- var __export = (target, all) => {
6
- for (var name in all)
7
- __defProp(target, name, { get: all[name], enumerable: true });
8
- };
9
- var __copyProps = (to, from, except, desc) => {
10
- if (from && typeof from === "object" || typeof from === "function") {
11
- for (let key of __getOwnPropNames(from))
12
- if (!__hasOwnProp.call(to, key) && key !== except)
13
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
- }
15
- return to;
16
- };
17
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
- var env_exports = {};
19
- __export(env_exports, {
20
- createEnv: () => createEnv
21
- });
22
- module.exports = __toCommonJS(env_exports);
23
- var import_linkedom = require("linkedom");
24
- const createEnv = (html = "<!DOCTYPE html><html><head></head><body></body></html>") => {
25
- const { window, document } = (0, import_linkedom.parseHTML)(html);
26
- if (!window.requestAnimationFrame) {
27
- window.requestAnimationFrame = (fn) => setTimeout(fn, 0);
28
- }
29
- if (!window.cancelAnimationFrame) {
30
- window.cancelAnimationFrame = (id) => clearTimeout(id);
31
- }
32
- if (!window.history) {
33
- window.history = {
34
- pushState: () => {
35
- },
36
- replaceState: () => {
37
- },
38
- state: null
39
- };
40
- }
41
- if (!window.location) {
42
- window.location = { pathname: "/", search: "", hash: "", origin: "http://localhost" };
43
- }
44
- if (!window.URL) {
45
- window.URL = URL;
46
- }
47
- if (!window.scrollTo) {
48
- window.scrollTo = () => {
49
- };
50
- }
51
- const createStorage = () => {
52
- const store = {};
53
- return {
54
- getItem: (k) => store[k] ?? null,
55
- setItem: (k, v) => {
56
- store[k] = String(v);
57
- },
58
- removeItem: (k) => {
59
- delete store[k];
60
- },
61
- clear: () => {
62
- for (const k in store) delete store[k];
63
- },
64
- get length() {
65
- return Object.keys(store).length;
66
- },
67
- key: (i) => Object.keys(store)[i] ?? null
68
- };
69
- };
70
- if (!window.localStorage) window.localStorage = createStorage();
71
- if (!window.sessionStorage) window.sessionStorage = createStorage();
72
- if (!globalThis.localStorage) globalThis.localStorage = window.localStorage;
73
- if (!globalThis.sessionStorage) globalThis.sessionStorage = window.sessionStorage;
74
- if (!window.MutationObserver) {
75
- window.MutationObserver = class MutationObserver {
76
- constructor() {
77
- }
78
- observe() {
79
- }
80
- disconnect() {
81
- }
82
- takeRecords() {
83
- return [];
84
- }
85
- };
86
- }
87
- globalThis.window = window;
88
- globalThis.document = document;
89
- globalThis.Node = window.Node || globalThis.Node;
90
- globalThis.HTMLElement = window.HTMLElement || globalThis.HTMLElement;
91
- globalThis.MutationObserver = window.MutationObserver;
92
- globalThis.Window = window.constructor;
93
- return { window, document };
94
- };