solid-js 1.7.0-beta.0 → 1.7.0-beta.1

package/dist/server.js

@@ -4,7 +4,6 @@ const $TRACK = Symbol("solid-track");
 const $DEVCOMP = Symbol("solid-dev-component");
 const DEV = undefined;
 const ERROR = Symbol("error");
-const BRANCH = Symbol("branch");
 function castError(err) {
   if (err instanceof Error) return err;
   return new Error(typeof err === "string" ? err : "Unknown error", {
@@ -19,19 +18,35 @@ function handleError(err) {
 }
 const UNOWNED = {
   context: null,
-  owner: null
+  owner: null,
+  owned: null,
+  cleanups: null
 };
 let Owner = null;
+function createOwner() {
+  const o = {
+    owner: Owner,
+    context: null,
+    owned: null,
+    cleanups: null
+  };
+  if (Owner) {
+    if (!Owner.owned) Owner.owned = [o];else Owner.owned.push(o);
+  }
+  return o;
+}
 function createRoot(fn, detachedOwner) {
   const owner = Owner,
     root = fn.length === 0 ? UNOWNED : {
       context: null,
-      owner: detachedOwner === undefined ? owner : detachedOwner
+      owner: detachedOwner === undefined ? owner : detachedOwner,
+      owned: null,
+      cleanups: null
     };
   Owner = root;
   let result;
   try {
-    result = fn(() => {});
+    result = fn(fn.length === 0 ? () => {} : () => cleanNode(root));
   } catch (err) {
     handleError(err);
   } finally {
@@ -45,10 +60,7 @@ function createSignal(value, options) {
   }];
 }
 function createComputed(fn, value) {
-  Owner = {
-    owner: Owner,
-    context: null
-  };
+  Owner = createOwner();
   try {
     fn(value);
   } catch (err) {
@@ -65,10 +77,7 @@ function createReaction(fn) {
   };
 }
 function createMemo(fn, value) {
-  Owner = {
-    owner: Owner,
-    context: null
-  };
+  Owner = createOwner();
   let v;
   try {
     v = fn(value);
@@ -104,16 +113,36 @@ function on(deps, fn, options = {}) {
 }
 function onMount(fn) {}
 function onCleanup(fn) {
-  let node;
-  if (Owner && (node = lookup(Owner, BRANCH))) {
-    if (!node.cleanups) node.cleanups = [fn];else node.cleanups.push(fn);
+  if (Owner) {
+    if (!Owner.cleanups) Owner.cleanups = [fn];else Owner.cleanups.push(fn);
   }
   return fn;
 }
 function cleanNode(node) {
+  if (node.owned) {
+    for (let i = 0; i < node.owned.length; i++) cleanNode(node.owned[i]);
+    node.owned = null;
+  }
   if (node.cleanups) {
     for (let i = 0; i < node.cleanups.length; i++) node.cleanups[i]();
-    node.cleanups = undefined;
+    node.cleanups = null;
+  }
+}
+function catchError(fn, handler) {
+  Owner = {
+    owner: Owner,
+    context: {
+      [ERROR]: [handler]
+    },
+    owned: null,
+    cleanups: null
+  };
+  try {
+    return fn();
+  } catch (err) {
+    handleError(err);
+  } finally {
+    Owner = Owner.owner;
   }
 }
 function onError(fn) {
@@ -343,7 +372,7 @@ function Index(props) {
 }
 function Show(props) {
   let c;
-  return props.when ? typeof (c = props.children) === "function" ? c(props.when) : c : props.fallback || "";
+  return props.when ? typeof (c = props.children) === "function" ? c(props.keyed ? props.when : () => props.when) : c : props.fallback || "";
 }
 function Switch(props) {
   let conditions = props.children;
@@ -352,7 +381,7 @@ function Switch(props) {
     const w = conditions[i].when;
     if (w) {
       const c = conditions[i].children;
-      return typeof c === "function" ? c(w) : c;
+      return typeof c === "function" ? c(conditions[i].keyed ? w : () => w) : c;
     }
   }
   return props.fallback || "";
@@ -378,17 +407,13 @@ function ErrorBoundary(props) {
     const f = props.fallback;
     return typeof f === "function" && f.length ? f(error, () => {}) : f;
   }
-  onError(err => {
-    error = err;
-    !sync && ctx.replace("e" + id, displayFallback);
-    sync = true;
-  });
-  onCleanup(() => cleanNode(clean));
   createMemo(() => {
-    Owner.context = {
-      [BRANCH]: clean = {}
-    };
-    return res = props.children;
+    clean = Owner;
+    return catchError(() => res = props.children, err => {
+      error = err;
+      !sync && ctx.replace("e" + id, displayFallback);
+      sync = true;
+    });
   });
   if (error) return displayFallback();
   sync = false;
@@ -437,7 +462,7 @@ function createResource(source, fetcher, options = {}) {
   };
   read.loading = false;
   read.error = undefined;
-  read.state = "initialValue" in options ? "resolved" : "unresolved";
+  read.state = "initialValue" in options ? "ready" : "unresolved";
   Object.defineProperty(read, "latest", {
     get() {
       return read();
@@ -470,7 +495,7 @@ function createResource(source, fetcher, options = {}) {
       if (ctx.writeResource) ctx.writeResource(id, p, undefined, options.deferStream);
       return p.then(res => {
         read.loading = false;
-        read.state = "resolved";
+        read.state = "ready";
         ctx.resources[id].data = res;
         p = null;
         notifySuspense(contexts);
@@ -560,15 +585,9 @@ function SuspenseList(props) {
 }
 function Suspense(props) {
   let done;
-  let clean;
   const ctx = sharedConfig.context;
   const id = ctx.id + ctx.count;
-  const o = Owner;
-  if (o) {
-    if (o.context) o.context[BRANCH] = clean = {};else o.context = {
-      [BRANCH]: clean = {}
-    };
-  }
+  const o = createOwner();
   const value = ctx.suspense[id] || (ctx.suspense[id] = {
     resources: new Map(),
     completed: () => {
@@ -578,51 +597,51 @@ function Suspense(props) {
       }
     }
   });
+  function suspenseError(err) {
+    if (!done || !done(undefined, err)) {
+      if (o) runWithOwner(o.owner, () => {
+        throw err;
+      });else throw err;
+    }
+  }
   function runSuspense() {
     setHydrateContext({
       ...ctx,
       count: 0
     });
-    return runWithOwner(o, () => {
-      return createComponent(SuspenseContext.Provider, {
-        value,
-        get children() {
-          clean && cleanNode(clean);
-          return props.children;
-        }
-      });
-    });
+    o && cleanNode(o);
+    return runWithOwner(o, () => createComponent(SuspenseContext.Provider, {
+      value,
+      get children() {
+        return catchError(() => props.children, suspenseError);
+      }
+    }));
   }
   const res = runSuspense();
   if (suspenseComplete(value)) return res;
-  onError(err => {
-    if (!done || !done(undefined, err)) {
-      if (o) runWithOwner(o.owner, () => {
-        throw err;
-      });else throw err;
-    }
-  });
   done = ctx.async ? ctx.registerFragment(id) : undefined;
-  if (ctx.async) {
+  return catchError(() => {
+    if (ctx.async) {
+      setHydrateContext({
+        ...ctx,
+        count: 0,
+        id: ctx.id + "0-f",
+        noHydrate: true
+      });
+      const res = {
+        t: `<template id="pl-${id}"></template>${resolveSSRNode(props.fallback)}<!pl-${id}>`
+      };
+      setHydrateContext(ctx);
+      return res;
+    }
     setHydrateContext({
       ...ctx,
       count: 0,
-      id: ctx.id + "0.f",
-      noHydrate: true
+      id: ctx.id + "0-f"
     });
-    const res = {
-      t: `<template id="pl-${id}"></template>${resolveSSRNode(props.fallback)}<!pl-${id}>`
-    };
-    setHydrateContext(ctx);
-    return res;
-  }
-  setHydrateContext({
-    ...ctx,
-    count: 0,
-    id: ctx.id + "0.f"
-  });
-  ctx.writeResource(id, "$$f");
-  return props.fallback;
+    ctx.writeResource(id, "$$f");
+    return props.fallback;
+  }, suspenseError);
 }
 
 export { $DEVCOMP, $PROXY, $TRACK, DEV, ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, batch, children, createComponent, createComputed, createContext, createDeferred, createEffect, createMemo, createReaction, createRenderEffect, createResource, createRoot, createSelector, createSignal, createUniqueId, enableExternalSource, enableHydration, enableScheduling, equalFn, from, getListener, getOwner, lazy, mapArray, mergeProps, observable, on, onCleanup, onError, onMount, requestCallback, resetErrorBoundaries, runWithOwner, sharedConfig, splitProps, startTransition, untrack, useContext, useTransition };

package/dist/solid.cjs

@@ -445,6 +445,20 @@ function onCleanup(fn) {
   if (Owner === null) ;else if (Owner.cleanups === null) Owner.cleanups = [fn];else Owner.cleanups.push(fn);
   return fn;
 }
+function catchError(fn, handler) {
+  ERROR || (ERROR = Symbol("error"));
+  Owner = createComputation(undefined, undefined, true);
+  Owner.context = {
+    [ERROR]: [handler]
+  };
+  try {
+    return fn();
+  } catch (err) {
+    handleError(err);
+  } finally {
+    Owner = Owner.owner;
+  }
+}
 function onError(fn) {
   ERROR || (ERROR = Symbol("error"));
   if (Owner === null) ;else if (Owner.context === null) Owner.context = {
@@ -652,7 +666,8 @@ function runComputation(node, value, time) {
         node.owned = null;
       }
     }
-    handleError(err);
+    node.updatedAt = time + 1;
+    return handleError(err);
   }
   if (!node.updatedAt || node.updatedAt <= time) {
     if (node.updatedAt != null && "observers" in node) {
@@ -831,7 +846,7 @@ function lookUpstream(node, ignore) {
     const source = node.sources[i];
     if (source.sources) {
       if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
-        if (source !== ignore) runTop(source);
+        if (source !== ignore && (!source.updatedAt || source.updatedAt < ExecCount)) runTop(source);
       } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
     }
   }
@@ -867,16 +882,16 @@ function cleanNode(node) {
   }
   if (Transition && Transition.running && node.pure) {
     if (node.tOwned) {
-      for (i = 0; i < node.tOwned.length; i++) cleanNode(node.tOwned[i]);
+      for (i = node.tOwned.length - 1; i >= 0; i--) cleanNode(node.tOwned[i]);
       delete node.tOwned;
     }
     reset(node, true);
   } else if (node.owned) {
-    for (i = 0; i < node.owned.length; i++) cleanNode(node.owned[i]);
+    for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]);
     node.owned = null;
   }
   if (node.cleanups) {
-    for (i = 0; i < node.cleanups.length; i++) node.cleanups[i]();
+    for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i]();
     node.cleanups = null;
   }
   if (Transition && Transition.running) node.tState = 0;else node.state = 0;
@@ -1356,7 +1371,10 @@ function Show(props) {
     if (c) {
       const child = props.children;
       const fn = typeof child === "function" && child.length > 0;
-      return fn ? untrack(() => child(keyed ? c : () => props.when)) : child;
+      return fn ? untrack(() => child(keyed ? c : () => {
+        if (false && !untrack(condition)) ;
+        return props.when;
+      })) : child;
     }
     return props.fallback;
   }, undefined, undefined);
@@ -1384,7 +1402,10 @@ function Switch(props) {
     if (index < 0) return props.fallback;
     const c = cond.children;
     const fn = typeof c === "function" && c.length > 0;
-    return fn ? untrack(() => c(keyed ? when : () => cond.when)) : c;
+    return fn ? untrack(() => c(keyed ? when : () => {
+      if (false && untrack(evalConditions)[0] !== index) ;
+      return cond.when;
+    })) : c;
   }, undefined, undefined);
 }
 function Match(props) {
@@ -1406,12 +1427,9 @@ function ErrorBoundary(props) {
     let e;
     if (e = errored()) {
       const f = props.fallback;
-      const res = typeof f === "function" && f.length ? untrack(() => f(e, () => setErrored())) : f;
-      onError(setErrored);
-      return res;
+      return typeof f === "function" && f.length ? untrack(() => f(e, () => setErrored())) : f;
     }
-    onError(setErrored);
-    return props.children;
+    return catchError(() => props.children, setErrored);
   }, undefined, undefined);
 }
 
@@ -1597,6 +1615,7 @@ exports.SuspenseList = SuspenseList;
 exports.Switch = Switch;
 exports.batch = batch;
 exports.cancelCallback = cancelCallback;
+exports.catchError = catchError;
 exports.children = children;
 exports.createComponent = createComponent;
 exports.createComputed = createComputed;

package/dist/solid.js

@@ -443,6 +443,20 @@ function onCleanup(fn) {
   if (Owner === null) ;else if (Owner.cleanups === null) Owner.cleanups = [fn];else Owner.cleanups.push(fn);
   return fn;
 }
+function catchError(fn, handler) {
+  ERROR || (ERROR = Symbol("error"));
+  Owner = createComputation(undefined, undefined, true);
+  Owner.context = {
+    [ERROR]: [handler]
+  };
+  try {
+    return fn();
+  } catch (err) {
+    handleError(err);
+  } finally {
+    Owner = Owner.owner;
+  }
+}
 function onError(fn) {
   ERROR || (ERROR = Symbol("error"));
   if (Owner === null) ;else if (Owner.context === null) Owner.context = {
@@ -650,7 +664,8 @@ function runComputation(node, value, time) {
         node.owned = null;
       }
     }
-    handleError(err);
+    node.updatedAt = time + 1;
+    return handleError(err);
   }
   if (!node.updatedAt || node.updatedAt <= time) {
     if (node.updatedAt != null && "observers" in node) {
@@ -829,7 +844,7 @@ function lookUpstream(node, ignore) {
     const source = node.sources[i];
     if (source.sources) {
       if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
-        if (source !== ignore) runTop(source);
+        if (source !== ignore && (!source.updatedAt || source.updatedAt < ExecCount)) runTop(source);
       } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
     }
   }
@@ -865,16 +880,16 @@ function cleanNode(node) {
   }
   if (Transition && Transition.running && node.pure) {
     if (node.tOwned) {
-      for (i = 0; i < node.tOwned.length; i++) cleanNode(node.tOwned[i]);
+      for (i = node.tOwned.length - 1; i >= 0; i--) cleanNode(node.tOwned[i]);
       delete node.tOwned;
     }
     reset(node, true);
   } else if (node.owned) {
-    for (i = 0; i < node.owned.length; i++) cleanNode(node.owned[i]);
+    for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]);
     node.owned = null;
   }
   if (node.cleanups) {
-    for (i = 0; i < node.cleanups.length; i++) node.cleanups[i]();
+    for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i]();
     node.cleanups = null;
   }
   if (Transition && Transition.running) node.tState = 0;else node.state = 0;
@@ -1354,7 +1369,10 @@ function Show(props) {
     if (c) {
       const child = props.children;
       const fn = typeof child === "function" && child.length > 0;
-      return fn ? untrack(() => child(keyed ? c : () => props.when)) : child;
+      return fn ? untrack(() => child(keyed ? c : () => {
+        if (false && !untrack(condition)) ;
+        return props.when;
+      })) : child;
     }
     return props.fallback;
   }, undefined, undefined);
@@ -1382,7 +1400,10 @@ function Switch(props) {
     if (index < 0) return props.fallback;
     const c = cond.children;
     const fn = typeof c === "function" && c.length > 0;
-    return fn ? untrack(() => c(keyed ? when : () => cond.when)) : c;
+    return fn ? untrack(() => c(keyed ? when : () => {
+      if (false && untrack(evalConditions)[0] !== index) ;
+      return cond.when;
+    })) : c;
   }, undefined, undefined);
 }
 function Match(props) {
@@ -1404,12 +1425,9 @@ function ErrorBoundary(props) {
     let e;
     if (e = errored()) {
       const f = props.fallback;
-      const res = typeof f === "function" && f.length ? untrack(() => f(e, () => setErrored())) : f;
-      onError(setErrored);
-      return res;
+      return typeof f === "function" && f.length ? untrack(() => f(e, () => setErrored())) : f;
     }
-    onError(setErrored);
-    return props.children;
+    return catchError(() => props.children, setErrored);
   }, undefined, undefined);
 }
 
@@ -1581,4 +1599,4 @@ function Suspense(props) {
 
 let DEV;
 
-export { $DEVCOMP, $PROXY, $TRACK, DEV, ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, batch, cancelCallback, children, createComponent, createComputed, createContext, createDeferred, createEffect, createMemo, createReaction, createRenderEffect, createResource, createRoot, createSelector, createSignal, createUniqueId, enableExternalSource, enableHydration, enableScheduling, equalFn, from, getListener, getOwner, indexArray, lazy, mapArray, mergeProps, observable, on, onCleanup, onError, onMount, requestCallback, resetErrorBoundaries, runWithOwner, sharedConfig, splitProps, startTransition, untrack, useContext, useTransition };
+export { $DEVCOMP, $PROXY, $TRACK, DEV, ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, batch, cancelCallback, catchError, children, createComponent, createComputed, createContext, createDeferred, createEffect, createMemo, createReaction, createRenderEffect, createResource, createRoot, createSelector, createSignal, createUniqueId, enableExternalSource, enableHydration, enableScheduling, equalFn, from, getListener, getOwner, indexArray, lazy, mapArray, mergeProps, observable, on, onCleanup, onError, onMount, requestCallback, resetErrorBoundaries, runWithOwner, sharedConfig, splitProps, startTransition, untrack, useContext, useTransition };

package/h/jsx-runtime/types/jsx.d.ts

@@ -1209,6 +1209,7 @@ export namespace JSX {
     mask?: FunctionMaybe<string>;
     opacity?: FunctionMaybe<number | string | "inherit">;
     overflow?: FunctionMaybe<"visible" | "hidden" | "scroll" | "auto" | "inherit">;
+    pathLength?: FunctionMaybe<string | number>;
     "pointer-events"?: FunctionMaybe<
       | "bounding-box"
       | "visiblePainted"
@@ -1291,6 +1292,7 @@ export namespace JSX {
     gradientUnits?: FunctionMaybe<SVGUnits>;
     gradientTransform?: FunctionMaybe<string>;
     spreadMethod?: FunctionMaybe<"pad" | "reflect" | "repeat">;
+    href?: FunctionMaybe<string>
   }
   interface GraphicsElementSVGAttributes<T>
     extends CoreSVGAttributes<T>,
@@ -1330,6 +1332,7 @@ export namespace JSX {
         | "stroke-dashoffset"
         | "stroke-opacity"
         | "shape-rendering"
+        | "pathLength"
       > {}
   interface TextContentElementSVGAttributes<T>
     extends CoreSVGAttributes<T>,

package/html/dist/html.cjs

@@ -210,7 +210,7 @@ function createHTML(r, {
     cache.set(statics, templates);
     return templates;
   }
-  function parseKeyValue(tag, name, value, isSVG, isCE, options) {
+  function parseKeyValue(node, tag, name, value, isSVG, isCE, options) {
     let expr = value === "###" ? `!doNotWrap ? exprs[${options.counter}]() : exprs[${options.counter++}]` : value.split("###").map((v, i) => i ? ` + (typeof exprs[${options.counter}] === "function" ? exprs[${options.counter}]() : exprs[${options.counter++}]) + "${v}"` : `"${v}"`).join(""),
       parts,
       namespace;
@@ -228,15 +228,15 @@ function createHTML(r, {
       const prev = `_$v${uuid++}`;
       options.decl.push(`${prev}={}`);
       options.exprs.push(`r.classList(${tag},${expr},${prev})`);
-    } else if (namespace !== "attr" && (isChildProp || !isSVG && (r.PropAliases[name] || isProp) || isCE || namespace === "prop")) {
+    } else if (namespace !== "attr" && (isChildProp || !isSVG && (r.getPropAlias(name, node.name.toUpperCase()) || isProp) || isCE || namespace === "prop")) {
       if (isCE && !isChildProp && !isProp && namespace !== "prop") name = toPropertyName(name);
-      options.exprs.push(`${tag}.${r.PropAliases[name] || name} = ${expr}`);
+      options.exprs.push(`${tag}.${r.getPropAlias(name, node.name.toUpperCase()) || 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},"${r.Aliases[name] || name}",${expr})`);
     }
   }
-  function parseAttribute(tag, name, value, isSVG, isCE, options) {
+  function parseAttribute(node, tag, name, value, isSVG, isCE, options) {
     if (name.slice(0, 2) === "on") {
       if (!name.includes(":")) {
         const lc = name.slice(2).toLowerCase();
@@ -254,7 +254,7 @@ function createHTML(r, {
           exprs: []
         }),
         count = options.counter;
-      parseKeyValue(tag, name, value, isSVG, isCE, childOptions);
+      parseKeyValue(node, tag, name, value, isSVG, isCE, childOptions);
       options.decl.push(`_fn${count} = (${value === "###" ? "doNotWrap" : ""}) => {\n${childOptions.exprs.join(";\n")};\n}`);
       if (value === "###") {
         options.exprs.push(`typeof exprs[${count}] === "function" ? r.effect(_fn${count}) : _fn${count}(true)`);
@@ -300,7 +300,7 @@ function createHTML(r, {
         continue;
       }
       parseNode(child, childOptions);
-      i++;
+      if (!childOptions.multi && child.type === "comment" && child.content === "#") node.children.splice(i, 1);else i++;
     }
     options.counter = childOptions.counter;
     options.templateId = childOptions.templateId;
@@ -390,8 +390,12 @@ function createHTML(r, {
           options.templateId = childOptions.templateId;
         } else if (child.type === "text") {
           parts.push(`"${child.content}"`);
-        } else if (child.type === "comment" && child.content === "#") {
-          parts.push(`exprs[${options.counter++}]`);
+        } else if (child.type === "comment") {
+          if (child.content === "#") parts.push(`exprs[${options.counter++}]`);else if (child.content) {
+            for (let i = 0; i < child.content.split("###").length - 1; i++) {
+              parts.push(`exprs[${options.counter++}]`);
+            }
+          }
         }
       });
       options.exprs.push(`return [${parts.join(", \n")}]`);
@@ -431,7 +435,7 @@ function createHTML(r, {
             value = node.attrs[name];
           if (value.includes("###")) {
             delete node.attrs[name];
-            parseAttribute(tag, name, value, isSVG, isCE, options);
+            parseAttribute(node, tag, name, value, isSVG, isCE, options);
           }
         }
       }
@@ -509,7 +513,7 @@ var index = createHTML({
   setAttributeNS: web.setAttributeNS,
   addEventListener: web.addEventListener,
   Aliases: web.Aliases,
-  PropAliases: web.PropAliases,
+  getPropAlias: web.getPropAlias,
   Properties: web.Properties,
   ChildProperties: web.ChildProperties,
   DelegatedEvents: web.DelegatedEvents,

package/html/dist/html.js

@@ -1,4 +1,4 @@
-import { effect, style, insert, untrack, spread, createComponent, delegateEvents, classList, mergeProps, dynamicProperty, setAttribute, setAttributeNS, addEventListener, Aliases, PropAliases, Properties, ChildProperties, DelegatedEvents, SVGElements, SVGNamespace } from 'solid-js/web';
+import { effect, style, insert, untrack, spread, createComponent, delegateEvents, classList, mergeProps, dynamicProperty, setAttribute, setAttributeNS, addEventListener, Aliases, getPropAlias, Properties, ChildProperties, DelegatedEvents, SVGElements, SVGNamespace } from 'solid-js/web';
 
 const tagRE = /(?:<!--[\S\s]*?-->|<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>)/g;
 const attrRE = /(?:\s(?<boolean>[^/\s><=]+?)(?=[\s/>]))|(?:(?<name>\S+?)(?:\s*=\s*(?:(['"])(?<quotedValue>[\s\S]*?)\3|(?<unquotedValue>[^\s>]+))))/g;
@@ -208,7 +208,7 @@ function createHTML(r, {
     cache.set(statics, templates);
     return templates;
   }
-  function parseKeyValue(tag, name, value, isSVG, isCE, options) {
+  function parseKeyValue(node, tag, name, value, isSVG, isCE, options) {
     let expr = value === "###" ? `!doNotWrap ? exprs[${options.counter}]() : exprs[${options.counter++}]` : value.split("###").map((v, i) => i ? ` + (typeof exprs[${options.counter}] === "function" ? exprs[${options.counter}]() : exprs[${options.counter++}]) + "${v}"` : `"${v}"`).join(""),
       parts,
       namespace;
@@ -226,15 +226,15 @@ function createHTML(r, {
       const prev = `_$v${uuid++}`;
       options.decl.push(`${prev}={}`);
       options.exprs.push(`r.classList(${tag},${expr},${prev})`);
-    } else if (namespace !== "attr" && (isChildProp || !isSVG && (r.PropAliases[name] || isProp) || isCE || namespace === "prop")) {
+    } else if (namespace !== "attr" && (isChildProp || !isSVG && (r.getPropAlias(name, node.name.toUpperCase()) || isProp) || isCE || namespace === "prop")) {
       if (isCE && !isChildProp && !isProp && namespace !== "prop") name = toPropertyName(name);
-      options.exprs.push(`${tag}.${r.PropAliases[name] || name} = ${expr}`);
+      options.exprs.push(`${tag}.${r.getPropAlias(name, node.name.toUpperCase()) || 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},"${r.Aliases[name] || name}",${expr})`);
     }
   }
-  function parseAttribute(tag, name, value, isSVG, isCE, options) {
+  function parseAttribute(node, tag, name, value, isSVG, isCE, options) {
     if (name.slice(0, 2) === "on") {
       if (!name.includes(":")) {
         const lc = name.slice(2).toLowerCase();
@@ -252,7 +252,7 @@ function createHTML(r, {
           exprs: []
         }),
         count = options.counter;
-      parseKeyValue(tag, name, value, isSVG, isCE, childOptions);
+      parseKeyValue(node, tag, name, value, isSVG, isCE, childOptions);
       options.decl.push(`_fn${count} = (${value === "###" ? "doNotWrap" : ""}) => {\n${childOptions.exprs.join(";\n")};\n}`);
       if (value === "###") {
         options.exprs.push(`typeof exprs[${count}] === "function" ? r.effect(_fn${count}) : _fn${count}(true)`);
@@ -298,7 +298,7 @@ function createHTML(r, {
         continue;
       }
       parseNode(child, childOptions);
-      i++;
+      if (!childOptions.multi && child.type === "comment" && child.content === "#") node.children.splice(i, 1);else i++;
     }
     options.counter = childOptions.counter;
     options.templateId = childOptions.templateId;
@@ -388,8 +388,12 @@ function createHTML(r, {
           options.templateId = childOptions.templateId;
         } else if (child.type === "text") {
           parts.push(`"${child.content}"`);
-        } else if (child.type === "comment" && child.content === "#") {
-          parts.push(`exprs[${options.counter++}]`);
+        } else if (child.type === "comment") {
+          if (child.content === "#") parts.push(`exprs[${options.counter++}]`);else if (child.content) {
+            for (let i = 0; i < child.content.split("###").length - 1; i++) {
+              parts.push(`exprs[${options.counter++}]`);
+            }
+          }
         }
       });
       options.exprs.push(`return [${parts.join(", \n")}]`);
@@ -429,7 +433,7 @@ function createHTML(r, {
             value = node.attrs[name];
           if (value.includes("###")) {
             delete node.attrs[name];
-            parseAttribute(tag, name, value, isSVG, isCE, options);
+            parseAttribute(node, tag, name, value, isSVG, isCE, options);
           }
         }
       }
@@ -507,7 +511,7 @@ var index = createHTML({
   setAttributeNS,
   addEventListener,
   Aliases,
-  PropAliases,
+  getPropAlias,
   Properties,
   ChildProperties,
   DelegatedEvents,

package/html/types/lit.d.ts

@@ -22,7 +22,7 @@ interface Runtime {
     setAttribute(node: Element, name: string, value: any): void;
     setAttributeNS(node: Element, namespace: string, name: string, value: any): void;
     Aliases: Record<string, string>;
-    PropAliases: Record<string, string>;
+    getPropAlias(prop: string, tagName: string): string | undefined;
     Properties: Set<string>;
     ChildProperties: Set<string>;
     DelegatedEvents: Set<string>;