@solidjs/html 2.0.0-experimental.15 → 2.0.0-experimental.16

package/dist/html.cjs

@@ -161,14 +161,14 @@ const cache = new Map();
 const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
 const spaces = " \\f\\n\\r\\t";
 const almostEverything = "[^" + spaces + "\\/>\"'=]+";
-const attrName = "[ " + spaces + "]+(?:use:<!--#-->|" + almostEverything + ")";
+const attrName = "[ " + spaces + "]+" + almostEverything;
 const tagName = "<([A-Za-z$#]+[A-Za-z0-9:_-]*)((?:";
 const attrPartials = "(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|\\([^)]*?\\)|<[^>]*?>|" + almostEverything + "))?)";
 const attrSeeker = new RegExp(tagName + attrName + attrPartials + "+)([ " + spaces + "]*/?>)", "g");
 const findAttributes = new RegExp("(" + attrName + "\\s*=\\s*)(<!--#-->|['\"(]([\\w\\s]*<!--#-->[\\w\\s]*)*['\")])", "gi");
 const selfClosing = new RegExp(tagName + attrName + attrPartials + "*)([ " + spaces + "]*/>)", "g");
 const marker = "<!--#-->";
-const reservedNameSpaces = new Set(["class", "on", "style", "use", "prop"]);
+const reservedNameSpaces = new Set(["class", "on", "style", "prop"]);
 function attrReplacer($0, $1, $2, $3) {
   return "<" + $1 + $2.replace(findAttributes, replaceAttributes) + $3;
 }
