solid-js - npm Package Compare versions

Comparing version 1.7.0-beta.0 to 1.7.0-beta.1

dist/dev.js

@@ -462,2 +462,16 @@ let taskIdCounter = 1,
 }
+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) {
@@ -537,3 +551,4 @@ ERROR || (ERROR = Symbol("error"));
   c.observerSlots = null;
-  c.componentName = Comp.name;
+  c.name = Comp.name;
+  c.component = Comp;
   updateComputation(c);
@@ -647,3 +662,3 @@ return c.tValue !== undefined ? c.tValue : c.value;
           Updates = [];
-          if ("_SOLID_DEV_") throw new Error("Potential Infinite Loop Detected.");
+          if (true) throw new Error("Potential Infinite Loop Detected.");
           throw new Error();
@@ -693,3 +708,4 @@ }
     }
-    handleError(err);
+    node.updatedAt = time + 1;
+    return handleError(err);
   }
@@ -875,3 +891,3 @@ if (!node.updatedAt || node.updatedAt <= time) {
       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);
@@ -912,3 +928,3 @@ }
     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;
@@ -918,7 +934,7 @@ }
   } 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;
@@ -1368,3 +1384,3 @@ }
     return createMemo(() => (Comp = comp()) && untrack(() => {
-      if ("_SOLID_DEV_") Object.assign(Comp, {
+      if (true) Object.assign(Comp, {
         [$DEVCOMP]: true
@@ -1416,3 +1432,6 @@ });
       const fn = typeof child === "function" && child.length > 0;
-      return fn ? untrack(() => child(keyed ? c : () => props.when)) : child;
+      return fn ? untrack(() => child(keyed ? c : () => {
+        if (true && !untrack(condition)) console.warn("Accessing stale value from Show.");
+        return props.when;
+      })) : child;
     }
@@ -1448,3 +1467,6 @@ return props.fallback;
     const fn = typeof c === "function" && c.length > 0;
-    return fn ? untrack(() => c(keyed ? when : () => cond.when)) : c;
+    return fn ? untrack(() => c(keyed ? when : () => {
+      if (true && untrack(evalConditions)[0] !== index) console.warn("Accessing stale value from Match.");
+      return cond.when;
+    })) : c;
   }, undefined, {
@@ -1476,8 +1498,5 @@ name: "value"
       if ((typeof f !== "function" || f.length == 0)) console.error(e);
-      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, {
@@ -1664,2 +1683,2 @@ name: "value"
 
-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 };

dist/server.js

@@ -7,3 +7,2 @@ const equalFn = (a, b) => a === b;
 const ERROR = Symbol("error");
-const BRANCH = Symbol("branch");
 function castError(err) {
@@ -23,5 +22,19 @@ if (err instanceof Error) return err;
   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) {
@@ -31,3 +44,5 @@ const owner = Owner,
       context: null,
-      owner: detachedOwner === undefined ? owner : detachedOwner
+      owner: detachedOwner === undefined ? owner : detachedOwner,
+      owned: null,
+      cleanups: null
     };
@@ -37,3 +52,3 @@ Owner = root;
   try {
-    result = fn(() => {});
+    result = fn(fn.length === 0 ? () => {} : () => cleanNode(root));
   } catch (err) {
@@ -52,6 +67,3 @@ handleError(err);
 function createComputed(fn, value) {
-  Owner = {
-    owner: Owner,
-    context: null
-  };
+  Owner = createOwner();
   try {
@@ -73,6 +85,3 @@ fn(value);
 function createMemo(fn, value) {
-  Owner = {
-    owner: Owner,
-    context: null
-  };
+  Owner = createOwner();
   let v;
@@ -113,5 +122,4 @@ try {
 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);
   }
@@ -121,7 +129,28 @@ 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) {
@@ -354,3 +383,3 @@ if (Owner) {
   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 || "";
 }
@@ -364,3 +393,3 @@ function Switch(props) {
       const c = conditions[i].children;
-      return typeof c === "function" ? c(w) : c;
+      return typeof c === "function" ? c(conditions[i].keyed ? w : () => w) : c;
     }
@@ -391,13 +420,9 @@ }
   }
-  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;
+    });
   });
@@ -451,3 +476,3 @@ if (error) return displayFallback();
   read.error = undefined;
-  read.state = "initialValue" in options ? "resolved" : "unresolved";
+  read.state = "initialValue" in options ? "ready" : "unresolved";
   Object.defineProperty(read, "latest", {
@@ -485,3 +510,3 @@ get() {
         read.loading = false;
-        read.state = "resolved";
+        read.state = "ready";
         ctx.resources[id].data = res;
@@ -576,11 +601,5 @@ p = null;
   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] = {
@@ -595,2 +614,9 @@ resources: new Map(),
   });
+  function suspenseError(err) {
+    if (!done || !done(undefined, err)) {
+      if (o) runWithOwner(o.owner, () => {
+        throw err;
+      });else throw err;
+    }
+  }
   function runSuspense() {
@@ -601,44 +627,37 @@ setHydrateContext({
     });
-    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;
+  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;
     }
-  });
-  done = ctx.async ? ctx.registerFragment(id) : undefined;
-  if (ctx.async) {
     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 };

