@solidjs/html 2.0.0-experimental.1 → 2.0.0-experimental.11

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016-2023 Ryan Carniato
+Copyright (c) 2016-2025 Ryan Carniato
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/html.cjs

@@ -64,7 +64,7 @@ function parseTag(tag) {
 }
 function pushTextNode(list, html, start) {
   const end = html.indexOf('<', start);
-  const content = html.slice(start, end === -1 ? void 0 : end);
+  const content = html.slice(start, end === -1 ? undefined : end);
   if (!/^\s*$/.test(content)) {
     list.push({
       type: 'text',
@@ -83,7 +83,7 @@ function pushCommentNode(list, tag) {
 }
 function parse(html) {
   const result = [];
-  let current = void 0;
+  let current = undefined;
   let level = -1;
   const arr = [];
   const byTag = {};
@@ -92,7 +92,7 @@ function parse(html) {
     const isComment = tag.slice(0, 4) === '<!--';
     const start = index + tag.length;
     const nextChar = html.charAt(start);
-    let parent = void 0;
+    let parent = undefined;
     if (isOpen && !isComment) {
       level++;
       current = parseTag(tag);
@@ -168,7 +168,7 @@ const attrSeeker = new RegExp(tagName + attrName + attrPartials + "+)([ " + spac
 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", "attr"]);
+const reservedNameSpaces = new Set(["class", "on", "style", "use", "prop"]);
 function attrReplacer($0, $1, $2, $3) {
   return "<" + $1 + $2.replace(findAttributes, replaceAttributes) + $3;
 }
@@ -253,8 +253,8 @@ function createHTML(r, {
       options.exprs.push(`r.style(${tag},${expr},_$p)`);
     } else if (name === "class") {
       options.exprs.push(`r.className(${tag},${expr},${isSVG},_$p)`);
-    } else if (namespace !== "attr" && (isChildProp || !isSVG && (r.getPropAlias(name, node.name.toUpperCase()) || isProp) || namespace === "prop")) {
-      options.exprs.push(`${tag}.${r.getPropAlias(name, node.name.toUpperCase()) || name} = ${expr}`);
+    } else if (isChildProp || !isSVG && isProp || namespace === "prop") {
+      options.exprs.push(`${tag}.${name} = ${expr}`);
     } else {
       const ns = isSVG && name.indexOf(":") > -1 && r.SVGNamespace[name.split(":")[0]];
       if (ns) options.exprs.push(`r.setAttributeNS(${tag},"${ns}","${name}",${expr})`);else options.exprs.push(`r.setAttribute(${tag},"${name}",${expr})`);
@@ -364,9 +364,9 @@ function createHTML(r, {
           propGroups.push(`exprs[${options.counter++}]`);
           propGroups.push(props = []);
         } else if (value === "###") {
-          props.push(`${name}: exprs[${options.counter++}]`);
-        } else props.push(`${name}: "${value}"`);
-      } else if (type === "directive") {
+          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"}`);

package/dist/html.js

@@ -62,7 +62,7 @@ function parseTag(tag) {
 }
 function pushTextNode(list, html, start) {
   const end = html.indexOf('<', start);
-  const content = html.slice(start, end === -1 ? void 0 : end);
+  const content = html.slice(start, end === -1 ? undefined : end);
   if (!/^\s*$/.test(content)) {
     list.push({
       type: 'text',
@@ -81,7 +81,7 @@ function pushCommentNode(list, tag) {
 }
 function parse(html) {
   const result = [];
-  let current = void 0;
+  let current = undefined;
   let level = -1;
   const arr = [];
   const byTag = {};
@@ -90,7 +90,7 @@ function parse(html) {
     const isComment = tag.slice(0, 4) === '<!--';
     const start = index + tag.length;
     const nextChar = html.charAt(start);
-    let parent = void 0;
+    let parent = undefined;
     if (isOpen && !isComment) {
       level++;
       current = parseTag(tag);
@@ -166,7 +166,7 @@ const attrSeeker = new RegExp(tagName + attrName + attrPartials + "+)([ " + spac
 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", "attr"]);
+const reservedNameSpaces = new Set(["class", "on", "style", "use", "prop"]);
 function attrReplacer($0, $1, $2, $3) {
   return "<" + $1 + $2.replace(findAttributes, replaceAttributes) + $3;
 }
@@ -251,8 +251,8 @@ function createHTML(r, {
       options.exprs.push(`r.style(${tag},${expr},_$p)`);
     } else if (name === "class") {
       options.exprs.push(`r.className(${tag},${expr},${isSVG},_$p)`);
-    } else if (namespace !== "attr" && (isChildProp || !isSVG && (r.getPropAlias(name, node.name.toUpperCase()) || isProp) || namespace === "prop")) {
-      options.exprs.push(`${tag}.${r.getPropAlias(name, node.name.toUpperCase()) || name} = ${expr}`);
+    } else if (isChildProp || !isSVG && isProp || namespace === "prop") {
+      options.exprs.push(`${tag}.${name} = ${expr}`);
     } else {
       const ns = isSVG && name.indexOf(":") > -1 && r.SVGNamespace[name.split(":")[0]];
       if (ns) options.exprs.push(`r.setAttributeNS(${tag},"${ns}","${name}",${expr})`);else options.exprs.push(`r.setAttribute(${tag},"${name}",${expr})`);
@@ -362,9 +362,9 @@ function createHTML(r, {
           propGroups.push(`exprs[${options.counter++}]`);
           propGroups.push(props = []);
         } else if (value === "###") {
-          props.push(`${name}: exprs[${options.counter++}]`);
-        } else props.push(`${name}: "${value}"`);
-      } else if (type === "directive") {
+          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"}`);

package/package.json

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

package/types/index.d.ts

@@ -1,3 +0,0 @@
-import type { HTMLTag } from "./lit.js";
-declare const html: HTMLTag;
-export default html;

package/types/lit.d.ts

@@ -1,57 +0,0 @@
-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;
-  getPropAlias(prop: string, tagName: string): string | undefined;
-  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 {};