@symbo.ls/brender 3.14.0 → 3.14.2

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/CHANGELOG.md +12 -0
  2. package/dist/esm/env.js +1 -80
  3. package/dist/esm/hydrate.js +1 -535
  4. package/dist/esm/index.js +1 -53
  5. package/dist/esm/keys.js +1 -43
  6. package/dist/esm/load.js +1 -114
  7. package/dist/esm/metadata.js +1 -7
  8. package/dist/esm/prefetch.js +1 -235
  9. package/dist/esm/render.js +50 -1512
  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 +27 -17
  14. package/dist/cjs/env.js +0 -99
  15. package/dist/cjs/hydrate.js +0 -554
  16. package/dist/cjs/index.js +0 -72
  17. package/dist/cjs/keys.js +0 -62
  18. package/dist/cjs/load.js +0 -143
  19. package/dist/cjs/metadata.js +0 -26
  20. package/dist/cjs/prefetch.js +0 -264
  21. package/dist/cjs/render.js +0 -1602
  22. package/dist/cjs/sitemap.js +0 -41
  23. package/env.js +0 -76
  24. package/hydrate.js +0 -462
  25. package/index.js +0 -54
  26. package/keys.js +0 -54
  27. package/load.js +0 -141
  28. package/metadata.js +0 -5
  29. package/prefetch.js +0 -363
  30. package/render.js +0 -1887
  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,37 +1,47 @@
1
1
  {
2
2
  "name": "@symbo.ls/brender",
3
- "version": "3.14.0",
3
+ "version": "3.14.2",
4
4
  "license": "CC-BY-NC-4.0",
5
5
  "type": "module",
6
- "module": "./index.js",
7
- "main": "./index.js",
6
+ "module": "./dist/esm/index.js",
8
7
  "exports": {
9
- ".": "./index.js",
10
- "./hydrate": "./hydrate.js",
11
- "./load": "./load.js",
12
- "./package.json": "./package.json"
8
+ ".": {
9
+ "development": "./index.js",
10
+ "import": "./dist/esm/index.js",
11
+ "default": "./dist/esm/index.js"
12
+ },
13
+ "./package.json": "./package.json",
14
+ "./hydrate": {
15
+ "development": "./hydrate.js",
16
+ "import": "./dist/esm/hydrate.js",
17
+ "default": "./dist/esm/hydrate.js"
18
+ },
19
+ "./load": {
20
+ "development": "./load.js",
21
+ "import": "./dist/esm/load.js",
22
+ "default": "./dist/esm/load.js"
23
+ }
13
24
  },
14
25
  "source": "index.js",
15
26
  "files": [
16
27
  "dist",
17
- "*.js"
28
+ "*.md",
29
+ "LICENSE"
18
30
  ],
19
31
  "scripts": {
20
- "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
21
- "build:esm": "NODE_ENV=$NODE_ENV esbuild *.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
22
- "build:cjs": "NODE_ENV=$NODE_ENV esbuild *.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
23
- "build": "node ../../build/build.js",
24
- "prepublish": "bun run build && bun 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 -path \"*/demo/*\" -not -path \"*/demos/*\" -not -path \"*/examples/*\" -not -path \"*/fixtures/*\" -not -name \"*.test.js\") --target=es2022 --format=esm --outbase=. --outdir=dist/esm --minify --log-level=warning",
25
33
  "render:survey": "node scripts/render.js survey",
26
34
  "render:rita": "node scripts/render.js rita",
27
35
  "render:all": "bun run render:survey && bun run render:rita",
28
36
  "liquidate:survey": "node scripts/liquidate.js survey",
29
37
  "liquidate:rita": "node scripts/liquidate.js rita",
30
- "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"
31
41
  },
32
42
  "dependencies": {
33
- "@symbo.ls/css": "^3.14.0",
34
- "@symbo.ls/helmet": "^3.14.0",
43
+ "@symbo.ls/css": "^3.14.4",
44
+ "@symbo.ls/helmet": "^3.14.2",
35
45
  "linkedom": "^0.16.8"
36
46
  },
37
47
  "devDependencies": {
@@ -39,6 +49,6 @@
39
49
  },
40
50
  "sideEffects": false,
41
51
  "publishConfig": {
42
- "access": "public"
52
+ "access": "restricted"
43
53
  }
44
54
  }
package/dist/cjs/env.js DELETED
@@ -1,99 +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) => {
28
- const id = setTimeout(fn, 0);
29
- if (id?.unref) id.unref();
30
- return id;
31
- };
32
- }
33
- if (!window.cancelAnimationFrame) {
34
- window.cancelAnimationFrame = (id) => clearTimeout(id);
35
- }
36
- if (!window.history) {
37
- window.history = {
38
- pushState: () => {
39
- },
40
- replaceState: () => {
41
- },
42
- state: null
43
- };
44
- }
45
- if (!window.location) {
46
- window.location = { pathname: "/", search: "", hash: "", origin: "http://localhost" };
47
- }
48
- if (!window.URL) {
49
- window.URL = URL;
50
- }
51
- if (!window.scrollTo) {
52
- window.scrollTo = () => {
53
- };
54
- }
55
- const createStorage = () => {
56
- const store = {};
57
- return {
58
- getItem: (k) => store[k] ?? null,
59
- setItem: (k, v) => {
60
- store[k] = String(v);
61
- },
62
- removeItem: (k) => {
63
- delete store[k];
64
- },
65
- clear: () => {
66
- for (const k in store) delete store[k];
67
- },
68
- get length() {
69
- return Object.keys(store).length;
70
- },
71
- key: (i) => Object.keys(store)[i] ?? null
72
- };
73
- };
74
- if (!window.localStorage) window.localStorage = createStorage();
75
- if (!window.sessionStorage) window.sessionStorage = createStorage();
76
- if (!globalThis.localStorage) globalThis.localStorage = window.localStorage;
77
- if (!globalThis.sessionStorage) globalThis.sessionStorage = window.sessionStorage;
78
- if (!window.MutationObserver) {
79
- window.MutationObserver = class MutationObserver {
80
- constructor() {
81
- }
82
- observe() {
83
- }
84
- disconnect() {
85
- }
86
- takeRecords() {
87
- return [];
88
- }
89
- };
90
- }
91
- globalThis.window = window;
92
- globalThis.document = document;
93
- globalThis.Node = window.Node || globalThis.Node;
94
- globalThis.Element = window.Element || globalThis.Element;
95
- globalThis.HTMLElement = window.HTMLElement || globalThis.HTMLElement;
96
- globalThis.MutationObserver = window.MutationObserver;
97
- globalThis.Window = window.constructor;
98
- return { window, document };
99
- };