@solidjs/web - npm Package Compare versions

Comparing version 2.0.0-beta.10 to 2.0.0-beta.11

dist/dev.cjs

@@ -54,9 +54,14 @@ 'use strict';
 const transparentOptions = {
-  transparent: true
+  transparent: true,
+  sync: true
 };
+const syncOptions = {
+  sync: true
+};
 const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
   transparent: true,
+  sync: true,
   ...options
 } : transparentOptions);
-const memo = fn => solidJs.createMemo(() => fn());
+const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
 
@@ -90,6 +95,8 @@ function reconcileArrays(parentNode, a, b) {
     } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
-      const node = a[--aEnd].nextSibling;
-      parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
-      parentNode.insertBefore(b[--bEnd], node);
-      a[aEnd] = b[bEnd];
+      const anchor = a[aStart];
+      do {
+        parentNode.insertBefore(a[--aEnd], anchor);
+        bStart++;
+        if (aStart >= aEnd - 1 || bStart >= bEnd) break;
+      } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
     } else {
@@ -207,3 +214,3 @@ if (!map) {
     if (!key || key === "undefined" || value[key]) continue;
-    toggleClassKey(node, key, false);
+    node.classList.remove(key);
   }
@@ -214,3 +221,3 @@ for (i = 0, len = classKeys.length; i < len; i++) {
     if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
-    toggleClassKey(node, key, true);
+    node.classList.add(key);
   }
@@ -307,3 +314,3 @@ }
   let current = initial;
-  effect(() => {
+  effect(prev => {
     const value = normalize(accessor(), current, multi, true);
@@ -314,3 +321,6 @@ if (typeof value !== "function") return value;
       current = inner;
-    }, options);
+    }, prev !== undefined && !(options && options.schedule) ? {
+      ...options,
+      schedule: true
+    } : options);
     return INNER_OWNED;
@@ -536,6 +546,2 @@ }, value => {
 }
-function toggleClassKey(node, key, value) {
-  const classNames = key.trim().split(/\s+/);
-  for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
-}
 function classListToObject(classList) {
@@ -545,2 +551,13 @@ if (Array.isArray(classList)) {
     flattenClassList(classList, result);
+    classList = result;
+  }
+  if (classList && typeof classList === "object") {
+    const result = {},
+      keys = Object.keys(classList);
+    for (let i = 0, len = keys.length; i < len; i++) {
+      const key = keys[i];
+      if (!classList[key]) continue;
+      const classNames = key.trim().split(/\s+/);
+      for (let j = 0, nameLen = classNames.length; j < nameLen; j++) classNames[j] && (result[classNames[j]] = true);
+    }
     return result;
@@ -547,0 +564,0 @@ }

dist/dev.js

@@ -53,9 +53,14 @@ import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, $DEVCOMP, enableHydration, enforceLoadingBoundary, flush } from 'solid-js';
 const transparentOptions = {
-  transparent: true
+  transparent: true,
+  sync: true
 };
+const syncOptions = {
+  sync: true
+};
 const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
   transparent: true,
+  sync: true,
   ...options
 } : transparentOptions);
-const memo = fn => createMemo(() => fn());
+const memo = fn => createMemo(() => fn(), syncOptions);
 
@@ -89,6 +94,8 @@ function reconcileArrays(parentNode, a, b) {
     } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
-      const node = a[--aEnd].nextSibling;
-      parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
-      parentNode.insertBefore(b[--bEnd], node);
-      a[aEnd] = b[bEnd];
+      const anchor = a[aStart];
+      do {
+        parentNode.insertBefore(a[--aEnd], anchor);
+        bStart++;
+        if (aStart >= aEnd - 1 || bStart >= bEnd) break;
+      } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
     } else {
@@ -206,3 +213,3 @@ if (!map) {
     if (!key || key === "undefined" || value[key]) continue;
-    toggleClassKey(node, key, false);
+    node.classList.remove(key);
   }
@@ -213,3 +220,3 @@ for (i = 0, len = classKeys.length; i < len; i++) {
     if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
-    toggleClassKey(node, key, true);
+    node.classList.add(key);
   }
@@ -306,3 +313,3 @@ }
   let current = initial;
