@solidjs/web 2.0.0-beta.15 → 2.0.0-beta.17

package/dist/dev.cjs

@@ -60,9 +60,9 @@ const syncOptions = {
   sync: true
 };
 const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
-  transparent: true,
   sync: true,
-  ...options
+  ...options,
+  transparent: !options.scope
 } : transparentOptions);
 const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
 
@@ -335,20 +335,41 @@ function addEvent(node, name, handler, delegate) {
 }
 function style(node, value, prev) {
   if (!value) {
-    if (prev) setAttribute(node, "style");
+    if (prev || node._$styles) {
+      setAttribute(node, "style");
+      node._$styles = undefined;
+    }
     return;
   }
   const nodeStyle = node.style;
-  if (typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
-  prev || (prev = {});
+  if (typeof value === "string") {
+    node._$styles = undefined;
+    return nodeStyle.cssText = value;
+  }
+  if (typeof prev === "string") {
+    nodeStyle.cssText = "";
+    prev = undefined;
+  }
+  let applied = node._$styles;
+  if (!applied) {
+    applied = node._$styles = prev ? {
+      ...prev
+    } : {};
+  }
   let v, s;
+  for (s in applied) {
+    if (value[s] == null) {
+      nodeStyle.removeProperty(s);
+      delete applied[s];
+    }
+  }
   for (s in value) {
     v = value[s];
-    if (v !== prev[s]) nodeStyle.setProperty(s, v);
-    delete prev[s];
+    if (v != null && v !== applied[s]) {
+      nodeStyle.setProperty(s, v);
+      applied[s] = v;
+    }
   }
-  for (s in prev) value[s] == null && nodeStyle.removeProperty(s);
 }
 function setStyleProperty(node, name, value) {
   value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
@@ -387,19 +408,28 @@ function ref(fn, element) {
   const resolved = solidJs.untrack(fn);
   solidJs.runWithOwner(null, () => applyRef(resolved, element));
 }
+function scope(fn) {
+  fn.$s = true;
+  return fn;
+}
+const SCOPE_OPTIONS = {
+  scope: true
+};
+function stripTextSeparators(nodes) {
+  let j = 0;
+  for (let i = 0; i < nodes.length; i++) {
+    if (nodes[i].nodeType === 8 && nodes[i].nodeValue === "!$") nodes[i].remove();else nodes[j++] = nodes[i];
+  }
+  nodes.length = j;
+  return nodes;
+}
 function insert(parent, accessor, marker, initial, options) {
   const multi = marker !== undefined;
   const host = options && options.host;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
     if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
-    if (Array.isArray(initial)) {
-      let j = 0;
-      for (let i = 0; i < initial.length; i++) {
-        if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
-      }
-      initial.length = j;
-    }
+    if (Array.isArray(initial)) stripTextSeparators(initial);
   }
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
@@ -415,10 +445,34 @@ function insert(parent, accessor, marker, initial, options) {
     initial = [placeholder];
   }
   let current = initial;
+  function reclaimSwappedRegion() {
+    if (!solidJs.sharedConfig.hydrating || !current || !parent.isConnected) return;
+    const first = Array.isArray(current) ? current[0] : current;
+    if (!first || !first.nodeType || first.isConnected) return;
+    let nodes;
+    if (marker) {
+      nodes = [];
+      let node = marker.previousSibling,
+        depth = 0;
+      while (node) {
+        if (node.nodeType === 8) {
+          const v = node.nodeValue;
+          if (v === "/") depth++;else if (v === "$") {
+            if (depth === 0) break;
+            depth--;
+          }
+        }
+        nodes.unshift(node);
+        node = node.previousSibling;
+      }
+    } else nodes = [...parent.childNodes];
+    current = stripTextSeparators(nodes);
+  }
   effect(prev => {
+    reclaimSwappedRegion();
     const value = normalize(accessor(), current, multi, true);
     if (typeof value !== "function") return value;
-    effect(() => normalize(value, current, multi), inner => {
+    effect(() => (reclaimSwappedRegion(), normalize(value, current, multi)), inner => {
       insertExpression(parent, inner, current, marker);
       current = inner;
       host && tagHost(current, host);
@@ -432,7 +486,11 @@ function insert(parent, accessor, marker, initial, options) {
     insertExpression(parent, value, current, marker);
     current = value;
     host && tagHost(current, host);
-  }, options);
+  },
+  accessor.$s ? options ? {
+    ...options,
+    scope: true
+  } : SCOPE_OPTIONS : options);
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
   const nodeName = node.nodeName;
@@ -451,19 +509,117 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
     prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName);
   }
 }
+const ASSET_REMOVAL_GRACE = 100;
+const assetRegistry = new Map();
+function assetEntryKey(descriptor) {
+  if (descriptor.policy === "exclusive") return "x|" + descriptor.key;
+  return descriptor.type === "inline-style" ? "i|" + descriptor.id : descriptor.type + "|" + descriptor.href;
+}
+function findAssetElement(selector, attr, value) {
+  const nodes = document.querySelectorAll(selector);
+  for (let i = 0; i < nodes.length; i++) {
+    if (nodes[i].getAttribute(attr) === value) return nodes[i];
+  }
+  return null;
+}
+function mountAssetElement(descriptor) {
+  let el;
+  if (descriptor.type === "inline-style") {
+    el = findAssetElement("style[data-asset]", "data-asset", descriptor.id);
+    if (!el) {
+      el = document.createElement("style");
+      el.setAttribute("data-asset", descriptor.id);
+      el.textContent = descriptor.content || "";
+    }
+  } else {
+    const rel = descriptor.type === "module" ? "modulepreload" : "stylesheet";
+    el = findAssetElement(`link[rel="${rel}"]`, "href", descriptor.href);
+    if (!el) {
+      el = document.createElement("link");
+      el.rel = rel;
+      el.href = descriptor.href;
+    }
+  }
+  if (descriptor.attrs) {
+    for (const name in descriptor.attrs) el.setAttribute(name, descriptor.attrs[name]);
+  }
+  if (!el.isConnected) document.head.appendChild(el);
+  return el;
+}
+function acquireAsset(descriptor) {
+  const key = assetEntryKey(descriptor);
+  let entry = assetRegistry.get(key);
+  if (descriptor.policy === "exclusive") {
+    if (!entry) {
+      entry = {
+        original: descriptor.get(),
+        set: descriptor.set,
+        writers: []
+      };
+      assetRegistry.set(key, entry);
+    }
+    const writer = {
+      value: descriptor.value
+    };
+    entry.writers.push(writer);
+    entry.set(writer.value);
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      const index = entry.writers.indexOf(writer);
+      const wasTop = index === entry.writers.length - 1;
+      entry.writers.splice(index, 1);
+      if (!wasTop) return;
+      if (entry.writers.length) {
+        entry.set(entry.writers[entry.writers.length - 1].value);
+      } else {
+        entry.set(entry.original);
+        assetRegistry.delete(key);
+      }
+    };
+  }
+  if (!entry) {
+    entry = {
+      count: 0,
+      element: null,
+      timer: null
+    };
+    assetRegistry.set(key, entry);
+  }
+  if (entry.timer) {
+    clearTimeout(entry.timer);
+    entry.timer = null;
+  }
+  entry.count++;
+  if (!entry.element || !entry.element.isConnected) entry.element = mountAssetElement(descriptor);
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--entry.count > 0) return;
+    entry.timer = setTimeout(() => {
+      assetRegistry.delete(key);
+      entry.element && entry.element.remove();
+    }, ASSET_REMOVAL_GRACE);
+  };
+}
 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;
