@solidjs/html 2.0.0-beta.14 → 2.0.0-beta.16

package/README.md

@@ -4,7 +4,9 @@ This sub module provides a Tagged Template Literal `html` method for Solid. This
 
 `html` uses `${}` to escape into JavaScript expressions. Components are closed with `<//>`.
 
-Since Solid 2.0, `html` is backed by [`sld-dom-expressions`](https://www.npmjs.com/package/sld-dom-expressions), an AST-based tagged-template runtime. Templates are parsed at runtime (no `new Function` / `eval`, so it is CSP-safe) and reactive bindings are installed against the resulting DOM.
+Since Solid 2.0, `html` is backed by [`@dom-expressions/tagged-jsx`](https://www.npmjs.com/package/@dom-expressions/tagged-jsx), an AST-based tagged-template runtime. Templates are parsed at runtime (no `new Function` / `eval`, so it is CSP-safe) and reactive bindings are installed against the resulting DOM.
+
+For editor support, the [Tagged JSX Tools VS Code extension](https://marketplace.visualstudio.com/items?itemName=DanielRKling.tagged-jsx-vscode) provides syntax highlighting, formatting, conversion commands, and TypeScript diagnostics for JSX inside tagged template literals.
 
 ```js
 // create an element with a title attribute
@@ -42,7 +44,7 @@ render(Counter, document.getElementById("app"));
 
 ## Component registry
 
-Inline expression holes (`<${Component} />`) work without any setup, but the `sld` runtime also supports a named component registry. `html.define({ ... })` returns a new tag with the supplied components merged into the registry; capitalized tag names in the template are then looked up by name. The original `html` tag is unchanged.
+Inline expression holes (`<${Component} />`) work without any setup, but the Tagged JSX runtime also supports a named component registry. `html.define({ ... })` returns a new tag with the supplied components merged into the registry; capitalized tag names in the template are then looked up by name. The original `html` tag is unchanged.
 
 ```js
 import html from "@solidjs/html";

package/dist/html.cjs

@@ -3,7 +3,7 @@
 var web = require('@solidjs/web');
 
 const e=e=>t(e)||e>=48&&e<=58||e===46||e===45,t=e=>e>=65&&e<=90||e>=97&&e<=122||e===95||e===36,n=e=>e>=9&&e<=13||e===32,r=(r,i)=>{let a=[],o=0,s=``,c=0;for(let l=0;l<r.length;l++){let u=r[l],d=u.length;for(c=0;c<d;)switch(o){case 0:{s=``;let e=u.indexOf(`<`,c);e===-1?(c<d&&a.push({type:6,value:u.slice(c)}),c=d):(e>c&&a.push({type:6,value:u.slice(c,e)}),u[e+1]===`!`&&u[e+2]===`-`&&u[e+3]===`-`?(o=3,c=e+4):(a.push({type:0}),o=1,c=e+1));break}case 1:{let r=u.charCodeAt(c);if(n(r))c++;else if(r===62)i.has(s)&&a[a.length-2]?.type!==2?o=2:(o=0,s=``),a.push({type:1}),c++;else if(r===61)a.push({type:4}),c++;else if(r===47){let e=u.charCodeAt(c+1),t=u.slice(c+2).search(/\S/),n=e===47&&a[a.length-1]?.type===0&&t!==-1&&u[c+2+t]===`>`;e===47&&!n?o=4:e===42?o=5:(a.push({type:2}),c++);}else if(r===34||r===39){let e=u[c],t=u.indexOf(e,c+1);if(t===-1)throw Error(`Unterminated string at ${l}:${c}`);a.push({type:5,value:u.slice(c+1,t),quote:e}),c=t+1;}else if(t(r)){let t=c;for(;c<d&&e(u.charCodeAt(c));)c++;let n=u.slice(t,c);s===``&&(s=n),a.push({type:3,value:n});}else if(r===46&&u[c+1]===`.`&&u[c+2]===`.`)a.push({type:8}),c+=3;else throw Error(`Unexpected Character: ${u[c]} at ${l}:${c}`);break}case 2:{let e=RegExp(`<\\s*/\\s*${s}\\s*>`,`g`);e.lastIndex=c;let t=e.exec(u);if(t){let e=t.index;e>c&&a.push({type:6,value:u.slice(c,e)}),o=0,c=e,s=``;}else a.push({type:6,value:u.slice(c)}),c=d;break}case 3:case 4:case 5:{let e=o===4?`
-`:o===5?`*/`:`-->`,t=u.indexOf(e,c);t===-1?c=d:(o=o===3?0:1,c=t+e.length);break}}l<r.length-1&&(o===0||o===1||o===2)&&a.push({type:7,value:l});}return a},i=e=>{let t=e.charCodeAt(0);return t>=65&&t<=90},a=(e,t)=>{let n={type:0,children:[]},r=[n],a=0,o=e.length;for(;a<o;){let n=e[a],s=r[r.length-1];switch(n.type){case 6:{let t=n.value;if(t.trim()===``){let t=e[a-1]?.type,n=e[a+1]?.type;if(t===1||n===0){a++;continue}}s.children.push({type:3,value:t}),a++;continue}case 7:s.children.push({type:4,value:n.value}),a++;continue;case 0:{let n=e[++a];if(n.type===2){let n=e[++a],i=e[++a],o=r[r.length-1];if(r.length>1&&i.type===1&&(n?.type===3&&o.name===n.value||(n?.type===7||n.type===2)&&typeof o.name==`number`)){let e=r.pop();e?.type===1&&t.has(e.name)&&(e.children=[]),a++;continue}throw Error(`Mismatched closing tag for <${o.name}>`)}if(n.type===3||n.type===7){let t=n.value,c={type:typeof t==`number`||i(t)?2:1,name:t,props:[],children:[]};for(s.children.push(c),a++;a<o;){let t=e[a];if(t.type===1||t.type===2)break;if(t.type===8){let t=e[a+1];if(t?.type===7)c.props.push({type:3,value:t.value}),a+=2;else throw Error(`Spread operator in <${c.name}> must be followed by an expression`)}else if(t.type===3){let n=t.value;if(e[a+1]?.type===4){a+=2;let t=e[a];if(t.type===7)c.props.push({name:n,type:2,value:t.value}),a++;else if(t.type===5){let e=t.quote;c.props.push({name:n,value:t.value,quote:e,type:1}),a++;}else throw Error(`Attribute value for "${n}" in <${c.name}> must be an expression or a string`)}else c.props.push({type:0,name:n,value:true}),a++;}else throw Error(`Invalid attribute in <${c.name}>`)}let l=e[a];l.type===2?a+=2:l.type===1&&(a++,r.push(c));continue}}default:throw Error(`Unexpected token: ${JSON.stringify(n)}  after <${r[r.length-1].name}>`)}}if(r.length>1)throw Error(`Unclosed tag for <${r[r.length-1].name}>`);return n},o=e=>e.length===1?e[0]:e;function s(e){let t=new WeakMap,n=new Set(e.RawTextElements);n.delete(`template`);let i=document.createTreeWalker(document,129),s=t=>e.SVGElements.has(t)?document.createElementNS(`http://www.w3.org/2000/svg`,t):e.MathMLElements.has(t)?document.createElementNS(`http://www.w3.org/1998/Math/MathML`,t):document.createElement(t),c=e=>{let t=(t,...n)=>m(l(t),n,e);return t.components=e,t.sld=t,t.define=t=>c({...e,...t}),t},l=i=>{let o=t.get(i);return o||(o=a(r(i,n),e.VoidElements),u(o,false),t.set(i,o)),o},u=(e,t)=>{if(e.type===1){if(!t){let n=document.createElement(`template`);n.content.appendChild(f(e)),e.template=n,t=true;}e.children.forEach(e=>u(e,t));}else e.type===2||e.type===0?e.children.forEach(e=>u(e,false)):e.type===3&&!t&&(d.innerHTML=e.value,e.value=d.content.textContent??``);},d=document.createElement(`template`),f=e=>{switch(e.type){case 3:return d.innerHTML=e.value,document.createTextNode(d.content.textContent??``);case 4:return document.createComment(`+`);case 2:return document.createComment(e.name);case 1:let t=false,n=s(e.name);return e.props=e.props.filter(e=>e.type===1?e.name.startsWith(`prop:`)?true:(n.setAttribute(e.name,e.value),t):e.type===0?(n.setAttribute(e.name,``),t):e.type===3?(t=true,t):true),(e.name===`template`?n.content:n).append(...e.children.map(f)),n}},p=(t,n,r)=>{switch(t.type){case 3:return t.value;case 4:return n[t.value];case 2:let i=typeof t.name==`string`?r[t.name]:n[t.name];if(i&&typeof i==`function`)return e.createComponent(i,h(t,n,r));throw Error(`Component "${t.name}" not found in registry`);case 1:t.name;let a=m(t,n,r),o=h(t,n,r);return e.spread(a,o,true),a}},m=(t,n,r)=>{if(t.type!==1||!t.template)return o(t.children.map(e=>p(e,n,r)));let a=t.template.content.firstChild.cloneNode(true);i.currentNode=a;let s=(t,i)=>{for(let a of t)if(a.type===1||a.type===4||a.type===2){let t=i.nextNode();if(a.type===4||a.type===2)e.insert(t.parentNode,p(a,n,r),t),i.currentNode=t;else {if(a.props.length){let i=h(a,n,r);e.spread(t,i,true);}s(a.children,a.name===`template`?document.createTreeWalker(t.content,129):i);}}};return s(t.children,t.name===`template`?document.createTreeWalker(a.content,129):i),a},h=(t,n,r,i={})=>{for(let r of t.props)switch(r.type){case 0:i[r.name]=true;break;case 1:i[r.name]=r.value;break;case 2:g(i,r.name,n[r.value]);break;case 3:let t=n[r.value];if(!t||typeof t!=`object`)throw Error(`Can only spread objects`);i=e.mergeProps(i,t);break}return t.type===2&&t.children.length&&Object.defineProperty(i,`children`,{get(){return m(t,n,r)}}),i},g=(e,t,n)=>{typeof n==`function`&&n.length===0&&t!==`ref`&&!t.startsWith(`on`)?Object.defineProperty(e,t,{get(){return n()},enumerable:true}):e[t]=n;};return c({})}
+`:o===5?`*/`:`-->`,t=u.indexOf(e,c);t===-1?c=d:(o=o===3?0:1,c=t+e.length);break}}l<r.length-1&&(o===0||o===1||o===2)&&a.push({type:7,value:l});}return a},i=e=>{let t=e.charCodeAt(0);return t>=65&&t<=90},a=(e,t)=>{let n={type:0,children:[]},r=[n],a=0,o=e.length;for(;a<o;){let n=e[a],s=r[r.length-1];switch(n.type){case 6:{let t=n.value;if(t.trim()===``){let t=e[a-1]?.type,n=e[a+1]?.type;if(t===1||n===0){a++;continue}}s.children.push({type:3,value:t}),a++;continue}case 7:s.children.push({type:4,value:n.value}),a++;continue;case 0:{let n=e[++a];if(n.type===2){let n=e[++a],i=e[++a],o=r[r.length-1];if(r.length>1&&i.type===1&&(n?.type===3&&o.name===n.value||(n?.type===7||n.type===2)&&typeof o.name==`number`)){let e=r.pop();e?.type===1&&t.has(e.name)&&(e.children=[]),a++;continue}throw Error(`Mismatched closing tag for <${o.name}>`)}if(n.type===3||n.type===7){let t=n.value,c={type:typeof t==`number`||i(t)?2:1,name:t,props:[],children:[]};for(s.children.push(c),a++;a<o;){let t=e[a];if(t.type===1||t.type===2)break;if(t.type===8){let t=e[a+1];if(t?.type===7)c.props.push({type:3,value:t.value}),a+=2;else throw Error(`Spread operator in <${c.name}> must be followed by an expression`)}else if(t.type===3){let n=t.value;if(e[a+1]?.type===4){a+=2;let t=e[a];if(t.type===7)c.props.push({name:n,type:2,value:t.value}),a++;else if(t.type===5){let e=t.quote;c.props.push({name:n,value:t.value,quote:e,type:1}),a++;}else throw Error(`Attribute value for "${n}" in <${c.name}> must be an expression or a string`)}else c.props.push({type:0,name:n,value:true}),a++;}else throw Error(`Invalid attribute in <${c.name}>`)}let l=e[a];l.type===2?a+=2:l.type===1&&(a++,r.push(c));continue}}default:throw Error(`Unexpected token: ${JSON.stringify(n)}  after <${r[r.length-1].name}>`)}}if(r.length>1)throw Error(`Unclosed tag for <${r[r.length-1].name}>`);return n},o=e=>e.length===1?e[0]:e;function s(e){let t=new WeakMap,n=new Set(e.RawTextElements);n.delete(`template`);let i=document.createTreeWalker(document,129),s=t=>e.SVGElements.has(t)?document.createElementNS(`http://www.w3.org/2000/svg`,t):e.MathMLElements.has(t)?document.createElementNS(`http://www.w3.org/1998/Math/MathML`,t):document.createElement(t),c=e=>{let t=(t,...n)=>m(l(t),n,e);return t.components=e,t.jsx=t,t.define=t=>c({...e,...t}),t},l=i=>{let o=t.get(i);return o||(o=a(r(i,n),e.VoidElements),u(o,false),t.set(i,o)),o},u=(e,t)=>{if(e.type===1){if(!t){let n=document.createElement(`template`);n.content.appendChild(f(e)),e.template=n,t=true;}e.children.forEach(e=>u(e,t));}else e.type===2||e.type===0?e.children.forEach(e=>u(e,false)):e.type===3&&!t&&(d.innerHTML=e.value,e.value=d.content.textContent??``);},d=document.createElement(`template`),f=e=>{switch(e.type){case 3:return d.innerHTML=e.value,document.createTextNode(d.content.textContent??``);case 4:return document.createComment(`+`);case 2:return document.createComment(e.name);case 1:let t=false,n=s(e.name);return e.props=e.props.filter(e=>e.type===1?e.name.startsWith(`prop:`)?true:(n.setAttribute(e.name,e.value),t):e.type===0?(n.setAttribute(e.name,``),t):e.type===3?(t=true,t):true),(e.name===`template`?n.content:n).append(...e.children.map(f)),n}},p=(t,n,r)=>{switch(t.type){case 3:return t.value;case 4:return n[t.value];case 2:let i=typeof t.name==`string`?r[t.name]:n[t.name];if(i&&typeof i==`function`)return e.createComponent(i,h(t,n,r));throw Error(`Component "${t.name}" not found in registry`);case 1:let a=m(t,n,r),o=h(t,n,r);return e.spread(a,o,true),a}},m=(t,n,r)=>{if(t.type!==1||!t.template)return o(t.children.map(e=>p(e,n,r)));let a=t.template.content.firstChild.cloneNode(true);i.currentNode=a;let s=(t,i)=>{for(let a of t)if(a.type===1||a.type===4||a.type===2){let t=i.nextNode();if(a.type===4||a.type===2)e.insert(t.parentNode,p(a,n,r),t),i.currentNode=t;else {if(a.props.length){let i=h(a,n,r);e.spread(t,i,true);}s(a.children,a.name===`template`?document.createTreeWalker(t.content,129):i);}}};return s(t.children,t.name===`template`?document.createTreeWalker(a.content,129):i),a},h=(t,n,r,i={})=>{for(let r of t.props)switch(r.type){case 0:i[r.name]=true;break;case 1:i[r.name]=r.value;break;case 2:g(i,r.name,n[r.value]);break;case 3:let t=n[r.value];if(!t||typeof t!=`object`)throw Error(`Can only spread objects`);i=e.mergeProps(i,t);break}return t.type===2&&t.children.length&&Object.defineProperty(i,`children`,{get(){return m(t,n,r)}}),i},g=(e,t,n)=>{typeof n==`function`&&n.length===0&&t!==`ref`&&!t.startsWith(`on`)?Object.defineProperty(e,t,{get(){return n()},enumerable:true}):e[t]=n;};return c({})}
 
 const html = s({
   insert: web.insert,

package/dist/html.js

@@ -1,7 +1,7 @@
 import { RawTextElements, VoidElements, MathMLElements, SVGElements, mergeProps, createComponent, spread, insert } from '@solidjs/web';
 
 const e=e=>t(e)||e>=48&&e<=58||e===46||e===45,t=e=>e>=65&&e<=90||e>=97&&e<=122||e===95||e===36,n=e=>e>=9&&e<=13||e===32,r=(r,i)=>{let a=[],o=0,s=``,c=0;for(let l=0;l<r.length;l++){let u=r[l],d=u.length;for(c=0;c<d;)switch(o){case 0:{s=``;let e=u.indexOf(`<`,c);e===-1?(c<d&&a.push({type:6,value:u.slice(c)}),c=d):(e>c&&a.push({type:6,value:u.slice(c,e)}),u[e+1]===`!`&&u[e+2]===`-`&&u[e+3]===`-`?(o=3,c=e+4):(a.push({type:0}),o=1,c=e+1));break}case 1:{let r=u.charCodeAt(c);if(n(r))c++;else if(r===62)i.has(s)&&a[a.length-2]?.type!==2?o=2:(o=0,s=``),a.push({type:1}),c++;else if(r===61)a.push({type:4}),c++;else if(r===47){let e=u.charCodeAt(c+1),t=u.slice(c+2).search(/\S/),n=e===47&&a[a.length-1]?.type===0&&t!==-1&&u[c+2+t]===`>`;e===47&&!n?o=4:e===42?o=5:(a.push({type:2}),c++);}else if(r===34||r===39){let e=u[c],t=u.indexOf(e,c+1);if(t===-1)throw Error(`Unterminated string at ${l}:${c}`);a.push({type:5,value:u.slice(c+1,t),quote:e}),c=t+1;}else if(t(r)){let t=c;for(;c<d&&e(u.charCodeAt(c));)c++;let n=u.slice(t,c);s===``&&(s=n),a.push({type:3,value:n});}else if(r===46&&u[c+1]===`.`&&u[c+2]===`.`)a.push({type:8}),c+=3;else throw Error(`Unexpected Character: ${u[c]} at ${l}:${c}`);break}case 2:{let e=RegExp(`<\\s*/\\s*${s}\\s*>`,`g`);e.lastIndex=c;let t=e.exec(u);if(t){let e=t.index;e>c&&a.push({type:6,value:u.slice(c,e)}),o=0,c=e,s=``;}else a.push({type:6,value:u.slice(c)}),c=d;break}case 3:case 4:case 5:{let e=o===4?`
-`:o===5?`*/`:`-->`,t=u.indexOf(e,c);t===-1?c=d:(o=o===3?0:1,c=t+e.length);break}}l<r.length-1&&(o===0||o===1||o===2)&&a.push({type:7,value:l});}return a},i=e=>{let t=e.charCodeAt(0);return t>=65&&t<=90},a=(e,t)=>{let n={type:0,children:[]},r=[n],a=0,o=e.length;for(;a<o;){let n=e[a],s=r[r.length-1];switch(n.type){case 6:{let t=n.value;if(t.trim()===``){let t=e[a-1]?.type,n=e[a+1]?.type;if(t===1||n===0){a++;continue}}s.children.push({type:3,value:t}),a++;continue}case 7:s.children.push({type:4,value:n.value}),a++;continue;case 0:{let n=e[++a];if(n.type===2){let n=e[++a],i=e[++a],o=r[r.length-1];if(r.length>1&&i.type===1&&(n?.type===3&&o.name===n.value||(n?.type===7||n.type===2)&&typeof o.name==`number`)){let e=r.pop();e?.type===1&&t.has(e.name)&&(e.children=[]),a++;continue}throw Error(`Mismatched closing tag for <${o.name}>`)}if(n.type===3||n.type===7){let t=n.value,c={type:typeof t==`number`||i(t)?2:1,name:t,props:[],children:[]};for(s.children.push(c),a++;a<o;){let t=e[a];if(t.type===1||t.type===2)break;if(t.type===8){let t=e[a+1];if(t?.type===7)c.props.push({type:3,value:t.value}),a+=2;else throw Error(`Spread operator in <${c.name}> must be followed by an expression`)}else if(t.type===3){let n=t.value;if(e[a+1]?.type===4){a+=2;let t=e[a];if(t.type===7)c.props.push({name:n,type:2,value:t.value}),a++;else if(t.type===5){let e=t.quote;c.props.push({name:n,value:t.value,quote:e,type:1}),a++;}else throw Error(`Attribute value for "${n}" in <${c.name}> must be an expression or a string`)}else c.props.push({type:0,name:n,value:true}),a++;}else throw Error(`Invalid attribute in <${c.name}>`)}let l=e[a];l.type===2?a+=2:l.type===1&&(a++,r.push(c));continue}}default:throw Error(`Unexpected token: ${JSON.stringify(n)}  after <${r[r.length-1].name}>`)}}if(r.length>1)throw Error(`Unclosed tag for <${r[r.length-1].name}>`);return n},o=e=>e.length===1?e[0]:e;function s(e){let t=new WeakMap,n=new Set(e.RawTextElements);n.delete(`template`);let i=document.createTreeWalker(document,129),s=t=>e.SVGElements.has(t)?document.createElementNS(`http://www.w3.org/2000/svg`,t):e.MathMLElements.has(t)?document.createElementNS(`http://www.w3.org/1998/Math/MathML`,t):document.createElement(t),c=e=>{let t=(t,...n)=>m(l(t),n,e);return t.components=e,t.sld=t,t.define=t=>c({...e,...t}),t},l=i=>{let o=t.get(i);return o||(o=a(r(i,n),e.VoidElements),u(o,false),t.set(i,o)),o},u=(e,t)=>{if(e.type===1){if(!t){let n=document.createElement(`template`);n.content.appendChild(f(e)),e.template=n,t=true;}e.children.forEach(e=>u(e,t));}else e.type===2||e.type===0?e.children.forEach(e=>u(e,false)):e.type===3&&!t&&(d.innerHTML=e.value,e.value=d.content.textContent??``);},d=document.createElement(`template`),f=e=>{switch(e.type){case 3:return d.innerHTML=e.value,document.createTextNode(d.content.textContent??``);case 4:return document.createComment(`+`);case 2:return document.createComment(e.name);case 1:let t=false,n=s(e.name);return e.props=e.props.filter(e=>e.type===1?e.name.startsWith(`prop:`)?true:(n.setAttribute(e.name,e.value),t):e.type===0?(n.setAttribute(e.name,``),t):e.type===3?(t=true,t):true),(e.name===`template`?n.content:n).append(...e.children.map(f)),n}},p=(t,n,r)=>{switch(t.type){case 3:return t.value;case 4:return n[t.value];case 2:let i=typeof t.name==`string`?r[t.name]:n[t.name];if(i&&typeof i==`function`)return e.createComponent(i,h(t,n,r));throw Error(`Component "${t.name}" not found in registry`);case 1:t.name;let a=m(t,n,r),o=h(t,n,r);return e.spread(a,o,true),a}},m=(t,n,r)=>{if(t.type!==1||!t.template)return o(t.children.map(e=>p(e,n,r)));let a=t.template.content.firstChild.cloneNode(true);i.currentNode=a;let s=(t,i)=>{for(let a of t)if(a.type===1||a.type===4||a.type===2){let t=i.nextNode();if(a.type===4||a.type===2)e.insert(t.parentNode,p(a,n,r),t),i.currentNode=t;else {if(a.props.length){let i=h(a,n,r);e.spread(t,i,true);}s(a.children,a.name===`template`?document.createTreeWalker(t.content,129):i);}}};return s(t.children,t.name===`template`?document.createTreeWalker(a.content,129):i),a},h=(t,n,r,i={})=>{for(let r of t.props)switch(r.type){case 0:i[r.name]=true;break;case 1:i[r.name]=r.value;break;case 2:g(i,r.name,n[r.value]);break;case 3:let t=n[r.value];if(!t||typeof t!=`object`)throw Error(`Can only spread objects`);i=e.mergeProps(i,t);break}return t.type===2&&t.children.length&&Object.defineProperty(i,`children`,{get(){return m(t,n,r)}}),i},g=(e,t,n)=>{typeof n==`function`&&n.length===0&&t!==`ref`&&!t.startsWith(`on`)?Object.defineProperty(e,t,{get(){return n()},enumerable:true}):e[t]=n;};return c({})}
+`:o===5?`*/`:`-->`,t=u.indexOf(e,c);t===-1?c=d:(o=o===3?0:1,c=t+e.length);break}}l<r.length-1&&(o===0||o===1||o===2)&&a.push({type:7,value:l});}return a},i=e=>{let t=e.charCodeAt(0);return t>=65&&t<=90},a=(e,t)=>{let n={type:0,children:[]},r=[n],a=0,o=e.length;for(;a<o;){let n=e[a],s=r[r.length-1];switch(n.type){case 6:{let t=n.value;if(t.trim()===``){let t=e[a-1]?.type,n=e[a+1]?.type;if(t===1||n===0){a++;continue}}s.children.push({type:3,value:t}),a++;continue}case 7:s.children.push({type:4,value:n.value}),a++;continue;case 0:{let n=e[++a];if(n.type===2){let n=e[++a],i=e[++a],o=r[r.length-1];if(r.length>1&&i.type===1&&(n?.type===3&&o.name===n.value||(n?.type===7||n.type===2)&&typeof o.name==`number`)){let e=r.pop();e?.type===1&&t.has(e.name)&&(e.children=[]),a++;continue}throw Error(`Mismatched closing tag for <${o.name}>`)}if(n.type===3||n.type===7){let t=n.value,c={type:typeof t==`number`||i(t)?2:1,name:t,props:[],children:[]};for(s.children.push(c),a++;a<o;){let t=e[a];if(t.type===1||t.type===2)break;if(t.type===8){let t=e[a+1];if(t?.type===7)c.props.push({type:3,value:t.value}),a+=2;else throw Error(`Spread operator in <${c.name}> must be followed by an expression`)}else if(t.type===3){let n=t.value;if(e[a+1]?.type===4){a+=2;let t=e[a];if(t.type===7)c.props.push({name:n,type:2,value:t.value}),a++;else if(t.type===5){let e=t.quote;c.props.push({name:n,value:t.value,quote:e,type:1}),a++;}else throw Error(`Attribute value for "${n}" in <${c.name}> must be an expression or a string`)}else c.props.push({type:0,name:n,value:true}),a++;}else throw Error(`Invalid attribute in <${c.name}>`)}let l=e[a];l.type===2?a+=2:l.type===1&&(a++,r.push(c));continue}}default:throw Error(`Unexpected token: ${JSON.stringify(n)}  after <${r[r.length-1].name}>`)}}if(r.length>1)throw Error(`Unclosed tag for <${r[r.length-1].name}>`);return n},o=e=>e.length===1?e[0]:e;function s(e){let t=new WeakMap,n=new Set(e.RawTextElements);n.delete(`template`);let i=document.createTreeWalker(document,129),s=t=>e.SVGElements.has(t)?document.createElementNS(`http://www.w3.org/2000/svg`,t):e.MathMLElements.has(t)?document.createElementNS(`http://www.w3.org/1998/Math/MathML`,t):document.createElement(t),c=e=>{let t=(t,...n)=>m(l(t),n,e);return t.components=e,t.jsx=t,t.define=t=>c({...e,...t}),t},l=i=>{let o=t.get(i);return o||(o=a(r(i,n),e.VoidElements),u(o,false),t.set(i,o)),o},u=(e,t)=>{if(e.type===1){if(!t){let n=document.createElement(`template`);n.content.appendChild(f(e)),e.template=n,t=true;}e.children.forEach(e=>u(e,t));}else e.type===2||e.type===0?e.children.forEach(e=>u(e,false)):e.type===3&&!t&&(d.innerHTML=e.value,e.value=d.content.textContent??``);},d=document.createElement(`template`),f=e=>{switch(e.type){case 3:return d.innerHTML=e.value,document.createTextNode(d.content.textContent??``);case 4:return document.createComment(`+`);case 2:return document.createComment(e.name);case 1:let t=false,n=s(e.name);return e.props=e.props.filter(e=>e.type===1?e.name.startsWith(`prop:`)?true:(n.setAttribute(e.name,e.value),t):e.type===0?(n.setAttribute(e.name,``),t):e.type===3?(t=true,t):true),(e.name===`template`?n.content:n).append(...e.children.map(f)),n}},p=(t,n,r)=>{switch(t.type){case 3:return t.value;case 4:return n[t.value];case 2:let i=typeof t.name==`string`?r[t.name]:n[t.name];if(i&&typeof i==`function`)return e.createComponent(i,h(t,n,r));throw Error(`Component "${t.name}" not found in registry`);case 1:let a=m(t,n,r),o=h(t,n,r);return e.spread(a,o,true),a}},m=(t,n,r)=>{if(t.type!==1||!t.template)return o(t.children.map(e=>p(e,n,r)));let a=t.template.content.firstChild.cloneNode(true);i.currentNode=a;let s=(t,i)=>{for(let a of t)if(a.type===1||a.type===4||a.type===2){let t=i.nextNode();if(a.type===4||a.type===2)e.insert(t.parentNode,p(a,n,r),t),i.currentNode=t;else {if(a.props.length){let i=h(a,n,r);e.spread(t,i,true);}s(a.children,a.name===`template`?document.createTreeWalker(t.content,129):i);}}};return s(t.children,t.name===`template`?document.createTreeWalker(a.content,129):i),a},h=(t,n,r,i={})=>{for(let r of t.props)switch(r.type){case 0:i[r.name]=true;break;case 1:i[r.name]=r.value;break;case 2:g(i,r.name,n[r.value]);break;case 3:let t=n[r.value];if(!t||typeof t!=`object`)throw Error(`Can only spread objects`);i=e.mergeProps(i,t);break}return t.type===2&&t.children.length&&Object.defineProperty(i,`children`,{get(){return m(t,n,r)}}),i},g=(e,t,n)=>{typeof n==`function`&&n.length===0&&t!==`ref`&&!t.startsWith(`on`)?Object.defineProperty(e,t,{get(){return n()},enumerable:true}):e[t]=n;};return c({})}
 
 const html = s({
   insert,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/html",
   "description": "Tagged-template-literal templating for Solid — write components with no build step.",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.16",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -37,11 +37,11 @@
     }
   },
   "peerDependencies": {
-    "@solidjs/web": "^2.0.0-beta.14"
+    "@solidjs/web": "^2.0.0-beta.16"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.14",
-    "@solidjs/web": "2.0.0-beta.14"
+    "@solidjs/web": "2.0.0-beta.16",
+    "solid-js": "2.0.0-beta.16"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",
@@ -49,7 +49,7 @@
     "build:js": "rollup -c",
     "types": "npm-run-all -nl types:clean types:html types:cjs",
     "types:clean": "rimraf types/ types-cjs/",
-    "types:html": "tsc --project ./tsconfig.json && ncp ../../node_modules/sld-dom-expressions/dist/index.d.mts ./types/sld.d.ts",
+    "types:html": "tsc --project ./tsconfig.json && ncp ../../node_modules/@dom-expressions/tagged-jsx/dist/index.d.mts ./types/tagged-jsx.d.ts",
     "types:cjs": "node ../../scripts/sync-dual-types.mjs ./types ./types-cjs",
     "test": "vitest run"
   }

package/types/index.d.ts

@@ -1,3 +1,3 @@
-import type { SLDInstance } from "./sld.js";
-declare const html: SLDInstance<{}>;
+import type { TaggedJSXInstance } from "./tagged-jsx.js";
+declare const html: TaggedJSXInstance<{}>;
 export default html;

package/types/{sld.d.ts → tagged-jsx.d.ts}

@@ -9270,7 +9270,7 @@ declare namespace DataType {
   type VisualBox = "border-box" | "content-box" | "padding-box";
 }
 //#endregion
-//#region ../dom-expressions/src/jsx-properties.d.ts
+//#region ../runtime/src/jsx-properties.d.ts
 /**
  * Shared type-level helpers used to derive `prop:*` attribute typings from
  * DOM element interfaces (e.g. `HTMLInputElement`, `HTMLButtonElement`).
@@ -9331,7 +9331,7 @@ type IsReadonlyKey<T, K extends keyof T> = IfEquals<Pick<T, K>, Readonly<Pick<T,
  */
 type PropKey<T, K extends keyof T> = K extends keyof SkipPropsFrom ? never : K extends string ? string extends K ? never : K extends `aria${string}` ? never : T[K] extends PropValue ? IsReadonlyKey<T, K> extends true ? never : `prop:${K}` : never : never;
 //#endregion
-//#region ../dom-expressions/src/jsx.d.ts
+//#region ../runtime/src/jsx.d.ts
 /**
  * Originally based on JSX types for Surplus and Inferno and adapted for `dom-expressions`.
  *
@@ -9499,7 +9499,7 @@ declare namespace JSX {
     }): void;
   }
   type FocusEventHandlerUnion<T, E extends FocusEvent> = EventHandlerUnion<T, E, FocusEventHandler<T, E>>; // end event handlers
-  export type ClassValue = string | Record<string, boolean> | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
+  export type ClassValue = string | number | boolean | null | undefined | Record<string, boolean> | ClassValue[];
   const SERIALIZABLE: unique symbol;
   interface SerializableAttributeValue {
     toString(): string;
@@ -12488,39 +12488,39 @@ type FunctionComponent = (...args: any[]) => any;
  */
 type ComponentRegistry = Record<string, FunctionComponent>;
 /**
- * SLD Instance type
+ * Tagged JSX instance type
  * @template T Component registry
  */
-type SLDInstance<T extends ComponentRegistry> = {
+type TaggedJSXInstance<T extends ComponentRegistry> = {
   /**
-   * SLD template function
+   * Tagged JSX template function
    * @example
    * ```tsx
-   * const myTemplate = sld`<div>Hello World</div>`
+   * const myTemplate = html`<div>Hello World</div>`
    * ```
    */
   (strings: TemplateStringsArray, ...values: any[]): JSX.Element;
   /**
-   * Self reference to SLD instance for tooling
+   * Self reference to tagged JSX instance for tooling
    * @example
    * ```tsx
    * const MyComponent: FunctionComponent = (props) => {
-   *   // Use sld to create a template inside a component
-   *   return mySLD.sld`<div>Hello ${props.name}</div>`
+   *   // Use html to create a template inside a component
+   *   return myTaggedJSX.jsx`<div>Hello ${props.name}</div>`
    * ```
    */
-  sld: SLDInstance<T>;
+  jsx: TaggedJSXInstance<T>;
   /**
-   * Create a new SLD instance with additional components added to the registry
+   * Create a new tagged JSX instance with additional components added to the registry
    * @param components New components to add to the registry
    * @example
    * ```tsx
    * const MyComponent: FunctionComponent = (props) => <div>Hello {props.name}</div>
-   * const mySLD = sld.define({MyComponent})
-   * const myTemplate = mySLD`<MyComponent name="World" />`
+   * const myTaggedJSX = html.define({MyComponent})
+   * const myTemplate = myTaggedJSX`<MyComponent name="World" />`
    * ```
    */
-  define<TNew extends ComponentRegistry>(components: TNew): SLDInstance<T & TNew>;
+  define<TNew extends ComponentRegistry>(components: TNew): TaggedJSXInstance<T & TNew>;
   /**
    * Component registry
    */
@@ -12538,7 +12538,7 @@ interface Runtime {
   MathMLElements: Set<string>;
 }
 //#endregion
-//#region src/sld.d.ts
-declare function createSLDRuntime(r: Runtime): SLDInstance<{}>;
+//#region src/tagged-jsx.d.ts
+declare function createTaggedJSXRuntime(r: Runtime): TaggedJSXInstance<{}>;
 //#endregion
-export { type ComponentRegistry, type FunctionComponent, type Runtime, type SLDInstance, createSLDRuntime };
+export { type ComponentRegistry, type FunctionComponent, type Runtime, type TaggedJSXInstance, createTaggedJSXRuntime };

package/types-cjs/index.d.cts

@@ -1,3 +1,3 @@
-import type { SLDInstance } from "./sld.cjs";
-declare const html: SLDInstance<{}>;
+import type { TaggedJSXInstance } from "./tagged-jsx.cjs";
+declare const html: TaggedJSXInstance<{}>;
 export default html;

package/types-cjs/{sld.d.cts → tagged-jsx.d.cts}

@@ -9270,7 +9270,7 @@ declare namespace DataType {
   type VisualBox = "border-box" | "content-box" | "padding-box";
 }
 //#endregion
-//#region ../dom-expressions/src/jsx-properties.d.ts
+//#region ../runtime/src/jsx-properties.d.ts
 /**
  * Shared type-level helpers used to derive `prop:*` attribute typings from
  * DOM element interfaces (e.g. `HTMLInputElement`, `HTMLButtonElement`).
@@ -9331,7 +9331,7 @@ type IsReadonlyKey<T, K extends keyof T> = IfEquals<Pick<T, K>, Readonly<Pick<T,
  */
 type PropKey<T, K extends keyof T> = K extends keyof SkipPropsFrom ? never : K extends string ? string extends K ? never : K extends `aria${string}` ? never : T[K] extends PropValue ? IsReadonlyKey<T, K> extends true ? never : `prop:${K}` : never : never;
 //#endregion
-//#region ../dom-expressions/src/jsx.d.ts
+//#region ../runtime/src/jsx.d.ts
 /**
  * Originally based on JSX types for Surplus and Inferno and adapted for `dom-expressions`.
  *
@@ -9499,7 +9499,7 @@ declare namespace JSX {
     }): void;
   }
   type FocusEventHandlerUnion<T, E extends FocusEvent> = EventHandlerUnion<T, E, FocusEventHandler<T, E>>; // end event handlers
-  export type ClassValue = string | Record<string, boolean> | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
+  export type ClassValue = string | number | boolean | null | undefined | Record<string, boolean> | ClassValue[];
   const SERIALIZABLE: unique symbol;
   interface SerializableAttributeValue {
     toString(): string;
@@ -12488,39 +12488,39 @@ type FunctionComponent = (...args: any[]) => any;
  */
 type ComponentRegistry = Record<string, FunctionComponent>;
 /**
- * SLD Instance type
+ * Tagged JSX instance type
  * @template T Component registry
  */
-type SLDInstance<T extends ComponentRegistry> = {
+type TaggedJSXInstance<T extends ComponentRegistry> = {
   /**
-   * SLD template function
+   * Tagged JSX template function
    * @example
    * ```tsx
-   * const myTemplate = sld`<div>Hello World</div>`
+   * const myTemplate = html`<div>Hello World</div>`
    * ```
    */
   (strings: TemplateStringsArray, ...values: any[]): JSX.Element;
   /**
-   * Self reference to SLD instance for tooling
+   * Self reference to tagged JSX instance for tooling
    * @example
    * ```tsx
    * const MyComponent: FunctionComponent = (props) => {
-   *   // Use sld to create a template inside a component
-   *   return mySLD.sld`<div>Hello ${props.name}</div>`
+   *   // Use html to create a template inside a component
+   *   return myTaggedJSX.jsx`<div>Hello ${props.name}</div>`
    * ```
    */
-  sld: SLDInstance<T>;
+  jsx: TaggedJSXInstance<T>;
   /**
-   * Create a new SLD instance with additional components added to the registry
+   * Create a new tagged JSX instance with additional components added to the registry
    * @param components New components to add to the registry
    * @example
    * ```tsx
    * const MyComponent: FunctionComponent = (props) => <div>Hello {props.name}</div>
-   * const mySLD = sld.define({MyComponent})
-   * const myTemplate = mySLD`<MyComponent name="World" />`
+   * const myTaggedJSX = html.define({MyComponent})
+   * const myTemplate = myTaggedJSX`<MyComponent name="World" />`
    * ```
    */
-  define<TNew extends ComponentRegistry>(components: TNew): SLDInstance<T & TNew>;
+  define<TNew extends ComponentRegistry>(components: TNew): TaggedJSXInstance<T & TNew>;
   /**
    * Component registry
    */
@@ -12538,7 +12538,7 @@ interface Runtime {
   MathMLElements: Set<string>;
 }
 //#endregion
-//#region src/sld.d.ts
-declare function createSLDRuntime(r: Runtime): SLDInstance<{}>;
+//#region src/tagged-jsx.d.ts
+declare function createTaggedJSXRuntime(r: Runtime): TaggedJSXInstance<{}>;
 //#endregion
-export { type ComponentRegistry, type FunctionComponent, type Runtime, type SLDInstance, createSLDRuntime };
+export { type ComponentRegistry, type FunctionComponent, type Runtime, type TaggedJSXInstance, createTaggedJSXRuntime };