olova 2.0.67 → 2.0.68

package/dist/runtime.js

@@ -1,9 +1,180 @@
-import { effect as effect$1 } from '@preact/signals-core';
+import { signal, effect as effect$1 } from '@preact/signals-core';
 
 // core/signals-core.ts
+var rawToProxyByOwner = /* @__PURE__ */ new WeakMap();
+var proxyToRaw = /* @__PURE__ */ new WeakMap();
+var proxyOwner = /* @__PURE__ */ new WeakMap();
 var hmrCaptureStack = [];
-function effect(fn, options) {
-  const stop = effect$1(() => fn());
+var runtimeErrorHandlerStack = [];
+function isObject(value) {
+  return typeof value === "object" && value !== null;
+}
+function unwrapValue(value) {
+  if (!isObject(value)) {
+    return value;
+  }
+  return proxyToRaw.get(value) ?? value;
+}
+var Signal = class {
+  source;
+  version;
+  proxy = null;
+  constructor(initial, source, version) {
+    this.source = source ?? signal(initial);
+    this.version = version ?? signal(0);
+  }
+  get value() {
+    this.version.value;
+    return this.getReactiveValue(this.source.value);
+  }
+  set value(next) {
+    const resolvedNext = unwrapValue(next);
+    if (Object.is(this.source.peek(), resolvedNext)) {
+      return;
+    }
+    this.proxy = null;
+    this.source.value = resolvedNext;
+  }
+  peek() {
+    return this.source.peek();
+  }
+  notify() {
+    this.version.value = this.version.peek() + 1;
+  }
+  peekVersion() {
+    return this.version.peek();
+  }
+  subscribe(fn) {
+    return this.source.subscribe(fn);
+  }
+  valueOf() {
+    return this.value;
+  }
+  toString() {
+    return String(this.value);
+  }
+  toJSON() {
+    return this.peek();
+  }
+  getReactiveValue(value) {
+    if (!isObject(value)) {
+      return value;
+    }
+    if (this.proxy && proxyToRaw.get(this.proxy) === value) {
+      return this.proxy;
+    }
+    this.proxy = this.wrapObject(value);
+    return this.proxy;
+  }
+  wrapObject(value) {
+    const ownedProxyMap = rawToProxyByOwner.get(value);
+    const existing = ownedProxyMap?.get(this);
+    if (existing) {
+      return existing;
+    }
+    const proxy = new Proxy(value, {
+      get: (target, key, receiver) => {
+        const result = Reflect.get(target, key, receiver);
+        return isObject(result) ? this.wrapNested(result) : result;
+      },
+      set: (target, key, next, receiver) => {
+        const resolvedNext = unwrapValue(next);
+        const previous = Reflect.get(target, key, receiver);
+        const changed = Reflect.set(target, key, resolvedNext, receiver);
+        if (changed && !Object.is(previous, resolvedNext)) {
+          this.notify();
+        }
+        return changed;
+      },
+      deleteProperty: (target, key) => {
+        const hadKey = Reflect.has(target, key);
+        const changed = Reflect.deleteProperty(target, key);
+        if (hadKey && changed) {
+          this.notify();
+        }
+        return changed;
+      }
+    });
+    const nextOwnedProxyMap = ownedProxyMap ?? /* @__PURE__ */ new WeakMap();
+    nextOwnedProxyMap.set(this, proxy);
+    if (!ownedProxyMap) {
+      rawToProxyByOwner.set(value, nextOwnedProxyMap);
+    }
+    proxyToRaw.set(proxy, value);
+    proxyOwner.set(proxy, this);
+    return proxy;
+  }
+  wrapNested(value) {
+    const owner = proxyOwner.get(value);
+    if (owner === this) {
+      return value;
+    }
+    return this.wrapObject(value);
+  }
+};
+function state(initial, hmrKey) {
+  const frame = hmrCaptureStack[hmrCaptureStack.length - 1];
+  let nextInitial = initial;
+  if (frame) {
+    if (frame.cursor < frame.restoredUnkeyed.length) {
+      nextInitial = frame.restoredUnkeyed[frame.cursor];
+    }
+  }
+  const signal = new Signal(nextInitial);
+  if (frame) {
+    frame.created.push({ key: hmrKey, signal });
+    {
+      frame.cursor += 1;
+    }
+  }
+  return signal;
+}
+function getReactiveProxyVersion(value) {
+  if (!isObject(value)) {
+    return null;
+  }
+  const owner = proxyOwner.get(value);
+  return owner ? owner.peekVersion() : null;
+}
+function reportRuntimeError(error, handler) {
+  if (handler) {
+    handler(error);
+    return;
+  }
+  throw error;
+}
+function withRuntimeErrorHandler(handler, fn) {
+  if (!handler) {
+    return fn();
+  }
+  runtimeErrorHandlerStack.push(handler);
+  try {
+    return fn();
+  } finally {
+    runtimeErrorHandlerStack.pop();
+  }
+}
+function effect(fn) {
+  const handler = runtimeErrorHandlerStack[runtimeErrorHandlerStack.length - 1] ?? null;
+  const stop = effect$1(
+    () => withRuntimeErrorHandler(handler, () => {
+      try {
+        const cleanup = fn();
+        if (typeof cleanup !== "function") {
+          return;
+        }
+        return () => withRuntimeErrorHandler(handler, () => {
+          try {
+            cleanup();
+          } catch (error) {
+            reportRuntimeError(error, handler);
+          }
+        });
+      } catch (error) {
+        reportRuntimeError(error, handler);
+      }
+    })
+  );
   return () => stop();
 }
 function beginHmrStateCapture(restoredValues) {
@@ -32,6 +203,40 @@ function endHmrStateCapture() {
 // runtime/component.ts
 var EMPTY_SLOTS = Object.freeze({});
 var currentSetupContext = null;
+var currentLifecycleHooks = null;
+var ERROR_BOUNDARY = /* @__PURE__ */ Symbol("olova.error-boundary");
+var SUSPENSE_BOUNDARY = /* @__PURE__ */ Symbol("olova.suspense-boundary");
+function isPromiseLike(value) {
+  return !!value && typeof value === "object" && "then" in value;
+}
+function toOlovaError(error, context) {
+  if (error instanceof Error && error.message.startsWith("[olova]")) {
+    return error;
+  }
+  const original = error instanceof Error ? error : new Error(String(error));
+  const wrapped = new Error(`[olova] ${context}: ${original.message}`);
+  wrapped.cause = error;
+  return wrapped;
+}
+function getBoundaryHandler(context) {
+  return context?.get(ERROR_BOUNDARY) ?? null;
+}
+function handleRuntimeError(error, contextMessage, context) {
+  const normalized = toOlovaError(error, contextMessage);
+  const boundaryHandler = getBoundaryHandler(context);
+  if (boundaryHandler) {
+    boundaryHandler(normalized);
+    return;
+  }
+  throw normalized;
+}
+function runWithRuntimeErrorHandler(context, action, fn) {
+  try {
+    return withRuntimeErrorHandler(getBoundaryHandler(context), fn);
+  } catch (error) {
+    return handleRuntimeError(error, action, context);
+  }
+}
 function requireSetupContext(apiName) {
   if (!currentSetupContext) {
     throw new Error(
@@ -90,12 +295,12 @@ function sanitizeHtml(html) {
     }
     for (const attr of Array.from(element.attributes)) {
       const attrName = attr.name.toLowerCase();
-      const attrValue = attr.value.trim().toLowerCase();
+      const attrValue = attr.value.trim();
       if (attrName.startsWith("on")) {
         element.removeAttribute(attr.name);
         continue;
       }
-      if ((attrName === "href" || attrName === "src" || attrName === "xlink:href") && attrValue.startsWith("javascript:")) {
+      if ((attrName === "href" || attrName === "src" || attrName === "xlink:href") && !isSafeUrl(attrName, attrValue)) {
         element.removeAttribute(attr.name);
       }
     }
@@ -114,7 +319,27 @@ function toHtml(value) {
   }
   return sanitizeHtml(String(value));
 }
-function shallowEqual(a, b) {
+var SAFE_URL_PROTOCOLS = /* @__PURE__ */ new Set(["http", "https", "mailto", "tel"]);
+var SAFE_IMAGE_DATA_URL_RE = /^data:image\/(?:png|gif|jpe?g|webp|avif|bmp);(?:charset=[^;,]+;)?base64,[a-z0-9+/=\s]+$/i;
+function isSafeUrl(attrName, value) {
+  const normalized = value.replace(/[\u0000-\u001F\u007F\s]+/g, "");
+  if (!normalized) {
+    return true;
+  }
+  if (normalized.startsWith("#") || normalized.startsWith("/") || normalized.startsWith("./") || normalized.startsWith("../") || normalized.startsWith("?")) {
+    return true;
+  }
+  const match = normalized.match(/^([a-z0-9+.-]+):/i);
+  if (!match) {
+    return true;
+  }
+  const protocol = match[1].toLowerCase();
+  if (SAFE_URL_PROTOCOLS.has(protocol)) {
+    return true;
+  }
+  return protocol === "data" && attrName === "src" && SAFE_IMAGE_DATA_URL_RE.test(normalized);
+}
+function shallowEqualSlots(a, b) {
   if (a === b) {
     return true;
   }
@@ -133,20 +358,39 @@ function shallowEqual(a, b) {
   }
   return true;
 }
-function shallowEqualSlots(a, b) {
-  if (a === b) {
+function createComparablePropsSnapshot(props) {
+  return Object.fromEntries(
+    Object.entries(props).map(([key, value]) => [
+      key,
+      {
+        value,
+        reactiveVersion: getReactiveProxyVersion(value)
+      }
+    ])
+  );
+}
+function shallowComparablePropsEqual(snapshot, props) {
+  if (!snapshot && !props) {
     return true;
   }
-  if (!a || !b) {
+  if (!snapshot || !props) {
     return false;
   }
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-  if (aKeys.length !== bKeys.length) {
+  const keys = Object.keys(snapshot);
+  const propKeys = Object.keys(props);
+  if (keys.length !== propKeys.length) {
     return false;
   }
-  for (const key of aKeys) {
-    if (!Object.is(a[key], b[key])) {
+  for (const key of keys) {
+    if (!(key in props)) {
+      return false;
+    }
+    const entry = snapshot[key];
+    const nextValue = props[key];
+    if (!Object.is(entry.value, nextValue)) {
+      return false;
+    }
+    if (entry.reactiveVersion !== getReactiveProxyVersion(nextValue)) {
       return false;
     }
   }
@@ -179,7 +423,7 @@ function bindJsxEventsInRange(range) {
   const listeners = [];
   const handlerIds = /* @__PURE__ */ new Set();
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
-  let current = walker.currentNode;
+  let current = walker.nextNode();
   while (current) {
     let intersects = false;
     try {
@@ -299,6 +543,42 @@ function createRangeAtTokenWithinRange(hostRange, token) {
 function resolveTokenRange(target, token) {
   return target instanceof HTMLElement ? createRangeAtToken(target, token) : createRangeAtTokenWithinRange(target, token);
 }
+function createLifecycleHooks() {
+  return {
+    mount: [],
+    cleanup: []
+  };
+}
+function flushLifecycleHooks(hooks, context) {
+  for (const mountHook of hooks.mount) {
+    const cleanup = runWithRuntimeErrorHandler(
+      context,
+      "Failed to run onMount() callback",
+      mountHook
+    );
+    if (typeof cleanup === "function") {
+      hooks.cleanup.push(cleanup);
+    }
+  }
+  return () => {
+    for (let index = hooks.cleanup.length - 1; index >= 0; index -= 1) {
+      runWithRuntimeErrorHandler(
+        context,
+        "Failed to run cleanup callback",
+        hooks.cleanup[index]
+      );
+    }
+  };
+}
+function createDescriptorEffect(context, fn) {
+  const stop = runWithRuntimeErrorHandler(
+    context,
+    "Failed to create reactive binding",
+    () => effect(fn)
+  );
+  return typeof stop === "function" ? stop : () => {
+  };
+}
 function mountDescriptor(descriptor, target, slots, context) {
   let fragment;
   let nodes = null;
@@ -318,7 +598,7 @@ function mountDescriptor(descriptor, target, slots, context) {
     if (!textNode) {
       continue;
     }
-    const stop = effect(() => {
+    const stop = createDescriptorEffect(context, () => {
       textNode.data = toText(binding.get());
     });
     cleanups.push(stop);
@@ -329,7 +609,7 @@ function mountDescriptor(descriptor, target, slots, context) {
       (element) => element.getAttribute(binding.attr) === token
     );
     for (const element of elements) {
-      const stop = effect(() => {
+      const stop = createDescriptorEffect(context, () => {
         const next = binding.attr === "class" ? normalizeClassValue(binding.get()) : toAttr(binding.get());
         if (next === null) {
           element.removeAttribute(binding.attr);
@@ -348,7 +628,7 @@ function mountDescriptor(descriptor, target, slots, context) {
     }
     if (!nodes) element.removeAttribute(`data-o-on-${binding.event}`);
     let currentHandler;
-    const stop = effect(() => {
+    const stop = createDescriptorEffect(context, () => {
       currentHandler = binding.get();
     });
     const listener = (event) => {
@@ -384,7 +664,7 @@ function mountDescriptor(descriptor, target, slots, context) {
     let lastHtml = "__OLOVA_INIT__";
     let cleanupJsxEvents = () => {
     };
-    const stop = effect(() => {
+    const stop = createDescriptorEffect(context, () => {
       const nextHtml = toHtml(binding.get());
       if (nextHtml === lastHtml) {
         return;
@@ -420,7 +700,15 @@ function mountDescriptor(descriptor, target, slots, context) {
       range.deleteContents();
       continue;
     }
-    const slotDescriptor = slotFactory();
+    const slotDescriptor = runWithRuntimeErrorHandler(
+      context,
+      `Failed to render slot "${binding.name}"`,
+      slotFactory
+    );
+    if (!slotDescriptor) {
+      range.deleteContents();
+      continue;
+    }
     const disposeSlot = mountDescriptor(slotDescriptor, range, slots, context);
     cleanups.push(disposeSlot);
   }
@@ -443,17 +731,17 @@ function mountDescriptor(descriptor, target, slots, context) {
     let lastComponent = null;
     let lastProps;
     let lastSlots;
-    const stop = effect(() => {
+    const stop = createDescriptorEffect(context, () => {
       const nextComponent = binding.getComponent();
       const nextProps = binding.getProps();
       const nextSlots = binding.getSlots ? binding.getSlots() : EMPTY_SLOTS;
-      if (lastComponent === nextComponent && shallowEqual(lastProps, nextProps) && shallowEqualSlots(lastSlots, nextSlots)) {
+      if (lastComponent === nextComponent && shallowComparablePropsEqual(lastProps, nextProps) && shallowEqualSlots(lastSlots, nextSlots)) {
         return;
       }
       disposeChild();
       disposeChild = mount(nextComponent, range, nextProps, nextSlots, context);
       lastComponent = nextComponent;
-      lastProps = { ...nextProps };
+      lastProps = createComparablePropsSnapshot(nextProps);
       lastSlots = nextSlots;
     });
     cleanups.push(() => {
@@ -479,17 +767,39 @@ function mountDescriptor(descriptor, target, slots, context) {
       let disposeBranch = () => {
       };
       let lastCondition = void 0;
-      const stop = effect(() => {
+      const stop = createDescriptorEffect(context, () => {
         const condition = !!binding.get();
         if (condition === lastCondition) {
           return;
         }
         disposeBranch();
         if (condition) {
-          const branchDescriptor = binding.trueBranch();
+          const branchDescriptor = runWithRuntimeErrorHandler(
+            context,
+            "Failed to render conditional branch",
+            binding.trueBranch
+          );
+          if (!branchDescriptor) {
+            range.deleteContents();
+            disposeBranch = () => {
+            };
+            lastCondition = condition;
+            return;
+          }
           disposeBranch = mountDescriptor(branchDescriptor, range, slots, context);
         } else if (binding.falseBranch) {
-          const branchDescriptor = binding.falseBranch();
+          const branchDescriptor = runWithRuntimeErrorHandler(
+            context,
+            "Failed to render conditional fallback branch",
+            binding.falseBranch
+          );
+          if (!branchDescriptor) {
+            range.deleteContents();
+            disposeBranch = () => {
+            };
+            lastCondition = condition;
+            return;
+          }
           disposeBranch = mountDescriptor(branchDescriptor, range, slots, context);
         } else {
           range.deleteContents();
@@ -525,22 +835,69 @@ function unregisterMountedInstance(instance) {
 function renderMountedInstance(instance, restoredValues) {
   const context = new Map(instance.parentContext ?? []);
   const previousContext = currentSetupContext;
+  const previousLifecycleHooks = currentLifecycleHooks;
+  const lifecycleHooks = createLifecycleHooks();
   currentSetupContext = context;
+  currentLifecycleHooks = lifecycleHooks;
   beginHmrStateCapture(restoredValues);
-  try {
-    const descriptor = instance.component.setup(instance.props, instance.slots);
-    instance.disposeDescriptor = mountDescriptor(
+  const finalizeRender = (descriptor) => {
+    const disposeDescriptor = mountDescriptor(
       descriptor,
       instance.target,
       instance.slots,
       context
     );
+    const disposeLifecycle = flushLifecycleHooks(lifecycleHooks, context);
+    instance.disposeDescriptor = () => {
+      disposeLifecycle();
+      disposeDescriptor();
+    };
+  };
+  try {
+    const descriptor = runWithRuntimeErrorHandler(
+      context,
+      "Failed to render component setup",
+      () => instance.component.setup(instance.props, instance.slots)
+    );
+    if (!descriptor) {
+      instance.disposeDescriptor = () => {
+      };
+      instance.hmrSignals = endHmrStateCapture();
+      return;
+    }
+    if (isPromiseLike(descriptor)) {
+      const suspenseBoundary = context.get(SUSPENSE_BOUNDARY);
+      const settleSuspense = suspenseBoundary?.begin() ?? (() => {
+      });
+      let disposed = false;
+      instance.disposeDescriptor = () => {
+        disposed = true;
+        settleSuspense();
+      };
+      instance.hmrSignals = endHmrStateCapture();
+      descriptor.then((resolvedDescriptor) => {
+        if (disposed) {
+          return;
+        }
+        settleSuspense();
+        finalizeRender(resolvedDescriptor);
+      }).catch((error) => {
+        settleSuspense();
+        if (disposed) {
+          return;
+        }
+        handleRuntimeError(error, "Failed to resolve async component", context);
+      });
+      return;
+    }
+    finalizeRender(descriptor);
     instance.hmrSignals = endHmrStateCapture();
   } catch (error) {
     endHmrStateCapture();
     throw error;
   } finally {
     currentSetupContext = previousContext;
+    currentLifecycleHooks = previousLifecycleHooks;
   }
 }
 function collectHmrSignalValues(instance) {
@@ -584,6 +941,124 @@ function replaceComponent(current, next) {
 function defineComponent(setup, hmrId) {
   return { setup, __hmrId: hmrId };
 }
+function isOlovaComponent(value) {
+  return typeof value === "object" && value !== null && "setup" in value;
+}
+function onMount(fn) {
+  if (!currentLifecycleHooks) {
+    throw new Error("[olova] onMount() can only be used during component setup.");
+  }
+  currentLifecycleHooks.mount.push(fn);
+}
+function onCleanup(fn) {
+  if (!currentLifecycleHooks) {
+    throw new Error("[olova] onCleanup() can only be used during component setup.");
+  }
+  currentLifecycleHooks.cleanup.push(fn);
+}
+function createErrorBoundary(component, fallback) {
+  return defineComponent((props, slots) => {
+    const errorState = state(null);
+    setContext(ERROR_BOUNDARY, (error) => {
+      errorState.value = error;
+    });
+    const renderFallback = () => {
+      const error = errorState.value ?? new Error("[olova] Unknown boundary error.");
+      if (isOlovaComponent(fallback)) {
+        return {
+          template: "__O_COMP_boundary_fallback__",
+          textBindings: [],
+          htmlBindings: [],
+          attrBindings: [],
+          eventBindings: [],
+          slotBindings: [],
+          componentBindings: [
+            {
+              id: "boundary_fallback",
+              getComponent: () => fallback,
+              getProps: () => ({ error })
+            }
+          ],
+          ifBindings: []
+        };
+      }
+      return fallback(error);
+    };
+    return {
+      template: "__O_IF_boundary__",
+      textBindings: [],
+      htmlBindings: [],
+      attrBindings: [],
+      eventBindings: [],
+      slotBindings: [],
+      componentBindings: [],
+      ifBindings: [
+        {
+          id: "boundary",
+          get: () => errorState.value === null,
+          trueBranch: () => ({
+            template: "__O_COMP_boundary_child__",
+            textBindings: [],
+            htmlBindings: [],
+            attrBindings: [],
+            eventBindings: [],
+            slotBindings: [],
+            componentBindings: [
+              {
+                id: "boundary_child",
+                getComponent: () => component,
+                getProps: () => props,
+                getSlots: () => slots
+              }
+            ],
+            ifBindings: []
+          }),
+          falseBranch: renderFallback
+        }
+      ]
+    };
+  }, component.__hmrId ? `${component.__hmrId}:boundary` : void 0);
+}
+var Suspense = defineComponent((_props, slots) => {
+  const pending = state(0);
+  setContext(SUSPENSE_BOUNDARY, {
+    begin() {
+      pending.value += 1;
+      let settled = false;
+      return () => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        pending.value = Math.max(0, pending.value - 1);
+      };
+    }
+  });
+  return {
+    template: `<div style="__O_ATTR_default_style__">__O_SLOT_default__</div><div style="__O_ATTR_fallback_style__">__O_SLOT_fallback__</div>`,
+    textBindings: [],
+    htmlBindings: [],
+    attrBindings: [
+      {
+        id: "default_style",
+        attr: "style",
+        get: () => pending.value === 0 ? null : "display:none"
+      },
+      {
+        id: "fallback_style",
+        attr: "style",
+        get: () => pending.value > 0 ? null : "display:none"
+      }
+    ],
+    eventBindings: [],
+    slotBindings: [
+      { id: "default", name: "default" },
+      { id: "fallback", name: "fallback" }
+    ],
+    componentBindings: [],
+    ifBindings: []
+  };
+});
 function dangerouslySetHtml(value) {
   return {
     __dangerousHtml: true,
@@ -615,7 +1090,12 @@ function mount(component, target, props = {}, slots = EMPTY_SLOTS, parentContext
     hmrSignals: []
   };
   registerMountedInstance(instance);
-  renderMountedInstance(instance);
+  try {
+    renderMountedInstance(instance);
+  } catch (error) {
+    unregisterMountedInstance(instance);
+    throw toOlovaError(error, "Failed to mount component");
+  }
   return () => {
     unregisterMountedInstance(instance);
     instance.disposeDescriptor();
@@ -626,13 +1106,13 @@ function createApp(root) {
     mount(target) {
       const element = typeof target === "string" ? document.querySelector(target) : target;
       if (!element) {
-        throw new Error(`Target not found: ${String(target)}`);
+        throw new Error(`[olova] Target not found: ${String(target)}`);
       }
       return mount(root, element);
     }
   };
 }
 
-export { createApp, dangerouslySetHtml, defineComponent, getContext, hasContext, mount, replaceComponent, setContext };
+export { Suspense, createApp, createErrorBoundary, dangerouslySetHtml, defineComponent, getContext, hasContext, mount, onCleanup, onMount, replaceComponent, setContext };
 //# sourceMappingURL=runtime.js.map
 //# sourceMappingURL=runtime.js.map