+  for (const key in mapping) {
+    if (hy.modules[key]) continue;
+    const entryUrl = mapping[key];
+    if (!hy.loading[key]) {
+      hy.loading[key] = import(entryUrl).then(mod => {
+        hy.modules[key] = mod;
+      }, err => {
+        delete hy.loading[key];
+        throw err;
       });
     }
-    pending.push(hy.loading[moduleUrl]);
+    pending.push(hy.loading[key]);
   }
   return pending.length ? Promise.all(pending).then(() => {}) : undefined;
 }
@@ -518,8 +674,11 @@ function hydrate$1(code, element, options = {}) {
         } finally {
           solidJs.sharedConfig.hydrating = false;
         }
-      }, () => {
+      }, err => {
+        console.error("Hydration module preload failed, falling back to client render:", err);
         solidJs.sharedConfig.hydrating = false;
+        solidJs.sharedConfig.registry = undefined;
+        disposer = render$1(code, element, [...element.childNodes], options);
       });
       return () => disposer && disposer();
     }
@@ -631,17 +790,32 @@ function runHydrationEvents() {
         const [el, e] = events[0];
         if (!completed.has(el)) return;
         events.shift();
-        let match;
+        let matchContainer, matchState, matchDistance, matches;
         for (const [container, state] of delegatedContainers) {
           if (!state.handlers.has(e.type)) continue;
           const entry = findOwner(e.target, state);
-          if (entry && (!match || entry.distance < match.distance)) match = {
-            container,
-            state,
-            distance: entry.distance
-          };
+          if (!entry) continue;
+          if (matchContainer) {
+            if (!matches) matches = [{
+              container: matchContainer,
+              state: matchState,
+              distance: matchDistance
+            }];
+            matches.push({
+              container,
+              state,
+              distance: entry.distance
+            });
+          } else {
+            matchContainer = container;
+            matchState = state;
+            matchDistance = entry.distance;
+          }
         }
-        if (match) eventHandler(e, match.container, match.state);
+        if (matches) {
+          matches.sort((a, b) => a.distance - b.distance);
+          for (let i = 0; i < matches.length; i++) eventHandler(e, matches[i].container, matches[i].state);
+        } else if (matchContainer) eventHandler(e, matchContainer, matchState);
       }
       if (solidJs.sharedConfig.done) {
         solidJs.sharedConfig.events = _$HY.events = null;
@@ -712,11 +886,16 @@ function eventHandler(e, container, state) {
   if (solidJs.sharedConfig.registry && solidJs.sharedConfig.events) {
     if (solidJs.sharedConfig.events.find(([el, ev]) => ev === e)) return;
   }
-  if (e[$$EVENT_OWNER]) return;
+  const prev = e[$$EVENT_OWNER];
+  let resumeNode;
+  if (prev) {
+    if (prev === true || prev === container || !container.contains(prev)) return;
+    resumeNode = prev;
+  }
   const owner = state && (state.owners.size === 1 && state.owners.has(container) ? container : findOwner(e.target, state)?.owner);
   if (state && !owner) return;
   e[$$EVENT_OWNER] = owner || true;
-  let node = e.target;
+  let node = resumeNode || e.target;
   const key = `$$${e.type}`;
   const oriTarget = e.target;
   const boundary = owner || container || e.currentTarget;
@@ -746,7 +925,10 @@ function eventHandler(e, container, state) {
       return node || boundary || document;
     }
   });
