$lib

; 2 | -------------------------------------------------------------------------------- /test/children.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | udomsay 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /test/children.js: -------------------------------------------------------------------------------- 1 | var _templateReference = {}, 2 | _templateReference2 = {}; 3 | globalThis.ESXToken || (globalThis.ESXToken = class ESXToken { static ATTRIBUTE = 1; static COMPONENT = 2; static ELEMENT = 3; static FRAGMENT = 4; static INTERPOLATION = 5; static STATIC = 6; static _ = Object.freeze([]); static a = (dynamic, name, value) => ({ type: 1, dynamic, name, value }); static b = (type, value) => ({ type, value }); constructor(id, type, attributes, children, name, value) { this.id = id; this.type = type; this.attributes = attributes; this.children = children; this.name = name; this.value = value; } get properties() { const { attributes } = this; if (attributes.length) { const properties = {}; for (const entry of attributes) { if (entry.type < 2) properties[entry.name] = entry.value;else Object.assign(properties, entry.value); } return properties; } return null; } }); 4 | // grab signals from various libaries, here the simplest I know 5 | import { createRender, signal } from '../signal.js'; 6 | const render = createRender(); 7 | 8 | // Counter Cmponent example 9 | function Outer(_, ...children) { 10 | return new ESXToken(_templateReference, 3, ESXToken._, [ESXToken.b(5, children)], "ul", "ul"); 11 | } 12 | render(new ESXToken(_templateReference2, 2, ESXToken._, [new ESXToken(null, 3, ESXToken._, [ESXToken.b(6, "A")], "li", "li"), new ESXToken(null, 3, ESXToken._, [ESXToken.b(5, 'B')], "li", "li")], "Outer", Outer), document.body); 13 | -------------------------------------------------------------------------------- /test/children.jsx: -------------------------------------------------------------------------------- 1 | // grab signals from various libaries, here the simplest I know 2 | import {createRender, signal} from '../signal.js'; 3 | 4 | const render = createRender(); 5 | 6 | // Counter Cmponent example 7 | function Outer(_, ...children) { 8 | return ( 9 |

{children} 10 | ); 11 | } 12 | 13 | render( 14 | 15 |

16 |

{'B'}

17 | , 18 | document.body 19 | ); 20 | -------------------------------------------------------------------------------- /test/counter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | udomsay 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /test/counter.js: -------------------------------------------------------------------------------- 1 | var _templateReference = {}, 2 | _templateReference2 = {}; 3 | globalThis.ESXToken || (globalThis.ESXToken = class ESXToken { static ATTRIBUTE = 1; static COMPONENT = 2; static ELEMENT = 3; static FRAGMENT = 4; static INTERPOLATION = 5; static STATIC = 6; static _ = Object.freeze([]); static a = (dynamic, name, value) => ({ type: 1, dynamic, name, value }); static b = (type, value) => ({ type, value }); constructor(id, type, attributes, children, name, value) { this.id = id; this.type = type; this.attributes = attributes; this.children = children; this.name = name; this.value = value; } get properties() { const { attributes } = this; if (attributes.length) { const properties = {}; for (const entry of attributes) { if (entry.type < 2) properties[entry.name] = entry.value;else Object.assign(properties, entry.value); } return properties; } return null; } }); 4 | // grab signals from various libaries, here the simplest I know 5 | import { Signal, signal, effect } from 'https://unpkg.com/@webreflection/signal'; 6 | 7 | // import the `createRender` utility 8 | import createRender from '../index.js'; 9 | const render = createRender({ 10 | Signal, 11 | effect 12 | }); 13 | 14 | // Counter Cmponent example 15 | function Counter({ 16 | clicks 17 | }) { 18 | const attrs = { 19 | a: 1 20 | }; 21 | return new ESXToken(_templateReference, 3, [ESXToken.b(5, attrs)], [new ESXToken(null, 3, [ESXToken.a(true, "onclick", () => { 22 | clicks.value--; 23 | })], [ESXToken.b(6, "-")], "button", "button"), new ESXToken(null, 3, ESXToken._, [ESXToken.b(5, clicks)], "span", "span"), new ESXToken(null, 3, [ESXToken.a(true, "onclick", () => { 24 | clicks.value++; 25 | })], [ESXToken.b(6, "+")], "button", "button")], "div", "div"); 26 | } 27 | render(new ESXToken(_templateReference2, 2, [ESXToken.a(true, "clicks", signal(0))], ESXToken._, "Counter", Counter), document.body); 28 | -------------------------------------------------------------------------------- /test/counter.jsx: -------------------------------------------------------------------------------- 1 | // grab signals from various libaries, here the simplest I know 2 | import {Signal, signal, effect} from 'https://unpkg.com/@webreflection/signal'; 3 | 4 | // import the `createRender` utility 5 | import createRender from 'https://unpkg.com/udomsay'; 6 | const render = createRender({Signal, effect}); 7 | 8 | // Counter Cmponent example 9 | function Counter({clicks}) { 10 | const attrs = {a: 1}; 11 | return ( 12 |

13 | 14 | {clicks} 15 | 16 |

