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

package/dist/dev.cjs

@@ -6,23 +6,29 @@ var signals = require('@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"]);
@@ -33,7 +39,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"
 };
@@ -41,10 +49,10 @@ 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, {
+const effect = (fn, effectFn) => solidJs.createRenderEffect(fn, effectFn, {
   transparent: true
 });
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), undefined, {
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
   transparent: true
 }) : solidJs.createMemo(() => fn());
 
@@ -110,16 +118,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;
   solidJs.createRoot(dispose => {
     disposer = dispose;
-    element === document ? solidJs.flatten(code) : insert(element, code(), element.firstChild ? null : undefined, init);
+    element === document ? solidJs.flatten(code) : insert(element, code(), renderRoot.firstChild ? null : undefined, init);
   }, {
     id: options.renderId
   });
   return () => {
     disposer();
-    element.textContent = "";
+    renderRoot.textContent = "";
   };
 }
 function create(html, bypassGuard, flag) {
@@ -259,10 +268,11 @@ function ref(fn, element) {
   solidJs.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++) {
@@ -278,10 +288,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;
@@ -289,19 +299,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 = {};
@@ -310,6 +336,7 @@ function hydrate$1(code, element, options = {}) {
   solidJs.sharedConfig.load = id => globalThis._$HY.r[id];
   solidJs.sharedConfig.has = id => id in globalThis._$HY.r;
   solidJs.sharedConfig.gather = root => gatherHydratable(element, root);
+  solidJs.sharedConfig.loadModuleAssets = loadModuleAssets;
   solidJs.sharedConfig.cleanupFragment = id => {
     const tpl = document.getElementById("pl-" + id);
     if (tpl) {
@@ -338,9 +365,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 {
+          solidJs.sharedConfig.hydrating = false;
+        }
+      }, () => {
+        solidJs.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 {
     solidJs.sharedConfig.hydrating = false;
   }
@@ -389,7 +434,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));
@@ -399,20 +444,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}>`;
@@ -457,6 +503,9 @@ function runHydrationEvents() {
 function isHydrating(node) {
   return solidJs.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);
@@ -475,10 +524,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;
@@ -488,7 +537,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) {
@@ -499,11 +548,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;
@@ -561,21 +610,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) {
@@ -583,7 +633,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);
@@ -608,9 +658,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;
@@ -667,9 +719,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
   });
 }
@@ -725,9 +776,8 @@ function createDynamic(component, props) {
         });
         return solidJs.untrack(() => component(props));
       case "string":
-        const isSvg = SVGElements.has(component);
-        const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, isSvg, solidJs.untrack(() => props.is));
-        spread(el, props, isSvg);
+        const el = solidJs.sharedConfig.hydrating ? getNextElement() : createElement(component, solidJs.untrack(() => props.is));
+        spread(el, props);
         return el;
     }
   });
@@ -761,6 +811,14 @@ Object.defineProperty(exports, "NoHydration", {
   enumerable: true,
   get: function () { return solidJs.NoHydration; }
 });
+Object.defineProperty(exports, "Repeat", {
+  enumerable: true,
+  get: function () { return solidJs.Repeat; }
+});
+Object.defineProperty(exports, "Reveal", {
+  enumerable: true,
+  get: function () { return solidJs.Reveal; }
+});
 Object.defineProperty(exports, "Show", {
   enumerable: true,
   get: function () { return solidJs.Show; }
@@ -793,10 +851,10 @@ exports.DelegatedEvents = DelegatedEvents;
 exports.Dynamic = Dynamic;
 exports.HydrationScript = voidFn;
 exports.MathMLElements = MathMLElements;
+exports.Namespaces = Namespaces;
 exports.Portal = Portal;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
-exports.SVGNamespace = SVGNamespace;
 exports.addEventListener = addEventListener;
 exports.applyRef = applyRef;
 exports.assign = assign;