@solidjs/web 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/dev.js

@@ -1,5 +1,5 @@
-import { createRenderEffect, createMemo, runWithOwner, sharedConfig, untrack, flatten, createRoot, merge, createComponent, omit, createOwner, createSignal, $DEVCOMP, onCleanup, enableHydration, enforceLoadingBoundary, flush, getOwner, createEffect } from 'solid-js';
-export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, untrack } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, enableHydration, untrack, runWithOwner, resetErrorHalt, enforceLoadingBoundary, createRoot, flatten, flush, createComponent, omit, createOwner, createSignal, $DEVCOMP, onCleanup, getOwner, createEffect } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
 
 const DOMWithState = {
   INPUT: {
@@ -56,23 +56,16 @@ const transparentOptions = {
 const syncOptions = {
   sync: true
 };
-const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
-  sync: true,
-  ...options,
-  transparent: !options.scope
-} : transparentOptions);
-const memo = fn => createMemo(() => fn(), syncOptions);
-const assetGates = new WeakMap();
-const waitAsset = promise => {
-  let gate = assetGates.get(promise);
-  if (!gate) {
-    runWithOwner(null, () => {
-      gate = createMemo(() => promise);
-    });
-    assetGates.set(promise, gate);
-  }
-  gate();
-};
+function effect(fn, effectFn, options) {
+  createRenderEffect(fn, effectFn, options ? {
+    sync: true,
+    ...options,
+    transparent: !options.scope
+  } : transparentOptions);
+}
+function memo(fn) {
+  return createMemo(() => fn(), syncOptions);
+}
 
 function reconcileArrays(parentNode, a, b, marker) {
   let bLength = b.length,
@@ -86,13 +79,18 @@ function reconcileArrays(parentNode, a, b, marker) {
     map = null,
     anchor,
     anchorTag;
+  const isLive = n => {
+    if (!n) return false;
+    const tag = n[$$SLOT];
+    return n.parentNode === parentNode && (!tag || tag === marker);
+  };
   while (aStart < aEnd || bStart < bEnd) {
-    if (a[aStart] === b[bStart]) {
+    if (a[aStart] === b[bStart] && isLive(a[aStart])) {
       aStart++;
       bStart++;
       continue;
     }
-    while (a[aEnd - 1] === b[bEnd - 1]) {
+    while (a[aEnd - 1] === b[bEnd - 1] && isLive(a[aEnd - 1])) {
       aEnd--;
       bEnd--;
     }
@@ -324,14 +322,35 @@ function getServerFunctionRPC() {
   return globalThis[SERVER_FUNCTION_RPC];
 }
 
-const $$EVENT_OWNER = "_$DX_EVENT_OWNER";
+const assetGates = new WeakMap();
+const waitAsset = promise => {
+  let gate = assetGates.get(promise);
+  if (!gate) {
+    runWithOwner(null, () => {
+      gate = createMemo(() => promise);
+    });
+    assetGates.set(promise, gate);
+  }
+  gate();
+};
+const $$EVENT_OWNER = "_$SOLID_EVENT_OWNER";
 const INNER_OWNED = {};
 const delegatedEvents = new Set();
 const delegatedContainers = new Map();
-function render$1(code, element, init, options = {}) {
+function voidFn() {}
+function generateHydrationScript(_options) {
+  return "";
+}
+function HydrationScript(_props) {
+  return null;
+}
+const getRequestEvent = voidFn;
+function render(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.");
   }
+  resetErrorHalt();
+  enforceLoadingBoundary(true);
   let disposer;
   registerDelegatedRoot(element);
   try {
@@ -342,15 +361,21 @@ function render$1(code, element, init, options = {}) {
         effect(() => flatten(tree), () => {});
       } else {
         const tree = code();
-        insert(element, () => tree, element.firstChild ? null : undefined, init, options.insertOptions);
+        insert(element, () => tree, element.firstChild ? null : undefined, init, {
+          ...options.insertOptions,
+          schedule: true
+        });
       }
     }, {
       id: options.renderId
     });
+    flush();
   } catch (err) {
     if (disposer) disposer();
     unregisterDelegatedRoot(element);
     throw err;
+  } finally {
+    enforceLoadingBoundary(false);
   }
   return () => {
     disposer();
@@ -437,7 +462,7 @@ function setProperty(node, name, value) {
   node[name] = value;
 }
 let claimHandlers = null;
-const CLAIM_SEAM = Symbol.for("dom-expressions.element-claims");
+const CLAIM_SEAM = Symbol.for("solid.element-claims");
 function registerElementClaim(handler) {
   (claimHandlers || (claimHandlers = globalThis[CLAIM_SEAM] = [])).push(handler);
   return () => {
@@ -591,6 +616,11 @@ function ref(fn, element) {
   const resolved = untrack(fn);
   runWithOwner(null, () => applyRef(resolved, element));
 }
+const PURE_ROW = Symbol.for("solid.pure-row");
+function rowProof(fn) {
+  fn[PURE_ROW] = true;
+  return fn;
+}
 function scope(fn) {
   fn.$s = true;
   return fn;
@@ -654,6 +684,11 @@ function stripTextSeparators(nodes) {
   nodes.length = j;
   return nodes;
 }
+function patchDriver(subject, body) {
+  {
+    effect(() => body(subject, subject, false), () => body(subject, undefined, true));
+  }
+}
 function insert(parent, accessor, marker, initial, options) {
   const multi = marker !== undefined;
   const host = options && options.host;
@@ -894,7 +929,7 @@ function initHeadRegistry() {
   headOwned = new Map();
   headApplied = new Map();
   const t = document.querySelector("title");
-  headFallbackTitle = t && !t.hasAttribute("data-dh") ? t.textContent : null;
+  headFallbackTitle = t ? t.hasAttribute("data-dh") ? t.getAttribute("data-dhf") : t.textContent : null;
   if (globalThis._$HY) globalThis._$HY.h = applyServerHeadOps;
 }
 function applyServerHeadOps(ops) {
@@ -949,7 +984,11 @@ function flushHeadRegistry() {
     headOwned.delete(identity);
     headApplied.delete(identity);
     if (identity === "title") {
-      if (headFallbackTitle != null) setHeadTitle(headFallbackTitle).removeAttribute("data-dh");
+      if (headFallbackTitle != null) {
+        const el = setHeadTitle(headFallbackTitle);
+        el.removeAttribute("data-dh");
+        el.removeAttribute("data-dhf");
+      }
     } else {
       for (let i = 0; i < els.length; i++) els[i].remove();
     }
@@ -1116,7 +1155,7 @@ function loadModuleAssets(mapping) {
   const pending = [];
   for (const key in mapping) {
     if (hy.modules[key]) continue;
-    const entryUrl = mapping[key];
+    const entryUrl = new URL(mapping[key], document.baseURI).href;
     if (!hy.loading[key]) {
       hy.loading[key] = import(entryUrl).then(mod => {
         hy.modules[key] = mod;
@@ -1129,9 +1168,10 @@ function loadModuleAssets(mapping) {
   }
   return pending.length ? Promise.all(pending).then(() => {}) : undefined;
 }
-function hydrate$1(code, element, options = {}) {
+function hydrate(code, element, options = {}) {
+  enableHydration();
   installHydrationRuntime();
-  if (globalThis._$HY.done) return render$1(code, element, [...element.childNodes], options);
+  if (globalThis._$HY.done) return render(code, element, [...element.childNodes], options);
   options.renderId ||= "";
   if (!globalThis._$HY.modules) globalThis._$HY.modules = {};
   if (!globalThis._$HY.loading) globalThis._$HY.loading = {};
@@ -1190,7 +1230,7 @@ function hydrate$1(code, element, options = {}) {
         sharedConfig.gather = gather;
         sharedConfig.hydrating = true;
         try {
-          disposer = render$1(code, element, [...element.childNodes], options);
+          disposer = render(code, element, [...element.childNodes], options);
         } finally {
           sharedConfig.hydrating = false;
         }
@@ -1198,14 +1238,14 @@ function hydrate$1(code, element, options = {}) {
         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);
+        disposer = render(code, element, [...element.childNodes], options);
       });
       return () => disposer && disposer();
     }
   }
   try {
     gatherHydratable(element, options.renderId);
-    return render$1(code, element, [...element.childNodes], options);
+    return render(code, element, [...element.childNodes], options);
   } finally {
     sharedConfig.hydrating = false;
   }
@@ -1435,7 +1475,11 @@ function eventHandler(e, container, state) {
     value
   });
   const handleNode = () => {
-    const handler = node[key];
+    let handler = node[key];
+    if (handler === undefined && node.hasAttribute && node.hasAttribute("_bnd")) {
+      const seam = globalThis[Symbol.for("solid.bnd")];
+      if (seam) handler = seam.resolve(node, e.type);
+    }
     if (handler && !node.disabled) {
       const data = node[`${key}Data`];
       data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
@@ -1482,7 +1526,16 @@ function eventHandler(e, container, state) {
 }
 function insertExpression(parent, value, current, marker) {
   if (hydrationRt !== null && isHydrating(parent)) {
-    if (value && value !== current) for (const n of Array.isArray(value) ? value : [value]) if (n && n.nodeType && !isHydrating(n)) return current;
+    if (value && value !== current) {
+      const arr = Array.isArray(value);
+      for (const n of arr ? value : [value]) {
+        if (n && n.nodeType) {
+          if (!isHydrating(n)) return current;
+        } else if (arr && (typeof n === "string" || typeof n === "number")) {
+          return current;
+        }
+      }
+    }
     return value;
   }
   if (value === current) return value;
@@ -1513,6 +1566,17 @@ function insertExpression(parent, value, current, marker) {
     if (marker) value[$$SLOT] = marker;
   } else if (Array.isArray(value)) {
     const currentArray = current && Array.isArray(current);
+    for (let i = 0, len = value.length; i < len; i++) {
+      const item = value[i],
+        t = typeof item;
+      if (t === "string" || t === "number") {
+        const prev = currentArray ? current[i] : undefined;
+        if (prev && prev.nodeType === 3) {
+          if (prev.data !== "" + item) prev.data = item;
+          value[i] = prev;
+        } else value[i] = document.createTextNode(item);
+      }
+    }
     if (value.length === 0) {
       cleanChildren(parent, current, marker);
     } else if (currentArray) {
@@ -1533,12 +1597,12 @@ function normalize(value, current, multi, doNotUnwrap) {
   });
   if (doNotUnwrap && typeof value === "function") return value;
   if (multi && !Array.isArray(value)) value = [value != null ? value : ""];
-  if (Array.isArray(value)) {
+  if (sharedConfig.hydrating && Array.isArray(value)) {
     for (let i = 0, len = value.length; i < len; i++) {
       const item = value[i],
         prev = current && current[i],
         t = typeof item;
-      if (t === "string" || t === "number") value[i] = prev && prev.nodeType === 3 && (sharedConfig.hydrating || prev.data === "" + item) ? prev : document.createTextNode(item);
+      if ((t === "string" || t === "number") && prev && prev.nodeType === 3) value[i] = prev;
     }
   }
   return value;
@@ -1619,7 +1683,6 @@ function gatherHydratable(element, root) {
 function getHydrationKey() {
   return sharedConfig.getNextContextId();
 }
-const voidFn = () => undefined;
 const RequestContext = Symbol();
 
 function throwInBrowser(func) {
@@ -1695,11 +1758,14 @@ function isSafeError(value) {
   return !!(value && (typeof value === "object" || typeof value === "function") && value[SAFE_ERROR]);
 }
 const REVALIDATE_HEADER = "X-Revalidate";
-function initWithRevalidate(init) {
+function initWithRevalidate(init = {}) {
+  const resolved = typeof init === "number" ? {
+    status: init
+  } : init;
   const {
     revalidate,
     ...responseInit
-  } = init;
+  } = resolved;
   let headers;
   if (responseInit.headers && responseInit.headers.getSetCookie) {
     headers = new Headers();
@@ -1725,9 +1791,7 @@ function redirect(url, init = 302) {
   const {
     responseInit,
     headers
-  } = initWithRevalidate(typeof init === "number" ? {
-    status: init
-  } : init);
+  } = initWithRevalidate(init);
   if (responseInit.status === undefined) {
     responseInit.status = 302;
   }
@@ -1759,28 +1823,8 @@ function respond(value, init = {}) {
   }), value);
 }
 
-const mergeProps = merge;
 const isServer = false;
 const isDev = true;
-function render(code, element, init, options = {}) {
-  enforceLoadingBoundary(true);
-  try {
-    const dispose = render$1(code, element, init, {
-      ...options,
-      insertOptions: {
-        schedule: true
-      }
-    });
-    flush();
-    return dispose;
-  } finally {
-    enforceLoadingBoundary(false);
-  }
-}
-const hydrate = (...args) => {
-  enableHydration();
-  return hydrate$1(...args);
-};
 function Portal(props) {
   return runWithOwner(createOwner(), () => portalImpl(props));
 }
@@ -1833,7 +1877,7 @@ function portalImpl(props) {
   });
   return treeMarker;
 }
-const COMPONENT_BINDING = Symbol.for("dom-expressions.component-binding");
+const COMPONENT_BINDING = Symbol.for("solid.component-binding");
 function bindingOf(value) {
   return value !== null && (typeof value === "function" || typeof value === "object") && value[COMPONENT_BINDING] || undefined;
 }
@@ -1925,4 +1969,4 @@ _moduleUrl) {
 function httpStatus(_code, _text) {}
 function httpHeader(_name, _value, _options) {}
 
-export { ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SAFE_ERROR, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, claimElement, claimElementTree, className, clearFlashCookie, clientOnly, commitEventResponse, composeMiddleware, createRequestEvent, createResponseStub, createSSRResponse, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, getDelegatedRoot, getExpectedRedirectStatus, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, getServerFunctionMetadata, getServerFunctionRPC, hasFlashCookie, httpHeader, httpStatus, hydrate, insert, installHydrationRuntime, isDev, isHref, isResponseEnvelope, isSafeError, isServer, isServerFunction, markSafeError, memo, mergeProps, parseCookieHeader, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, resolveSSRNode, respond, runHydrationEvents, scope, serializeCookie, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, useHead, warmAsset };
+export { ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, HydrationScript, MathMLElements, Namespaces, Portal, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SAFE_ERROR, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, claimElement, claimElementTree, className, clearFlashCookie, clientOnly, commitEventResponse, composeMiddleware, createRequestEvent, createResponseStub, createSSRResponse, delegateEvents, dynamic, dynamicProperty, effect, escape, generateHydrationScript, getDelegatedRoot, getExpectedRedirectStatus, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, getRequestEvent, getServerFunctionMetadata, getServerFunctionRPC, hasFlashCookie, httpHeader, httpStatus, hydrate, insert, installHydrationRuntime, isDev, isHref, isResponseEnvelope, isSafeError, isServer, isServerFunction, markSafeError, memo, parseCookieHeader, patchDriver, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, resolveSSRNode, respond, rowProof, runHydrationEvents, scope, serializeCookie, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, useHead, waitAsset, warmAsset };