dist/solid.js

@@ -446,2 +446,16 @@ let taskIdCounter = 1,
 }
+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) {
@@ -654,3 +668,4 @@ ERROR || (ERROR = Symbol("error"));
     }
-    handleError(err);
+    node.updatedAt = time + 1;
+    return handleError(err);
   }
@@ -834,3 +849,3 @@ if (!node.updatedAt || node.updatedAt <= time) {
       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);
@@ -871,3 +886,3 @@ }
     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;
@@ -877,7 +892,7 @@ }
   } 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;
@@ -1362,3 +1377,6 @@ }
       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;
     }
@@ -1391,3 +1409,6 @@ return props.fallback;
     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);
@@ -1414,8 +1435,5 @@ }
       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);
@@ -1592,2 +1610,2 @@ }
 
-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 };

html/dist/html.js

@@ -1,2 +0,2 @@
-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';
 
@@ -211,3 +211,3 @@ const tagRE = /(?:<!--[\S\s]*?-->|<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>)/g;
   }
-  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(""),
@@ -230,5 +230,5 @@ parts,
       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 {
@@ -239,3 +239,3 @@ const ns = isSVG && name.indexOf(":") > -1 && r.SVGNamespace[name.split(":")[0]];
   }
-  function parseAttribute(tag, name, value, isSVG, isCE, options) {
+  function parseAttribute(node, tag, name, value, isSVG, isCE, options) {
     if (name.slice(0, 2) === "on") {
@@ -258,3 +258,3 @@ if (!name.includes(":")) {
         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}`);
@@ -305,3 +305,3 @@ if (value === "###") {
       parseNode(child, childOptions);
-      i++;
+      if (!childOptions.multi && child.type === "comment" && child.content === "#") node.children.splice(i, 1);else i++;
     }
@@ -396,4 +396,8 @@ options.counter = childOptions.counter;
           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++}]`);
+            }
+          }
         }
@@ -438,3 +442,3 @@ });
             delete node.attrs[name];
-            parseAttribute(tag, name, value, isSVG, isCE, options);
+            parseAttribute(node, tag, name, value, isSVG, isCE, options);
           }
@@ -517,3 +521,3 @@ }
   Aliases,
-  PropAliases,
+  getPropAlias,
   Properties,
@@ -520,0 +524,0 @@ ChildProperties,

html/types/lit.d.ts

@@ -25,3 +25,3 @@ type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
     Aliases: Record<string, string>;
-    PropAliases: Record<string, string>;
+    getPropAlias(prop: string, tagName: string): string | undefined;
     Properties: Set<string>;
@@ -28,0 +28,0 @@ ChildProperties: Set<string>;

package.json

 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.7.0-beta.0",
+  "version": "1.7.0-beta.1",
   "author": "Ryan Carniato",
@@ -6,0 +6,0 @@ "license": "MIT",

store/dist/dev.js

@@ -313,7 +313,4 @@ import { $PROXY, DEV as DEV$1, $TRACK, getListener, batch, createSignal } from 'solid-js';
   if (target === previous) return;
-  if (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key]) {
-    if (target !== previous) {
-      if (property === $ROOT) return target;
-      setProperty(parent, property, target);
-    }
+  if (property !== $ROOT && (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key])) {
+    setProperty(parent, property, target);
     return;
@@ -320,0 +317,0 @@ }

store/dist/store.js

@@ -297,7 +297,4 @@ import { $PROXY, $TRACK, getListener, batch, createSignal } from 'solid-js';
   if (target === previous) return;
