@solidjs/web 2.0.0-experimental.15 → 2.0.0-experimental.16

package/dist/dev.cjs

@@ -19,6 +19,9 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
+const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
+  transparent: true
+});
 const memo = fn => solidJs.createMemo(() => fn());
 
 function reconcileArrays(parentNode, a, b) {
@@ -97,13 +100,15 @@ function render(code, element, init, options = {}) {
 }
 function template(html, isImportNode, isSVG, isMathML) {
   let node;
-  const create = () => {
-    if (isHydrating()) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
+  const create = bypassGuard => {
+    if (isHydrating() && !bypassGuard) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
     const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
     t.innerHTML = html;
     return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
   };
-  return isImportNode ? () => solidJs.untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
+  const fn = isImportNode ? bypassGuard => solidJs.untrack(() => document.importNode(node || (node = create(bypassGuard)), true)) : bypassGuard => (node || (node = create(bypassGuard))).cloneNode(true);
+  fn._html = html;
+  return fn;
 }
 function delegateEvents(eventNames, document = window.document) {
   const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
@@ -176,7 +181,7 @@ function addEventListener(node, name, handler, delegate) {
 }
 function style(node, value, prev) {
   if (!value) {
-    prev ? setAttribute(node, "style") : value;
+    if (prev) setAttribute(node, "style");
     return;
   }
   const nodeStyle = node.style;
@@ -198,13 +203,16 @@ function setStyleProperty(node, name, value) {
 function spread(node, props = {}, isSVG, skipChildren) {
   const prevProps = {};
   if (!skipChildren) {
-    solidJs.createRenderEffect(() => normalize(props.children, prevProps.children), value => {
+    effect(() => normalize(props.children, prevProps.children), value => {
       insertExpression(node, value, prevProps.children);
       prevProps.children = value;
     });
   }
-  solidJs.createRenderEffect(() => typeof props.ref === "function" && use(props.ref, node), () => {});
-  solidJs.createRenderEffect(() => {
+  effect(() => {
+    const r = props.ref;
+    (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
+  }, () => {});
+  effect(() => {
     const newProps = {};
     for (const prop in props) {
       if (prop === "children" || prop === "ref") continue;
@@ -224,8 +232,12 @@ function dynamicProperty(props, key) {
   });
   return props;
 }
-function use(fn, element, arg) {
-  solidJs.untrack(() => fn(element, arg));
+function applyRef(r, element) {
+  Array.isArray(r) ? r.flat(Infinity).forEach(f => f && f(element)) : r(element);
+}
+function ref(fn, element) {
+  const resolved = solidJs.untrack(fn);
+  solidJs.runWithOwner(null, () => applyRef(resolved, element));
 }
 function insert(parent, accessor, marker, initial) {
   const multi = marker !== undefined;
@@ -241,7 +253,7 @@ function insert(parent, accessor, marker, initial) {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
-  solidJs.createRenderEffect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
 }
 function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
   props || (props = {});
@@ -288,6 +300,14 @@ function hydrate$1(code, element, options = {}) {
   };
   solidJs.sharedConfig.registry = new Map();
   solidJs.sharedConfig.hydrating = true;
+  {
+    solidJs.sharedConfig.verifyHydration = () => {
+      if (solidJs.sharedConfig.registry && solidJs.sharedConfig.registry.size) {
+        const orphaned = [...solidJs.sharedConfig.registry.values()];
+        console.warn(`Hydration completed with ${orphaned.length} unclaimed server-rendered node(s):\n` + orphaned.map(node => `  ${node.outerHTML.slice(0, 100)}`).join("\n"));
+      }
+    };
+  }
   try {
     gatherHydratable(element, options.renderId);
     return render(code, element, [...element.childNodes], options);
@@ -300,10 +320,16 @@ function getNextElement(template) {
     key,
     hydrating = isHydrating();
   if (!hydrating || !(node = solidJs.sharedConfig.registry.get(key = getHydrationKey()))) {
-    if (hydrating) {
-      throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}\n${template ? template().outerHTML : ""}`);
+    if (!template) {
+      throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}`);
+    }
+    return template(true);
+  }
+  if (template && template._html) {
+    const expected = template._html.match(/^<(\w+)/)?.[1];
+    if (expected && node.localName !== expected) {
+      console.warn(`Hydration tag mismatch for key "${key}": expected <${expected}> but found`, node);
     }
-    return template();
   }
   if (solidJs.sharedConfig.completed) solidJs.sharedConfig.completed.add(node);
   solidJs.sharedConfig.registry.delete(key);
@@ -332,6 +358,49 @@ function getNextMarker(start) {
   }
   return [end, current];
 }
+function getFirstChild(node, expectedTag) {
+  const child = node.firstChild;
+  if (isHydrating() && expectedTag && child?.localName !== expectedTag) {
+    const isMissing = !child || child.nodeType !== 1;
+    console.warn("Hydration structure mismatch: expected <" + expectedTag + "> as first child of", node, "\n  " + describeSiblings(node, child, expectedTag, isMissing));
+  }
+  return child;
+}
+function getNextSibling(node, expectedTag) {
+  const sibling = node.nextSibling;
+  if (isHydrating() && expectedTag && sibling?.localName !== expectedTag) {
+    const parent = node.parentElement;
+    const isMissing = !sibling || sibling.nodeType !== 1;
+    console.warn("Hydration structure mismatch: expected <" + expectedTag + "> after", node, "in", parent, "\n  " + describeSiblings(parent, sibling, expectedTag, isMissing));
+  }
+  return sibling;
+}
+function describeSiblings(parent, mismatchChild, expectedTag, isMissing) {
+  const children = [];
+  let child = parent.firstChild;
+  while (child) {
+    if (child.nodeType === 1) children.push(child);
+    child = child.nextSibling;
+  }
+  const pTag = parent.localName;
+  if (isMissing) {
+    const tags = children.map(c => `<${c.localName}>`).join("");
+    return `<${pTag}>${tags}<${expectedTag} \u2190 missing></${pTag}>`;
+  }
+  const idx = children.indexOf(mismatchChild);
+  let start = 0,
+    end = children.length;
+  let prefix = "",
+    suffix = "";
+  if (children.length > 6) {
+    start = Math.max(0, idx - 2);
+    end = Math.min(children.length, idx + 3);
+    if (start > 0) prefix = "...";
+    if (end < children.length) suffix = "...";
+  }
+  const tags = children.slice(start, end).map(c => c === mismatchChild ? `<${c.localName} \u2190 expected ${expectedTag}>` : `<${c.localName}>`).join("");
+  return `<${pTag}>${prefix}${tags}${suffix}</${pTag}>`;
+}
 function runHydrationEvents() {
   if (solidJs.sharedConfig.events && !solidJs.sharedConfig.events.queued) {
     queueMicrotask(() => {
@@ -382,7 +451,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
   if (prop === "class") return className(node, value, isSVG, prev), value;
   if (value === prev) return prev;
   if (prop === "ref") {
-    if (!skipRef) value(node);
+    if (!skipRef && value) ref(() => value, node);
   } else if (prop.slice(0, 3) === "on:") {
     const e = prop.slice(3);
     prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
@@ -664,10 +733,6 @@ Object.defineProperty(exports, "createComponent", {
   enumerable: true,
   get: function () { return solidJs.createComponent; }
 });
-Object.defineProperty(exports, "effect", {
-  enumerable: true,
-  get: function () { return solidJs.createRenderEffect; }
-});
 Object.defineProperty(exports, "getOwner", {
   enumerable: true,
   get: function () { return solidJs.getOwner; }
@@ -694,25 +759,30 @@ exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
 exports.SVGNamespace = SVGNamespace;
 exports.addEventListener = addEventListener;
+exports.applyRef = applyRef;
 exports.assign = assign;
 exports.className = className;
 exports.clearDelegatedEvents = clearDelegatedEvents;
 exports.createDynamic = createDynamic;
 exports.delegateEvents = delegateEvents;
 exports.dynamicProperty = dynamicProperty;
+exports.effect = effect;
 exports.escape = escape;
 exports.generateHydrationScript = voidFn;
 exports.getAssets = voidFn;
+exports.getFirstChild = getFirstChild;
 exports.getHydrationKey = getHydrationKey;
 exports.getNextElement = getNextElement;
 exports.getNextMarker = getNextMarker;
 exports.getNextMatch = getNextMatch;
+exports.getNextSibling = getNextSibling;
 exports.getRequestEvent = voidFn;
 exports.hydrate = hydrate;
 exports.insert = insert;
 exports.isDev = isDev;
 exports.isServer = isServer;
 exports.memo = memo;
+exports.ref = ref;
 exports.render = render;
 exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;
@@ -732,5 +802,4 @@ exports.ssrHydrationKey = ssrHydrationKey;
 exports.ssrStyle = ssrStyle;
 exports.style = style;
 exports.template = template;
-exports.use = use;
 exports.useAssets = voidFn;

package/dist/dev.js

@@ -1,5 +1,5 @@
-import { createMemo, sharedConfig, createRenderEffect, createRoot, flatten, untrack, omit, $DEVCOMP, enableHydration } from 'solid-js';
-export { Errored, For, Loading, Match, Show, Switch, createComponent, createRenderEffect as effect, getOwner, merge as mergeProps, untrack } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, createRoot, flatten, omit, $DEVCOMP, enableHydration } from 'solid-js';
+export { Errored, For, Loading, Match, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
 
 const Properties = /*#__PURE__*/new Set([
 "value", "checked", "selected", "muted"]);
@@ -18,6 +18,9 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
+const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
+  transparent: true
+});
 const memo = fn => createMemo(() => fn());
 
 function reconcileArrays(parentNode, a, b) {
@@ -96,13 +99,15 @@ function render(code, element, init, options = {}) {
 }
 function template(html, isImportNode, isSVG, isMathML) {
   let node;
-  const create = () => {
-    if (isHydrating()) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
+  const create = bypassGuard => {
+    if (isHydrating() && !bypassGuard) throw new Error("Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.");
     const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
     t.innerHTML = html;
     return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
   };
-  return isImportNode ? () => untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
+  const fn = isImportNode ? bypassGuard => untrack(() => document.importNode(node || (node = create(bypassGuard)), true)) : bypassGuard => (node || (node = create(bypassGuard))).cloneNode(true);
+  fn._html = html;
+  return fn;
 }
 function delegateEvents(eventNames, document = window.document) {
   const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
@@ -175,7 +180,7 @@ function addEventListener(node, name, handler, delegate) {
 }
 function style(node, value, prev) {
   if (!value) {
-    prev ? setAttribute(node, "style") : value;
+    if (prev) setAttribute(node, "style");
     return;
   }
   const nodeStyle = node.style;
@@ -197,13 +202,16 @@ function setStyleProperty(node, name, value) {
 function spread(node, props = {}, isSVG, skipChildren) {
   const prevProps = {};
   if (!skipChildren) {
-    createRenderEffect(() => normalize(props.children, prevProps.children), value => {
+    effect(() => normalize(props.children, prevProps.children), value => {
       insertExpression(node, value, prevProps.children);
       prevProps.children = value;
     });
   }
-  createRenderEffect(() => typeof props.ref === "function" && use(props.ref, node), () => {});
-  createRenderEffect(() => {
+  effect(() => {
+    const r = props.ref;
+    (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
+  }, () => {});
+  effect(() => {
     const newProps = {};
     for (const prop in props) {
       if (prop === "children" || prop === "ref") continue;
@@ -223,8 +231,12 @@ function dynamicProperty(props, key) {
   });
   return props;
 }
-function use(fn, element, arg) {
-  untrack(() => fn(element, arg));
+function applyRef(r, element) {
+  Array.isArray(r) ? r.flat(Infinity).forEach(f => f && f(element)) : r(element);
+}
+function ref(fn, element) {
+  const resolved = untrack(fn);
+  runWithOwner(null, () => applyRef(resolved, element));
 }
 function insert(parent, accessor, marker, initial) {
   const multi = marker !== undefined;
@@ -240,7 +252,7 @@ function insert(parent, accessor, marker, initial) {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
-  createRenderEffect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
 }
 function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
   props || (props = {});
@@ -287,6 +299,14 @@ function hydrate$1(code, element, options = {}) {
   };
   sharedConfig.registry = new Map();
   sharedConfig.hydrating = true;
+  {
+    sharedConfig.verifyHydration = () => {
+      if (sharedConfig.registry && sharedConfig.registry.size) {
+        const orphaned = [...sharedConfig.registry.values()];
+        console.warn(`Hydration completed with ${orphaned.length} unclaimed server-rendered node(s):\n` + orphaned.map(node => `  ${node.outerHTML.slice(0, 100)}`).join("\n"));
+      }
+    };
+  }
   try {
     gatherHydratable(element, options.renderId);
     return render(code, element, [...element.childNodes], options);
@@ -299,10 +319,16 @@ function getNextElement(template) {
     key,
     hydrating = isHydrating();
   if (!hydrating || !(node = sharedConfig.registry.get(key = getHydrationKey()))) {
-    if (hydrating) {
-      throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}\n${template ? template().outerHTML : ""}`);
+    if (!template) {
+      throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}`);
+    }
+    return template(true);
+  }
+  if (template && template._html) {
+    const expected = template._html.match(/^<(\w+)/)?.[1];
+    if (expected && node.localName !== expected) {
+      console.warn(`Hydration tag mismatch for key "${key}": expected <${expected}> but found`, node);
     }
-    return template();
   }
   if (sharedConfig.completed) sharedConfig.completed.add(node);
   sharedConfig.registry.delete(key);
@@ -331,6 +357,49 @@ function getNextMarker(start) {
   }
   return [end, current];
 }
+function getFirstChild(node, expectedTag) {
+  const child = node.firstChild;
+  if (isHydrating() && expectedTag && child?.localName !== expectedTag) {
+    const isMissing = !child || child.nodeType !== 1;
+    console.warn("Hydration structure mismatch: expected <" + expectedTag + "> as first child of", node, "\n  " + describeSiblings(node, child, expectedTag, isMissing));
+  }
+  return child;
+}
+function getNextSibling(node, expectedTag) {
+  const sibling = node.nextSibling;
+  if (isHydrating() && expectedTag && sibling?.localName !== expectedTag) {
+    const parent = node.parentElement;
+    const isMissing = !sibling || sibling.nodeType !== 1;
+    console.warn("Hydration structure mismatch: expected <" + expectedTag + "> after", node, "in", parent, "\n  " + describeSiblings(parent, sibling, expectedTag, isMissing));
+  }
+  return sibling;
+}
+function describeSiblings(parent, mismatchChild, expectedTag, isMissing) {
+  const children = [];
+  let child = parent.firstChild;
+  while (child) {
+    if (child.nodeType === 1) children.push(child);
+    child = child.nextSibling;
+  }
+  const pTag = parent.localName;
+  if (isMissing) {
+    const tags = children.map(c => `<${c.localName}>`).join("");
+    return `<${pTag}>${tags}<${expectedTag} \u2190 missing></${pTag}>`;
+  }
+  const idx = children.indexOf(mismatchChild);
+  let start = 0,
+    end = children.length;
+  let prefix = "",
+    suffix = "";
+  if (children.length > 6) {
+    start = Math.max(0, idx - 2);
+    end = Math.min(children.length, idx + 3);
+    if (start > 0) prefix = "...";
+    if (end < children.length) suffix = "...";
+  }
+  const tags = children.slice(start, end).map(c => c === mismatchChild ? `<${c.localName} \u2190 expected ${expectedTag}>` : `<${c.localName}>`).join("");
+  return `<${pTag}>${prefix}${tags}${suffix}</${pTag}>`;
+}
 function runHydrationEvents() {
   if (sharedConfig.events && !sharedConfig.events.queued) {
     queueMicrotask(() => {
@@ -381,7 +450,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
   if (prop === "class") return className(node, value, isSVG, prev), value;
   if (value === prev) return prev;
   if (prop === "ref") {
-    if (!skipRef) value(node);
+    if (!skipRef && value) ref(() => value, node);
   } else if (prop.slice(0, 3) === "on:") {
     const e = prop.slice(3);
     prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
@@ -635,4 +704,4 @@ function Dynamic(props) {
   return createDynamic(() => props.component, others);
 }
 
-export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, Properties, RequestContext, SVGElements, SVGNamespace, addEventListener, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, escape, voidFn as generateHydrationScript, voidFn as getAssets, getHydrationKey, getNextElement, getNextMarker, getNextMatch, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, use, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, Properties, RequestContext, SVGElements, SVGNamespace, addEventListener, applyRef, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };

package/dist/server.cjs

@@ -21,6 +21,9 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
+const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
+  transparent: true
+});
 const memo = fn => solidJs.createMemo(() => fn());
 
 const ES2017FLAG = seroval.Feature.AggregateError
@@ -645,6 +648,9 @@ function getHydrationKey() {
   const hydrate = solidJs.sharedConfig.context;
   return hydrate && !hydrate.noHydrate && solidJs.sharedConfig.getNextContextId();
 }
+function applyRef(r, element) {
+  Array.isArray(r) ? r.flat(Infinity).forEach(f => f && f(element)) : r(element);
+}
 function useAssets(fn) {
   solidJs.sharedConfig.context.assets.push(() => resolveSSRSync(escape(fn())));
 }
@@ -835,7 +841,7 @@ function resolveSSRSync(node) {
 }
 const RequestContext = Symbol();
 function getRequestEvent() {
-  return globalThis[RequestContext] ? globalThis[RequestContext].getStore() || solidJs.sharedConfig.context && solidJs.sharedConfig.context.event || console.log("RequestEvent is missing. This is most likely due to accessing `getRequestEvent` non-managed async scope in a partially polyfilled environment. Try moving it above all `await` calls.") : undefined;
+  return globalThis[RequestContext] ? globalThis[RequestContext].getStore() || solidJs.sharedConfig.context && solidJs.sharedConfig.context.event || console.warn("RequestEvent is missing. This is most likely due to accessing `getRequestEvent` non-managed async scope in a partially polyfilled environment. Try moving it above all `await` calls.") : undefined;
 }
 function renderToStringAsync(code, options = {}) {
   return new Promise(resolve => renderToStream(code, options).then(resolve));
@@ -847,13 +853,18 @@ function notSup() {
 const isServer = true;
 const isDev = false;
 function createDynamic(component, props) {
-  const comp = component(),
-    t = typeof comp;
-  if (comp) {
-    if (t === "function") return comp(props);else if (t === "string") {
-      return ssrElement(comp, props, undefined, true);
+  const o = solidJs.getOwner();
+  if (o?.id != null) solidJs.getNextChildId(o);
+  const memoOwner = solidJs.createOwner();
+  return solidJs.runWithOwner(memoOwner, () => {
+    const comp = component(),
+      t = typeof comp;
+    if (comp) {
+      if (t === "function") return comp(props);else if (t === "string") {
+        return ssrElement(comp, props, undefined, true);
+      }
     }
-  }
+  });
 }
 function Dynamic(props) {
   const others = solidJs.omit(props, "component");
@@ -895,10 +906,6 @@ Object.defineProperty(exports, "createComponent", {
   enumerable: true,
   get: function () { return solidJs.createComponent; }
 });
-Object.defineProperty(exports, "effect", {
-  enumerable: true,
-  get: function () { return solidJs.createRenderEffect; }
-});
 Object.defineProperty(exports, "getOwner", {
   enumerable: true,
   get: function () { return solidJs.getOwner; }
@@ -924,11 +931,13 @@ exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
 exports.SVGNamespace = SVGNamespace;
 exports.addEventListener = notSup;
+exports.applyRef = applyRef;
 exports.assign = notSup;
 exports.className = notSup;
 exports.createDynamic = createDynamic;
 exports.delegateEvents = notSup;
 exports.dynamicProperty = notSup;
+exports.effect = effect;
 exports.escape = escape;
 exports.generateHydrationScript = generateHydrationScript;
 exports.getAssets = getAssets;

package/dist/server.js

@@ -1,5 +1,5 @@
-import { createMemo, sharedConfig, createRoot, ssrHandleError, omit } from 'solid-js';
-export { Errored, For, Loading, Match, Repeat, Show, Switch, createComponent, createRenderEffect as effect, getOwner, ssrRunInScope, untrack } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, createRoot, ssrHandleError, omit, getOwner, getNextChildId, createOwner, runWithOwner } from 'solid-js';
+export { Errored, For, Loading, Match, Repeat, Show, Switch, createComponent, getOwner, ssrRunInScope, 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';
 
@@ -20,6 +20,9 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
+const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
+  transparent: true
+});
 const memo = fn => createMemo(() => fn());
 
 const ES2017FLAG = Feature.AggregateError
@@ -644,6 +647,9 @@ function getHydrationKey() {
   const hydrate = sharedConfig.context;
   return hydrate && !hydrate.noHydrate && sharedConfig.getNextContextId();
 }
+function applyRef(r, element) {
+  Array.isArray(r) ? r.flat(Infinity).forEach(f => f && f(element)) : r(element);
+}
 function useAssets(fn) {
   sharedConfig.context.assets.push(() => resolveSSRSync(escape(fn())));
 }
@@ -834,7 +840,7 @@ function resolveSSRSync(node) {
 }
 const RequestContext = Symbol();
 function getRequestEvent() {
-  return globalThis[RequestContext] ? globalThis[RequestContext].getStore() || sharedConfig.context && sharedConfig.context.event || console.log("RequestEvent is missing. This is most likely due to accessing `getRequestEvent` non-managed async scope in a partially polyfilled environment. Try moving it above all `await` calls.") : undefined;
+  return globalThis[RequestContext] ? globalThis[RequestContext].getStore() || sharedConfig.context && sharedConfig.context.event || console.warn("RequestEvent is missing. This is most likely due to accessing `getRequestEvent` non-managed async scope in a partially polyfilled environment. Try moving it above all `await` calls.") : undefined;
 }
 function renderToStringAsync(code, options = {}) {
   return new Promise(resolve => renderToStream(code, options).then(resolve));
@@ -846,13 +852,18 @@ function notSup() {
 const isServer = true;
 const isDev = false;
 function createDynamic(component, props) {
-  const comp = component(),
-    t = typeof comp;
-  if (comp) {
-    if (t === "function") return comp(props);else if (t === "string") {
-      return ssrElement(comp, props, undefined, true);
+  const o = getOwner();
+  if (o?.id != null) getNextChildId(o);
+  const memoOwner = createOwner();
+  return runWithOwner(memoOwner, () => {
+    const comp = component(),
+      t = typeof comp;
+    if (comp) {
+      if (t === "function") return comp(props);else if (t === "string") {
+        return ssrElement(comp, props, undefined, true);
+      }
     }
-  }
+  });
 }
 function Dynamic(props) {
   const others = omit(props, "component");
@@ -862,4 +873,4 @@ function Portal(props) {
   throw new Error("Portal is not supported on the server");
 }
 
-export { ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, HydrationScript, NoHydration, Portal, Properties, RequestContext, SVGElements, SVGNamespace, notSup as addEventListener, notSup as assign, notSup as className, createDynamic, notSup as delegateEvents, notSup as dynamicProperty, 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, Hydration, HydrationScript, NoHydration, Portal, Properties, RequestContext, SVGElements, SVGNamespace, notSup as addEventListener, applyRef, notSup as assign, notSup as className, createDynamic, notSup as delegateEvents, 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 };

package/dist/web.cjs

@@ -19,6 +19,9 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
+const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
+  transparent: true
+});
 const memo = fn => solidJs.createMemo(() => fn());
 
 function reconcileArrays(parentNode, a, b) {
@@ -94,12 +97,13 @@ function render(code, element, init, options = {}) {
 }
 function template(html, isImportNode, isSVG, isMathML) {
   let node;
-  const create = () => {
+  const create = bypassGuard => {
     const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
     t.innerHTML = html;
     return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
   };
-  return isImportNode ? () => solidJs.untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
+  const fn = isImportNode ? bypassGuard => solidJs.untrack(() => document.importNode(node || (node = create()), true)) : bypassGuard => (node || (node = create())).cloneNode(true);
+  return fn;
 }
 function delegateEvents(eventNames, document = window.document) {
   const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
@@ -172,7 +176,7 @@ function addEventListener(node, name, handler, delegate) {
 }
 function style(node, value, prev) {
   if (!value) {
-    prev ? setAttribute(node, "style") : value;
+    if (prev) setAttribute(node, "style");
     return;
   }
   const nodeStyle = node.style;
@@ -194,13 +198,16 @@ function setStyleProperty(node, name, value) {
 function spread(node, props = {}, isSVG, skipChildren) {
   const prevProps = {};
   if (!skipChildren) {
-    solidJs.createRenderEffect(() => normalize(props.children, prevProps.children), value => {
+    effect(() => normalize(props.children, prevProps.children), value => {
       insertExpression(node, value, prevProps.children);
       prevProps.children = value;
     });
   }
-  solidJs.createRenderEffect(() => typeof props.ref === "function" && use(props.ref, node), () => {});
-  solidJs.createRenderEffect(() => {
+  effect(() => {
+    const r = props.ref;
+    (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
+  }, () => {});
+  effect(() => {
     const newProps = {};
     for (const prop in props) {
       if (prop === "children" || prop === "ref") continue;
@@ -220,8 +227,12 @@ function dynamicProperty(props, key) {
   });
   return props;
 }
-function use(fn, element, arg) {
-  solidJs.untrack(() => fn(element, arg));
+function applyRef(r, element) {
+  Array.isArray(r) ? r.flat(Infinity).forEach(f => f && f(element)) : r(element);
+}
+function ref(fn, element) {
+  const resolved = solidJs.untrack(fn);
+  solidJs.runWithOwner(null, () => applyRef(resolved, element));
 }
 function insert(parent, accessor, marker, initial) {
   const multi = marker !== undefined;
@@ -237,7 +248,7 @@ function insert(parent, accessor, marker, initial) {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
-  solidJs.createRenderEffect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
 }
 function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
   props || (props = {});
@@ -296,7 +307,10 @@ function getNextElement(template) {
     key,
     hydrating = isHydrating();
   if (!hydrating || !(node = solidJs.sharedConfig.registry.get(key = getHydrationKey()))) {
-    return template();
+    if (!template) {
+      throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}`);
+    }
+    return template(true);
   }
   if (solidJs.sharedConfig.completed) solidJs.sharedConfig.completed.add(node);
   solidJs.sharedConfig.registry.delete(key);
@@ -325,6 +339,14 @@ function getNextMarker(start) {
   }
   return [end, current];
 }
+function getFirstChild(node, expectedTag) {
+  const child = node.firstChild;
+  return child;
+}
+function getNextSibling(node, expectedTag) {
+  const sibling = node.nextSibling;
+  return sibling;
+}
 function runHydrationEvents() {
   if (solidJs.sharedConfig.events && !solidJs.sharedConfig.events.queued) {
     queueMicrotask(() => {
@@ -375,7 +397,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
   if (prop === "class") return className(node, value, isSVG, prev), value;
   if (value === prev) return prev;
   if (prop === "ref") {
-    if (!skipRef) value(node);
+    if (!skipRef && value) ref(() => value, node);
   } else if (prop.slice(0, 3) === "on:") {
     const e = prop.slice(3);
     prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
@@ -654,10 +676,6 @@ Object.defineProperty(exports, "createComponent", {
   enumerable: true,
   get: function () { return solidJs.createComponent; }
 });
-Object.defineProperty(exports, "effect", {
-  enumerable: true,
-  get: function () { return solidJs.createRenderEffect; }
-});
 Object.defineProperty(exports, "getOwner", {
   enumerable: true,
   get: function () { return solidJs.getOwner; }
@@ -684,25 +702,30 @@ exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
 exports.SVGNamespace = SVGNamespace;
 exports.addEventListener = addEventListener;
+exports.applyRef = applyRef;
 exports.assign = assign;
 exports.className = className;
 exports.clearDelegatedEvents = clearDelegatedEvents;
 exports.createDynamic = createDynamic;
 exports.delegateEvents = delegateEvents;
 exports.dynamicProperty = dynamicProperty;
+exports.effect = effect;
 exports.escape = escape;
 exports.generateHydrationScript = voidFn;
 exports.getAssets = voidFn;
+exports.getFirstChild = getFirstChild;
 exports.getHydrationKey = getHydrationKey;
 exports.getNextElement = getNextElement;
 exports.getNextMarker = getNextMarker;
 exports.getNextMatch = getNextMatch;
+exports.getNextSibling = getNextSibling;
 exports.getRequestEvent = voidFn;
 exports.hydrate = hydrate;
 exports.insert = insert;
 exports.isDev = isDev;
 exports.isServer = isServer;
 exports.memo = memo;
+exports.ref = ref;
 exports.render = render;
 exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;
@@ -722,5 +745,4 @@ exports.ssrHydrationKey = ssrHydrationKey;
 exports.ssrStyle = ssrStyle;
 exports.style = style;
 exports.template = template;
-exports.use = use;
 exports.useAssets = voidFn;

package/dist/web.js

@@ -1,5 +1,5 @@
-import { createMemo, sharedConfig, createRenderEffect, createRoot, flatten, untrack, omit, enableHydration } from 'solid-js';
-export { Errored, For, Loading, Match, Show, Switch, createComponent, createRenderEffect as effect, getOwner, merge as mergeProps, untrack } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, createRoot, flatten, omit, enableHydration } from 'solid-js';
+export { Errored, For, Loading, Match, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
 
 const Properties = /*#__PURE__*/new Set([
 "value", "checked", "selected", "muted"]);
@@ -18,6 +18,9 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
+const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
+  transparent: true
+});
 const memo = fn => createMemo(() => fn());
 
 function reconcileArrays(parentNode, a, b) {
@@ -93,12 +96,13 @@ function render(code, element, init, options = {}) {
 }
 function template(html, isImportNode, isSVG, isMathML) {
   let node;
-  const create = () => {
+  const create = bypassGuard => {
     const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
     t.innerHTML = html;
     return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
   };
-  return isImportNode ? () => untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
+  const fn = isImportNode ? bypassGuard => untrack(() => document.importNode(node || (node = create()), true)) : bypassGuard => (node || (node = create())).cloneNode(true);
+  return fn;
 }
 function delegateEvents(eventNames, document = window.document) {
   const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
@@ -171,7 +175,7 @@ function addEventListener(node, name, handler, delegate) {
 }
 function style(node, value, prev) {
   if (!value) {
-    prev ? setAttribute(node, "style") : value;
+    if (prev) setAttribute(node, "style");
     return;
   }
   const nodeStyle = node.style;
@@ -193,13 +197,16 @@ function setStyleProperty(node, name, value) {
 function spread(node, props = {}, isSVG, skipChildren) {
   const prevProps = {};
   if (!skipChildren) {
-    createRenderEffect(() => normalize(props.children, prevProps.children), value => {
+    effect(() => normalize(props.children, prevProps.children), value => {
       insertExpression(node, value, prevProps.children);
       prevProps.children = value;
     });
   }
-  createRenderEffect(() => typeof props.ref === "function" && use(props.ref, node), () => {});
-  createRenderEffect(() => {
+  effect(() => {
+    const r = props.ref;
+    (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
+  }, () => {});
+  effect(() => {
     const newProps = {};
     for (const prop in props) {
       if (prop === "children" || prop === "ref") continue;
@@ -219,8 +226,12 @@ function dynamicProperty(props, key) {
   });
   return props;
 }
-function use(fn, element, arg) {
-  untrack(() => fn(element, arg));
+function applyRef(r, element) {
+  Array.isArray(r) ? r.flat(Infinity).forEach(f => f && f(element)) : r(element);
+}
+function ref(fn, element) {
+  const resolved = untrack(fn);
+  runWithOwner(null, () => applyRef(resolved, element));
 }
 function insert(parent, accessor, marker, initial) {
   const multi = marker !== undefined;
@@ -236,7 +247,7 @@ function insert(parent, accessor, marker, initial) {
     accessor = normalize(accessor, initial, multi, true);
     if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   }
-  createRenderEffect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
 }
 function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
   props || (props = {});
@@ -295,7 +306,10 @@ function getNextElement(template) {
     key,
     hydrating = isHydrating();
   if (!hydrating || !(node = sharedConfig.registry.get(key = getHydrationKey()))) {
-    return template();
+    if (!template) {
+      throw new Error(`Hydration Mismatch. Unable to find DOM nodes for hydration key: ${key}`);
+    }
+    return template(true);
   }
   if (sharedConfig.completed) sharedConfig.completed.add(node);
   sharedConfig.registry.delete(key);
@@ -324,6 +338,14 @@ function getNextMarker(start) {
   }
   return [end, current];
 }
+function getFirstChild(node, expectedTag) {
+  const child = node.firstChild;
+  return child;
+}
+function getNextSibling(node, expectedTag) {
+  const sibling = node.nextSibling;
+  return sibling;
+}
 function runHydrationEvents() {
   if (sharedConfig.events && !sharedConfig.events.queued) {
     queueMicrotask(() => {
@@ -374,7 +396,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
   if (prop === "class") return className(node, value, isSVG, prev), value;
   if (value === prev) return prev;
   if (prop === "ref") {
-    if (!skipRef) value(node);
+    if (!skipRef && value) ref(() => value, node);
   } else if (prop.slice(0, 3) === "on:") {
     const e = prop.slice(3);
     prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
@@ -625,4 +647,4 @@ function Dynamic(props) {
   return createDynamic(() => props.component, others);
 }
 
-export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, Properties, RequestContext, SVGElements, SVGNamespace, addEventListener, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, escape, voidFn as generateHydrationScript, voidFn as getAssets, getHydrationKey, getNextElement, getNextMarker, getNextMatch, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, use, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Hydration, voidFn as HydrationScript, NoHydration, Portal, Properties, RequestContext, SVGElements, SVGNamespace, addEventListener, applyRef, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime for the browser and the server",
-  "version": "2.0.0-experimental.15",
+  "version": "2.0.0-experimental.16",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -75,10 +75,10 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-experimental.15"
+    "solid-js": "^2.0.0-experimental.16"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-experimental.15"
+    "solid-js": "2.0.0-experimental.16"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",
@@ -90,7 +90,7 @@
     "types:web": "tsc --project ./tsconfig.build.json",
     "types:copy-web": "ncp ../../node_modules/dom-expressions/src/client.d.ts ./types/client.d.ts && ncp ../../node_modules/dom-expressions/src/server.d.ts ./types/server.d.ts",
     "types:web-storage": "tsc --project ./storage/tsconfig.build.json",
-    "test": "vitest run && vitest run --config vite.config.server.mjs",
+    "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",
     "test-types": "tsc --project tsconfig.test.json"

package/types/client.d.ts

@@ -62,7 +62,8 @@ export function style(
 export function getOwner(): unknown;
 export function mergeProps(...sources: unknown[]): unknown;
 export function dynamicProperty(props: unknown, key: string): unknown;
-export function use<Arg, Ret>(fn: (node: Element, arg: Arg) => Ret, node: Element, arg?: Arg): Ret
+export function applyRef(r: ((element: Element) => void) | ((element: Element) => void)[], element: Element): void;
+export function ref(fn: () => ((element: Element) => void) | ((element: Element) => void)[], element: Element): void;
 
 export function hydrate(
   fn: () => JSX.Element,

package/types/core.d.ts

@@ -1,2 +1,3 @@
-export { getOwner, createComponent, createRoot as root, createRenderEffect as effect, 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, ssrRunInScope } from "solid-js";
+export declare const effect: (fn: any, effectFn: any, initial: any) => void;
 export declare const memo: (fn: any) => import("solid-js").Accessor<any>;

package/types/server.d.ts

@@ -62,6 +62,7 @@ export function ssrAttribute(key: string, value: any): string;
 export function ssrHydrationKey(): string;
 export function resolveSSRNode(node: any, result?: any, top?: boolean): any;
 export function escape(s: any, attr?: boolean): any;
+export function applyRef(r: ((element: any) => void) | ((element: any) => void)[], element: any): void;
 export function useAssets(fn: () => JSX.Element): void;
 export function getAssets(): string;
 export function getHydrationKey(): string | undefined;