@solidjs/web 2.0.0-beta.10 → 2.0.0-beta.12

package/dist/dev.cjs

@@ -51,13 +51,18 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
 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);
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -86,10 +91,12 @@ function reconcileArrays(parentNode, a, b) {
         aStart++;
       }
     } 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 {
       if (!map) {
         map = new Map();
@@ -202,13 +209,13 @@ function className(node, value, prev) {
   for (i = 0, len = prevKeys.length; i < len; i++) {
     const key = prevKeys[i];
     if (!key || key === "undefined" || value[key]) continue;
-    toggleClassKey(node, key, false);
+    node.classList.remove(key);
   }
   for (i = 0, len = classKeys.length; i < len; i++) {
     const key = classKeys[i],
       classValue = !!value[key];
     if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
-    toggleClassKey(node, key, true);
+    node.classList.add(key);
   }
 }
 function addEventListener(node, name, handler, delegate) {
@@ -300,13 +307,16 @@ function insert(parent, accessor, marker, initial, options) {
     initial = [placeholder];
   }
   let current = initial;
-  effect(() => {
+  effect(prev => {
     const value = normalize(accessor(), current, multi, true);
     if (typeof value !== "function") return value;
     effect(() => normalize(value, current, multi), inner => {
       insertExpression(parent, inner, current, marker);
       current = inner;
-    }, options);
+    }, prev !== undefined && !(options && options.schedule) ? {
+      ...options,
+      schedule: true
+    } : options);
     return INNER_OWNED;
   }, value => {
     if (value === INNER_OWNED) return;
@@ -527,14 +537,21 @@ function isHydrating(node) {
 function getChildRoot(node) {
   return node && node.localName === "template" ? node.content : node;
 }
-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) {
   if (Array.isArray(classList)) {
     const result = {};
     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;
   }
   return classList;

package/dist/dev.js

@@ -50,13 +50,18 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
 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);
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -85,10 +90,12 @@ function reconcileArrays(parentNode, a, b) {
         aStart++;
       }
     } 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 {
       if (!map) {
         map = new Map();
@@ -201,13 +208,13 @@ function className(node, value, prev) {
   for (i = 0, len = prevKeys.length; i < len; i++) {
     const key = prevKeys[i];
     if (!key || key === "undefined" || value[key]) continue;
-    toggleClassKey(node, key, false);
+    node.classList.remove(key);
   }
   for (i = 0, len = classKeys.length; i < len; i++) {
     const key = classKeys[i],
       classValue = !!value[key];
     if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
-    toggleClassKey(node, key, true);
+    node.classList.add(key);
   }
 }
 function addEventListener(node, name, handler, delegate) {
@@ -299,13 +306,16 @@ function insert(parent, accessor, marker, initial, options) {
     initial = [placeholder];
   }
   let current = initial;
-  effect(() => {
+  effect(prev => {
     const value = normalize(accessor(), current, multi, true);
     if (typeof value !== "function") return value;
     effect(() => normalize(value, current, multi), inner => {
       insertExpression(parent, inner, current, marker);
       current = inner;
-    }, options);
+    }, prev !== undefined && !(options && options.schedule) ? {
+      ...options,
+      schedule: true
+    } : options);
     return INNER_OWNED;
   }, value => {
     if (value === INNER_OWNED) return;
@@ -526,14 +536,21 @@ function isHydrating(node) {
 function getChildRoot(node) {
   return node && node.localName === "template" ? node.content : node;
 }
-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) {
   if (Array.isArray(classList)) {
     const result = {};
     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;
   }
   return classList;

package/dist/server.cjs

@@ -25,13 +25,18 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
 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);
 
 const ES2017FLAG = seroval.Feature.AggregateError |
 seroval.Feature.BigIntTypedArray;
@@ -592,11 +597,176 @@ function HydrationScript(props) {
     ...props
   }));
 }
-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 tryResolveFunctionHole(hole) {
+  let value;
+  try {
+    value = hole();
+  } catch (err) {
+    return buildAsyncWrap(err, hole) || "";
+  }
+  const t = typeof value;
+  if (t === "string") return value;
+  if (t === "number") return "" + value;
+  if (value == null || t === "boolean") return "";
+  return tryResolveString(value);
+}
+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);
+  }
+}
+function appendResolvedNode(result, node) {
+  if (node.fn !== undefined) {
+    result.h.push(node.fn);
+    result.p.push(node.p);
+    result.t.push("");
+  } else if (node.merge !== undefined) mergeTemplateInto(result, node.merge);else resolveSSRNode(node.bail, result);
+}
+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 if (ht === "function") {
+      const r = tryResolveFunctionHole(hole);
+      if (typeof r === "string") s += r;else {
+        result = {
+          t: [s],
+          h: [],
+          p: []
+        };
+        s = "";
+        appendResolvedNode(result, r);
+      }
+    } else {
+      const r = tryResolveString(hole);
+      if (typeof r === "string") {
+        s += r;
+      } else {
+        result = {
+          t: [s],
+          h: [],
+          p: []
+        };
+        s = "";
+        appendResolvedNode(result, r);
+      }
+    }
+    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;
 }
 function ssrClassName(value) {
   if (!value) return "";
@@ -677,6 +847,8 @@ function escape(s, attr) {
   const t = typeof s;
   if (t !== "string") {
     if (!attr && Array.isArray(s)) {
+      const joined = tryJoinPlainSSRArray(s);
+      if (joined !== undefined) return joined;
       s = s.slice();
       for (let i = 0; i < s.length; i++) s[i] = escape(s[i]);
       return s;
@@ -684,11 +856,21 @@ function escape(s, attr) {
     if (attr && t === "boolean") return s;
     return s;
   }
+  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,
     out = "";
   while (iDelim >= 0 && iAmp >= 0) {
@@ -719,6 +901,18 @@ function escape(s, attr) {
   }
   return left < s.length ? out + s.substring(left) : out;
 }
+function tryJoinPlainSSRArray(nodes) {
+  if (nodes.length === 0) return undefined;
+  let out = "";
+  for (let i = 0, len = nodes.length; i < len; i++) {
+    const node = nodes[i];
+    if (node == null || typeof node !== "object" || node.h || typeof node.t !== "string") {
+      return undefined;
+    }
+    out += node.t;
+  }
+  return out;
+}
 function mergeProps(...sources) {
   const target = {};
   for (let i = 0; i < sources.length; i++) {
@@ -860,19 +1054,45 @@ function flattenClassList(list, result) {
     if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);else if (item || item === 0) result[item] = true;
   }
 }
-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)) {
+      const joined = tryJoinPlainSSRArray(node);
+      if (joined !== undefined) return joined;
+      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 "";
 }
 function resolveSSRNode(node, result = {
   t: [""],
@@ -883,10 +1103,13 @@ function resolveSSRNode(node, result = {
   if (t === "string" || t === "number") {
     result.t[result.t.length - 1] += node;
   } 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);
     }
   } else if (t === "object") {
     if (node.h) {
@@ -901,10 +1124,10 @@ function resolveSSRNode(node, result = {
     try {
       resolveSSRNode(node(), result);
     } 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("");
       }
     }
@@ -1001,10 +1224,6 @@ Object.defineProperty(exports, "getOwner", {
   enumerable: true,
   get: function () { return solidJs.getOwner; }
 });
-Object.defineProperty(exports, "ssrRunInScope", {
-  enumerable: true,
-  get: function () { return solidJs.ssrRunInScope; }
-});
 Object.defineProperty(exports, "untrack", {
   enumerable: true,
   get: function () { return solidJs.untrack; }
@@ -1056,6 +1275,7 @@ exports.ssr = ssr;
 exports.ssrAttribute = ssrAttribute;
 exports.ssrClassName = ssrClassName;
 exports.ssrElement = ssrElement;
+exports.ssrGroup = ssrGroup;
 exports.ssrHydrationKey = ssrHydrationKey;
 exports.ssrStyle = ssrStyle;
 exports.ssrStyleProperty = ssrStyleProperty;

package/dist/server.js

@@ -1,5 +1,5 @@
-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';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 
@@ -24,13 +24,18 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
 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);
 
 const ES2017FLAG = Feature.AggregateError |
 Feature.BigIntTypedArray;
@@ -591,11 +596,176 @@ function HydrationScript(props) {
     ...props
   }));
 }
-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 tryResolveFunctionHole(hole) {
+  let value;
+  try {
+    value = hole();
+  } catch (err) {
+    return buildAsyncWrap(err, hole) || "";
+  }
+  const t = typeof value;
+  if (t === "string") return value;
+  if (t === "number") return "" + value;
+  if (value == null || t === "boolean") return "";
+  return tryResolveString(value);
+}
+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);
+  }
+}
+function appendResolvedNode(result, node) {
+  if (node.fn !== undefined) {
+    result.h.push(node.fn);
+    result.p.push(node.p);
+    result.t.push("");
+  } else if (node.merge !== undefined) mergeTemplateInto(result, node.merge);else resolveSSRNode(node.bail, result);
+}
+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 if (ht === "function") {
+      const r = tryResolveFunctionHole(hole);
+      if (typeof r === "string") s += r;else {
+        result = {
+          t: [s],
+          h: [],
+          p: []
+        };
+        s = "";
+        appendResolvedNode(result, r);
+      }
+    } else {
+      const r = tryResolveString(hole);
+      if (typeof r === "string") {
+        s += r;
+      } else {
+        result = {
+          t: [s],
+          h: [],
+          p: []
+        };
+        s = "";
+        appendResolvedNode(result, r);
+      }
+    }
+    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;
 }
 function ssrClassName(value) {
   if (!value) return "";
@@ -676,6 +846,8 @@ function escape(s, attr) {
   const t = typeof s;
   if (t !== "string") {
     if (!attr && Array.isArray(s)) {
+      const joined = tryJoinPlainSSRArray(s);
+      if (joined !== undefined) return joined;
       s = s.slice();
       for (let i = 0; i < s.length; i++) s[i] = escape(s[i]);
       return s;
@@ -683,11 +855,21 @@ function escape(s, attr) {
     if (attr && t === "boolean") return s;
     return s;
   }
+  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,
     out = "";
   while (iDelim >= 0 && iAmp >= 0) {
@@ -718,6 +900,18 @@ function escape(s, attr) {
   }
   return left < s.length ? out + s.substring(left) : out;
 }
+function tryJoinPlainSSRArray(nodes) {
+  if (nodes.length === 0) return undefined;
+  let out = "";
+  for (let i = 0, len = nodes.length; i < len; i++) {
+    const node = nodes[i];
+    if (node == null || typeof node !== "object" || node.h || typeof node.t !== "string") {
+      return undefined;
+    }
+    out += node.t;
+  }
+  return out;
+}
 function mergeProps(...sources) {
   const target = {};
   for (let i = 0; i < sources.length; i++) {
@@ -859,19 +1053,45 @@ function flattenClassList(list, result) {
     if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);else if (item || item === 0) result[item] = true;
   }
 }
-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)) {
+      const joined = tryJoinPlainSSRArray(node);
+      if (joined !== undefined) return joined;
+      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 "";
 }
 function resolveSSRNode(node, result = {
   t: [""],
@@ -882,10 +1102,13 @@ function resolveSSRNode(node, result = {
   if (t === "string" || t === "number") {
     result.t[result.t.length - 1] += node;
   } 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);
     }
   } else if (t === "object") {
     if (node.h) {
@@ -900,10 +1123,10 @@ function resolveSSRNode(node, result = {
     try {
       resolveSSRNode(node(), result);
     } 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("");
       }
     }
@@ -952,4 +1175,4 @@ function Portal(props) {
   throw new Error("Portal is not supported on the server");
 }
 
-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 };

package/dist/web.cjs

@@ -51,13 +51,18 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
 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);
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -86,10 +91,12 @@ function reconcileArrays(parentNode, a, b) {
         aStart++;
       }
     } 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 {
       if (!map) {
         map = new Map();
@@ -197,13 +204,13 @@ function className(node, value, prev) {
   for (i = 0, len = prevKeys.length; i < len; i++) {
     const key = prevKeys[i];
     if (!key || key === "undefined" || value[key]) continue;
-    toggleClassKey(node, key, false);
+    node.classList.remove(key);
   }
   for (i = 0, len = classKeys.length; i < len; i++) {
     const key = classKeys[i],
       classValue = !!value[key];
     if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
-    toggleClassKey(node, key, true);
+    node.classList.add(key);
   }
 }
 function addEventListener(node, name, handler, delegate) {
@@ -295,13 +302,16 @@ function insert(parent, accessor, marker, initial, options) {
     initial = [placeholder];
   }
   let current = initial;
-  effect(() => {
+  effect(prev => {
     const value = normalize(accessor(), current, multi, true);
     if (typeof value !== "function") return value;
     effect(() => normalize(value, current, multi), inner => {
       insertExpression(parent, inner, current, marker);
       current = inner;
-    }, options);
+    }, prev !== undefined && !(options && options.schedule) ? {
+      ...options,
+      schedule: true
+    } : options);
     return INNER_OWNED;
   }, value => {
     if (value === INNER_OWNED) return;
@@ -470,14 +480,21 @@ function isHydrating(node) {
 function getChildRoot(node) {
   return node && node.localName === "template" ? node.content : node;
 }
-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) {
   if (Array.isArray(classList)) {
     const result = {};
     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;
   }
   return classList;

package/dist/web.js

@@ -50,13 +50,18 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
 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);
 
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
@@ -85,10 +90,12 @@ function reconcileArrays(parentNode, a, b) {
         aStart++;
       }
     } 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 {
       if (!map) {
         map = new Map();
@@ -196,13 +203,13 @@ function className(node, value, prev) {
   for (i = 0, len = prevKeys.length; i < len; i++) {
     const key = prevKeys[i];
     if (!key || key === "undefined" || value[key]) continue;
-    toggleClassKey(node, key, false);
+    node.classList.remove(key);
   }
   for (i = 0, len = classKeys.length; i < len; i++) {
     const key = classKeys[i],
       classValue = !!value[key];
     if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
-    toggleClassKey(node, key, true);
+    node.classList.add(key);
   }
 }
 function addEventListener(node, name, handler, delegate) {
@@ -294,13 +301,16 @@ function insert(parent, accessor, marker, initial, options) {
     initial = [placeholder];
   }
   let current = initial;
-  effect(() => {
+  effect(prev => {
     const value = normalize(accessor(), current, multi, true);
     if (typeof value !== "function") return value;
     effect(() => normalize(value, current, multi), inner => {
       insertExpression(parent, inner, current, marker);
       current = inner;
-    }, options);
+    }, prev !== undefined && !(options && options.schedule) ? {
+      ...options,
+      schedule: true
+    } : options);
     return INNER_OWNED;
   }, value => {
     if (value === INNER_OWNED) return;
@@ -469,14 +479,21 @@ function isHydrating(node) {
 function getChildRoot(node) {
   return node && node.localName === "template" ? node.content : node;
 }
-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) {
   if (Array.isArray(classList)) {
     const result = {};
     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;
   }
   return classList;

package/package.json

@@ -1,7 +1,7 @@
 {
   "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.12",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -137,10 +137,10 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.10"
+    "solid-js": "^2.0.0-beta.12"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.10"
+    "solid-js": "2.0.0-beta.12"
   },
   "scripts": {
     "build": "npm-run-all -nl build:clean types:copy-jsx build:js",
@@ -157,6 +157,8 @@
     "test": "vitest run && vitest run --config vite.config.server.mjs && vitest run --config vite.config.hydrate.mjs",
     "test:server": "vitest run --config vite.config.server.mjs",
     "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",
     "test-types:tsc": "tsc --project tsconfig.test.json"
   }

package/types/core.d.ts

@@ -1,3 +1,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>;

package/types/server.d.ts

@@ -73,6 +73,7 @@ export function ssrClassName(value: string | { [k: string]: boolean } | Array<an
 export function ssrStyle(value: string | { [k: string]: string }): string;
 export function ssrStyleProperty(name: string, value: any): string;
 export function ssrAttribute(key: string, value: any): string;
+export function ssrGroup<T extends () => any[]>(fn: T, n: number): T;
 export function ssrHydrationKey(): string;
 export function resolveSSRNode(node: any, result?: any, top?: boolean): any;
 export function escape(s: any, attr?: boolean): any;
@@ -88,7 +89,6 @@ export function memo<T>(fn: () => T, equal: boolean): () => T;
 export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
 export function mergeProps(...sources: unknown[]): unknown;
 export function getOwner(): unknown;
-export function ssrRunInScope(fn: () => void, owner: unknown): void;
 export function generateHydrationScript(options?: {
   nonce?: string;
   eventNames?: string[];

package/types-cjs/core.d.cts

@@ -1,3 +1,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>;

package/types-cjs/server.d.cts

@@ -73,6 +73,7 @@ export function ssrClassName(value: string | { [k: string]: boolean } | Array<an
 export function ssrStyle(value: string | { [k: string]: string }): string;
 export function ssrStyleProperty(name: string, value: any): string;
 export function ssrAttribute(key: string, value: any): string;
+export function ssrGroup<T extends () => any[]>(fn: T, n: number): T;
 export function ssrHydrationKey(): string;
 export function resolveSSRNode(node: any, result?: any, top?: boolean): any;
 export function escape(s: any, attr?: boolean): any;
@@ -88,7 +89,6 @@ export function memo<T>(fn: () => T, equal: boolean): () => T;
 export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
 export function mergeProps(...sources: unknown[]): unknown;
 export function getOwner(): unknown;
-export function ssrRunInScope(fn: () => void, owner: unknown): void;
 export function generateHydrationScript(options?: {
   nonce?: string;
   eventNames?: string[];