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

package/dist/dev.js

@@ -59,9 +59,9 @@ const syncOptions = {
   sync: true
 };
 const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
-  transparent: true,
   sync: true,
-  ...options
+  ...options,
+  transparent: !options.scope
 } : transparentOptions);
 const memo = fn => createMemo(() => fn(), syncOptions);
 
@@ -334,20 +334,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);
@@ -386,19 +407,28 @@ function ref(fn, element) {
   const resolved = untrack(fn);
   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);
@@ -414,10 +444,34 @@ function insert(parent, accessor, marker, initial, options) {
     initial = [placeholder];
   }
   let current = initial;
+  function reclaimSwappedRegion() {
+    if (!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);
@@ -431,7 +485,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;
@@ -450,19 +508,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;
 }
@@ -517,8 +673,11 @@ function hydrate$1(code, element, options = {}) {
         } finally {
           sharedConfig.hydrating = false;
         }
-      }, () => {
+      }, err => {
+        console.error("Hydration module preload failed, falling back to client render:", err);
         sharedConfig.hydrating = false;
+        sharedConfig.registry = undefined;
+        disposer = render$1(code, element, [...element.childNodes], options);
       });
       return () => disposer && disposer();
     }
@@ -630,17 +789,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 (sharedConfig.done) {
         sharedConfig.events = _$HY.events = null;
@@ -711,11 +885,16 @@ function eventHandler(e, container, state) {
   if (sharedConfig.registry && sharedConfig.events) {
     if (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;
@@ -745,7 +924,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]);
@@ -775,7 +957,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) {
@@ -798,7 +986,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);
@@ -838,8 +1026,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--) {
@@ -930,9 +1141,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;
       }
     };
@@ -979,4 +1191,4 @@ function createElement(tagName, is = undefined) {
   });
 }
 
-export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, addEvent, applyRef, assign, className, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, mergeProps, ref, registerDelegatedContainer, registerDelegatedRoot, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, className, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, mergeProps, ref, registerDelegatedContainer, registerDelegatedRoot, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, scope, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets };