solid-js 1.7.0-beta.3 → 1.7.0-beta.5

package/dist/dev.cjs

@@ -116,7 +116,10 @@ function workLoop(hasTimeRemaining, initialTime) {
   return currentTask !== null;
 }
 
-const sharedConfig = {};
+const sharedConfig = {
+  context: undefined,
+  registry: undefined
+};
 function setHydrateContext(context) {
   sharedConfig.context = context;
 }
@@ -606,8 +609,8 @@ function enableExternalSource(factory) {
 }
 function readSignal() {
   const runningTransition = Transition && Transition.running;
-  if (this.sources && (!runningTransition && this.state || runningTransition && this.tState)) {
-    if (!runningTransition && this.state === STALE || runningTransition && this.tState === STALE) updateComputation(this);else {
+  if (this.sources && (runningTransition ? this.tState : this.state)) {
+    if ((runningTransition ? this.tState : this.state) === STALE) updateComputation(this);else {
       const updates = Updates;
       Updates = null;
       runUpdates(() => lookUpstream(this), false);
@@ -651,11 +654,11 @@ function writeSignal(node, value, isComp) {
           const o = node.observers[i];
           const TransitionRunning = Transition && Transition.running;
           if (TransitionRunning && Transition.disposed.has(o)) continue;
-          if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
+          if (TransitionRunning ? !o.tState : !o.state) {
             if (o.pure) Updates.push(o);else Effects.push(o);
             if (o.observers) markDownstream(o);
           }
-          if (TransitionRunning) o.tState = STALE;else o.state = STALE;
+          if (!TransitionRunning) o.state = STALE;else o.tState = STALE;
         }
         if (Updates.length > 10e5) {
           Updates = [];
@@ -761,13 +764,13 @@ function createComputation(fn, init, pure, state = STALE, options) {
 }
 function runTop(node) {
   const runningTransition = Transition && Transition.running;
-  if (!runningTransition && node.state === 0 || runningTransition && node.tState === 0) return;
-  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookUpstream(node);
+  if ((runningTransition ? node.tState : node.state) === 0) return;
+  if ((runningTransition ? node.tState : node.state) === PENDING) return lookUpstream(node);
   if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
   const ancestors = [node];
   while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
     if (runningTransition && Transition.disposed.has(node)) return;
-    if (!runningTransition && node.state || runningTransition && node.tState) ancestors.push(node);
+    if (runningTransition ? node.tState : node.state) ancestors.push(node);
   }
   for (let i = ancestors.length - 1; i >= 0; i--) {
     node = ancestors[i];
@@ -778,9 +781,9 @@ function runTop(node) {
         if (Transition.disposed.has(top)) return;
       }
     }
-    if (!runningTransition && node.state === STALE || runningTransition && node.tState === STALE) {
+    if ((runningTransition ? node.tState : node.state) === STALE) {
       updateComputation(node);
-    } else if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) {
+    } else if ((runningTransition ? node.tState : node.state) === PENDING) {
       const updates = Updates;
       Updates = null;
       runUpdates(() => lookUpstream(node, ancestors[0]), false);
@@ -885,9 +888,10 @@ function lookUpstream(node, ignore) {
   for (let i = 0; i < node.sources.length; i += 1) {
     const source = node.sources[i];
     if (source.sources) {
-      if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
+      const state = runningTransition ? source.tState : source.state;
+      if (state === STALE) {
         if (source !== ignore && (!source.updatedAt || source.updatedAt < ExecCount)) runTop(source);
-      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
+      } else if (state === PENDING) lookUpstream(source, ignore);
     }
   }
 }
@@ -895,7 +899,7 @@ function markDownstream(node) {
   const runningTransition = Transition && Transition.running;
   for (let i = 0; i < node.observers.length; i += 1) {
     const o = node.observers[i];
-    if (!runningTransition && !o.state || runningTransition && !o.tState) {
+    if (runningTransition ? !o.tState : !o.state) {
       if (runningTransition) o.tState = PENDING;else o.state = PENDING;
       if (o.pure) Updates.push(o);else Effects.push(o);
       o.observers && markDownstream(o);
@@ -1396,6 +1400,7 @@ function createUniqueId() {
   return ctx ? `${ctx.id}${ctx.count++}` : `cl-${counter++}`;
 }
 
+const narrowedError = name => `Attempting to access a stale value from <${name}> that could possibly be undefined. This may occur because you are reading the accessor returned from the component at a time where it has already been unmounted. We recommend cleaning up any stale timers or async, or reading from the initial condition.` ;
 function For(props) {
   const fallback = "fallback" in props && {
     fallback: () => props.fallback
@@ -1424,7 +1429,7 @@ function Show(props) {
       const child = props.children;
       const fn = typeof child === "function" && child.length > 0;
       return fn ? untrack(() => child(keyed ? c : () => {
-        if (true && !untrack(condition)) console.warn("Accessing stale value from Show.");
+        if (!untrack(condition)) throw narrowedError("Show");
         return props.when;
       })) : child;
     }
@@ -1458,7 +1463,7 @@ function Switch(props) {
     const c = cond.children;
     const fn = typeof c === "function" && c.length > 0;
     return fn ? untrack(() => c(keyed ? when : () => {
-      if (true && untrack(evalConditions)[0] !== index) console.warn("Accessing stale value from Match.");
+      if (untrack(evalConditions)[0] !== index) throw narrowedError("Match");
       return cond.when;
     })) : c;
   }, undefined, {

package/dist/dev.js

@@ -114,7 +114,10 @@ function workLoop(hasTimeRemaining, initialTime) {
   return currentTask !== null;
 }
 
-const sharedConfig = {};
+const sharedConfig = {
+  context: undefined,
+  registry: undefined
+};
 function setHydrateContext(context) {
   sharedConfig.context = context;
 }
@@ -604,8 +607,8 @@ function enableExternalSource(factory) {
 }
 function readSignal() {
   const runningTransition = Transition && Transition.running;
-  if (this.sources && (!runningTransition && this.state || runningTransition && this.tState)) {
-    if (!runningTransition && this.state === STALE || runningTransition && this.tState === STALE) updateComputation(this);else {
+  if (this.sources && (runningTransition ? this.tState : this.state)) {
+    if ((runningTransition ? this.tState : this.state) === STALE) updateComputation(this);else {
       const updates = Updates;
       Updates = null;
       runUpdates(() => lookUpstream(this), false);
@@ -649,11 +652,11 @@ function writeSignal(node, value, isComp) {
           const o = node.observers[i];
           const TransitionRunning = Transition && Transition.running;
           if (TransitionRunning && Transition.disposed.has(o)) continue;
-          if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
+          if (TransitionRunning ? !o.tState : !o.state) {
             if (o.pure) Updates.push(o);else Effects.push(o);
             if (o.observers) markDownstream(o);
           }
-          if (TransitionRunning) o.tState = STALE;else o.state = STALE;
+          if (!TransitionRunning) o.state = STALE;else o.tState = STALE;
         }
         if (Updates.length > 10e5) {
           Updates = [];
@@ -759,13 +762,13 @@ function createComputation(fn, init, pure, state = STALE, options) {
 }
 function runTop(node) {
   const runningTransition = Transition && Transition.running;
-  if (!runningTransition && node.state === 0 || runningTransition && node.tState === 0) return;
-  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookUpstream(node);
+  if ((runningTransition ? node.tState : node.state) === 0) return;
+  if ((runningTransition ? node.tState : node.state) === PENDING) return lookUpstream(node);
   if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
   const ancestors = [node];
   while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
     if (runningTransition && Transition.disposed.has(node)) return;
-    if (!runningTransition && node.state || runningTransition && node.tState) ancestors.push(node);
+    if (runningTransition ? node.tState : node.state) ancestors.push(node);
   }
   for (let i = ancestors.length - 1; i >= 0; i--) {
     node = ancestors[i];
@@ -776,9 +779,9 @@ function runTop(node) {
         if (Transition.disposed.has(top)) return;
       }
     }
-    if (!runningTransition && node.state === STALE || runningTransition && node.tState === STALE) {
+    if ((runningTransition ? node.tState : node.state) === STALE) {
       updateComputation(node);
-    } else if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) {
+    } else if ((runningTransition ? node.tState : node.state) === PENDING) {
       const updates = Updates;
       Updates = null;
       runUpdates(() => lookUpstream(node, ancestors[0]), false);
@@ -883,9 +886,10 @@ function lookUpstream(node, ignore) {
   for (let i = 0; i < node.sources.length; i += 1) {
     const source = node.sources[i];
     if (source.sources) {
-      if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
+      const state = runningTransition ? source.tState : source.state;
+      if (state === STALE) {
         if (source !== ignore && (!source.updatedAt || source.updatedAt < ExecCount)) runTop(source);
-      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
+      } else if (state === PENDING) lookUpstream(source, ignore);
     }
   }
 }
@@ -893,7 +897,7 @@ function markDownstream(node) {
   const runningTransition = Transition && Transition.running;
   for (let i = 0; i < node.observers.length; i += 1) {
     const o = node.observers[i];
-    if (!runningTransition && !o.state || runningTransition && !o.tState) {
+    if (runningTransition ? !o.tState : !o.state) {
       if (runningTransition) o.tState = PENDING;else o.state = PENDING;
       if (o.pure) Updates.push(o);else Effects.push(o);
       o.observers && markDownstream(o);
@@ -1394,6 +1398,7 @@ function createUniqueId() {
   return ctx ? `${ctx.id}${ctx.count++}` : `cl-${counter++}`;
 }
 
+const narrowedError = name => `Attempting to access a stale value from <${name}> that could possibly be undefined. This may occur because you are reading the accessor returned from the component at a time where it has already been unmounted. We recommend cleaning up any stale timers or async, or reading from the initial condition.` ;
 function For(props) {
   const fallback = "fallback" in props && {
     fallback: () => props.fallback
@@ -1422,7 +1427,7 @@ function Show(props) {
       const child = props.children;
       const fn = typeof child === "function" && child.length > 0;
       return fn ? untrack(() => child(keyed ? c : () => {
-        if (true && !untrack(condition)) console.warn("Accessing stale value from Show.");
+        if (!untrack(condition)) throw narrowedError("Show");
         return props.when;
       })) : child;
     }
@@ -1456,7 +1461,7 @@ function Switch(props) {
     const c = cond.children;
     const fn = typeof c === "function" && c.length > 0;
     return fn ? untrack(() => c(keyed ? when : () => {
-      if (true && untrack(evalConditions)[0] !== index) console.warn("Accessing stale value from Match.");
+      if (untrack(evalConditions)[0] !== index) throw narrowedError("Match");
       return cond.when;
     })) : c;
   }, undefined, {

package/dist/server.cjs

@@ -601,9 +601,9 @@ function Suspense(props) {
   });
   function suspenseError(err) {
     if (!done || !done(undefined, err)) {
-      if (o) runWithOwner(o.owner, () => {
+      runWithOwner(o.owner, () => {
         throw err;
-      });else throw err;
+      });
     }
   }
   function runSuspense() {
@@ -611,7 +611,7 @@ function Suspense(props) {
       ...ctx,
       count: 0
     });
-    o && cleanNode(o);
+    cleanNode(o);
     return runWithOwner(o, () => createComponent(SuspenseContext.Provider, {
       value,
       get children() {

package/dist/server.js

@@ -599,9 +599,9 @@ function Suspense(props) {
   });
   function suspenseError(err) {
     if (!done || !done(undefined, err)) {
-      if (o) runWithOwner(o.owner, () => {
+      runWithOwner(o.owner, () => {
         throw err;
-      });else throw err;
+      });
     }
   }
   function runSuspense() {
@@ -609,7 +609,7 @@ function Suspense(props) {
       ...ctx,
       count: 0
     });
-    o && cleanNode(o);
+    cleanNode(o);
     return runWithOwner(o, () => createComponent(SuspenseContext.Provider, {
       value,
       get children() {

package/dist/solid.cjs

@@ -116,7 +116,10 @@ function workLoop(hasTimeRemaining, initialTime) {
   return currentTask !== null;
 }
 
-const sharedConfig = {};
+const sharedConfig = {
+  context: undefined,
+  registry: undefined
+};
 function setHydrateContext(context) {
   sharedConfig.context = context;
 }
@@ -568,8 +571,8 @@ function enableExternalSource(factory) {
 }
 function readSignal() {
   const runningTransition = Transition && Transition.running;
-  if (this.sources && (!runningTransition && this.state || runningTransition && this.tState)) {
-    if (!runningTransition && this.state === STALE || runningTransition && this.tState === STALE) updateComputation(this);else {
+  if (this.sources && (runningTransition ? this.tState : this.state)) {
+    if ((runningTransition ? this.tState : this.state) === STALE) updateComputation(this);else {
       const updates = Updates;
       Updates = null;
       runUpdates(() => lookUpstream(this), false);
@@ -613,11 +616,11 @@ function writeSignal(node, value, isComp) {
           const o = node.observers[i];
           const TransitionRunning = Transition && Transition.running;
           if (TransitionRunning && Transition.disposed.has(o)) continue;
-          if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
+          if (TransitionRunning ? !o.tState : !o.state) {
             if (o.pure) Updates.push(o);else Effects.push(o);
             if (o.observers) markDownstream(o);
           }
-          if (TransitionRunning) o.tState = STALE;else o.state = STALE;
+          if (!TransitionRunning) o.state = STALE;else o.tState = STALE;
         }
         if (Updates.length > 10e5) {
           Updates = [];
@@ -721,13 +724,13 @@ function createComputation(fn, init, pure, state = STALE, options) {
 }
 function runTop(node) {
   const runningTransition = Transition && Transition.running;
-  if (!runningTransition && node.state === 0 || runningTransition && node.tState === 0) return;
-  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookUpstream(node);
+  if ((runningTransition ? node.tState : node.state) === 0) return;
+  if ((runningTransition ? node.tState : node.state) === PENDING) return lookUpstream(node);
   if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
   const ancestors = [node];
   while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
     if (runningTransition && Transition.disposed.has(node)) return;
-    if (!runningTransition && node.state || runningTransition && node.tState) ancestors.push(node);
+    if (runningTransition ? node.tState : node.state) ancestors.push(node);
   }
   for (let i = ancestors.length - 1; i >= 0; i--) {
     node = ancestors[i];
@@ -738,9 +741,9 @@ function runTop(node) {
         if (Transition.disposed.has(top)) return;
       }
     }
-    if (!runningTransition && node.state === STALE || runningTransition && node.tState === STALE) {
+    if ((runningTransition ? node.tState : node.state) === STALE) {
       updateComputation(node);
-    } else if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) {
+    } else if ((runningTransition ? node.tState : node.state) === PENDING) {
       const updates = Updates;
       Updates = null;
       runUpdates(() => lookUpstream(node, ancestors[0]), false);
@@ -845,9 +848,10 @@ function lookUpstream(node, ignore) {
   for (let i = 0; i < node.sources.length; i += 1) {
     const source = node.sources[i];
     if (source.sources) {
-      if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
+      const state = runningTransition ? source.tState : source.state;
+      if (state === STALE) {
         if (source !== ignore && (!source.updatedAt || source.updatedAt < ExecCount)) runTop(source);
-      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
+      } else if (state === PENDING) lookUpstream(source, ignore);
     }
   }
 }
@@ -855,7 +859,7 @@ function markDownstream(node) {
   const runningTransition = Transition && Transition.running;
   for (let i = 0; i < node.observers.length; i += 1) {
     const o = node.observers[i];
-    if (!runningTransition && !o.state || runningTransition && !o.tState) {
+    if (runningTransition ? !o.tState : !o.state) {
       if (runningTransition) o.tState = PENDING;else o.state = PENDING;
       if (o.pure) Updates.push(o);else Effects.push(o);
       o.observers && markDownstream(o);
@@ -1349,6 +1353,7 @@ function createUniqueId() {
   return ctx ? `${ctx.id}${ctx.count++}` : `cl-${counter++}`;
 }
 
+const narrowedError = name => `Stale read from <${name}>.`;
 function For(props) {
   const fallback = "fallback" in props && {
     fallback: () => props.fallback
@@ -1372,7 +1377,7 @@ function Show(props) {
       const child = props.children;
       const fn = typeof child === "function" && child.length > 0;
       return fn ? untrack(() => child(keyed ? c : () => {
-        if (false && !untrack(condition)) ;
+        if (!untrack(condition)) throw narrowedError("Show");
         return props.when;
       })) : child;
     }
@@ -1403,7 +1408,7 @@ function Switch(props) {
     const c = cond.children;
     const fn = typeof c === "function" && c.length > 0;
     return fn ? untrack(() => c(keyed ? when : () => {
-      if (false && untrack(evalConditions)[0] !== index) ;
+      if (untrack(evalConditions)[0] !== index) throw narrowedError("Match");
       return cond.when;
     })) : c;
   }, undefined, undefined);

package/dist/solid.js

@@ -114,7 +114,10 @@ function workLoop(hasTimeRemaining, initialTime) {
   return currentTask !== null;
 }
 
-const sharedConfig = {};
+const sharedConfig = {
+  context: undefined,
+  registry: undefined
+};
 function setHydrateContext(context) {
   sharedConfig.context = context;
 }
@@ -566,8 +569,8 @@ function enableExternalSource(factory) {
 }
 function readSignal() {
   const runningTransition = Transition && Transition.running;
-  if (this.sources && (!runningTransition && this.state || runningTransition && this.tState)) {
-    if (!runningTransition && this.state === STALE || runningTransition && this.tState === STALE) updateComputation(this);else {
+  if (this.sources && (runningTransition ? this.tState : this.state)) {
+    if ((runningTransition ? this.tState : this.state) === STALE) updateComputation(this);else {
       const updates = Updates;
       Updates = null;
       runUpdates(() => lookUpstream(this), false);
@@ -611,11 +614,11 @@ function writeSignal(node, value, isComp) {
           const o = node.observers[i];
           const TransitionRunning = Transition && Transition.running;
           if (TransitionRunning && Transition.disposed.has(o)) continue;
-          if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
+          if (TransitionRunning ? !o.tState : !o.state) {
             if (o.pure) Updates.push(o);else Effects.push(o);
             if (o.observers) markDownstream(o);
           }
-          if (TransitionRunning) o.tState = STALE;else o.state = STALE;
+          if (!TransitionRunning) o.state = STALE;else o.tState = STALE;
         }
         if (Updates.length > 10e5) {
           Updates = [];
@@ -719,13 +722,13 @@ function createComputation(fn, init, pure, state = STALE, options) {
 }
 function runTop(node) {
   const runningTransition = Transition && Transition.running;
-  if (!runningTransition && node.state === 0 || runningTransition && node.tState === 0) return;
-  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookUpstream(node);
+  if ((runningTransition ? node.tState : node.state) === 0) return;
+  if ((runningTransition ? node.tState : node.state) === PENDING) return lookUpstream(node);
   if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
   const ancestors = [node];
   while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
     if (runningTransition && Transition.disposed.has(node)) return;
-    if (!runningTransition && node.state || runningTransition && node.tState) ancestors.push(node);
+    if (runningTransition ? node.tState : node.state) ancestors.push(node);
   }
   for (let i = ancestors.length - 1; i >= 0; i--) {
     node = ancestors[i];
@@ -736,9 +739,9 @@ function runTop(node) {
         if (Transition.disposed.has(top)) return;
       }
     }
-    if (!runningTransition && node.state === STALE || runningTransition && node.tState === STALE) {
+    if ((runningTransition ? node.tState : node.state) === STALE) {
       updateComputation(node);
-    } else if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) {
+    } else if ((runningTransition ? node.tState : node.state) === PENDING) {
       const updates = Updates;
       Updates = null;
       runUpdates(() => lookUpstream(node, ancestors[0]), false);
@@ -843,9 +846,10 @@ function lookUpstream(node, ignore) {
   for (let i = 0; i < node.sources.length; i += 1) {
     const source = node.sources[i];
     if (source.sources) {
-      if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
+      const state = runningTransition ? source.tState : source.state;
+      if (state === STALE) {
         if (source !== ignore && (!source.updatedAt || source.updatedAt < ExecCount)) runTop(source);
-      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
+      } else if (state === PENDING) lookUpstream(source, ignore);
     }
   }
 }
@@ -853,7 +857,7 @@ function markDownstream(node) {
   const runningTransition = Transition && Transition.running;
   for (let i = 0; i < node.observers.length; i += 1) {
     const o = node.observers[i];
-    if (!runningTransition && !o.state || runningTransition && !o.tState) {
+    if (runningTransition ? !o.tState : !o.state) {
       if (runningTransition) o.tState = PENDING;else o.state = PENDING;
       if (o.pure) Updates.push(o);else Effects.push(o);
       o.observers && markDownstream(o);
@@ -1347,6 +1351,7 @@ function createUniqueId() {
   return ctx ? `${ctx.id}${ctx.count++}` : `cl-${counter++}`;
 }
 
+const narrowedError = name => `Stale read from <${name}>.`;
 function For(props) {
   const fallback = "fallback" in props && {
     fallback: () => props.fallback
@@ -1370,7 +1375,7 @@ function Show(props) {
       const child = props.children;
       const fn = typeof child === "function" && child.length > 0;
       return fn ? untrack(() => child(keyed ? c : () => {
-        if (false && !untrack(condition)) ;
+        if (!untrack(condition)) throw narrowedError("Show");
         return props.when;
       })) : child;
     }
@@ -1401,7 +1406,7 @@ function Switch(props) {
     const c = cond.children;
     const fn = typeof c === "function" && c.length > 0;
     return fn ? untrack(() => c(keyed ? when : () => {
-      if (false && untrack(evalConditions)[0] !== index) ;
+      if (untrack(evalConditions)[0] !== index) throw narrowedError("Match");
       return cond.when;
     })) : c;
   }, undefined, undefined);

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

@@ -763,6 +763,7 @@ export namespace JSX {
     src?: FunctionMaybe<string>;
     srcdoc?: FunctionMaybe<string>;
     width?: FunctionMaybe<number | string>;
+    loading?: FunctionMaybe<"eager" | "lazy">;
     referrerPolicy?: FunctionMaybe<HTMLReferrerPolicy>;
   }
   interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.7.0-beta.3",
+  "version": "1.7.0-beta.5",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -279,8 +279,8 @@
     "types:universal": "tsc --project ./universal/tsconfig.json && ncp ../../node_modules/dom-expressions/src/universal.d.ts ./universal/types/universal.d.ts",
     "bench": "node --allow-natives-syntax bench/bench.cjs",
     "link": "symlink-dir . node_modules/solid-js",
-    "test": "jest",
-    "coverage": "jest --coverage",
+    "test": "vitest run",
+    "coverage": "vitest run --coverage",
     "test-types": "tsc --project tsconfig.test.json"
   }
 }

package/types/jsx.d.ts

@@ -1,4 +1,4 @@
-import * as csstype from 'csstype';
+import * as csstype from "csstype";
 
 /**
  * Based on JSX types for Surplus and Inferno and adapted for `dom-expressions`.
@@ -9,14 +9,7 @@ import * as csstype from 'csstype';
 type DOMElement = Element;
 
 export namespace JSX {
-  type Element =
-    | Node
-    | ArrayElement
-    | (string & {})
-    | number
-    | boolean
-    | null
-    | undefined;
+  type Element = Node | ArrayElement | (string & {}) | number | boolean | null | undefined;
   interface ArrayElement extends Array<Element> {}
   interface ElementClass {
     // empty, libs can define requirements downstream
@@ -46,6 +39,85 @@ export namespace JSX {
     1: any;
   }
   type EventHandlerUnion<T, E extends Event> = EventHandler<T, E> | BoundEventHandler<T, E>;
+
+  interface InputEventHandler<T, E extends InputEvent> {
+    (
+      e: E & {
+        currentTarget: T;
+        target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+          ? T
+          : DOMElement;
+      }
+    ): void;
+  }
+  interface BoundInputEventHandler<T, E extends InputEvent> {
+    0: (
+      data: any,
+      e: E & {
+        currentTarget: T;
+        target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+          ? T
+          : DOMElement;
+      }
+    ) => void;
+    1: any;
+  }
+  type InputEventHandlerUnion<T, E extends InputEvent> =
+    | InputEventHandler<T, E>
+    | BoundInputEventHandler<T, E>;
+
+  interface ChangeEventHandler<T, E extends Event> {
+    (
+      e: E & {
+        currentTarget: T;
+        target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+          ? T
+          : DOMElement;
+      }
+    ): void;
+  }
+  interface BoundChangeEventHandler<T, E extends Event> {
+    0: (
+      data: any,
+      e: E & {
+        currentTarget: T;
+        target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+          ? T
+          : DOMElement;
+      }
+    ) => void;
+    1: any;
+  }
+  type ChangeEventHandlerUnion<T, E extends Event> =
+    | ChangeEventHandler<T, E>
+    | BoundChangeEventHandler<T, E>;
+
+  interface FocusEventHandler<T, E extends FocusEvent> {
+    (
+      e: E & {
+        currentTarget: T;
+        target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+          ? T
+          : DOMElement;
+      }
+    ): void;
+  }
+  interface BoundFocusEventHandler<T, E extends FocusEvent> {
+    0: (
+      data: any,
+      e: E & {
+        currentTarget: T;
+        target: T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+          ? T
+          : DOMElement;
+      }
+    ) => void;
+    1: any;
+  }
+  type FocusEventHandlerUnion<T, E extends FocusEvent> =
+    | FocusEventHandler<T, E>
+    | BoundFocusEventHandler<T, E>;
+
   interface IntrinsicAttributes {
     ref?: unknown | ((e: unknown) => void);
   }
@@ -56,7 +128,7 @@ export namespace JSX {
     };
     $ServerOnly?: boolean;
   }
-  type Accessor<T> = () => T
+  type Accessor<T> = () => T;
   interface Directives {}
   interface DirectiveFunctions {
     [x: string]: (el: Element, accessor: Accessor<any>) => void;
@@ -69,7 +141,9 @@ export namespace JSX {
     [Key in keyof Directives as `use:${Key}`]?: Directives[Key];
   };
   type DirectiveFunctionAttributes<T> = {
-    [K in keyof DirectiveFunctions as string extends K ? never : `use:${K}`]?: DirectiveFunctions[K] extends (
+    [K in keyof DirectiveFunctions as string extends K
+      ? never
+      : `use:${K}`]?: DirectiveFunctions[K] extends (
       el: infer E, // will be unknown if not provided
       ...rest: infer R // use rest so that we can check whether it's provided or not
     ) => void
@@ -90,13 +164,23 @@ export namespace JSX {
   };
   type OnAttributes<T> = {
     [Key in keyof CustomEvents as `on:${Key}`]?: EventHandler<T, CustomEvents[Key]>;
-  }
+  };
   type OnCaptureAttributes<T> = {
-    [Key in keyof CustomCaptureEvents as `oncapture:${Key}`]?: EventHandler<T, CustomCaptureEvents[Key]>;
-  }
-  interface DOMAttributes<T> extends CustomAttributes<T>, DirectiveAttributes, DirectiveFunctionAttributes<T>,
-                                     PropAttributes, AttrAttributes, OnAttributes<T>, OnCaptureAttributes<T>,
-                                     CustomEventHandlersCamelCase<T>, CustomEventHandlersLowerCase<T> {
+    [Key in keyof CustomCaptureEvents as `oncapture:${Key}`]?: EventHandler<
+      T,
+      CustomCaptureEvents[Key]
+    >;
+  };
+  interface DOMAttributes<T>
+    extends CustomAttributes<T>,
+      DirectiveAttributes,
+      DirectiveFunctionAttributes<T>,
+      PropAttributes,
+      AttrAttributes,
+      OnAttributes<T>,
+      OnCaptureAttributes<T>,
+      CustomEventHandlersCamelCase<T>,
+      CustomEventHandlersLowerCase<T> {
     children?: Element;
     innerHTML?: string;
     innerText?: string | number;
@@ -108,8 +192,8 @@ export namespace JSX {
     onCompositionEnd?: EventHandlerUnion<T, CompositionEvent>;
     onCompositionStart?: EventHandlerUnion<T, CompositionEvent>;
     onCompositionUpdate?: EventHandlerUnion<T, CompositionEvent>;
-    onFocusOut?: EventHandlerUnion<T, FocusEvent>;
-    onFocusIn?: EventHandlerUnion<T, FocusEvent>;
+    onFocusOut?: FocusEventHandlerUnion<T, FocusEvent>;
+    onFocusIn?: FocusEventHandlerUnion<T, FocusEvent>;
     onEncrypted?: EventHandlerUnion<T, Event>;
     onDragExit?: EventHandlerUnion<T, DragEvent>;
     // lower case events
@@ -119,8 +203,8 @@ export namespace JSX {
     oncompositionend?: EventHandlerUnion<T, CompositionEvent>;
     oncompositionstart?: EventHandlerUnion<T, CompositionEvent>;
     oncompositionupdate?: EventHandlerUnion<T, CompositionEvent>;
-    onfocusout?: EventHandlerUnion<T, FocusEvent>;
-    onfocusin?: EventHandlerUnion<T, FocusEvent>;
+    onfocusout?: FocusEventHandlerUnion<T, FocusEvent>;
+    onfocusin?: FocusEventHandlerUnion<T, FocusEvent>;
     onencrypted?: EventHandlerUnion<T, Event>;
     ondragexit?: EventHandlerUnion<T, DragEvent>;
   }
@@ -130,11 +214,11 @@ export namespace JSX {
     onAnimationIteration?: EventHandlerUnion<T, AnimationEvent>;
     onAnimationStart?: EventHandlerUnion<T, AnimationEvent>;
     onAuxClick?: EventHandlerUnion<T, MouseEvent>;
-    onBeforeInput?: EventHandlerUnion<T, InputEvent>;
-    onBlur?: EventHandlerUnion<T, FocusEvent>;
+    onBeforeInput?: InputEventHandlerUnion<T, InputEvent>;
+    onBlur?: FocusEventHandlerUnion<T, FocusEvent>;
     onCanPlay?: EventHandlerUnion<T, Event>;
     onCanPlayThrough?: EventHandlerUnion<T, Event>;
-    onChange?: EventHandlerUnion<T, Event>;
+    onChange?: ChangeEventHandlerUnion<T, Event>;
     onClick?: EventHandlerUnion<T, MouseEvent>;
     onContextMenu?: EventHandlerUnion<T, MouseEvent>;
     onDblClick?: EventHandlerUnion<T, MouseEvent>;
@@ -149,9 +233,9 @@ export namespace JSX {
     onEmptied?: EventHandlerUnion<T, Event>;
     onEnded?: EventHandlerUnion<T, Event>;
     onError?: EventHandlerUnion<T, Event>;
-    onFocus?: EventHandlerUnion<T, FocusEvent>;
+    onFocus?: FocusEventHandlerUnion<T, FocusEvent>;
     onGotPointerCapture?: EventHandlerUnion<T, PointerEvent>;
-    onInput?: EventHandlerUnion<T, InputEvent>;
+    onInput?: InputEventHandlerUnion<T, InputEvent>;
     onInvalid?: EventHandlerUnion<T, Event>;
     onKeyDown?: EventHandlerUnion<T, KeyboardEvent>;
     onKeyPress?: EventHandlerUnion<T, KeyboardEvent>;
@@ -213,11 +297,11 @@ export namespace JSX {
     onanimationiteration?: EventHandlerUnion<T, AnimationEvent>;
     onanimationstart?: EventHandlerUnion<T, AnimationEvent>;
     onauxclick?: EventHandlerUnion<T, MouseEvent>;
-    onbeforeinput?: EventHandlerUnion<T, InputEvent>;
-    onblur?: EventHandlerUnion<T, FocusEvent>;
+    onbeforeinput?: InputEventHandlerUnion<T, InputEvent>;
+    onblur?: FocusEventHandlerUnion<T, FocusEvent>;
     oncanplay?: EventHandlerUnion<T, Event>;
     oncanplaythrough?: EventHandlerUnion<T, Event>;
-    onchange?: EventHandlerUnion<T, Event>;
+    onchange?: ChangeEventHandlerUnion<T, Event>;
     onclick?: EventHandlerUnion<T, MouseEvent>;
     oncontextmenu?: EventHandlerUnion<T, MouseEvent>;
     ondblclick?: EventHandlerUnion<T, MouseEvent>;
@@ -232,9 +316,9 @@ export namespace JSX {
     onemptied?: EventHandlerUnion<T, Event>;
     onended?: EventHandlerUnion<T, Event>;
     onerror?: EventHandlerUnion<T, Event>;
-    onfocus?: EventHandlerUnion<T, FocusEvent>;
+    onfocus?: FocusEventHandlerUnion<T, FocusEvent>;
     ongotpointercapture?: EventHandlerUnion<T, PointerEvent>;
-    oninput?: EventHandlerUnion<T, InputEvent>;
+    oninput?: InputEventHandlerUnion<T, InputEvent>;
     oninvalid?: EventHandlerUnion<T, Event>;
     onkeydown?: EventHandlerUnion<T, KeyboardEvent>;
     onkeypress?: EventHandlerUnion<T, KeyboardEvent>;
@@ -290,7 +374,7 @@ export namespace JSX {
 
   interface CSSProperties extends csstype.PropertiesHyphen {
     // Override
-    [key: `-${string}`]: string | number | undefined
+    [key: `-${string}`]: string | number | undefined;
   }
 
   type HTMLAutocapitalize = "off" | "none" | "on" | "sentences" | "words" | "characters";
@@ -769,6 +853,7 @@ export namespace JSX {
     src?: string;
     srcdoc?: string;
     width?: number | string;
+    loading?: "eager" | "lazy";
     referrerPolicy?: HTMLReferrerPolicy;
   }
   interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -794,12 +879,13 @@ export namespace JSX {
     accept?: string;
     alt?: string;
     autocomplete?: string;
+    autocorrect?: "on" | "off";
     autofocus?: boolean;
     capture?: boolean | string;
     checked?: boolean;
     crossorigin?: HTMLCrossorigin;
     disabled?: boolean;
-    enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+    enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
     form?: string;
     formaction?: string;
     formenctype?: HTMLFormEncType;
@@ -807,6 +893,7 @@ export namespace JSX {
     formnovalidate?: boolean;
     formtarget?: string;
     height?: number | string;
+    incremental?: boolean;
     list?: string;
     max?: number | string;
     maxlength?: number | string;
@@ -817,6 +904,7 @@ export namespace JSX {
     pattern?: string;
     placeholder?: string;
     readonly?: boolean;
+    results?: number;
     required?: boolean;
     size?: number | string;
     src?: string;
@@ -1023,7 +1111,7 @@ export namespace JSX {
     rowspan?: number | string;
     colSpan?: number | string;
     rowSpan?: number | string;
-    scope?: 'col' | 'row' | 'rowgroup' | 'colgroup';
+    scope?: "col" | "row" | "rowgroup" | "colgroup";
   }
   interface TimeHTMLAttributes<T> extends HTMLAttributes<T> {
     datetime?: string;
@@ -1299,7 +1387,7 @@ export namespace JSX {
     gradientUnits?: SVGUnits;
     gradientTransform?: string;
     spreadMethod?: "pad" | "reflect" | "repeat";
-    href?: string
+    href?: string;
   }
   interface GraphicsElementSVGAttributes<T>
     extends CoreSVGAttributes<T>,

package/universal/types/universal.d.ts

@@ -23,6 +23,7 @@ export interface Renderer<NodeType> {
   spread<T>(node: any, accessor: (() => T) | T, skipChildren?: Boolean): void;
   setProp<T>(node: NodeType, name: string, value: T, prev?: T): T;
   mergeProps(...sources: unknown[]): unknown;
+  use<A, T>(fn: (element: NodeType, arg: A) => T, element: NodeType, arg: A): T;
 }
 
 export function createRenderer<NodeType>(options: RendererOptions<NodeType>): Renderer<NodeType>;

package/web/dist/dev.cjs

@@ -126,7 +126,9 @@ function template(html, isCE, isSVG) {
     t.innerHTML = html;
     return isSVG ? t.content.firstChild.firstChild : t.content.firstChild;
   };
-  return isCE ? () => (node || (node = create())).cloneNode(true) : () => solidJs.untrack(() => document.importNode(node || (node = create()), true));
+  const fn = isCE ? () => (node || (node = create())).cloneNode(true) : () => solidJs.untrack(() => document.importNode(node || (node = create()), true));
+  fn.cloneNode = fn;
+  return fn;
 }
 function delegateEvents(eventNames, document = window.document) {
   const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());

package/web/dist/dev.js

@@ -1,4 +1,4 @@
-import { createRoot, untrack, createRenderEffect, sharedConfig, enableHydration, createMemo, createSignal, onMount, onCleanup, splitProps, $DEVCOMP } from 'solid-js';
+import { createRoot, createRenderEffect, sharedConfig, untrack, 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';
 
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
@@ -125,7 +125,9 @@ function template(html, isCE, isSVG) {
     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));
+  const fn = isCE ? () => (node || (node = create())).cloneNode(true) : () => untrack(() => document.importNode(node || (node = create()), true));
+  fn.cloneNode = fn;
+  return fn;
 }
 function delegateEvents(eventNames, document = window.document) {
   const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());

package/web/dist/web.cjs

@@ -126,7 +126,9 @@ function template(html, isCE, isSVG) {
     t.innerHTML = html;
     return isSVG ? t.content.firstChild.firstChild : t.content.firstChild;
   };
-  return isCE ? () => (node || (node = create())).cloneNode(true) : () => solidJs.untrack(() => document.importNode(node || (node = create()), true));
+  const fn = isCE ? () => (node || (node = create())).cloneNode(true) : () => solidJs.untrack(() => document.importNode(node || (node = create()), true));
+  fn.cloneNode = fn;
+  return fn;
 }
 function delegateEvents(eventNames, document = window.document) {
   const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());

package/web/dist/web.js

@@ -1,4 +1,4 @@
-import { createRoot, untrack, createRenderEffect, sharedConfig, enableHydration, createMemo, createSignal, onMount, onCleanup, splitProps, $DEVCOMP } from 'solid-js';
+import { createRoot, createRenderEffect, sharedConfig, untrack, 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';
 
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
@@ -125,7 +125,9 @@ function template(html, isCE, isSVG) {
     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));
+  const fn = isCE ? () => (node || (node = create())).cloneNode(true) : () => untrack(() => document.importNode(node || (node = create()), true));
+  fn.cloneNode = fn;
+  return fn;
 }
 function delegateEvents(eventNames, document = window.document) {
   const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());