-  effect(() => {
+  effect(prev => {
     const value = normalize(accessor(), current, multi, true);
@@ -313,3 +320,6 @@ if (typeof value !== "function") return value;
       current = inner;
-    }, options);
+    }, prev !== undefined && !(options && options.schedule) ? {
+      ...options,
+      schedule: true
+    } : options);
     return INNER_OWNED;
@@ -535,6 +545,2 @@ }, value => {
 }
-function toggleClassKey(node, key, value) {
-  const classNames = key.trim().split(/\s+/);
-  for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
-}
 function classListToObject(classList) {
@@ -544,2 +550,13 @@ if (Array.isArray(classList)) {
     flattenClassList(classList, result);
+    classList = result;
+  }
+  if (classList && typeof classList === "object") {
+    const result = {},
+      keys = Object.keys(classList);
+    for (let i = 0, len = keys.length; i < len; i++) {
+      const key = keys[i];
+      if (!classList[key]) continue;
+      const classNames = key.trim().split(/\s+/);
+      for (let j = 0, nameLen = classNames.length; j < nameLen; j++) classNames[j] && (result[classNames[j]] = true);
+    }
     return result;
@@ -546,0 +563,0 @@ }

dist/server.cjs

@@ -28,9 +28,14 @@ 'use strict';
 const transparentOptions = {
-  transparent: true
+  transparent: true,
+  sync: true
 };
+const syncOptions = {
+  sync: true
+};
 const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
   transparent: true,
+  sync: true,
   ...options
 } : transparentOptions);
-const memo = fn => solidJs.createMemo(() => fn());
+const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
 
@@ -596,7 +601,145 @@ const ES2017FLAG = seroval.Feature.AggregateError |
 }