-  if (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key]) {
-    if (target !== previous) {
-      if (property === $ROOT) return target;
-      setProperty(parent, property, target);
-    }
+  if (property !== $ROOT && (!isWrappable(target) || !isWrappable(previous) || key && target[key] !== previous[key])) {
+    setProperty(parent, property, target);
     return;
@@ -304,0 +301,0 @@ }

types/index.d.ts

@@ -1,2 +0,2 @@
-export { $DEVCOMP, $PROXY, $TRACK, batch, children, createComputed, createContext, createDeferred, createEffect, createMemo, createReaction, createRenderEffect, createResource, createRoot, createSelector, createSignal, enableExternalSource, enableScheduling, equalFn, getListener, getOwner, on, onCleanup, onError, onMount, runWithOwner, startTransition, untrack, useContext, useTransition } from "./reactive/signal.js";
+export { $DEVCOMP, $PROXY, $TRACK, batch, children, createComputed, createContext, createDeferred, createEffect, createMemo, createReaction, createRenderEffect, createResource, createRoot, createSelector, createSignal, enableExternalSource, enableScheduling, equalFn, getListener, getOwner, on, onCleanup, onError, catchError, onMount, runWithOwner, startTransition, untrack, useContext, useTransition } from "./reactive/signal.js";
 export type { Accessor, AccessorArray, ChildrenReturn, Context, EffectFunction, EffectOptions, InitializedResource, InitializedResourceOptions, InitializedResourceReturn, MemoOptions, NoInfer, OnEffectFunction, OnOptions, Owner, Resource, ResourceActions, ResourceFetcher, ResourceFetcherInfo, ResourceOptions, ResourceReturn, ResourceSource, ReturnTypes, Setter, Signal, SignalOptions } from "./reactive/signal.js";
@@ -3,0 +3,0 @@ export * from "./reactive/observable.js";

types/reactive/array.d.ts

 import { Accessor } from "./signal.js";
 /**
+The MIT License (MIT)
+
+Copyright (c) 2017 Adam Haile
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+/**
  * reactively transforms an array with a callback function - underlying helper for the `<For>` control flow
@@ -4,0 +27,0 @@ *

types/reactive/signal.d.ts

@@ -0,1 +1,24 @@
+/**
+The MIT License (MIT)
+
+Copyright (c) 2017 Adam Haile
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
 import { requestCallback } from "./scheduler.js";
@@ -421,2 +444,13 @@ import type { JSX } from "../jsx.js";
 /**
+ * catchError - run an effect whenever an error is thrown within the context of the child scopes
+ * @param fn boundary for the error
+ * @param handler an error handler that receives the error
+ *
+ * * If the error is thrown again inside the error handler, it will trigger the next available parent handler
+ *
+ * @description https://www.solidjs.com/docs/latest/api#catcherror
+ */
+export declare function catchError<T>(fn: () => T, handler: (err: Error) => void): T | undefined;
+/**
+ * @deprecated since version 1.7.0 and will be removed in next major - use catchError instead
  * onError - run an effect whenever an error is thrown within the context of the child scopes
@@ -456,3 +490,4 @@ * @param fn an error handler that receives the error
     props: T;
-    componentName: string;
+    name: string;
+    component: (props: T) => unknown;
 }
@@ -459,0 +494,0 @@ export declare function devComponent<P, V>(Comp: (props: P) => V, props: P): V;

types/render/flow.d.ts

@@ -39,2 +39,3 @@ import { Accessor } from "../reactive/signal.js";
 }): JSX.Element;
+type RequiredParameter<T> = T extends () => unknown ? never : T;
 /**
@@ -44,13 +45,13 @@ * Conditionally render its children or an optional fallback component
  */
-export declare function Show<T>(props: {
+export declare function Show<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
     when: T | undefined | null | false;
-    keyed: true;
+    keyed?: false;
     fallback?: JSX.Element;
-    children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
+    children: JSX.Element | RequiredParameter<TRenderFunction>;
 }): JSX.Element;
-export declare function Show<T>(props: {
+export declare function Show<T, TRenderFunction extends (item: NonNullable<T>) => JSX.Element>(props: {
     when: T | undefined | null | false;
-    keyed?: false;
+    keyed: true;
     fallback?: JSX.Element;
-    children: JSX.Element | ((item: Accessor<NonNullable<T>>) => JSX.Element);
+    children: JSX.Element | RequiredParameter<TRenderFunction>;
 }): JSX.Element;
@@ -78,3 +79,3 @@ /**
     keyed?: boolean;
-    children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
+    children: JSX.Element | ((item: NonNullable<T> | Accessor<NonNullable<T>>) => JSX.Element);
 };
@@ -90,11 +91,11 @@ /**
  */
-export declare function Match<T>(props: {
+export declare function Match<T, TRenderFunction extends (item: Accessor<NonNullable<T>>) => JSX.Element>(props: {
     when: T | undefined | null | false;
-    keyed: true;
-    children: JSX.Element | ((item: NonNullable<T>) => JSX.Element);
+    keyed?: false;
+    children: JSX.Element | RequiredParameter<TRenderFunction>;
 }): JSX.Element;
-export declare function Match<T>(props: {
+export declare function Match<T, TRenderFunction extends (item: NonNullable<T>) => JSX.Element>(props: {
     when: T | undefined | null | false;
-    keyed?: false;
-    children: JSX.Element;
+    keyed: true;
+    children: JSX.Element | RequiredParameter<TRenderFunction>;
 }): JSX.Element;
@@ -121,1 +122,2 @@ export declare function resetErrorBoundaries(): void;
 }): JSX.Element;
+export {};

types/server/reactive.d.ts

@@ -9,3 +9,2 @@ export declare const equalFn: <T>(a: T, b: T) => boolean;
 export type Signal<T> = [get: Accessor<T>, set: Setter<T>];
-export declare const BRANCH: unique symbol;
 export declare function castError(err: unknown): Error;
@@ -16,3 +15,6 @@ export declare let Owner: Owner | null;
     context: any | null;
+    owned: Owner[] | null;
+    cleanups: (() => void)[] | null;
 }
+export declare function createOwner(): Owner;
 export declare function createRoot<T>(fn: (dispose: () => void) => T, detachedOwner?: typeof Owner): T;
@@ -37,5 +39,7 @@ export declare function createSignal<T>(value: T, options?: {
 export declare function onCleanup(fn: () => void): () => void;
-export declare function cleanNode(node: {
-    cleanups?: Function[] | null;
-}): void;
+export declare function cleanNode(node: Owner): void;
+export declare function catchError<T>(fn: () => T, handler: (err: Error) => void): T | undefined;
+/**
+ * @deprecated since version 1.7.0 and will be removed in next major - use catchError instead
+*/
 export declare function onError(fn: (err: Error) => void): void;
@@ -42,0 +46,0 @@ export declare function getListener(): null;

types/server/rendering.d.ts

@@ -1,2 +0,2 @@
-import { Setter, Signal } from "./reactive.js";
+import { Accessor, Setter, Signal } from "./reactive.js";
 import type { JSX } from "../jsx.js";
@@ -50,2 +50,6 @@ export type Component<P = {}> = (props: P) => JSX.Element;
 }): string | any[] | undefined;
+/**
+ * Conditionally render its children or an optional fallback component
+ * @description https://www.solidjs.com/docs/latest/api#show
+ */
 export declare function Show<T>(props: {
@@ -55,3 +59,3 @@ when: T | undefined | null | false;
     fallback?: string;
-    children: string | ((item: NonNullable<T>) => string);
+    children: string | ((item: NonNullable<T> | Accessor<NonNullable<T>>) => string);
 }): string;
@@ -65,3 +69,3 @@ export declare function Switch(props: {
     keyed?: boolean;
-    children: string | ((item: T) => string);
+    children: string | ((item: NonNullable<T> | Accessor<NonNullable<T>>) => string);
 };
@@ -68,0 +72,0 @@ export declare function Match<T>(props: MatchProps<T>): MatchProps<T>;

web/dist/dev.js

@@ -1,2 +0,2 @@
-import { createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, createSignal, onCleanup, splitProps, createMemo, $DEVCOMP } from 'solid-js';
+import { createRoot, untrack, createRenderEffect, sharedConfig, enableHydration, createMemo, createSignal, onMount, onCleanup, splitProps, $DEVCOMP } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, createRenderEffect as effect, getOwner, createMemo as memo, mergeProps, untrack } from 'solid-js';
@@ -13,8 +13,29 @@
   class: "className",
-  formnovalidate: "formNoValidate",
-  ismap: "isMap",
-  nomodule: "noModule",
-  playsinline: "playsInline",
-  readonly: "readOnly"
+  formnovalidate: {
+    $: "formNoValidate",
+    BUTTON: 1,
+    INPUT: 1
+  },
+  ismap: {
+    $: "isMap",
+    IMG: 1
+  },
+  nomodule: {
+    $: "noModule",
+    SCRIPT: 1
+  },
+  playsinline: {
+    $: "playsInline",
+    VIDEO: 1
+  },
+  readonly: {
+    $: "readOnly",
+    INPUT: 1,
+    TEXTAREA: 1
+  }
 });
+function getPropAlias(prop, tagName) {
+  const a = PropAliases[prop];
+  return typeof a === "object" ? a[tagName] ? a["$"] : undefined : a;
+}
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
@@ -101,9 +122,10 @@ const SVGElements = /*#__PURE__*/new Set([
 }
-function template(html, check, isSVG) {
-  const t = document.createElement("template");
-  t.innerHTML = html;
-  if (check && t.innerHTML.split("<").length - 1 !== check) throw `The browser resolved template HTML does not match JSX input:\n${t.innerHTML}\n\n${html}. Is your HTML properly formed?`;
-  let node = t.content.firstChild;
-  if (isSVG) node = node.firstChild;
-  return node;
+function template(html, isSVG, isCE) {
+  let node;
+  const create = () => {
+    const t = document.createElement("template");
+    t.innerHTML = html;
+    return isSVG ? t.content.firstChild.firstChild : t.content.firstChild;
+  };
+  return isCE ? () => (node || (node = create())).cloneNode(true) : () => untrack(() => document.importNode(node || (node = create()), true));
 }
@@ -253,3 +275,3 @@ function delegateEvents(eventNames, document = window.document) {
     if (!template) throw new Error("Unrecoverable Hydration Mismatch. No template for key: " + key);
-    return template.cloneNode(true);
+    return template();
   }
@@ -309,3 +331,3 @@ if (sharedConfig.completed) sharedConfig.completed.add(node);
 function assignProp(node, prop, value, prev, isSVG, skipRef) {
-  let isCE, isProp, isChildProp;
+  let isCE, isProp, isChildProp, propAlias, forceProp;
   if (prop === "style") return style(node, value, prev);
@@ -335,4 +357,10 @@ if (prop === "classList") return classList(node, value, prev);
     }
-  } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+  } else if (prop.slice(0, 5) === "attr:") {
+    setAttribute(node, prop.slice(5), value);
+  } else if ((forceProp = prop.slice(0, 5) === "prop:") || (isChildProp = ChildProperties.has(prop)) || !isSVG && ((propAlias = getPropAlias(prop, node.tagName)) || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
+    if (forceProp) {
+      prop = prop.slice(5);
+      isProp = true;
+    }
+    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[propAlias || prop] = value;
   } else {
@@ -359,13 +387,3 @@ const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
   });
-  if (sharedConfig.registry && !sharedConfig.done) {
-    sharedConfig.done = true;
-    document.querySelectorAll("[id^=pl-]").forEach(elem => {
-      while (elem && elem.nodeType !== 8 && elem.nodeValue !== "pl-" + e) {
-        let x = elem.nextSibling;
-        elem.remove();
-        elem = x;
-      }
-      elem && elem.remove();
-    });
-  }
+  if (sharedConfig.registry && !sharedConfig.done) sharedConfig.done = _$HY.done = true;
   while (node) {
@@ -468,3 +486,5 @@ const handler = node[key];
       const value = String(item);
-      if (prev && prev.nodeType === 3 && prev.data === value) {
+      if (value === "<!>") {
+        if (prev && prev.nodeType === 8) normalized.push(prev);
+      } else if (prev && prev.nodeType === 3 && prev.data === value) {
         normalized.push(prev);
@@ -538,2 +558,3 @@ } else normalized.push(document.createTextNode(value));
 const isServer = false;
+const isDev = true;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
@@ -552,33 +573,37 @@ function createElement(tagName, isSVG = false) {
     marker = document.createTextNode(""),
-    mount = props.mount || document.body;
+    mount = () => props.mount || document.body,
+    content = createMemo(renderPortal());
   function renderPortal() {
     if (sharedConfig.context) {
       const [s, set] = createSignal(false);
-      queueMicrotask(() => set(true));
+      onMount(() => set(true));
       return () => s() && props.children;
     } else return () => props.children;
   }
-  if (mount instanceof HTMLHeadElement) {
-    const [clean, setClean] = createSignal(false);
-    const cleanup = () => setClean(true);
-    createRoot(dispose => insert(mount, () => !clean() ? renderPortal()() : dispose(), null));
-    onCleanup(() => {
-      if (sharedConfig.context) queueMicrotask(cleanup);else cleanup();
-    });
-  } else {
-    const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
-      renderRoot = useShadow && container.attachShadow ? container.attachShadow({
-        mode: "open"
-      }) : container;
-    Object.defineProperty(container, "_$host", {
-      get() {
-        return marker.parentNode;
-      },
-      configurable: true
-    });
-    insert(renderRoot, renderPortal());
-    mount.appendChild(container);
-    props.ref && props.ref(container);
-    onCleanup(() => mount.removeChild(container));
-  }
+  createRenderEffect(() => {
+    const el = mount();
+    if (el instanceof HTMLHeadElement) {
+      const [clean, setClean] = createSignal(false);
+      const cleanup = () => setClean(true);
+      createRoot(dispose => insert(el, () => !clean() ? content() : dispose(), null));
+      onCleanup(() => {
+        if (sharedConfig.context) queueMicrotask(cleanup);else cleanup();
+      });
+    } else {
+      const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
+        renderRoot = useShadow && container.attachShadow ? container.attachShadow({
+          mode: "open"
+        }) : container;
+      Object.defineProperty(container, "_$host", {
+        get() {
+          return marker.parentNode;
+        },
+        configurable: true
+      });
+      insert(renderRoot, content);
+      el.appendChild(container);
+      props.ref && props.ref(container);
+      onCleanup(() => el.removeChild(container));
+    }
+  });
   return marker;
@@ -606,2 +631,2 @@ }
 
-export { Aliases, voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, voidFn as generateHydrationScript, voidFn as getAssets, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, style, template, use, voidFn as useAssets };
+export { Aliases, voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, voidFn as generateHydrationScript, voidFn as getAssets, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getPropAlias, hydrate, innerHTML, insert, isDev, isServer, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, style, template, use, voidFn as useAssets };

web/dist/server.js

@@ -1,2 +0,2 @@
-import { sharedConfig, splitProps } from 'solid-js';
+import { sharedConfig, createRoot, splitProps } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, mergeProps } from 'solid-js';
@@ -264,3 +264,3 @@
 const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
-const REPLACE_SCRIPT = `function $df(e,t,n,o,d){if(n=document.getElementById(e),o=document.getElementById("pl-"+e)){for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)d=o.nextSibling,o.remove(),o=d;o.replaceWith(n.content)}n.remove(),_$HY.set(e,t),_$HY.fe(e)}`;
+const REPLACE_SCRIPT = `function $df(e,n,t,o,d){if(t=document.getElementById(e),o=document.getElementById("pl-"+e)){for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)d=o.nextSibling,o.remove(),o=d;_$HY.done?o.remove():o.replaceWith(t.content)}t.remove(),_$HY.set(e,n),_$HY.fe(e)}`;
 function renderToString(code, options = {}) {
@@ -281,3 +281,6 @@ let scripts = "";
   };
-  let html = resolveSSRNode(escape(code()));
+  let html = createRoot(d => {
+    setTimeout(d);
+    return resolveSSRNode(escape(code()));
+  });
   sharedConfig.context.noHydrate = true;
@@ -308,2 +311,3 @@ html = injectAssets(sharedConfig.context.assets, html);
   } = options;
+  let dispose;
   const blockingResources = [];
@@ -322,2 +326,3 @@ const registry = new Map();
       completed = true;
+      setTimeout(dispose);
     }
@@ -410,3 +415,6 @@ };
   };
