@solidjs/web 2.0.0-beta.5 → 2.0.0-beta.7

package/dist/dev.js

@@ -1,27 +1,33 @@
 import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, $DEVCOMP, enableHydration, enforceLoadingBoundary } from 'solid-js';
-export { Errored, For, Hydration, Loading, Match, NoHydration, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
 import { createMemo } from '@solidjs/signals';
 
 const DOMWithState = {
   INPUT: {
     value: 1,
-    checked: 1
+    defaultValue: 2,
+    checked: 1,
+    defaultChecked: 2
   },
   SELECT: {
     value: 1
   },
   OPTION: {
     value: 1,
-    selected: 1
+    selected: 1,
+    defaultSelected: 2
   },
   TEXTAREA: {
-    value: 1
+    value: 1,
+    defaultValue: 2
   },
   VIDEO: {
-    muted: 1
+    muted: 1,
+    defaultMuted: 2
   },
   AUDIO: {
-    muted: 1
+    muted: 1,
+    defaultMuted: 2
   }
 };
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
@@ -32,7 +38,9 @@ const SVGElements = /*#__PURE__*/new Set([
 "svg", "switch", "symbol", "text", "textPath",
 "tref", "tspan", "use", "view", "vkern"]);
 const MathMLElements = /*#__PURE__*/new Set(["annotation", "annotation-xml", "maction", "math", "menclose", "merror", "mfenced", "mfrac", "mi", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mprescripts", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msubsup", "msup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "semantics"]);
-const SVGNamespace = {
+const Namespaces = {
+  svg: "http://www.w3.org/2000/svg",
+  mathml: "http://www.w3.org/1998/Math/MathML",
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
@@ -40,10 +48,10 @@ 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, {
+const effect = (fn, effectFn) => createRenderEffect(fn, effectFn, {
   transparent: true
 });
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), undefined, {
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
   transparent: true
 }) : createMemo$1(() => fn());
 
@@ -109,16 +117,17 @@ function render$1(code, element, init, options = {}) {
   if (!element) {
     throw new Error("The `element` passed to `render(..., element)` doesn't exist. Make sure `element` exists in the document.");
   }
+  const renderRoot = getChildRoot(element);
   let disposer;
   createRoot(dispose => {
     disposer = dispose;
-    element === document ? flatten(code) : insert(element, code(), element.firstChild ? null : undefined, init);
+    element === document ? flatten(code) : insert(element, code(), renderRoot.firstChild ? null : undefined, init);
   }, {
     id: options.renderId
   });
   return () => {
     disposer();
-    element.textContent = "";
+    renderRoot.textContent = "";
   };
 }
 function create(html, bypassGuard, flag) {
@@ -258,10 +267,11 @@ function ref(fn, element) {
   runWithOwner(null, () => applyRef(resolved, element));
 }
 function insert(parent, accessor, marker, initial) {
+  const childRoot = getChildRoot(parent);
   const multi = marker !== undefined;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
-    if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
+    if (!multi && initial === undefined && parent) initial = [...childRoot.childNodes];
     if (Array.isArray(initial)) {
       let j = 0;
       for (let i = 0; i < initial.length; i++) {
@@ -277,10 +287,10 @@ function insert(parent, accessor, marker, initial) {
   accessor = memo(accessor, true);
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
-    parent.insertBefore(placeholder, marker);
+    childRoot.insertBefore(placeholder, marker);
     initial = [placeholder];
   }
-  effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+  effect((prev = initial) => normalize(accessor, prev, multi), (value, current = initial) => insertExpression(parent, value, current, marker));
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
   const nodeName = node.nodeName;
@@ -288,19 +298,35 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], skipRef, nodeName, prevProps);
+      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], skipRef, nodeName);
     }
   }
   for (const prop in props) {
     if (prop === "children") {
-      if (!skipChildren) insertExpression(node, props.children);
+      if (!skipChildren) insertExpression(node, normalize(props.children, undefined, false));
       continue;
     }
-    prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName, props);
+    prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName);
+  }
+}
+function loadModuleAssets(mapping) {
+  const hy = globalThis._$HY;
+  if (!hy) return;
+  const pending = [];
+  for (const moduleUrl in mapping) {
+    if (hy.modules[moduleUrl]) continue;
+    const entryUrl = mapping[moduleUrl];
+    if (!hy.loading[moduleUrl]) {
+      hy.loading[moduleUrl] = import(entryUrl).then(mod => {
+        hy.modules[moduleUrl] = mod;
+      });
+    }
+    pending.push(hy.loading[moduleUrl]);
   }
+  return pending.length ? Promise.all(pending).then(() => {}) : undefined;
 }
 function hydrate$1(code, element, options = {}) {
-  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
+  if (globalThis._$HY.done) return render$1(code, element, [...getChildRoot(element).childNodes], options);
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -309,6 +335,7 @@ function hydrate$1(code, element, options = {}) {
   sharedConfig.load = id => globalThis._$HY.r[id];
   sharedConfig.has = id => id in globalThis._$HY.r;
   sharedConfig.gather = root => gatherHydratable(element, root);
+  sharedConfig.loadModuleAssets = loadModuleAssets;
   sharedConfig.cleanupFragment = id => {
     const tpl = document.getElementById("pl-" + id);
     if (tpl) {
@@ -337,9 +364,27 @@ function hydrate$1(code, element, options = {}) {
       }
     };
   }
+  const rootMapping = globalThis._$HY.r && globalThis._$HY.r["_assets"];
+  if (rootMapping && typeof rootMapping === "object") {
+    const p = loadModuleAssets(rootMapping);
+    if (p) {
+      gatherHydratable(element, options.renderId);
+      let disposer;
+      p.then(() => {
+        try {
+          disposer = render$1(code, element, [...getChildRoot(element).childNodes], options);
+        } finally {
+          sharedConfig.hydrating = false;
+        }
+      }, () => {
+        sharedConfig.hydrating = false;
+      });
+      return () => disposer && disposer();
+    }
+  }
   try {
     gatherHydratable(element, options.renderId);
-    return render$1(code, element, [...element.childNodes], options);
+    return render$1(code, element, [...getChildRoot(element).childNodes], options);
   } finally {
     sharedConfig.hydrating = false;
   }
@@ -388,7 +433,7 @@ function getNextMarker(start) {
   return [end, current];
 }
 function getFirstChild(node, expectedTag) {
-  const child = node.firstChild;
+  const child = getChildRoot(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));
@@ -398,20 +443,21 @@ function getFirstChild(node, expectedTag) {
 function getNextSibling(node, expectedTag) {
   const sibling = node.nextSibling;
   if (isHydrating() && expectedTag && sibling?.localName !== expectedTag) {
-    const parent = node.parentElement;
+    const parent = node.parentNode;
     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) {
+  if (!parent) return `<${expectedTag} \u2190 parent unavailable>`;
   const children = [];
-  let child = parent.firstChild;
+  let child = getChildRoot(parent).firstChild;
   while (child) {
     if (child.nodeType === 1) children.push(child);
     child = child.nextSibling;
   }
-  const pTag = parent.localName;
+  const pTag = parent.localName || "#fragment";
   if (isMissing) {
     const tags = children.map(c => `<${c.localName}>`).join("");
     return `<${pTag}>${tags}<${expectedTag} \u2190 missing></${pTag}>`;
@@ -456,6 +502,9 @@ function runHydrationEvents() {
 function isHydrating(node) {
   return sharedConfig.hydrating && (!node || node.isConnected);
 }
+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);
@@ -474,10 +523,10 @@ 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 assignProp(node, prop, value, prev, skipRef, nodeName, props) {
+function assignProp(node, prop, value, prev, skipRef, nodeName) {
   if (prop === "style") return style(node, value, prev), value;
   if (prop === "class") return className(node, value, prev), value;
-  if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
+  if (value === prev && DOMWithState[nodeName]?.[prop] !== 1) return prev;
   if (prop === "ref") {
     if (!skipRef && value) ref(() => value, node);
     return value;
@@ -487,7 +536,7 @@ function assignProp(node, prop, value, prev, skipRef, nodeName, props) {
     const e = prop.slice(3);
     prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
     value && node.addEventListener(e, value, typeof value !== "function" && value);
-  } else if (prop.slice(0, 2) === "on") {
+  } else if (!hasNamespace && prop.slice(0, 2) === "on") {
     const name = prop.slice(2).toLowerCase();
     const delegate = DelegatedEvents.has(name);
     if (!delegate && prev) {
@@ -498,11 +547,11 @@ function assignProp(node, prop, value, prev, skipRef, nodeName, props) {
       addEventListener(node, name, value, delegate);
       delegate && delegateEvents([name]);
     }
-  } else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop] && !("prop:" + prop in props)) {
+  } else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop]) {
     if (hasNamespace) prop = prop.slice(5);else if (isHydrating(node)) return value;
     if (prop === "value" && nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
   } else {
-    const ns = hasNamespace && SVGNamespace[prop.split(":")[0]];
+    const ns = hasNamespace && Namespaces[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
   }
   return value;
@@ -560,21 +609,22 @@ function eventHandler(e) {
 function insertExpression(parent, value, current, marker) {
   if (isHydrating(parent)) return;
   if (value === current) return;
+  const childRoot = getChildRoot(parent);
   const t = typeof value,
     multi = marker !== undefined;
   if (t === "string" || t === "number") {
     const tc = typeof current;
     if (tc === "string" || tc === "number") {
-      parent.firstChild.data = value;
-    } else parent.textContent = value;
+      childRoot.firstChild.data = value;
+    } else childRoot.textContent = value;
   } else if (value === undefined) {
     cleanChildren(parent, current, marker);
   } else if (value.nodeType) {
     if (Array.isArray(current)) {
       cleanChildren(parent, current, multi ? marker : null, value);
-    } else if (current === undefined || !parent.firstChild) {
-      parent.appendChild(value);
-    } else parent.replaceChild(value, parent.firstChild);
+    } else if (current === undefined || !childRoot.firstChild) {
+      childRoot.appendChild(value);
+    } else childRoot.replaceChild(value, childRoot.firstChild);
   } else if (Array.isArray(value)) {
     const currentArray = current && Array.isArray(current);
     if (value.length === 0) {
@@ -582,7 +632,7 @@ function insertExpression(parent, value, current, marker) {
     } else if (currentArray) {
       if (current.length === 0) {
         appendNodes(parent, value, marker);
-      } else reconcileArrays(parent, current, value);
+      } else reconcileArrays(childRoot, current, value);
     } else {
       current && cleanChildren(parent);
       appendNodes(parent, value);
@@ -607,9 +657,11 @@ function normalize(value, current, multi, doNotUnwrap) {
   return value;
 }
 function appendNodes(parent, array, marker = null) {
+  parent = getChildRoot(parent);
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
 function cleanChildren(parent, current, marker, replacement) {
+  parent = getChildRoot(parent);
   if (marker === undefined) return parent.textContent = "";
   if (current.length) {
     let inserted = false;
@@ -666,9 +718,8 @@ function render(...args) {
 }
 const isServer = false;
 const isDev = true;
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-function createElement(tagName, isSVG = false, is = undefined) {
-  return isSVG ? document.createElementNS(SVG_NAMESPACE, tagName) : document.createElement(tagName, {
+function createElement(tagName, is = undefined) {
+  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
     is
   });
 }
@@ -724,9 +775,8 @@ function createDynamic(component, props) {
         });
         return untrack(() => component(props));
       case "string":
-        const isSvg = SVGElements.has(component);
-        const el = sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, untrack(() => props.is));
-        spread(el, props, isSvg);
+        const el = sharedConfig.hydrating ? getNextElement() : createElement(component, untrack(() => props.is));
+        spread(el, props);
         return el;
     }
   });
@@ -736,4 +786,4 @@ function Dynamic(props) {
   return createDynamic(() => props.component, others);
 }
 
-export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Portal, 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 };
+export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RequestContext, SVGElements, 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 };