-function ssr(t, ...nodes) {
-  if (nodes.length) return resolveSSR(t, nodes);
+function ssrGroup(fn, n) {
+  fn.$g = n;
+  return fn;
+}
+function buildAsyncWrap(err, node) {
+  const p = solidJs.ssrHandleError(err);
+  if (!p) return null;
+  const owner = solidJs.getOwner();
   return {
+    fn: owner ? () => solidJs.runWithOwner(owner, node) : node,
+    p
+  };
+}
+function ssrFirstGroupHit(hole) {
+  try {
+    return hole();
+  } catch (err) {
+    return buildAsyncWrap(err, hole);
+  }
+}
+function mergeTemplateInto(result, node) {
+  result.t[result.t.length - 1] += node.t[0];
+  if (node.t.length > 1) {
+    result.t.push(...node.t.slice(1));
+    result.h.push(...node.h);
+    result.p.push(...node.p);
+  }
+}
+let _lastGroupFn = null;
+let _lastGroupArr = null;
+let _lastGroupErr = null;
+function ssrGroupSlot(fn, idx) {
+  return () => {
+    if (idx > 0 && _lastGroupFn === fn) {
+      if (_lastGroupArr !== null) return _lastGroupArr[idx];
+      throw _lastGroupErr;
+    }
+    _lastGroupFn = fn;
+    _lastGroupArr = null;
+    _lastGroupErr = null;
+    try {
+      _lastGroupArr = fn();
+      return _lastGroupArr[idx];
+    } catch (err) {
+      _lastGroupErr = err;
+      throw err;
+    }
+  };
+}
+function ssr(t) {
+  const len = arguments.length;
+  if (len === 1) return {
     t
   };
+  let s = t[0];
+  let result = null;
+  let lastGroup = null;
+  let lastGroupVal = null;
+  let lastGroupIdx = 0;
+  for (let i = 1; i < len; i++) {
+    const hole = arguments[i];
+    const ht = typeof hole;
+    if (ht === "string") {
+      if (result === null) s += hole;else result.t[result.t.length - 1] += hole;
+    } else if (ht === "number") {
+      if (result === null) s += hole;else result.t[result.t.length - 1] += hole;
+    } else if (hole == null || ht === "boolean") ; else if (ht === "function" && hole.$g) {
+      let value;
+      let hasValue = false;
+      if (lastGroup !== hole) {
+        const r = ssrFirstGroupHit(hole);
+        if (r !== null) {
+          lastGroup = hole;
+          lastGroupVal = r;
+          lastGroupIdx = 0;
+          if (!Array.isArray(r) && result === null) {
+            result = {
+              t: [s],
+              h: [],
+              p: []
+            };
+            s = "";
+          }
+        }
+      }
+      if (lastGroup === hole) {
+        if (Array.isArray(lastGroupVal)) {
+          value = lastGroupVal[lastGroupIdx++];
+          hasValue = true;
+        } else {
+          result.h.push(ssrGroupSlot(lastGroupVal.fn, lastGroupIdx++));
+          result.p.push(lastGroupVal.p);
+          result.t.push("");
+        }
+      }
+      if (hasValue) {
+        const vt = typeof value;
+        if (vt === "string" || vt === "number") {
+          if (result === null) s += value;else result.t[result.t.length - 1] += value;
+        } else if (value == null || vt === "boolean") ; else if (result !== null) {
+          resolveSSRNode(value, result);
+        } else {
+          const rs = tryResolveString(value);
+          if (typeof rs === "string") {
+            s += rs;
+          } else {
+            result = {
+              t: [s],
+              h: [],
+              p: []
+            };
+            s = "";
+            if (rs.merge !== undefined) mergeTemplateInto(result, rs.merge);else resolveSSRNode(rs.bail, result);
+          }
+        }
+      }
+    } else if (result !== null) {
+      resolveSSRNode(hole, result);
+    } else {
+      const r = tryResolveString(hole);
+      if (typeof r === "string") {
+        s += r;
+      } else {
+        result = {
+          t: [s],
+          h: [],
+          p: []
+        };
+        s = "";
+        if (r.fn !== undefined) {
+          result.h.push(r.fn);
+          result.p.push(r.p);
+          result.t.push("");
+        } else if (r.merge !== undefined) mergeTemplateInto(result, r.merge);else resolveSSRNode(r.bail, result);
+      }
+    }
+    const next = t[i];
+    if (result === null) s += next;else result.t[result.t.length - 1] += next;
+  }
+  if (result === null) return {
+    t: s
+  };
+  return result;
 }
@@ -689,7 +832,17 @@ function ssrClassName(value) {
   }
+  const delimCode = attr ? 34 : 60;
+  const len = s.length;
+  for (let i = 0; i < len; i++) {
+    const c = s.charCodeAt(i);
+    if (c === 38 || c === delimCode) return escapeSlow(s, attr, i);
+  }
+  return s;
+}
+function escapeSlow(s, attr, start) {
   const delim = attr ? '"' : "<";
+  const delimCode = attr ? 34 : 60;
   const escDelim = attr ? "&quot;" : "&lt;";
-  let iDelim = s.indexOf(delim);
-  let iAmp = s.indexOf("&");
-  if (iDelim < 0 && iAmp < 0) return s;
+  const c0 = s.charCodeAt(start);
+  let iDelim = c0 === delimCode ? start : s.indexOf(delim, start);
+  let iAmp = c0 === 38 ? start : s.indexOf("&", start);
   let left = 0,
@@ -866,15 +1019,39 @@ out = "";
 }