-  let html = resolveSSRNode(escape(code()));
+  let html = createRoot(d => {
+    dispose = d;
+    return resolveSSRNode(escape(code()));
+  });
   function doShell() {
@@ -509,3 +517,3 @@ sharedConfig.context = context;
     i && (result += " ");
-    result += key;
+    result += escape(key);
   }
@@ -547,3 +555,3 @@ return result;
       let n;
-      result += `class="${(n = props.class) ? n + " " : ""}${(n = props.className) ? n + " " : ""}${ssrClassList(props.classList)}"`;
+      result += `class="${escape(((n = props.class) ? n + " " : "") + ((n = props.className) ? n + " " : ""), true) + ssrClassList(props.classList)}"`;
       classResolved = true;
@@ -561,3 +569,3 @@ } else if (BooleanAttributes.has(prop)) {
     return {
-      t: result + '/>'
+      t: result + "/>"
     };
@@ -783,5 +791,6 @@ }
       if (value) result += prop;else continue;
-    } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on") {
+    } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on" || prop.slice(0, 5) === "prop:") {
       continue;
     } else {
+      if (prop.slice(0, 5) === "attr:") prop = prop.slice(5);
       result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
@@ -795,2 +804,3 @@ }
 const isServer = true;
+const isDev = false;
 function render() {}
