@estjs/template 0.0.17-beta.1 → 0.0.17-beta.3

package/dist/template.dev.js

@@ -1,4 +1,4 @@
-import { getActiveScope, runWithScope, onCleanup, __objRest, createScope, disposeScope, __async } from './chunk-R6JICOKI.dev.js';
+import { getActiveScope, runWithScope, onCleanup, __objRest, createScope, disposeScope, __async } from './chunk-PYFF2HI3.dev.js';
 import { normalizeClassName, SPREAD_NAME, isObject, warn, startsWith, isSpecialBooleanAttr, isBooleanAttr, includeBooleanAttr, isSymbol, isString, isArray, kebabCase, camelCase, capitalize, HYDRATION_ANCHOR_ATTR, isBrowser, error, isPromise, isFunction, isOn, coerceArray } from '@estjs/shared';
 import { effect, shallowReactive, isSignal, isComputed, isReactive, signal } from '@estjs/signals';
 
@@ -13,6 +13,14 @@ var SUSPENSE_COMPONENT = /* @__PURE__ */ Symbol("Suspense Component" );
 var FOR_COMPONENT = /* @__PURE__ */ Symbol("For Component" );
 var TRANSITION_COMPONENT = /* @__PURE__ */ Symbol("Transition Component" );
 var TRANSITION_GROUP_COMPONENT = /* @__PURE__ */ Symbol("TransitionGroup Component" );