-function resolveSSR(template, holes, result = {
-  t: [""],
-  h: [],
-  p: []
-}) {
-  for (let i = 0; i < holes.length; i++) {
-    const hole = holes[i];
-    result.t[result.t.length - 1] += template[i];
-    if (hole == null || hole === true || hole === false) continue;
-    resolveSSRNode(hole, result);
+function tryResolveString(node) {
+  const t = typeof node;
+  if (t === "string") return node;
+  if (t === "number") return "" + node;
+  if (node == null || t === "boolean") return "";
+  if (t === "object") {
+    if (Array.isArray(node)) {
+      let s = "";
+      let prevNonObj = false;
+      for (let i = 0, len = node.length; i < len; i++) {
+        const item = node[i];
+        const itemNonObj = item !== null && typeof item !== "object";
+        if (prevNonObj && itemNonObj) s += "<!--!$-->";
+        prevNonObj = itemNonObj;
+        const r = tryResolveString(item);
+        if (typeof r !== "string") return {
+          bail: node
+        };
+        s += r;
+      }
+      return s;
+    }
+    if (node.h && node.h.length > 0) return {
+      merge: node
+    };
+    return Array.isArray(node.t) ? node.t[0] : node.t;
   }
-  result.t[result.t.length - 1] += template[template.length - 1];
-  return result;
+  if (t === "function") {
+    let v;
+    try {
+      v = node();
+    } catch (err) {
+      return buildAsyncWrap(err, node) || "";
+    }
+    return tryResolveString(v);
+  }
+  return "";
 }
@@ -890,6 +1067,9 @@ function resolveSSRNode(node, result = {
   } else if (node == null || t === "boolean") ; else if (Array.isArray(node)) {
-    let prev = {};
+    let prevNonObj = false;
     for (let i = 0, len = node.length; i < len; i++) {
-      if (!top && typeof prev !== "object" && typeof node[i] !== "object") result.t[result.t.length - 1] += `<!--!$-->`;
-      resolveSSRNode(prev = node[i], result);
+      const item = node[i];
+      const itemNonObj = item !== null && typeof item !== "object";
+      if (!top && prevNonObj && itemNonObj) result.t[result.t.length - 1] += `<!--!$-->`;
+      prevNonObj = itemNonObj;
+      resolveSSRNode(item, result);
     }
@@ -909,6 +1089,6 @@ } else if (t === "object") {
     } catch (err) {
-      const p = solidJs.ssrHandleError(err);
-      if (p) {
-        result.h.push(node);
-        result.p.push(p);
+      const wrap = buildAsyncWrap(err, node);
+      if (wrap) {
+        result.h.push(wrap.fn);
+        result.p.push(wrap.p);
         result.t.push("");
@@ -1010,6 +1190,2 @@ }
 });
-Object.defineProperty(exports, "ssrRunInScope", {
-  enumerable: true,
-  get: function () { return solidJs.ssrRunInScope; }
-});
 Object.defineProperty(exports, "untrack", {
@@ -1066,2 +1242,3 @@ enumerable: true,
 exports.ssrElement = ssrElement;
+exports.ssrGroup = ssrGroup;
 exports.ssrHydrationKey = ssrHydrationKey;
@@ -1068,0 +1245,0 @@ exports.ssrStyle = ssrStyle;

dist/server.js

@@ -1,3 +0,3 @@
-import { createRenderEffect, createMemo, sharedConfig, createRoot, ssrHandleError, createComponent, omit, getOwner, getNextChildId, createOwner, runWithOwner } from 'solid-js';
-export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, ssrRunInScope, untrack } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, createRoot, ssrHandleError, getOwner, runWithOwner, createComponent, omit, getNextChildId, createOwner } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, untrack } from 'solid-js';
 import { Serializer, Feature, getCrossReferenceHeader } from 'seroval';
@@ -27,9 +27,14 @@ import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 const transparentOptions = {
-  transparent: true
+  transparent: true,
+  sync: true
 };
+const syncOptions = {
+  sync: true
+};
 const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
   transparent: true,
+  sync: true,
   ...options
 } : transparentOptions);
-const memo = fn => createMemo(() => fn());
+const memo = fn => createMemo(() => fn(), syncOptions);
 
@@ -595,7 +600,145 @@ const ES2017FLAG = Feature.AggregateError |
 }