@@ -178,14 +178,6 @@ function replaceAttributes($0, $1, $2) {
 function fullClosing($0, $1, $2) {
   return VOID_ELEMENTS.test($1) ? $0 : "<" + $1 + $2 + "></" + $1 + ">";
 }
-function parseDirective(name, value, tag, options) {
-  if (name === "use:###" && value === "###") {
-    const count = options.counter++;
-    options.exprs.push(`typeof exprs[${count}] === "function" ? r.use(exprs[${count}], ${tag}, exprs[${options.counter++}]) : (()=>{throw new Error("use:### must be a function")})()`);
-  } else {
-    throw new Error(`Not support syntax ${name} must be use:{function}`);
-  }
-}
 function createHTML(r, {
   delegateEvents = true,
   functionBuilder = (...args) => new Function(...args)
@@ -271,7 +263,7 @@ function createHTML(r, {
         options.exprs.push(`${tag}.addEventListener("${name.slice(3)}",exprs[${options.counter++}])`);
       }
     } else if (name === "ref") {
-      options.exprs.push(`exprs[${options.counter++}](${tag})`);
+      options.exprs.push(`r.ref(() => exprs[${options.counter++}], ${tag})`);
     } else {
       const childOptions = Object.assign({}, options, {
           exprs: []
@@ -366,11 +358,6 @@ function createHTML(r, {
         } else if (value === "###") {
           props.push(`"${name}": exprs[${options.counter++}]`);
         } else props.push(`"${name}": "${value}"`);
-      } else if (type === 'directive') {
-        const tag = `_$el${uuid++}`;
-        const topDecl = !options.decl.length;
-        options.decl.push(topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
-        parseDirective(name, value, tag, options);
       }
     }
     if (node.children.length === 1 && node.children[0].type === "comment" && node.children[0].content === "#") {
@@ -472,8 +459,6 @@ function createHTML(r, {
             } else {
               newAttrs.push(node.attrs[i]);
             }
-          } else if (type === "directive") {
-            parseDirective(name, value, tag, options);
           }
         }
         node.attrs = newAttrs;
@@ -488,11 +473,7 @@ function createHTML(r, {
             name,
             value
           } = node.attrs[i];
-          if (type === "directive") {
-            parseDirective(name, value, tag, options);
-            node.attrs.splice(i, 1);
-            i--;
-          } else if (type === "attr") {
+          if (type === "attr") {
             if (value.includes("###")) {
               node.attrs.splice(i, 1);
               i--;
@@ -576,7 +557,6 @@ const html = createHTML({
   setAttribute: web.setAttribute,
   setAttributeNS: web.setAttributeNS,
   addEventListener: web.addEventListener,
-  getPropAlias: web.getPropAlias,
   Properties: web.Properties,
   ChildProperties: web.ChildProperties,
   DelegatedEvents: web.DelegatedEvents,

package/dist/html.js

@@ -1,4 +1,4 @@
-import { SVGNamespace, SVGElements, DelegatedEvents, ChildProperties, Properties, getPropAlias, addEventListener, setAttributeNS, setAttribute, dynamicProperty, mergeProps, className, delegateEvents, createComponent, spread, untrack, insert, style, effect } from '@solidjs/web';
+import { SVGNamespace, SVGElements, DelegatedEvents, ChildProperties, Properties, addEventListener, setAttributeNS, setAttribute, dynamicProperty, mergeProps, className, delegateEvents, createComponent, spread, untrack, insert, style, effect } from '@solidjs/web';
 
 const tagRE = /(?:<!--[\S\s]*?-->|<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>)/g;
 const attrRE = /(?:\s(?<boolean>[^/\s><=]+?)(?=[\s/>]))|(?:(?<name>\S+?)(?:\s*=\s*(?:(['"])(?<quotedValue>[\s\S]*?)\3|(?<unquotedValue>[^\s>]+))))/g;
@@ -159,14 +159,14 @@ const cache = new Map();
 const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
 const spaces = " \\f\\n\\r\\t";
 const almostEverything = "[^" + spaces + "\\/>\"'=]+";
-const attrName = "[ " + spaces + "]+(?:use:<!--#-->|" + almostEverything + ")";
+const attrName = "[ " + spaces + "]+" + almostEverything;
 const tagName = "<([A-Za-z$#]+[A-Za-z0-9:_-]*)((?:";
 const attrPartials = "(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|\\([^)]*?\\)|<[^>]*?>|" + almostEverything + "))?)";
 const attrSeeker = new RegExp(tagName + attrName + attrPartials + "+)([ " + spaces + "]*/?>)", "g");
 const findAttributes = new RegExp("(" + attrName + "\\s*=\\s*)(<!--#-->|['\"(]([\\w\\s]*<!--#-->[\\w\\s]*)*['\")])", "gi");
 const selfClosing = new RegExp(tagName + attrName + attrPartials + "*)([ " + spaces + "]*/>)", "g");
 const marker = "<!--#-->";
-const reservedNameSpaces = new Set(["class", "on", "style", "use", "prop"]);
+const reservedNameSpaces = new Set(["class", "on", "style", "prop"]);
 function attrReplacer($0, $1, $2, $3) {
   return "<" + $1 + $2.replace(findAttributes, replaceAttributes) + $3;
 }
@@ -176,14 +176,6 @@ function replaceAttributes($0, $1, $2) {
 function fullClosing($0, $1, $2) {
   return VOID_ELEMENTS.test($1) ? $0 : "<" + $1 + $2 + "></" + $1 + ">";
 }
-function parseDirective(name, value, tag, options) {
-  if (name === "use:###" && value === "###") {
-    const count = options.counter++;
-    options.exprs.push(`typeof exprs[${count}] === "function" ? r.use(exprs[${count}], ${tag}, exprs[${options.counter++}]) : (()=>{throw new Error("use:### must be a function")})()`);
-  } else {
-    throw new Error(`Not support syntax ${name} must be use:{function}`);
-  }
-}
 function createHTML(r, {
   delegateEvents = true,
   functionBuilder = (...args) => new Function(...args)
@@ -269,7 +261,7 @@ function createHTML(r, {
         options.exprs.push(`${tag}.addEventListener("${name.slice(3)}",exprs[${options.counter++}])`);
       }
     } else if (name === "ref") {
-      options.exprs.push(`exprs[${options.counter++}](${tag})`);
+      options.exprs.push(`r.ref(() => exprs[${options.counter++}], ${tag})`);
     } else {
       const childOptions = Object.assign({}, options, {
           exprs: []
@@ -364,11 +356,6 @@ function createHTML(r, {
         } else if (value === "###") {
           props.push(`"${name}": exprs[${options.counter++}]`);
         } else props.push(`"${name}": "${value}"`);
-      } else if (type === 'directive') {
-        const tag = `_$el${uuid++}`;
-        const topDecl = !options.decl.length;
-        options.decl.push(topDecl ? "" : `${tag} = ${options.path}.${options.first ? "firstChild" : "nextSibling"}`);
-        parseDirective(name, value, tag, options);
       }
     }
     if (node.children.length === 1 && node.children[0].type === "comment" && node.children[0].content === "#") {
@@ -470,8 +457,6 @@ function createHTML(r, {
             } else {
               newAttrs.push(node.attrs[i]);
             }
-          } else if (type === "directive") {
-            parseDirective(name, value, tag, options);
           }
         }
         node.attrs = newAttrs;
@@ -486,11 +471,7 @@ function createHTML(r, {
             name,
             value
           } = node.attrs[i];
-          if (type === "directive") {
-            parseDirective(name, value, tag, options);
-            node.attrs.splice(i, 1);
-            i--;
-          } else if (type === "attr") {
+          if (type === "attr") {
             if (value.includes("###")) {
               node.attrs.splice(i, 1);
               i--;
@@ -574,7 +555,6 @@ const html = createHTML({
   setAttribute,
   setAttributeNS,
   addEventListener,
-  getPropAlias,
   Properties,
   ChildProperties,
   DelegatedEvents,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/html",
   "description": "Build-less Tagged-Template-Literal Templating for Solid",
-  "version": "2.0.0-experimental.15",
+  "version": "2.0.0-experimental.16",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -31,10 +31,10 @@
     "./dist/*": "./dist/*"
   },
   "peerDependencies": {
-    "@solidjs/web": "^2.0.0-experimental.15"
+    "@solidjs/web": "^2.0.0-experimental.16"
   },
   "devDependencies": {
-    "@solidjs/web": "2.0.0-experimental.15"
+    "@solidjs/web": "2.0.0-experimental.16"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",

package/types/lit.d.ts

@@ -1 +1,34 @@
-export * from "lit-dom-expressions";
+type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+type ClassList = Record<string, boolean> | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
+interface Runtime {
+    effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void, init?: T): void;
+    untrack<T>(fn: () => T): T;
+    insert(parent: MountableElement, accessor: any, marker?: Node | null, init?: any): any;
+    spread<T>(node: Element, accessor: (() => T) | T, isSVG?: Boolean, skipChildren?: Boolean): void;
+    createComponent(Comp: (props: any) => any, props: any): any;
+    addEventListener(node: Element, name: string, handler: EventListener | EventListenerObject | (EventListenerObject & AddEventListenerOptions), delegate: boolean): void;
+    delegateEvents(eventNames: string[]): void;
+    className(node: Element, value: string | ClassList, isSVG?: boolean, prev?: string | ClassList): void;
+    style(node: Element, value: {
+        [k: string]: string;
+    }, prev?: {
+        [k: string]: string;
+    }): void;
+    mergeProps(...sources: unknown[]): unknown;
+    dynamicProperty(props: any, key: string): any;
+    setAttribute(node: Element, name: string, value: any): void;
+    setAttributeNS(node: Element, namespace: string, name: string, value: any): void;
+    Properties: Set<string>;
+    ChildProperties: Set<string>;
+    DelegatedEvents: Set<string>;
+    SVGElements: Set<string>;
+    SVGNamespace: Record<string, string>;
+}
+export type HTMLTag = {
+    (statics: TemplateStringsArray, ...args: unknown[]): Node | Node[];
+};
+export declare function createHTML(r: Runtime, { delegateEvents, functionBuilder }?: {
+    delegateEvents?: boolean;
+    functionBuilder?: (...args: string[]) => Function;
+}): HTMLTag;
+export {};