-  if (e.composedPath) {
+  if (resumeNode) {
+    if (resumeNode === e.target) node = resumeNode._$host || resumeNode.parentNode || resumeNode.host;
+    if (node && node !== boundary) walkUpTree();
+  } else if (e.composedPath) {
     const path = e.composedPath();
     if (path.length) {
       retarget(path[0]);
@@ -776,7 +958,13 @@ function insertExpression(parent, value, current, marker) {
     const tc = typeof current;
     if (tc === "string" || tc === "number") {
       parent.firstChild.data = value;
-    } else parent.textContent = value;
+    } else {
+      const owned = ownedChildCount(current);
+      if (owned === -1 || owned === parent.childNodes.length) parent.textContent = value;else {
+        removeOwnedChildren(parent, current);
+        parent.insertBefore(document.createTextNode(value), parent.firstChild);
+      }
+    }
   } else if (value === undefined) {
     cleanChildren(parent, current, marker);
   } else if (value.nodeType) {
@@ -799,7 +987,7 @@ function insertExpression(parent, value, current, marker) {
         appendNodes(parent, value, marker);
       } else reconcileArrays(parent, current, value, marker);
     } else {
-      current && cleanChildren(parent);
+      current && cleanChildren(parent, current);
       appendNodes(parent, value);
     }
   } else console.warn(`Unrecognized value. Skipped inserting`, value);
@@ -839,8 +1027,31 @@ function appendNodes(parent, array, marker = null) {
     if (marker) n[$$SLOT] = marker;
   }
 }
+function ownedChildCount(current) {
+  if (Array.isArray(current)) return current.length;
+  if (current == null) return -1;
+  if (current === "") return 0;
+  return 1;
+}
+function removeOwnedChildren(parent, current) {
+  if (Array.isArray(current)) {
+    for (let i = 0; i < current.length; i++) {
+      const el = current[i];
+      if (el.parentNode === parent) el.remove();
+    }
+  } else if (current.nodeType) {
+    if (current.parentNode === parent) current.remove();
+  } else {
+    const first = parent.firstChild;
+    if (first && first.nodeType === 3) first.remove();
+  }
+}
 function cleanChildren(parent, current, marker, replacement) {
-  if (marker === undefined) return parent.textContent = "";
+  if (marker === undefined) {
+    const owned = ownedChildCount(current);
+    if (owned === -1 || owned === parent.childNodes.length) return parent.textContent = "";
+    return removeOwnedChildren(parent, current);
+  }
   if (current.length) {
     let inserted = false;
     for (let i = current.length - 1; i >= 0; i--) {
@@ -931,9 +1142,10 @@ function Portal(props) {
     return () => {
       dispose();
       let c = startMarker;
-      while (c && c !== endMarker) {
+      while (c) {
         const n = c.nextSibling;
         m.removeChild(c);
+        if (c === endMarker) break;
         c = n;
       }
     };
@@ -1046,6 +1258,7 @@ exports.RawTextElements = RawTextElements;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
 exports.VoidElements = VoidElements;
+exports.acquireAsset = acquireAsset;
 exports.addEvent = addEvent;
 exports.applyRef = applyRef;
 exports.assign = assign;
@@ -1080,6 +1293,7 @@ exports.renderToString = renderToString;
 exports.renderToStringAsync = renderToStringAsync;
 exports.resolveSSRNode = resolveSSRNode;
 exports.runHydrationEvents = runHydrationEvents;
+exports.scope = scope;
 exports.setAttribute = setAttribute;
 exports.setAttributeNS = setAttributeNS;
 exports.setProperty = setProperty;