-function ssr(t, ...nodes) {
-  if (nodes.length) return resolveSSR(t, nodes);
+function ssrGroup(fn, n) {
+  fn.$g = n;
+  return fn;
+}
+function buildAsyncWrap(err, node) {
+  const p = ssrHandleError(err);
+  if (!p) return null;
+  const owner = getOwner();
   return {
+    fn: owner ? () => runWithOwner(owner, node) : node,
+    p
+  };
+}
+function ssrFirstGroupHit(hole) {
+  try {
+    return hole();
+  } catch (err) {
+    return buildAsyncWrap(err, hole);
+  }
+}
+function mergeTemplateInto(result, node) {
+  result.t[result.t.length - 1] += node.t[0];
+  if (node.t.length > 1) {
+    result.t.push(...node.t.slice(1));
+    result.h.push(...node.h);
+    result.p.push(...node.p);
+  }
+}
+let _lastGroupFn = null;
+let _lastGroupArr = null;
+let _lastGroupErr = null;
+function ssrGroupSlot(fn, idx) {
+  return () => {
+    if (idx > 0 && _lastGroupFn === fn) {
+      if (_lastGroupArr !== null) return _lastGroupArr[idx];
+      throw _lastGroupErr;
+    }
+    _lastGroupFn = fn;
+    _lastGroupArr = null;
+    _lastGroupErr = null;
+    try {
+      _lastGroupArr = fn();
+      return _lastGroupArr[idx];
+    } catch (err) {
+      _lastGroupErr = err;
+      throw err;
+    }
+  };
+}
+function ssr(t) {
+  const len = arguments.length;
+  if (len === 1) return {
     t
   };
+  let s = t[0];
+  let result = null;
+  let lastGroup = null;
+  let lastGroupVal = null;
+  let lastGroupIdx = 0;
+  for (let i = 1; i < len; i++) {
+    const hole = arguments[i];
+    const ht = typeof hole;
+    if (ht === "string") {
+      if (result === null) s += hole;else result.t[result.t.length - 1] += hole;
+    } else if (ht === "number") {
+      if (result === null) s += hole;else result.t[result.t.length - 1] += hole;
+    } else if (hole == null || ht === "boolean") ; else if (ht === "function" && hole.$g) {
+      let value;
+      let hasValue = false;
+      if (lastGroup !== hole) {
+        const r = ssrFirstGroupHit(hole);
+        if (r !== null) {
+          lastGroup = hole;
+          lastGroupVal = r;
+          lastGroupIdx = 0;
+          if (!Array.isArray(r) && result === null) {
+            result = {
+              t: [s],
+              h: [],
+              p: []
+            };
+            s = "";
+          }
+        }
+      }
+      if (lastGroup === hole) {
+        if (Array.isArray(lastGroupVal)) {
+          value = lastGroupVal[lastGroupIdx++];
+          hasValue = true;
+        } else {
+          result.h.push(ssrGroupSlot(lastGroupVal.fn, lastGroupIdx++));
+          result.p.push(lastGroupVal.p);
+          result.t.push("");
+        }
+      }
+      if (hasValue) {
+        const vt = typeof value;
+        if (vt === "string" || vt === "number") {
+          if (result === null) s += value;else result.t[result.t.length - 1] += value;
+        } else if (value == null || vt === "boolean") ; else if (result !== null) {
+          resolveSSRNode(value, result);
+        } else {
+          const rs = tryResolveString(value);
+          if (typeof rs === "string") {
+            s += rs;
+          } else {
+            result = {
+              t: [s],
+              h: [],
+              p: []
+            };
+            s = "";
+            if (rs.merge !== undefined) mergeTemplateInto(result, rs.merge);else resolveSSRNode(rs.bail, result);
+          }
+        }
+      }
+    } else if (result !== null) {
+      resolveSSRNode(hole, result);
+    } else {
+      const r = tryResolveString(hole);
+      if (typeof r === "string") {
+        s += r;
+      } else {
+        result = {
+          t: [s],
+          h: [],
+          p: []
+        };
+        s = "";
+        if (r.fn !== undefined) {
+          result.h.push(r.fn);
+          result.p.push(r.p);
+          result.t.push("");
+        } else if (r.merge !== undefined) mergeTemplateInto(result, r.merge);else resolveSSRNode(r.bail, result);
+      }
+    }
+    const next = t[i];
+    if (result === null) s += next;else result.t[result.t.length - 1] += next;
+  }
+  if (result === null) return {
+    t: s
+  };
+  return result;
 }
@@ -688,7 +831,17 @@ function ssrClassName(value) {
   }
+  const delimCode = attr ? 34 : 60;
+  const len = s.length;
+  for (let i = 0; i < len; i++) {
+    const c = s.charCodeAt(i);
+    if (c === 38 || c === delimCode) return escapeSlow(s, attr, i);
+  }
+  return s;
+}
+function escapeSlow(s, attr, start) {
   const delim = attr ? '"' : "<";
+  const delimCode = attr ? 34 : 60;
   const escDelim = attr ? "&quot;" : "&lt;";
-  let iDelim = s.indexOf(delim);
-  let iAmp = s.indexOf("&");
-  if (iDelim < 0 && iAmp < 0) return s;
+  const c0 = s.charCodeAt(start);
+  let iDelim = c0 === delimCode ? start : s.indexOf(delim, start);
+  let iAmp = c0 === 38 ? start : s.indexOf("&", start);
   let left = 0,
@@ -865,15 +1018,39 @@ out = "";
 }