@@ -816,2 +826,2 @@ function hydrate() {}
 
-export { Assets, Dynamic, Hydration, HydrationScript, NoHydration, Portal, addEventListener, delegateEvents, escape, generateHydrationScript, getAssets, getHydrationKey, hydrate, insert, isServer, pipeToNodeWritable, pipeToWritable, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, stringify, useAssets };
+export { Assets, Dynamic, Hydration, HydrationScript, NoHydration, Portal, addEventListener, delegateEvents, escape, generateHydrationScript, getAssets, getHydrationKey, hydrate, insert, isDev, isServer, pipeToNodeWritable, pipeToWritable, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, stringify, useAssets };

web/dist/web.js

@@ -1,2 +0,2 @@
-import { createRoot, createRenderEffect, sharedConfig, untrack, enableHydration, createSignal, onCleanup, splitProps, createMemo } from 'solid-js';
+import { createRoot, untrack, createRenderEffect, sharedConfig, enableHydration, createMemo, createSignal, onMount, onCleanup, splitProps, $DEVCOMP } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, createComponent, createRenderEffect as effect, getOwner, createMemo as memo, mergeProps, untrack } from 'solid-js';
@@ -13,8 +13,29 @@
   class: "className",
-  formnovalidate: "formNoValidate",
-  ismap: "isMap",
-  nomodule: "noModule",
-  playsinline: "playsInline",
-  readonly: "readOnly"
+  formnovalidate: {
+    $: "formNoValidate",
+    BUTTON: 1,
+    INPUT: 1
+  },
+  ismap: {
+    $: "isMap",
+    IMG: 1
+  },
+  nomodule: {
+    $: "noModule",
+    SCRIPT: 1
+  },
+  playsinline: {
+    $: "playsInline",
+    VIDEO: 1
+  },
+  readonly: {
+    $: "readOnly",
+    INPUT: 1,
+    TEXTAREA: 1
+  }
 });