17 | ); 18 | } 19 | 20 | render( 21 | , 22 | document.body 23 | ); 24 | -------------------------------------------------------------------------------- /test/dist/preact.html: -------------------------------------------------------------------------------- 1 | preact 2 | -------------------------------------------------------------------------------- /test/dist/preact.js: -------------------------------------------------------------------------------- 1 | var _templateReference = {}, 2 | _templateReference2 = {}; 3 | globalThis.ESXToken || (globalThis.ESXToken = class ESXToken { static ATTRIBUTE = 1; static COMPONENT = 2; static ELEMENT = 3; static FRAGMENT = 4; static INTERPOLATION = 5; static STATIC = 6; static _ = Object.freeze([]); static a = (dynamic, name, value) => ({ type: 1, dynamic, name, value }); static b = (type, value) => ({ type, value }); constructor(id, type, attributes, children, name, value) { this.id = id; this.type = type; this.attributes = attributes; this.children = children; this.name = name; this.value = value; } get properties() { const { attributes } = this; if (attributes.length) { const properties = {}; for (const entry of attributes) { if (entry.type < 2) properties[entry.name] = entry.value;else Object.assign(properties, entry.value); } return properties; } return null; } }); 4 | import { createRender, signal } from '../../preact.js'; 5 | const render = createRender(); 6 | render(new ESXToken(_templateReference, 2, [ESXToken.a(true, "clicks", signal(0))], ESXToken._, "Counter", Counter), document.body); 7 | function Counter({ 8 | clicks 9 | }) { 10 | return new ESXToken(_templateReference2, 3, ESXToken._, [new ESXToken(null, 3, [ESXToken.a(true, "onclick", () => { 11 | clicks.value--; 12 | })], [ESXToken.b(6, "-")], "button", "button"), new ESXToken(null, 3, ESXToken._, [ESXToken.b(5, clicks)], "span", "span"), new ESXToken(null, 3, [ESXToken.a(true, "onclick", () => { 13 | clicks.value++; 14 | })], [ESXToken.b(6, "+")], "button", "button")], "div", "div"); 15 | } 16 | -------------------------------------------------------------------------------- /test/dist/preact.jsx: -------------------------------------------------------------------------------- 1 | import {createRender, signal} from '../../preact.js'; 2 | const render = createRender(); 3 | 4 | render( 5 | , 6 | document.body 7 | ); 8 | 9 | function Counter({clicks}) { 10 | return ( 11 |

12 | 13 | {clicks} 14 | 15 |

16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /test/dist/signal.html: -------------------------------------------------------------------------------- 1 | signal 2 | -------------------------------------------------------------------------------- /test/dist/signal.js: -------------------------------------------------------------------------------- 1 | var _templateReference = {}, 2 | _templateReference2 = {}; 3 | globalThis.ESXToken || (globalThis.ESXToken = class ESXToken { static ATTRIBUTE = 1; static COMPONENT = 2; static ELEMENT = 3; static FRAGMENT = 4; static INTERPOLATION = 5; static STATIC = 6; static _ = Object.freeze([]); static a = (dynamic, name, value) => ({ type: 1, dynamic, name, value }); static b = (type, value) => ({ type, value }); constructor(id, type, attributes, children, name, value) { this.id = id; this.type = type; this.attributes = attributes; this.children = children; this.name = name; this.value = value; } get properties() { const { attributes } = this; if (attributes.length) { const properties = {}; for (const entry of attributes) { if (entry.type < 2) properties[entry.name] = entry.value;else Object.assign(properties, entry.value); } return properties; } return null; } }); 4 | import { createRender, signal } from '../../signal.js'; 5 | const render = createRender(); 6 | render(new ESXToken(_templateReference, 2, [ESXToken.a(true, "clicks", signal(0))], ESXToken._, "Counter", Counter), document.body); 7 | function Counter({ 8 | clicks 9 | }) { 10 | return new ESXToken(_templateReference2, 3, ESXToken._, [new ESXToken(null, 3, [ESXToken.a(true, "onclick", () => { 11 | clicks.value--; 12 | })], [ESXToken.b(6, "-")], "button", "button"), new ESXToken(null, 3, ESXToken._, [ESXToken.b(5, clicks)], "span", "span"), new ESXToken(null, 3, [ESXToken.a(true, "onclick", () => { 13 | clicks.value++; 14 | })], [ESXToken.b(6, "+")], "button", "button")], "div", "div"); 15 | } 16 | -------------------------------------------------------------------------------- /test/dist/signal.jsx: -------------------------------------------------------------------------------- 1 | import {createRender, signal} from '../../signal.js'; 2 | const render = createRender(); 3 | 4 | render( 5 | , 6 | document.body 7 | ); 8 | 9 | function Counter({clicks}) { 10 | return ( 11 |

12 | 13 | {clicks} 14 | 15 |

16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /test/dist/solid.html: -------------------------------------------------------------------------------- 1 | solid 2 | -------------------------------------------------------------------------------- /test/dist/solid.js: -------------------------------------------------------------------------------- 1 | var _templateReference = {}, 2 | _templateReference2 = {}; 3 | globalThis.ESXToken || (globalThis.ESXToken = class ESXToken { static ATTRIBUTE = 1; static COMPONENT = 2; static ELEMENT = 3; static FRAGMENT = 4; static INTERPOLATION = 5; static STATIC = 6; static _ = Object.freeze([]); static a = (dynamic, name, value) => ({ type: 1, dynamic, name, value }); static b = (type, value) => ({ type, value }); constructor(id, type, attributes, children, name, value) { this.id = id; this.type = type; this.attributes = attributes; this.children = children; this.name = name; this.value = value; } get properties() { const { attributes } = this; if (attributes.length) { const properties = {}; for (const entry of attributes) { if (entry.type < 2) properties[entry.name] = entry.value;else Object.assign(properties, entry.value); } return properties; } return null; } }); 4 | import { createRender, createSignal } from '../../solid.js'; 5 | const render = createRender(); 6 | render(new ESXToken(_templateReference, 2, [ESXToken.a(true, "clicks", createSignal(0))], ESXToken._, "Counter", Counter), document.body); 7 | function Counter({ 8 | clicks 9 | }) { 10 | const [signal, update] = clicks; 11 | const value = signal(); 12 | return new ESXToken(_templateReference2, 3, ESXToken._, [new ESXToken(null, 3, [ESXToken.a(true, "onclick", () => { 13 | update(value - 1); 14 | })], [ESXToken.b(6, "-")], "button", "button"), new ESXToken(null, 3, ESXToken._, [ESXToken.b(5, value)], "span", "span"), new ESXToken(null, 3, [ESXToken.a(true, "onclick", () => { 15 | update(value + 1); 16 | })], [ESXToken.b(6, "+")], "button", "button")], "div", "div"); 17 | } 18 | -------------------------------------------------------------------------------- /test/dist/solid.jsx: -------------------------------------------------------------------------------- 1 | import {createRender, createSignal} from '../../solid.js'; 2 | const render = createRender(); 3 | 4 | render( 5 | , 6 | document.body 7 | ); 8 | 9 | function Counter({clicks}) { 10 | const [signal, update] = clicks; 11 | const value = signal(); 12 | return ( 13 |

14 | 15 | {value} 16 | 17 |

18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /test/dist/usignal.html: -------------------------------------------------------------------------------- 1 | usignal 2 | -------------------------------------------------------------------------------- /test/dist/usignal.js: -------------------------------------------------------------------------------- 1 | var _templateReference = {}, 2 | _templateReference2 = {}; 3 | globalThis.ESXToken || (globalThis.ESXToken = class ESXToken { static ATTRIBUTE = 1; static COMPONENT = 2; static ELEMENT = 3; static FRAGMENT = 4; static INTERPOLATION = 5; static STATIC = 6; static _ = Object.freeze([]); static a = (dynamic, name, value) => ({ type: 1, dynamic, name, value }); static b = (type, value) => ({ type, value }); constructor(id, type, attributes, children, name, value) { this.id = id; this.type = type; this.attributes = attributes; this.children = children; this.name = name; this.value = value; } get properties() { const { attributes } = this; if (attributes.length) { const properties = {}; for (const entry of attributes) { if (entry.type < 2) properties[entry.name] = entry.value;else Object.assign(properties, entry.value); } return properties; } return null; } }); 4 | import { createRender, signal } from '../../usignal.js'; 5 | const render = createRender(); 6 | render(new ESXToken(_templateReference, 2, [ESXToken.a(true, "clicks", signal(0))], ESXToken._, "Counter", Counter), document.body); 7 | function Counter({ 8 | clicks 9 | }) { 10 | return new ESXToken(_templateReference2, 3, ESXToken._, [new ESXToken(null, 3, [ESXToken.a(true, "onclick", () => { 11 | clicks.value--; 12 | })], [ESXToken.b(6, "-")], "button", "button"), new ESXToken(null, 3, ESXToken._, [ESXToken.b(5, clicks)], "span", "span"), new ESXToken(null, 3, [ESXToken.a(true, "onclick", () => { 13 | clicks.value++; 14 | })], [ESXToken.b(6, "+")], "button", "button")], "div", "div"); 15 | } 16 | -------------------------------------------------------------------------------- /test/dist/usignal.jsx: -------------------------------------------------------------------------------- 1 | import {createRender, signal} from '../../usignal.js'; 2 | const render = createRender(); 3 | 4 | render( 5 | , 6 | document.body 7 | ); 8 | 9 | function Counter({clicks}) { 10 | return ( 11 |

12 | 13 | {clicks} 14 | 15 |

16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /test/esx-babel.js: -------------------------------------------------------------------------------- 1 | var _templateReference = {}, 2 | _templateReference2 = {}, 3 | _templateReference3 = {}, 4 | _templateReference4 = {}, 5 | _templateReference5 = {}, 6 | _templateReference6 = {}, 7 | _templateReference7 = {}; 8 | globalThis.ESXToken || (globalThis.ESXToken = class ESXToken { static ATTRIBUTE = 1; static COMPONENT = 2; static ELEMENT = 3; static FRAGMENT = 4; static INTERPOLATION = 5; static STATIC = 6; static _ = Object.freeze([]); static a = (dynamic, name, value) => ({ type: 1, dynamic, name, value }); static b = (type, value) => ({ type, value }); constructor(id, type, attributes, children, name, value) { this.id = id; this.type = type; this.attributes = attributes; this.children = children; this.name = name; this.value = value; } get properties() { const { attributes } = this; if (attributes.length) { const properties = {}; for (const entry of attributes) { if (entry.type < 2) properties[entry.name] = entry.value;else Object.assign(properties, entry.value); } return properties; } return null; } }); 9 | import { render, signal } from '../index.js'; 10 | const s = signal('test'); 11 | const c = signal(new ESXToken(_templateReference, 3, ESXToken._, [ESXToken.b(6, "deep")], "strong", "strong")); 12 | function P({ 13 | test 14 | }) { 15 | return new ESXToken(_templateReference2, 3, ESXToken._, [ESXToken.b(6, "\n Another "), ESXToken.b(5, c), ESXToken.b(6, " / "), ESXToken.b(5, test)], "p", "p"); 16 | } 17 | [1, 2, 3].map(num => new ESXToken(_templateReference3, 3, ESXToken._, [ESXToken.b(5, num)], "span", "span")); 18 | document.body.innerHTML = '

'; 19 | const { 20 | firstElementChild, 21 | lastElementChild 22 | } = document.body; 23 | const main = test => new ESXToken(_templateReference4, 3, [ESXToken.a(true, "data-test", test)], [ESXToken.b(6, "\n Hello World "), ESXToken.b(5, test), ESXToken.b(6, " "), ESXToken.b(5, s), ESXToken.b(5, [1, 2, 3].map(num => new ESXToken(_templateReference5, 2, [ESXToken.a(true, "num", num)], ESXToken._, "Span", Span))), new ESXToken(null, 2, [ESXToken.a(true, "test", test)], ESXToken._, "P", P)], "div", "div"); 24 | render(main('test'), firstElementChild); 25 | render(main('test'), lastElementChild); 26 | setTimeout(() => { 27 | render(main('OK'), firstElementChild); 28 | setTimeout(() => { 29 | s.value = 'signal'; 30 | setTimeout(() => { 31 | c.value = new ESXToken(_templateReference6, 3, ESXToken._, [ESXToken.b(6, "deep")], "i", "i"); 32 | }, 1000); 33 | }, 1000); 34 | }, 2000); 35 | function Span({ 36 | num 37 | }) { 38 | return new ESXToken(_templateReference7, 3, ESXToken._, [ESXToken.b(5, num)], "span", "span"); 39 | } 40 | -------------------------------------------------------------------------------- /test/esx.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | udomsay 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /test/esx.js: -------------------------------------------------------------------------------- 1 | import {ESX, Token} from '../node_modules/@ungap/esx/esm/index.js'; 2 | 3 | import {render, signal} from '../index.js'; 4 | 5 | const esx = ESX({P}); 6 | const s = signal('test'); 7 | const c = signal(esx`deep`); 8 | 9 | function P({test}) { 10 | return esx` 11 |

12 | Another ${c} / ${test} 13 |

14 | `; 15 | } 16 | 17 | document.body.innerHTML = '

'; 18 | const {firstElementChild, lastElementChild} = document.body; 19 | 20 | const main = (test) => esx` 21 |

22 | Hello World ${test} ${s} 23 | ${[1, 2, 3].map(num => esx`${num}`)} 24 |

25 |

26 | `; 27 | 28 | render( 29 | main('test'), 30 | firstElementChild 31 | ); 32 | 33 | render( 34 | main('test'), 35 | lastElementChild 36 | ); 37 | 38 | setTimeout( 39 | () => { 40 | render( 41 | main('OK'), 42 | firstElementChild 43 | ); 44 | setTimeout(() => { 45 | s.value = 'signal'; 46 | setTimeout(() => { 47 | c.value = esx`deep`; 48 | }, 1000); 49 | }, 1000); 50 | }, 51 | 2000 52 | ); 53 | 54 | -------------------------------------------------------------------------------- /test/esx.jsx: -------------------------------------------------------------------------------- 1 | import {render, signal} from '../index.js'; 2 | 3 | const s = signal('test'); 4 | const c = signal(deep); 5 | 6 | function P({test}) { 7 | return ( 8 |

9 | Another {c} / {test} 10 |

11 | ); 12 | } 13 | 14 | [1, 2, 3].map(num => {num}); 15 | 16 | document.body.innerHTML = '

'; 17 | const {firstElementChild, lastElementChild} = document.body; 18 | 19 | const main = (test) => ( 20 |

21 | Hello World {test} {s} 22 | {[1, 2, 3].map(num => )} 23 |

24 |

25 | ); 26 | 27 | render( 28 | main('test'), 29 | firstElementChild 30 | ); 31 | 32 | render( 33 | main('test'), 34 | lastElementChild 35 | ); 36 | 37 | setTimeout( 38 | () => { 39 | render( 40 | main('OK'), 41 | firstElementChild 42 | ); 43 | setTimeout(() => { 44 | s.value = 'signal'; 45 | setTimeout(() => { 46 | c.value = deep; 47 | }, 1000); 48 | }, 1000); 49 | }, 50 | 2000 51 | ); 52 | 53 | function Span({num}) { 54 | return {num}; 55 | } -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | udomsay 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | var _templateReference = {}, 2 | _templateReference2 = {}, 3 | _templateReference3 = {}, 4 | _templateReference4 = {}, 5 | _templateReference5 = {}; 6 | globalThis.ESXToken || (globalThis.ESXToken = class ESXToken { static ATTRIBUTE = 1; static COMPONENT = 2; static ELEMENT = 3; static FRAGMENT = 4; static INTERPOLATION = 5; static STATIC = 6; static _ = Object.freeze([]); static a = (dynamic, name, value) => ({ type: 1, dynamic, name, value }); static b = (type, value) => ({ type, value }); constructor(id, type, attributes, children, name, value) { this.id = id; this.type = type; this.attributes = attributes; this.children = children; this.name = name; this.value = value; } get properties() { const { attributes } = this; if (attributes.length) { const properties = {}; for (const entry of attributes) { if (entry.type < 2) properties[entry.name] = entry.value;else Object.assign(properties, entry.value); } return properties; } return null; } }); 7 | // import './esm/document.js'; 8 | import createRender from '../index.js'; 9 | import { Signal, signal, effect } from 'https://unpkg.com/@webreflection/signal'; 10 | const A = signal('A'); 11 | const B = signal('B'); 12 | const C = signal('C'); 13 | const p = signal(new ESXToken(_templateReference, 3, [ESXToken.a(false, "is", "built-in-p")], [ESXToken.b(6, "first")], "p", "p")); 14 | customElements.define('built-in-p', class BuiltInP extends HTMLParagraphElement { 15 | connectedCallback() { 16 | console.log('connected', this); 17 | } 18 | }, { 19 | extends: 'p' 20 | }); 21 | const div = (A, B) => new ESXToken(_templateReference2, 3, [ESXToken.a(true, "test", A), ESXToken.a(false, "static", "value")], [ESXToken.b(5, B), new ESXToken(null, 2, [ESXToken.a(true, "test", A)], ESXToken._, "Component", Component)], "div", "div"); 22 | function Component({ 23 | test 24 | }) { 25 | return new ESXToken(_templateReference3, 3, ESXToken._, [new ESXToken(null, 3, [ESXToken.a(true, "test", test)], [ESXToken.b(6, "OK "), ESXToken.b(5, test)], "p", "p"), ESXToken.b(5, p)], "div", "div"); 26 | } 27 | function CompA({ 28 | name 29 | }) { 30 | return new ESXToken(_templateReference4, 3, ESXToken._, [ESXToken.b(6, "Comp "), ESXToken.b(5, name)], "strong", "strong"); 31 | } 32 | function CompB({ 33 | name 34 | }) { 35 | return new ESXToken(_templateReference5, 3, ESXToken._, [ESXToken.b(6, "Comp "), ESXToken.b(5, name)], "em", "em"); 36 | } 37 | const render = createRender({ 38 | Signal, 39 | effect 40 | }); 41 | 42 | // render( 43 | // , 46 | // document.body 47 | // ); 48 | 49 | // setInterval(() => { render(<>{Math.random() < .5 ? : }, document.body) }, 1000); 50 | 51 | // render(, document.body); 52 | // setTimeout(() => render(, document.body), 2000); 53 | // setTimeout(() => render(, document.body), 4000); 54 | // setTimeout(() => render(, document.body), 6000); 55 | 56 | // render(div(A, B), document.body.appendChild(document.createElement('div'))); 57 | // render(div(A, C), document.body.appendChild(document.createElement('div'))); 58 | // setTimeout(() => A.value = 'B', 2000); 59 | // setTimeout(() => B.value = 'C', 2000); 60 | // setTimeout(() => B.value = 'D', 4000); 61 | // setTimeout(() => p.value =

last

, 7000); 62 | // setTimeout(() => { 63 | // render(div(B, C), document.body.firstElementChild); 64 | // render(div(C, A), document.body.lastElementChild); 65 | // }, 10000); 66 | -------------------------------------------------------------------------------- /test/index.jsx: -------------------------------------------------------------------------------- 1 | // import './esm/document.js'; 2 | import createRender from '../index.js'; 3 | import {Signal, signal, effect} from 'https://unpkg.com/@webreflection/signal'; 4 | const render = createRender({Signal, effect}); 5 | 6 | const A = signal('A'); 7 | const B = signal('B'); 8 | const C = signal('C'); 9 | const p = signal(

first

); 10 | 11 | customElements.define( 12 | 'built-in-p', 13 | class BuiltInP extends HTMLParagraphElement { 14 | connectedCallback() { 15 | console.log('connected', this); 16 | } 17 | }, 18 | {extends: 'p'} 19 | ); 20 | 21 | const div = (A, B) => ( 22 |

23 | {B} 24 | 25 |

26 | ); 27 | 28 | function Component({test}) { 29 | return ( 30 |

31 |

OK {test}

32 | {p} 33 |

34 | ); 35 | } 36 | 37 | function CompA({name}) { 38 | return Comp {name}; 39 | } 40 | 41 | function CompB({name}) { 42 | return Comp {name}; 43 | } 44 | 45 | // render( 46 | // , 49 | // document.body 50 | // ); 51 | 52 | // setInterval(() => { render(<>{Math.random() < .5 ? : }, document.body) }, 1000); 53 | 54 | // render(, document.body); 55 | // setTimeout(() => render(, document.body), 2000); 56 | // setTimeout(() => render(, document.body), 4000); 57 | // setTimeout(() => render(, document.body), 6000); 58 | 59 | // render(div(A, B), document.body.appendChild(document.createElement('div'))); 60 | // render(div(A, C), document.body.appendChild(document.createElement('div'))); 61 | // setTimeout(() => A.value = 'B', 2000); 62 | // setTimeout(() => B.value = 'C', 2000); 63 | // setTimeout(() => B.value = 'D', 4000); 64 | // setTimeout(() => p.value =

last

, 7000); 65 | // setTimeout(() => { 66 | // render(div(B, C), document.body.firstElementChild); 67 | // render(div(C, A), document.body.lastElementChild); 68 | // }, 10000); 69 | -------------------------------------------------------------------------------- /test/ssr.js: -------------------------------------------------------------------------------- 1 | var _templateReference = {}, 2 | _templateReference2 = {}, 3 | _templateReference3 = {}; 4 | globalThis.ESXToken || (globalThis.ESXToken = class ESXToken { static ATTRIBUTE = 1; static COMPONENT = 2; static ELEMENT = 3; static FRAGMENT = 4; static INTERPOLATION = 5; static STATIC = 6; static _ = Object.freeze([]); static a = (dynamic, name, value) => ({ type: 1, dynamic, name, value }); static b = (type, value) => ({ type, value }); constructor(id, type, attributes, children, name, value) { this.id = id; this.type = type; this.attributes = attributes; this.children = children; this.name = name; this.value = value; } get properties() { const { attributes } = this; if (attributes.length) { const properties = {}; for (const entry of attributes) { if (entry.type < 2) properties[entry.name] = entry.value;else Object.assign(properties, entry.value); } return properties; } return null; } }); 5 | import createRender from '../esm/ssr.js'; 6 | import { Signal, signal } from '@webreflection/signal'; 7 | const render = createRender({ 8 | Signal 9 | }); 10 | function Counter({ 11 | clicks 12 | }) { 13 | return new ESXToken(_templateReference, 3, ESXToken._, [new ESXToken(null, 3, [ESXToken.a(true, "onclick", () => { 14 | clicks.value--; 15 | })], [ESXToken.b(6, "-")], "button", "button"), new ESXToken(null, 3, ESXToken._, [ESXToken.b(5, clicks)], "span", "span"), new ESXToken(null, 3, [ESXToken.a(true, "onclick", () => { 16 | clicks.value++; 17 | })], [ESXToken.b(6, "+")], "button", "button")], "div", "div"); 18 | } 19 | const counters = new Array(2).fill(); 20 | function test() { 21 | console.time('render'); 22 | render(new ESXToken(_templateReference2, 3, [ESXToken.a(false, "lang", "en")], [new ESXToken(null, 3, ESXToken._, [ESXToken.b(6, "not &scaped")], "title", "title"), new ESXToken(null, 3, ESXToken._, [new ESXToken(null, 3, [ESXToken.a(false, "test", "attribute")], [ESXToken.b(5, counters.map((_, i) => new ESXToken(_templateReference3, 3, ESXToken._, [new ESXToken(null, 2, [ESXToken.a(true, "clicks", signal(i))], ESXToken._, "Counter", Counter)], "li", "li")))], "ul", "ul")], "body", "body")], "html", "html"), console.log.bind(console)); 23 | console.timeEnd('render'); 24 | } 25 | for (let i = 0; i < 5; i++) test(); 26 | -------------------------------------------------------------------------------- /test/ssr.jsx: -------------------------------------------------------------------------------- 1 | import createRender from '../esm/ssr.js'; 2 | import {Signal, signal} from '@webreflection/signal'; 3 | const render = createRender({Signal}); 4 | 5 | function Counter({clicks}) { 6 | return ( 7 |

8 | 9 | {clicks} 10 | 11 |

12 | ); 13 | } 14 | 15 | const counters = new Array(2).fill(); 16 | 17 | function test() { 18 | console.time('render'); 19 | render( 20 | ( 21 | 22 | not &scaped 23 | 24 |

27 | 28 | 29 | ), 30 | console.log.bind(console) 31 | ); 32 | console.timeEnd('render'); 33 | } 34 | 35 | for (let i = 0; i < 5; i++) test(); 36 | -------------------------------------------------------------------------------- /test/uhooks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ESX + uhooks 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /test/uhooks.js: -------------------------------------------------------------------------------- 1 | var _templateReference = {}, 2 | _templateReference2 = {}, 3 | _templateReference3 = {}, 4 | _templateReference4 = {}, 5 | _templateReference5 = {}; 6 | globalThis.ESXToken || (globalThis.ESXToken = class ESXToken { static ATTRIBUTE = 1; static COMPONENT = 2; static ELEMENT = 3; static FRAGMENT = 4; static INTERPOLATION = 5; static STATIC = 6; static _ = Object.freeze([]); static a = (dynamic, name, value) => ({ type: 1, dynamic, name, value }); static b = (type, value) => ({ type, value }); constructor(id, type, attributes, children, name, value) { this.id = id; this.type = type; this.attributes = attributes; this.children = children; this.name = name; this.value = value; } get properties() { const { attributes } = this; if (attributes.length) { const properties = {}; for (const entry of attributes) { if (entry.type < 2) properties[entry.name] = entry.value;else Object.assign(properties, entry.value); } return properties; } return null; } }); 7 | import { hooked, useState } from 'https://unpkg.com/uhooks?module'; 8 | const transform = token => { 9 | switch (token.type) { 10 | case ESXToken.COMPONENT: 11 | { 12 | let id, node; 13 | hooked(() => { 14 | console.time('update'); 15 | const result = token.value(); 16 | if (id !== result.id) { 17 | id = result.id; 18 | const replace = transform(result); 19 | if (!node) node = replace;else { 20 | node.replaceWith(replace); 21 | node = replace; 22 | } 23 | } 24 | node.update(result); 25 | console.timeEnd('update'); 26 | })(); 27 | return node; 28 | } 29 | case ESXToken.ELEMENT: 30 | { 31 | const node = document.createElement(token.name); 32 | node.update = ({ 33 | attributes, 34 | children 35 | }) => { 36 | node.textContent = children[0].value; 37 | if (attributes.length) node.onclick = attributes[0].value; 38 | }; 39 | return node; 40 | } 41 | } 42 | }; 43 | const same = () => transform(new ESXToken(_templateReference, 2, ESXToken._, ESXToken._, "Counter", Counter)); 44 | console.time('render'); 45 | document.body.append(transform(new ESXToken(_templateReference2, 2, ESXToken._, ESXToken._, "Counter", Counter)), same(), same(), same(), transform(new ESXToken(_templateReference3, 2, ESXToken._, ESXToken._, "Counter", Counter))); 46 | console.timeEnd('render'); 47 | if (location.search === '?auto') { 48 | requestAnimationFrame(function click() { 49 | const button = document.querySelector('button'); 50 | if (button) { 51 | button.click(); 52 | requestAnimationFrame(click); 53 | } 54 | }); 55 | } 56 | function Counter() { 57 | const [count, update] = useState(0); 58 | return count < 10 ? new ESXToken(_templateReference4, 3, [ESXToken.a(true, "onClick", () => update(count + 1))], [ESXToken.b(5, count)], "button", "button") : new ESXToken(_templateReference5, 3, ESXToken._, [ESXToken.b(6, "You reached 10 \uD83E\uDD73")], "div", "div"); 59 | } 60 | -------------------------------------------------------------------------------- /test/uhooks.jsx: -------------------------------------------------------------------------------- 1 | import {hooked, useState} from 'https://unpkg.com/uhooks?module'; 2 | 3 | const transform = token => { 4 | switch (token.type) { 5 | case ESXToken.COMPONENT: { 6 | let id, node; 7 | hooked(() => { 8 | const result = token.value(); 9 | if (id !== result.id) { 10 | id = result.id; 11 | const replace = transform(result); 12 | if (!node) 13 | node = replace; 14 | else { 15 | node.replaceWith(replace); 16 | node = replace; 17 | } 18 | } 19 | node.update(result); 20 | })(); 21 | return node; 22 | } 23 | case ESXToken.ELEMENT: { 24 | const node = document.createElement(token.name); 25 | node.update = ({attributes, children}) => { 26 | node.textContent = children[0].value; 27 | if (attributes.length) 28 | node.onclick = attributes[0].value; 29 | }; 30 | return node; 31 | } 32 | } 33 | }; 34 | 35 | const same = () => transform(); 36 | 37 | console.time('render'); 38 | document.body.append( 39 | transform(), 40 | same(), 41 | same(), 42 | same(), 43 | transform() 44 | ); 45 | console.timeEnd('render'); 46 | 47 | if (location.search === '?auto') { 48 | requestAnimationFrame(function click() { 49 | const button = document.querySelector('button'); 50 | if (button) { 51 | button.click(); 52 | requestAnimationFrame(click); 53 | } 54 | }); 55 | } 56 | 57 | function Counter() { 58 | const [count, update] = useState(0); 59 | return count < 10 ? 60 | : 61 |

You reached 10 🥳

62 | ; 63 | } 64 | -------------------------------------------------------------------------------- /usignal.js: -------------------------------------------------------------------------------- 1 | /*! (c) Andrea Giammarchi */ 2 | const{is:t}=Object;let e;const s=t=>{const s=e;e=s||[];try{if(t(),!s)for(const{value:t}of e);}finally{e=s}};class n{constructor(t){this._=t}then(t){t(this.value)}toJSON(){return this.value}toString(){return this.value}valueOf(){return this.value}}let i;class o extends n{constructor(t,e,s,n){super(t),this.f=n,this.$=!0,this.r=new Set,this.s=new g(e,s)}get value(){if(this.$){const t=i;i=this;try{this.s.value=this._(this.s._)}finally{this.$=!1,i=t}}return this.s.value}}const c={async:!1,equals:!0},r=(t,e,s=c)=>new o(t,e,s,!1);let a;const l=[],u=()=>{},h=({s:t})=>{"function"==typeof t._&&(t._=t._())};class f extends o{constructor(t,e,s){super(t,e,s,!0),this.e=l}run(){return this.$=!0,this.value,this}stop(){this._=u,this.r.clear(),this.s.c.clear()}}class p extends f{constructor(t,e,s){super(t,e,s),this.i=0,this.a=!!s.async,this.m=!0,this.e=[]}get value(){this.a?this.async():this.sync()}async(){this.m&&(this.m=!1,queueMicrotask((()=>{this.m=!0,this.sync()})))}sync(){const t=a;(a=this).i=0,h(this),super.value,a=t}stop(){super.stop(),h(this);for(const t of this.e.splice(0))t.stop()}}const d=()=>!1;class g extends n{constructor(e,{equals:s}){super(e),this.c=new Set,this.s=!0===s?t:s||d}peek(){return this._}get value(){return i&&(this.c.add(i),i.r.add(this)),this._}set value(t){const s=this._;if(!this.s(this._=t,s)&&this.c.size){const t=[],s=[this];for(const e of s)for(const n of e.c)if(!n.$&&n.r.has(e))if(n.r.clear(),n.$=!0,n.f){t.push(n);const e=[n];for(const t of e)for(const s of t.e)s.r.clear(),s.$=!0,e.push(s)}else s.push(n.s);for(const s of t)e?e.push(s):s.value}}}const v=(t,e=c)=>new g(t,e),y={async:!1},b=(t,e)=>((t,e,s=c)=>{let n;if(a){const{i:i,e:o}=a,c=i===o.length;(c||o[i]._!==t)&&(c||o[i].stop(),o[i]=new p(t,e,s).run()),n=o[i],a.i++}else n=new p(t,e,s).run();return()=>{n.stop()}})(t,e,y);var w=(0,Object.freeze)([]),m=()=>{};const N=(t,e,s)=>{const{parentNode:n}=s,i=e.length;let o=t.length,c=i,r=0,a=0,l=null;for(;rs-a){const i=t[r];for(;at[e],x=({children:t},e)=>t[e],I=({value:t,properties:e,children:s})=>t(e,...s),P=({name:t})=>"key"===t,B=(t,{content:e})=>t.reduce(M,e),R=(t,e)=>t.reduce(x,e),L=(t,e)=>{const s=null==e?"":String(e);s!==t.data&&(t.data=s)}; 3 | /*! (c) Andrea Giammarchi - ISC */var j=(t={})=>{const e=t.document||globalThis.document,s=new Map(t.plugins||[]),n=!!s.size,i=t.diff||N,o=t.effect||(t=>(t(),m)),c=t.getPeek||(t=>t.peek()),r=t.getValue||(t=>t.value),a=t.isSignal||(t.Signal?O.bind(t.Signal.prototype):()=>!1),l=t=>e.createTextNode(t),u=(t,e)=>{let s=v.get(t);return s||v.set(t,s={}),s[e]||(s[e]={})},h=(t,e)=>{t.dispose();const s=o((()=>{const s=I(e);s.id!==t.id?t=f(t,s,!1):t.update(s)}));return t.dispose=s,t},f=(t,e,s)=>e.type===k?h(t,e):((t,e,s)=>(t.dispose(),t=new p(e),s?t.dispose=o((()=>t.update(e))):t.update(e),t))(t,e,s);class p{constructor(t,e=!0){const[s,n]=e?M(t):[w,null];this._=e&&t.type===$,this.id=t.id,this.updates=s,this.content=n,this.dispose=m}get $(){const{content:t,_:e}=this;return e?(this._=!e,(this.content=(({childNodes:t})=>({childNodes:[...t]}))(t)).childNodes):[t]}update(t){for(const e of this.updates)e.call(this,t)}}const d=new p({id:null},!1),g={id:null,view:d},v=new WeakMap;let y;const b=new WeakMap,M=t=>{let e=b.get(t.id);if(!e){const s=[],n=V(t,s,[],w,!1);b.set(t.id,e=[s,n])}const[s,n]=e;return[s.slice(),n.cloneNode(!0)]},x=(t,e,s,n)=>{n?t.setAttribute(e,s):t[e]=s},j=(t,e,s,n,i)=>{if(a(s)){const c="🙊"+e;c in n&&n[c](),n[c]=o((()=>{x(t,e,r(s),i)}))}else x(t,e,s,i)},W=(t,e,i,o)=>{if(n&&s.has(e))s.get(e)(t,i,o);else if(o[e]!==i)switch(o[e]=i,e){case"class":e+="Name";case"className":case"textContent":j(t,e,i,o,!1);break;case"ref":i.current=t;break;default:e.startsWith("on")?t[e.toLowerCase()]=i:e in t?j(t,e,i,o,!1):null==i?t.removeAttribute(e):j(t,e,i,o,!0)}},q=(t,e,s)=>function(n){const i={},o=B(e,this);(this.updates[s]=s=>{const{attributes:n}=R(e,s);for(const e of t){const t=n[e],{type:s,value:c}=t;if(s<2)W(o,t.name,c,i);else for(const[t,e]of S(c))W(o,t,e,i)}})(n)},z=(t,s)=>function(n){let o=w,c=!0,r=-1;const a=B(t,this),l=new Map;(this.updates[s]=s=>{const{value:n}=R(t,s),h=[];for(let t=0;tfunction(s){let n=w,o=d;const c=B(t,this);(this.updates[e]=e=>{o=h(o,R(t,e)),n=i(n,o.$,c)})(s)},G=(t,e)=>function(s){const n=B(t,this);(this.updates[e]=e=>{L(n,R(t,e).value)})(s)},D=(t,e)=>function(s){let n,a,u=m;const h=B(t,this),{value:p}=R(t,s),g=t=>{n!==t&&(u(),n=t,u=o(a))};if(y(c(p))){let t=w,e=d;a=()=>{const s=r(n);e=f(e,s,!1),t=i(t,e.$,h)}}else{const t=l("");h.replaceWith(t),a=()=>{L(t,r(n))}}this.updates[e]=e=>g(R(t,e).value),g(p)},J=(t,e)=>function(s){let n=w,o=d,c=null;const r=B(t,this);(this.updates[e]=e=>{e=R(t,e).value,c!==e.id?(c=e.id,o=f(o,e,!1),n=i(n,o.$,r)):e.type===k?o.update(I(e)):o.update(e)})(s)},U=({children:t},e,s,n,i)=>{for(let o=0;o{let c,r;const{length:u}=s;t:switch(t.type){case A:{const{value:e}=t;switch(!0){case y(e):c=J;break;case T(e):c=z;break;case a(e):c=D;break;default:r=l(""),s.push(G(i,u));break t}}case k:r=e.createComment("🙊"),s.push((c||F)(i,u));break;case _:{const{attributes:c,name:a}=t,l=[a],h=[];for(let t=0;t{const s="function"==typeof t?t():t;y||(y=O.bind(E(s)));const n=f(v.get(e)||d,s,!0);v.set(e,n),e.replaceChildren(...n.$)}};const W=(t={})=>j({...t,Signal:n,effect:b,isSignal:void 0});export{p as Effect,f as FX,n as Signal,s as batch,r as computed,W as createRender,b as effect,v as signal}; 4 | --------------------------------------------------------------------------------