-function resolveSSR(template, holes, result = {
-  t: [""],
-  h: [],
-  p: []
-}) {
-  for (let i = 0; i < holes.length; i++) {
-    const hole = holes[i];
-    result.t[result.t.length - 1] += template[i];
-    if (hole == null || hole === true || hole === false) continue;
-    resolveSSRNode(hole, result);
+function tryResolveString(node) {
+  const t = typeof node;
+  if (t === "string") return node;
+  if (t === "number") return "" + node;
+  if (node == null || t === "boolean") return "";
+  if (t === "object") {
+    if (Array.isArray(node)) {
+      let s = "";
+      let prevNonObj = false;
+      for (let i = 0, len = node.length; i < len; i++) {
+        const item = node[i];
+        const itemNonObj = item !== null && typeof item !== "object";
+        if (prevNonObj && itemNonObj) s += "<!--!$-->";
+        prevNonObj = itemNonObj;
+        const r = tryResolveString(item);
+        if (typeof r !== "string") return {
+          bail: node
+        };
+        s += r;
+      }
+      return s;
+    }
+    if (node.h && node.h.length > 0) return {
+      merge: node
+    };
+    return Array.isArray(node.t) ? node.t[0] : node.t;
   }
-  result.t[result.t.length - 1] += template[template.length - 1];
-  return result;
+  if (t === "function") {
+    let v;
+    try {
+      v = node();
+    } catch (err) {
+      return buildAsyncWrap(err, node) || "";
+    }
+    return tryResolveString(v);
+  }
+  return "";
 }
@@ -889,6 +1066,9 @@ function resolveSSRNode(node, result = {
   } else if (node == null || t === "boolean") ; else if (Array.isArray(node)) {
-    let prev = {};
+    let prevNonObj = false;
     for (let i = 0, len = node.length; i < len; i++) {
-      if (!top && typeof prev !== "object" && typeof node[i] !== "object") result.t[result.t.length - 1] += `<!--!$-->`;
-      resolveSSRNode(prev = node[i], result);
+      const item = node[i];
+      const itemNonObj = item !== null && typeof item !== "object";
+      if (!top && prevNonObj && itemNonObj) result.t[result.t.length - 1] += `<!--!$-->`;
+      prevNonObj = itemNonObj;
+      resolveSSRNode(item, result);
     }
@@ -908,6 +1088,6 @@ } else if (t === "object") {
     } catch (err) {
-      const p = ssrHandleError(err);
-      if (p) {
-        result.h.push(node);
-        result.p.push(p);
+      const wrap = buildAsyncWrap(err, node);
+      if (wrap) {
+        result.h.push(wrap.fn);
+        result.p.push(wrap.p);
         result.t.push("");
@@ -961,2 +1141,2 @@ }
 
-export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, notSup as addEventListener, applyRef, notSup as assign, notSup as className, notSup as delegateEvents, dynamic, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, useAssets };
+export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, notSup as addEventListener, applyRef, notSup as assign, notSup as className, notSup as delegateEvents, dynamic, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, useAssets };

dist/web.cjs

@@ -54,9 +54,14 @@ 'use strict';
 const transparentOptions = {
-  transparent: true
+  transparent: true,
+  sync: true
 };
+const syncOptions = {
+  sync: true
+};
 const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
   transparent: true,
+  sync: true,
   ...options
 } : transparentOptions);
-const memo = fn => solidJs.createMemo(() => fn());
+const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
 
@@ -90,6 +95,8 @@ function reconcileArrays(parentNode, a, b) {
     } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
-      const node = a[--aEnd].nextSibling;
-      parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
-      parentNode.insertBefore(b[--bEnd], node);
-      a[aEnd] = b[bEnd];
+      const anchor = a[aStart];
+      do {
+        parentNode.insertBefore(a[--aEnd], anchor);
+        bStart++;
+        if (aStart >= aEnd - 1 || bStart >= bEnd) break;
+      } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
     } else {
@@ -202,3 +209,3 @@ if (!map) {
     if (!key || key === "undefined" || value[key]) continue;
-    toggleClassKey(node, key, false);
+    node.classList.remove(key);
   }
@@ -209,3 +216,3 @@ for (i = 0, len = classKeys.length; i < len; i++) {
     if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
-    toggleClassKey(node, key, true);
+    node.classList.add(key);
   }
@@ -302,3 +309,3 @@ }
   let current = initial;
