@solidjs/web 2.0.0-experimental.3 → 2.0.0-experimental.5

package/dist/web.cjs

@@ -46,6 +46,8 @@ const SVGNamespace = {
 };
 const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input", "h1", "h2", "h3", "h4", "h5", "h6"]);
 
+const memo = fn => solidJs.createMemo(() => fn());
+
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length,
     aEnd = a.length,
@@ -108,8 +110,10 @@ function render(code, element, init, options = {}) {
   let disposer;
   solidJs.createRoot(dispose => {
     disposer = dispose;
-    element === document ? code() : insert(element, code(), element.firstChild ? null : undefined, init);
-  }, options.owner);
+    element === document ? solidJs.flatten(code) : insert(element, code(), element.firstChild ? null : undefined, init);
+  }, {
+    id: options.renderId
+  });
   return () => {
     disposer();
     element.textContent = "";
@@ -141,12 +145,15 @@ function clearDelegatedEvents(document = window.document) {
   }
 }
 function setProperty(node, name, value) {
+  if (isHydrating(node)) return;
   node[name] = value;
 }
 function setAttribute(node, name, value) {
+  if (isHydrating(node)) return;
   if (value == null) node.removeAttribute(name);else node.setAttribute(name, value);
 }
 function setAttributeNS(node, namespace, name, value) {
+  if (isHydrating(node)) return;
   if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
 }
 function setBoolAttribute(node, name, value) {
@@ -154,6 +161,7 @@ function setBoolAttribute(node, name, value) {
   value ? node.setAttribute(name, "") : node.removeAttribute(name);
 }
 function className(node, value, isSVG, prev) {
+  if (isHydrating(node)) return;
   if (value == null) {
     prev && node.removeAttribute("class");
     return;
@@ -271,21 +279,19 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = fals
 }
 function hydrate$1(code, element, options = {}) {
   if (globalThis._$HY.done) return render(code, element, [...element.childNodes], options);
+  options.renderId ||= "";
   solidJs.sharedConfig.completed = globalThis._$HY.completed;
   solidJs.sharedConfig.events = globalThis._$HY.events;
   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.registry = new Map();
-  solidJs.sharedConfig.context = {
-    id: options.renderId || "",
-    count: 0
-  };
+  solidJs.sharedConfig.hydrating = true;
   try {
     gatherHydratable(element, options.renderId);
     return render(code, element, [...element.childNodes], options);
   } finally {
-    solidJs.sharedConfig.context = null;
+    solidJs.sharedConfig.hydrating = false;
   }
 }
 function getNextElement(template) {
@@ -346,7 +352,7 @@ function runHydrationEvents() {
   }
 }
 function isHydrating(node) {
-  return !!solidJs.sharedConfig.context && !solidJs.sharedConfig.done && (!node || node.isConnected);
+  return solidJs.sharedConfig.hydrating && !solidJs.sharedConfig.done && (!node || node.isConnected);
 }
 function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
@@ -393,7 +399,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
   } else if (prop.slice(0, 5) === "bool:") {
     setBoolAttribute(node, prop.slice(5), value);
   } else if ((forceProp = prop.slice(0, 5) === "prop:") || ChildProperties.has(prop) || !isSVG && (propAlias = getPropAlias(prop, node.tagName)) || Properties.has(prop)) {
-    if (forceProp) prop = prop.slice(5);
+    if (forceProp) prop = prop.slice(5);else if (isHydrating(node)) return value;
     if (prop === "value" && node.nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[propAlias || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
@@ -453,6 +459,7 @@ function eventHandler(e) {
   retarget(oriTarget);
 }
 function insertExpression(parent, value, current, marker) {
+  if (isHydrating(parent)) return;
   if (value === current) return;
   const t = typeof value,
     multi = marker !== undefined;
@@ -517,10 +524,10 @@ function cleanChildren(parent, current, marker, replacement) {
   } else if (replacement) parent.insertBefore(replacement, marker);
 }
 function gatherHydratable(element, root) {
-  const templates = element.querySelectorAll(`*[data-hk]`);
+  const templates = element.querySelectorAll(`*[_hk]`);
   for (let i = 0; i < templates.length; i++) {
     const node = templates[i];
-    const key = node.getAttribute("data-hk");
+    const key = node.getAttribute("_hk");
     if ((!root || key.startsWith(root)) && !solidJs.sharedConfig.registry.has(key)) solidJs.sharedConfig.registry.set(key, node);
   }
 }
@@ -528,7 +535,7 @@ function getHydrationKey() {
   return solidJs.sharedConfig.getNextContextId();
 }
 function NoHydration(props) {
-  return solidJs.sharedConfig.context ? undefined : props.children;
+  return solidJs.sharedConfig.hydrating ? undefined : props.children;
 }
 function Hydration(props) {
   return props.children;
@@ -661,10 +668,6 @@ Object.defineProperty(exports, "getOwner", {
   enumerable: true,
   get: function () { return solidJs.getOwner; }
 });
-Object.defineProperty(exports, "memo", {
-  enumerable: true,
-  get: function () { return solidJs.createMemo; }
-});
 Object.defineProperty(exports, "mergeProps", {
   enumerable: true,
   get: function () { return solidJs.merge; }
@@ -706,6 +709,7 @@ exports.hydrate = hydrate;
 exports.insert = insert;
 exports.isDev = isDev;
 exports.isServer = isServer;
+exports.memo = memo;
 exports.render = render;
 exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;