+function getPropAlias(prop, tagName) {
+  const a = PropAliases[prop];
+  return typeof a === "object" ? a[tagName] ? a["$"] : undefined : a;
+}
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
@@ -101,8 +122,10 @@ const SVGElements = /*#__PURE__*/new Set([
 }
-function template(html, check, isSVG) {
-  const t = document.createElement("template");
-  t.innerHTML = html;
-  let node = t.content.firstChild;
-  if (isSVG) node = node.firstChild;
-  return node;
+function template(html, isSVG, isCE) {
+  let node;
+  const create = () => {
+    const t = document.createElement("template");
+    t.innerHTML = html;
+    return isSVG ? t.content.firstChild.firstChild : t.content.firstChild;
+  };
+  return isCE ? () => (node || (node = create())).cloneNode(true) : () => untrack(() => document.importNode(node || (node = create()), true));
 }
@@ -250,3 +273,5 @@ function delegateEvents(eventNames, document = window.document) {
   if (!sharedConfig.context || !(node = sharedConfig.registry.get(key = getHydrationKey()))) {
-    return template.cloneNode(true);
+    if (sharedConfig.context) console.warn("Unable to find DOM nodes for hydration key:", key);
+    if (!template) throw new Error("Unrecoverable Hydration Mismatch. No template for key: " + key);
+    return template();
   }
@@ -306,3 +331,3 @@ if (sharedConfig.completed) sharedConfig.completed.add(node);
 function assignProp(node, prop, value, prev, isSVG, skipRef) {
-  let isCE, isProp, isChildProp;
+  let isCE, isProp, isChildProp, propAlias, forceProp;
   if (prop === "style") return style(node, value, prev);
@@ -332,4 +357,10 @@ if (prop === "classList") return classList(node, value, prev);
     }
-  } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+  } else if (prop.slice(0, 5) === "attr:") {
+    setAttribute(node, prop.slice(5), value);
+  } else if ((forceProp = prop.slice(0, 5) === "prop:") || (isChildProp = ChildProperties.has(prop)) || !isSVG && ((propAlias = getPropAlias(prop, node.tagName)) || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
+    if (forceProp) {
+      prop = prop.slice(5);
+      isProp = true;
+    }
+    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[propAlias || prop] = value;
   } else {
@@ -356,13 +387,3 @@ const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
   });
-  if (sharedConfig.registry && !sharedConfig.done) {
-    sharedConfig.done = true;
-    document.querySelectorAll("[id^=pl-]").forEach(elem => {
-      while (elem && elem.nodeType !== 8 && elem.nodeValue !== "pl-" + e) {
-        let x = elem.nextSibling;
-        elem.remove();
-        elem = x;
-      }
-      elem && elem.remove();
-    });
-  }
+  if (sharedConfig.registry && !sharedConfig.done) sharedConfig.done = _$HY.done = true;
   while (node) {
@@ -443,3 +464,3 @@ const handler = node[key];
     current = value;
-  } else ;
+  } else console.warn(`Unrecognized value. Skipped inserting`, value);
   return current;