-  effect(() => {
+  effect(prev => {
     const value = normalize(accessor(), current, multi, true);
@@ -309,3 +316,6 @@ if (typeof value !== "function") return value;
       current = inner;
-    }, options);
+    }, prev !== undefined && !(options && options.schedule) ? {
+      ...options,
+      schedule: true
+    } : options);
     return INNER_OWNED;
@@ -479,6 +489,2 @@ }, value => {
 }
-function toggleClassKey(node, key, value) {
-  const classNames = key.trim().split(/\s+/);
-  for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
-}
 function classListToObject(classList) {
@@ -488,2 +494,13 @@ if (Array.isArray(classList)) {
     flattenClassList(classList, result);
+    classList = result;
+  }
+  if (classList && typeof classList === "object") {
+    const result = {},
+      keys = Object.keys(classList);
+    for (let i = 0, len = keys.length; i < len; i++) {
+      const key = keys[i];
+      if (!classList[key]) continue;
+      const classNames = key.trim().split(/\s+/);
+      for (let j = 0, nameLen = classNames.length; j < nameLen; j++) classNames[j] && (result[classNames[j]] = true);
+    }
     return result;
@@ -490,0 +507,0 @@ }

dist/web.js

@@ -53,9 +53,14 @@ import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, enableHydration, flush } from 'solid-js';
 const transparentOptions = {
-  transparent: true
+  transparent: true,
+  sync: true
 };
+const syncOptions = {
+  sync: true
+};
 const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
   transparent: true,
+  sync: true,
   ...options
 } : transparentOptions);
-const memo = fn => createMemo(() => fn());
+const memo = fn => createMemo(() => fn(), syncOptions);
 
@@ -89,6 +94,8 @@ function reconcileArrays(parentNode, a, b) {
     } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
-      const node = a[--aEnd].nextSibling;
-      parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling);
-      parentNode.insertBefore(b[--bEnd], node);
-      a[aEnd] = b[bEnd];
+      const anchor = a[aStart];
+      do {
+        parentNode.insertBefore(a[--aEnd], anchor);
+        bStart++;
+        if (aStart >= aEnd - 1 || bStart >= bEnd) break;
+      } while (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]);
     } else {
@@ -201,3 +208,3 @@ if (!map) {
     if (!key || key === "undefined" || value[key]) continue;
-    toggleClassKey(node, key, false);
+    node.classList.remove(key);
   }
@@ -208,3 +215,3 @@ for (i = 0, len = classKeys.length; i < len; i++) {
     if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
-    toggleClassKey(node, key, true);
+    node.classList.add(key);
   }
@@ -301,3 +308,3 @@ }
   let current = initial;