+var DANGEROUS_DATA_MIME_RE = /^data:\s*(?:text\/html|text\/xml|application\/xhtml\+xml|image\/svg\+xml|application\/xml)/;
+function isUnsafeUrl(value) {
+  const v = value.replaceAll(/[\u0000-\u0020]+/g, "").toLowerCase();
+  if (startsWith(v, "javascript:") || startsWith(v, "vbscript:")) {
+    return true;
+  }
+  return DANGEROUS_DATA_MIME_RE.test(v);
+}
 function patchAttr(el, key, prev, next2) {
   if (key === KEY_PROP) {
     if (next2 == null) {
@@ -94,11 +102,8 @@ function patchAttr(el, key, prev, next2) {
   }
   const attrValue = isSymbol(next2) ? String(next2) : next2;
   const isUrlAttr = lowerKey === "href" || lowerKey === "src" || lowerKey === "xlink:href" || lowerKey === "action" || lowerKey === "formaction" || lowerKey === "poster";
-  if (isUrlAttr && isString(attrValue)) {
-    const v = attrValue.trim().toLowerCase();
-    if (startsWith(v, "javascript:") || startsWith(v, "data:")) {
-      return;
-    }
+  if (isUrlAttr && isString(attrValue) && isUnsafeUrl(attrValue)) {
+    return;
   }
   if (isXlink) {
     el.setAttributeNS(XLINK_NAMESPACE, key, String(attrValue));
@@ -925,6 +930,7 @@ var Component = class {
     for (const key of Object.getOwnPropertyNames(this.reactiveProps)) {
       delete this.reactiveProps[key];
     }
+    this.state = 0 /* INITIAL */;
   }
   /**
    * Apply props that bind to the root DOM element rather than flowing into
@@ -1035,7 +1041,13 @@ function createApp(component, target) {
   const existingContent = container.innerHTML;
   if (existingContent) {
     {
-      warn(`Target element is not empty, it will be cleared: ${target}`);
+      if (container.querySelector("[data-hk]")) {
+        warn(
+          `Target element contains server-rendered markup ([data-hk]); createApp() will discard it and render from scratch. Did you mean to call hydrate()?`
+        );
+      } else {
+        warn(`Target element is not empty, it will be cleared: ${target}`);
+      }
     }
     container.innerHTML = "";
   }
@@ -1056,8 +1068,8 @@ function createApp(component, target) {
   return {
     root: rootNode,
     unmount: () => {
-      disposeScope(scope);
       rootNode == null ? void 0 : rootNode.destroy();
+      disposeScope(scope);
     }
   };
 }
@@ -1089,8 +1101,8 @@ function hydrate(component, target) {
   return {
     root: rootNode,
     unmount: () => {
-      disposeScope(scope);
       rootNode == null ? void 0 : rootNode.destroy();
+      disposeScope(scope);
     }
   };
 }
@@ -1540,11 +1552,6 @@ function tryHydratePortal(props) {
 function isPortal(node) {
   return !!node && !!node[PORTAL_COMPONENT];
 }
-function clearContainer(el) {
-  while (el.firstChild) {
-    el.removeChild(el.firstChild);
-  }
-}
 function resolveNodeValue(value) {
   let current = value;
   while (isFunction(current)) {
@@ -1553,6 +1560,9 @@ function resolveNodeValue(value) {
   if (isSignal(current) || isComputed(current)) {
     return resolveNodeValue(current.value);
   }
+  if (Array.isArray(current)) {
+    return current.map((item) => resolveNodeValue(item));
+  }
   return current;
 }
 var SuspenseContext = /* @__PURE__ */ Symbol("SuspenseContext");
@@ -1561,129 +1571,127 @@ function Suspense(props) {
   if (!isBrowser()) {
     return (_a2 = props.fallback) != null ? _a2 : "";
   }
-  const container = document.createElement("div");
-  container.style.display = "contents";
-  let isMounted = true;
-  let pendingCount = 0;
-  let isShowingFallback = false;
-  let resolvedChildren = null;
-  const materializeChild = (value) => {
-    const current = resolveNodeValue(value);
-    if (isArray(current)) {
-      const nodes = [];
-      for (const item of current) {
-        const materialized = materializeChild(item);
-        if (isArray(materialized)) {
-          nodes.push(...materialized);
-        } else {
-          nodes.push(materialized);
-        }
-      }
-      return nodes;
-    }
-    return normalizeNode(current);
+  const owner = getActiveScope();
+  const start = document.createComment("suspense");
+  const end = document.createComment("/suspense");
+  const frag = document.createDocumentFragment();
+  frag.append(start, end);
+  let mounted = true;
+  let pending = 0;
+  let mounting = false;
+  let contentScope = null;
+  let parked = null;
+  let fallbackScope = null;
+  let resolved = null;
+  const parkContent = () => {
+    const off = document.createDocumentFragment();
+    while (end.previousSibling && end.previousSibling !== start) {
+      off.prepend(end.previousSibling);
+    }
+    parked = off;
   };
-  const insertMaterializedChild = (value) => {
-    const normalized = materializeChild(value);
-    const nodes = isArray(normalized) ? normalized : [normalized];
-    for (const node of nodes) {
-      if (node != null) {
-        insertNode(container, node);
-      }
-    }
+  const restoreContent = () => {
+    var _a3;
+    if (!parked) return;
+    const parent = (_a3 = end.parentNode) != null ? _a3 : frag;
+    while (parked.firstChild) {
+      parent.insertBefore(parked.firstChild, end);
+    }
+    parked = null;
   };
-  const renderFallbackContent = () => {
-    clearContainer(container);
-    if (props.fallback != null) {
-      insertMaterializedChild(props.fallback);
-    }
+  const mountFallback = () => {
+    if (props.fallback == null || fallbackScope) return;
+    fallbackScope = createScope(owner);
+    runWithScope(fallbackScope, () => {
+      var _a3;
+      insert((_a3 = end.parentNode) != null ? _a3 : frag, () => resolveNodeValue(props.fallback), end);
+    });
   };
-  const showFallback = () => {
-    if (isShowingFallback) return;
-    isShowingFallback = true;
-    renderFallbackContent();
+  const disposeFallback = () => {
+    if (!fallbackScope) return;
+    disposeScope(fallbackScope);
+    fallbackScope = null;
   };
-  const showChildren = () => {
-    if (!isShowingFallback) return;
-    const hasContent = resolvedChildren || props.children != null && !isPromise(props.children);
-    if (!hasContent) {
-      return;
-    }
-    isShowingFallback = false;
-    clearContainer(container);
-    if (resolvedChildren) {
-      renderChildren(resolvedChildren);
-    } else if (props.children != null && !isPromise(props.children)) {
-      renderChildren(props.children);
+  const mountContent = (children2) => {
+    mounting = true;
+    contentScope = createScope(owner);
+    runWithScope(contentScope, () => {
+      var _a3;
+      insert((_a3 = end.parentNode) != null ? _a3 : frag, () => resolveNodeValue(children2), end);
+    });
+    mounting = false;
+    if (pending && !parked) {
+      parkContent();
+      mountFallback();
     }
   };
-  const renderChildren = (children2) => {
-    if (isShowingFallback) return;
-    clearContainer(container);
-    if (children2 == null) return;
-    const childArray = isArray(children2) ? children2 : [children2];
-    for (const child2 of childArray) {
-      if (child2 != null) {
-        insertMaterializedChild(child2);
+  const showFallback = () => {
+    if (parked) return;
+    if (mounting) return;
+    parkContent();
+    mountFallback();
+  };
+  const showContent = () => {
+    if (!parked) return;
+    const hasSyncChildren = props.children != null && !isPromise(props.children);
+    if (contentScope == null && resolved == null && !hasSyncChildren) return;
+    disposeFallback();
+    restoreContent();
+    if (!contentScope) {
+      if (resolved) {
+        mountContent(resolved);
+      } else if (hasSyncChildren) {
+        mountContent(props.children);
       }
     }
-    if (isShowingFallback) {
-      renderFallbackContent();
-    }
   };
-  const suspenseContext = {
+  const settle = () => {
+    if (!mounted) return;
+    if (--pending === 0) showContent();
+  };
+  const ctx = {
     register: (promise) => {
-      pendingCount++;
+      pending++;
       showFallback();
-      promise.then(() => {
-        if (!isMounted) return;
-        pendingCount--;
-        if (pendingCount === 0) {
-          showChildren();
-        }
-      }).catch((error4) => {
-        {
-          warn("[Suspense] Resource failed:", error4);
-        }
-        if (!isMounted) return;
-        pendingCount--;
-        if (pendingCount === 0) {
-          showChildren();
-        }
+      promise.then(settle).catch((error4) => {
+        warn("[Suspense] Resource failed:", error4);
+        settle();
       });
     },
     increment: () => {
-      pendingCount++;
+      pending++;
       showFallback();
     },
     decrement: () => {
-      pendingCount = Math.max(0, pendingCount - 1);
-      if (pendingCount === 0) {
-        showChildren();
-      }
+      pending = Math.max(0, pending - 1);
+      if (pending === 0) showContent();
     }
   };
-  provide(SuspenseContext, suspenseContext);
+  provide(SuspenseContext, ctx);
   const children = props.children;
   if (isPromise(children)) {
-    children.then((resolved) => {
-      resolvedChildren = resolved;
+    children.then((value) => {
+      resolved = value;
     }).catch(() => {
     });
-    suspenseContext.register(children);
+    ctx.register(children);
   } else if (children != null) {
-    renderChildren(children);
-  } else {
+    mountContent(children);
+  } else if (props.fallback != null) {
     showFallback();
   }
-  onDestroy(() => {
-    isMounted = false;
-    pendingCount = 0;
-    resolvedChildren = null;
-    clearContainer(container);
-    container.remove();
+  onCleanup(() => {
+    mounted = false;
+    pending = 0;
+    resolved = null;
+    if (contentScope) disposeScope(contentScope);
+    if (fallbackScope) disposeScope(fallbackScope);
+    contentScope = fallbackScope = null;
+    parked = null;
+    start.remove();
+    end.remove();
   });
-  return container;
+  return frag;
 }
 Suspense[SUSPENSE_COMPONENT] = true;
 function isSuspense(node) {
@@ -1757,185 +1765,131 @@ function createResource(fetcher, options) {
 function resolveModule(mod) {
   return isFunction(mod) ? mod : mod.default;
 }
-function renderInto(el, fn, props) {
-  const comp = new Component(fn, props);
-  comp.mount(el);
-  return comp;
+function defineServerAsyncComponent(loader, ssr) {
+  if (ssr === "client-only") {
+    const placeholder = () => "";
+    placeholder.__asyncLoader = loader;
+    placeholder.__asyncResolved = () => null;
+    return placeholder;
+  }
+  let resolved = null;
+  let promise = null;
+  const load = () => promise != null ? promise : promise = loader().then((mod) => {
+    resolved = resolveModule(mod);
+  }).catch(() => {
+  });
+  load();
+  const wrapper = (props) => resolved ? resolved(props) : "";
+  wrapper.__asyncLoader = load;
+  wrapper.__asyncResolved = () => resolved;
+  return wrapper;
 }
-function defineAsyncComponent(loader, options = {}) {
-  const { delay = 200, timeout, ssr = "blocking", onError } = options;
-  if (typeof window === "undefined") {
-    if (ssr === "client-only") {
-      const placeholder = () => "";
-      placeholder.__asyncLoader = loader;
-      placeholder.__asyncResolved = () => null;
-      return placeholder;
-    }
-    let ssrResolved = null;
-    let ssrPromise = null;
-    const ssrLoad = () => {
-      if (ssrPromise) return ssrPromise;
-      ssrPromise = loader().then((mod) => {
-        ssrResolved = resolveModule(mod);
-      }).catch(() => {
-      });
-      return ssrPromise;
-    };
-    ssrLoad();
-    const ssrWrapper = (props) => {
-      if (ssrResolved) {
-        return ssrResolved(props);
-      }
-      return "";
-    };
-    ssrWrapper.__asyncLoader = ssrLoad;
-    ssrWrapper.__asyncResolved = () => ssrResolved;
-    return ssrWrapper;
-  }
-  let cachedComponent = null;
-  let cachedError = null;
-  let cachedStatus = "pending";
+function defineClientAsyncComponent(loader, options) {
+  const { loading, error: errorComp, delay = 200, timeout, onError } = options;
+  let component = null;
+  let error4 = null;
+  let status = "pending";
   let loadPromise = null;
-  function load() {
-    if (loadPromise) return loadPromise;
-    loadPromise = loader().then((mod) => {
-      cachedComponent = resolveModule(mod);
-      cachedStatus = "resolved";
-    }).catch((error4) => {
-      cachedError = error4 instanceof Error ? error4 : new Error(String(error4));
-      cachedStatus = "errored";
-      loadPromise = null;
-    });
-    return loadPromise;
-  }
+  const load = () => loadPromise != null ? loadPromise : loadPromise = loader().then((mod) => {
+    component = resolveModule(mod);
+    status = "resolved";
+  }).catch((error_) => {
+    error4 = error_ instanceof Error ? error_ : new Error(String(error_));
+    status = "errored";
+    loadPromise = null;
+  });
   load();
   function AsyncWrapper(props) {
     var _a2;
-    if (cachedStatus === "resolved" && cachedComponent) {
-      const el = document.createElement("div");
-      el.style.display = "contents";
-      const comp = renderInto(el, cachedComponent, props);
-      onCleanup(() => comp.destroy());
-      return el;
-    }
-    if (cachedStatus === "errored" && cachedError) {
-      const el = document.createElement("div");
-      el.style.display = "contents";
-      if (options.error) {
-        let alive2 = true;
-        let currentComp2 = null;
-        const swap2 = (fn, swapProps) => {
-          if (!alive2) return;
-          currentComp2 == null ? void 0 : currentComp2.destroy();
-          currentComp2 = renderInto(el, fn, swapProps);
-        };
-        const retry = () => {
-          loadPromise = null;
-          cachedStatus = "pending";
-          cachedError = null;
-          if (options.loading) swap2(options.loading);
-          load().then(() => {
-            if (!alive2) return;
-            if (cachedStatus === "resolved" && cachedComponent) {
-              swap2(cachedComponent, props);
-            } else if (cachedStatus === "errored" && cachedError) {
-              if (options.error) swap2(options.error, { error: cachedError, retry });
-            }
-          });
-        };
-        swap2(options.error, { error: cachedError, retry });
-        onDestroy(() => {
-          alive2 = false;
-          currentComp2 == null ? void 0 : currentComp2.destroy();
-          currentComp2 = null;
-        });
-      }
-      return el;
-    }
-    const container = document.createElement("div");
-    container.style.display = "contents";
+    const owner = getActiveScope();
+    const end = document.createComment("async");
+    const frag = document.createDocumentFragment();
+    frag.appendChild(end);
     let alive = true;
-    let currentComp = null;
+    let viewScope = null;
     let delayTimer = null;
     let timeoutTimer = null;
-    const swap = (fn, swapProps) => {
-      if (!alive) return;
-      currentComp == null ? void 0 : currentComp.destroy();
-      currentComp = renderInto(container, fn, swapProps);
+    const clearTimers = () => {
+      if (delayTimer != null) clearTimeout(delayTimer);
+      if (timeoutTimer != null) clearTimeout(timeoutTimer);
+      delayTimer = timeoutTimer = null;
     };
-    const retryWith = (retryProps) => () => {
-      loadPromise = null;
-      cachedStatus = "pending";
-      cachedError = null;
-      if (options.loading) swap(options.loading);
-      load().then(() => {
-        if (cachedStatus === "resolved" && cachedComponent) {
-          swap(cachedComponent, retryProps);
-        } else if (cachedStatus === "errored" && cachedError) {
-          if (options.error) {
-            swap(options.error, {
-              error: cachedError,
-              retry: retryWith(retryProps)
-            });
-          }
-        }
+    const render = (fn, fnProps) => {
+      if (!alive) return;
+      if (owner && owner.isDestroyed) return;
+      if (viewScope) {
+        disposeScope(viewScope);
+        viewScope = null;
+      }
+      if (!fn) return;
+      viewScope = createScope(owner);
+      runWithScope(viewScope, () => {
+        var _a3;
+        insert((_a3 = end.parentNode) != null ? _a3 : frag, () => new Component(fn, fnProps), end);
       });
     };
     onDestroy(() => {
       alive = false;
-      currentComp == null ? void 0 : currentComp.destroy();
-      currentComp = null;
-      if (delayTimer != null) clearTimeout(delayTimer);
-      if (timeoutTimer != null) clearTimeout(timeoutTimer);
+      clearTimers();
+      if (viewScope) {
+        disposeScope(viewScope);
+        viewScope = null;
+      }
+      end.remove();
     });
-    const suspenseCtx = (_a2 = inject(SuspenseContext)) != null ? _a2 : null;
-    const showResolved = (compFn) => swap(compFn, props);
-    const showError = (err) => {
-      if (options.error) swap(options.error, { error: err, retry: retryWith(props) });
-    };
-    const showLoading = () => {
-      if (options.loading) swap(options.loading);
+    const retryWith = (retryProps) => () => {
+      loadPromise = null;
+      status = "pending";
+      error4 = null;
+      if (loading) render(loading);
+      load().then(() => settle(retryProps));
     };
-    const instancePromise = load().then(() => {
+    const settle = (renderProps) => {
       if (!alive) return;
-      if (cachedStatus === "resolved" && cachedComponent) {
-        showResolved(cachedComponent);
-      } else if (cachedStatus === "errored" && cachedError) {
-        showError(cachedError);
-        if (onError) onError(cachedError, retryWith(props));
+      clearTimers();
+      if (status === "resolved" && component) {
+        render(component, renderProps);
+      } else if (status === "errored" && error4) {
+        if (errorComp) render(errorComp, { error: error4, retry: retryWith(renderProps) });
+        if (onError) onError(error4, retryWith(renderProps));
       }
-      if (delayTimer != null) clearTimeout(delayTimer);
-      if (timeoutTimer != null) clearTimeout(timeoutTimer);
-    });
-    if (suspenseCtx) {
-      suspenseCtx.register(instancePromise);
+    };
+    if (status === "resolved" && component) {
+      render(component, props);
+      return frag;
     }
+    if (status === "errored" && error4) {
+      if (errorComp) render(errorComp, { error: error4, retry: retryWith(props) });
+      return frag;
+    }
+    const pending = load().then(() => settle(props));
+    (_a2 = inject(SuspenseContext)) == null ? void 0 : _a2.register(pending);
     if (delay > 0) {
       delayTimer = setTimeout(() => {
-        if (alive && cachedStatus === "pending") {
-          showLoading();
-        }
+        if (alive && status === "pending" && loading) render(loading);
       }, delay);
-    } else if (options.loading) {
-      showLoading();
+    } else if (loading) {
+      render(loading);
     }
     if (timeout != null) {
       timeoutTimer = setTimeout(() => {
-        if (alive && cachedStatus === "pending") {
-          const err = new Error(`[defineAsyncComponent] Timeout after ${timeout}ms`);
-          cachedError = err;
-          cachedStatus = "errored";
-          showError(err);
-          if (onError) onError(err, retryWith(props));
-        }
+        if (!alive || status !== "pending") return;
+        error4 = new Error(`[defineAsyncComponent] Timeout after ${timeout}ms`);
+        status = "errored";
+        if (errorComp) render(errorComp, { error: error4, retry: retryWith(props) });
+        if (onError) onError(error4, retryWith(props));
       }, timeout);
     }
-    return container;
+    return frag;
   }
   AsyncWrapper.__asyncLoader = load;
-  AsyncWrapper.__asyncResolved = () => cachedComponent;
+  AsyncWrapper.__asyncResolved = () => component;
   return AsyncWrapper;
 }
+function defineAsyncComponent(loader, options = {}) {
+  var _a2;
+  return typeof window === "undefined" ? defineServerAsyncComponent(loader, (_a2 = options.ssr) != null ? _a2 : "blocking") : defineClientAsyncComponent(loader, options);
+}
 function For(props) {
   const fragment = document.createDocumentFragment();
   const marker = document.createComment("");
@@ -1978,14 +1932,14 @@ function For(props) {
   };
   const clearFallback = () => {
     for (const node of fallbackNodes) {
-      if (node.parentNode) {
-        node.parentNode.removeChild(node);
-      }
+      removeNode(node);
     }
     fallbackNodes = [];
   };
+  const ownerScope = getActiveScope();
   const renderItem = (item, index, parent, before, key = getKey(item, index)) => {
-    const parentScope = getActiveScope();
+    var _a2;
+    const parentScope = (_a2 = getActiveScope()) != null ? _a2 : ownerScope;
     const scope = createScope(parentScope);
     let mountedNodes = [];
     runWithScope(scope, () => {