@@ -466,3 +487,5 @@ }
       const value = String(item);
-      if (prev && prev.nodeType === 3 && prev.data === value) {
+      if (value === "<!>") {
+        if (prev && prev.nodeType === 8) normalized.push(prev);
+      } else if (prev && prev.nodeType === 3 && prev.data === value) {
         normalized.push(prev);
@@ -536,2 +559,3 @@ } else normalized.push(document.createTextNode(value));
 const isServer = false;
+const isDev = false;
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
@@ -550,33 +574,37 @@ function createElement(tagName, isSVG = false) {
     marker = document.createTextNode(""),
-    mount = props.mount || document.body;
+    mount = () => props.mount || document.body,
+    content = createMemo(renderPortal());
   function renderPortal() {
     if (sharedConfig.context) {
       const [s, set] = createSignal(false);
-      queueMicrotask(() => set(true));
+      onMount(() => set(true));
       return () => s() && props.children;
     } else return () => props.children;
   }
-  if (mount instanceof HTMLHeadElement) {
-    const [clean, setClean] = createSignal(false);
-    const cleanup = () => setClean(true);
-    createRoot(dispose => insert(mount, () => !clean() ? renderPortal()() : dispose(), null));
-    onCleanup(() => {
-      if (sharedConfig.context) queueMicrotask(cleanup);else cleanup();
-    });
-  } else {
-    const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
-      renderRoot = useShadow && container.attachShadow ? container.attachShadow({
-        mode: "open"
-      }) : container;
-    Object.defineProperty(container, "_$host", {
-      get() {
-        return marker.parentNode;
-      },
-      configurable: true
-    });
-    insert(renderRoot, renderPortal());
-    mount.appendChild(container);
-    props.ref && props.ref(container);
-    onCleanup(() => mount.removeChild(container));
-  }
+  createRenderEffect(() => {
+    const el = mount();
+    if (el instanceof HTMLHeadElement) {
+      const [clean, setClean] = createSignal(false);
+      const cleanup = () => setClean(true);
+      createRoot(dispose => insert(el, () => !clean() ? content() : dispose(), null));
+      onCleanup(() => {
+        if (sharedConfig.context) queueMicrotask(cleanup);else cleanup();
+      });
+    } else {
+      const container = createElement(props.isSVG ? "g" : "div", props.isSVG),
+        renderRoot = useShadow && container.attachShadow ? container.attachShadow({
+          mode: "open"
+        }) : container;
+      Object.defineProperty(container, "_$host", {
+        get() {
+          return marker.parentNode;
+        },
+        configurable: true
+      });
+      insert(renderRoot, content);
+      el.appendChild(container);
+      props.ref && props.ref(container);
+      onCleanup(() => el.removeChild(container));
+    }
+  });
   return marker;
@@ -591,2 +619,5 @@ }
       case "function":
+        Object.assign(component, {
+          [$DEVCOMP]: true
+        });
         return untrack(() => component(others));
@@ -602,2 +633,2 @@ case "string":
 
-export { Aliases, voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, voidFn as generateHydrationScript, voidFn as getAssets, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, style, template, use, voidFn as useAssets };
+export { Aliases, voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, voidFn as generateHydrationScript, voidFn as getAssets, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getPropAlias, hydrate, innerHTML, insert, isDev, isServer, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrSpread, ssrStyle, style, template, use, voidFn as useAssets };

web/types/client.d.ts

 import { JSX } from "./jsx.js";
 export const Aliases: Record<string, string>;
-export const PropAliases: Record<string, string>;
 export const Properties: Set<string>;
@@ -10,2 +9,3 @@ export const ChildProperties: Set<string>;
 export const SVGNamespace: Record<string, string>;
+export function getPropAlias(prop: string, tagName: string): string | undefined;
 
@@ -12,0 +12,0 @@ type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;

web/types/index.d.ts

@@ -6,3 +6,4 @@ import { hydrate as hydrateCore } from "./client.js";
 export * from "./server-mock.js";
-export declare const isServer = false;
+export declare const isServer: boolean;
+export declare const isDev: boolean;
 export declare const hydrate: typeof hydrateCore;
@@ -9,0 +10,0 @@ /**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

799057

increased by1.5%

Lines of code

22279

increased by1.43%

No dependency changes