-  effect(() => {
+  effect(prev => {
     const value = normalize(accessor(), current, multi, true);
@@ -308,3 +315,6 @@ if (typeof value !== "function") return value;
       current = inner;
-    }, options);
+    }, prev !== undefined && !(options && options.schedule) ? {
+      ...options,
+      schedule: true
+    } : options);
     return INNER_OWNED;
@@ -478,6 +488,2 @@ }, value => {
 }
-function toggleClassKey(node, key, value) {
-  const classNames = key.trim().split(/\s+/);
-  for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
-}
 function classListToObject(classList) {
@@ -487,2 +493,13 @@ if (Array.isArray(classList)) {
     flattenClassList(classList, result);
+    classList = result;
+  }
+  if (classList && typeof classList === "object") {
+    const result = {},
+      keys = Object.keys(classList);
+    for (let i = 0, len = keys.length; i < len; i++) {
+      const key = keys[i];
+      if (!classList[key]) continue;
+      const classNames = key.trim().split(/\s+/);
+      for (let j = 0, nameLen = classNames.length; j < nameLen; j++) classNames[j] && (result[classNames[j]] = true);
+    }
     return result;
@@ -489,0 +506,0 @@ }

package.json

 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime: client rendering, hydration, SSR, and DOM-specific control flow (Portal, Dynamic).",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.11",
   "author": "Ryan Carniato",
@@ -140,6 +140,6 @@ "license": "MIT",
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.10"
+    "solid-js": "^2.0.0-beta.11"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.10"
+    "solid-js": "2.0.0-beta.11"
   },
@@ -161,2 +161,4 @@ "scripts": {
     "coverage": "vitest run --coverage",
+    "bench": "vitest bench --run",
+    "bench:server": "vitest bench --run --config vite.config.server-bench.mjs",
     "test-types": "npm-run-all -nl types test-types:tsc",
@@ -163,0 +165,0 @@ "test-types:tsc": "tsc --project tsconfig.test.json"

types-cjs/core.d.cts

@@ -1,3 +0,3 @@
-export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError, ssrRunInScope } from "solid-js";
+export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError } from "solid-js";
 export declare const effect: (fn: any, effectFn: any, options: any) => void;
-export declare const memo: (fn: any) => import("solid-js").Accessor<any>;
+export declare const memo: (fn: any) => import("solid-js").SourceAccessor<any>;

types-cjs/server.d.cts

@@ -76,2 +76,3 @@ import { JSX } from "./jsx.cjs";
 export function ssrAttribute(key: string, value: any): string;
+export function ssrGroup<T extends () => any[]>(fn: T, n: number): T;
 export function ssrHydrationKey(): string;
@@ -92,3 +93,2 @@ export function resolveSSRNode(node: any, result?: any, top?: boolean): any;
 export function getOwner(): unknown;
-export function ssrRunInScope(fn: () => void, owner: unknown): void;
 export function generateHydrationScript(options?: {
@@ -95,0 +95,0 @@ nonce?: string;

types/core.d.ts

@@ -1,3 +0,3 @@
-export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError, ssrRunInScope } from "solid-js";
+export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError } from "solid-js";
 export declare const effect: (fn: any, effectFn: any, options: any) => void;
-export declare const memo: (fn: any) => import("solid-js").Accessor<any>;
+export declare const memo: (fn: any) => import("solid-js").SourceAccessor<any>;

types/server.d.ts

@@ -76,2 +76,3 @@ import { JSX } from "./jsx.js";
 export function ssrAttribute(key: string, value: any): string;
+export function ssrGroup<T extends () => any[]>(fn: T, n: number): T;
 export function ssrHydrationKey(): string;
@@ -92,3 +93,2 @@ export function resolveSSRNode(node: any, result?: any, top?: boolean): any;
 export function getOwner(): unknown;
-export function ssrRunInScope(fn: () => void, owner: unknown): void;
 export function generateHydrationScript(options?: {
@@ -95,0 +95,0 @@ nonce?: string;

No alert changes

Improved metrics

Total package byte prevSize

657830

1.82%

Lines of code

11144

3.96%

No dependency changes