@getforma/core 0.3.1 → 0.6.1

package/README.md

@@ -18,6 +18,41 @@ Or use the CDN (no build step required):
 <script src="https://unpkg.com/@getforma/core/dist/formajs-runtime.global.js"></script>
 ```
 
+### Getting Started with a Bundler
+
+After `npm install`, you need a bundler to resolve the ES module imports. Here's a minimal Vite setup:
+
+```bash
+npm install @getforma/core
+npm install -D vite
+```
+
+```html
+<!-- index.html -->
+<div id="app"></div>
+<script type="module" src="./main.ts"></script>
+```
+
+```typescript
+// main.ts
+import { createSignal, h, mount } from '@getforma/core';
+
+const [count, setCount] = createSignal(0);
+
+mount(() =>
+  h('button', { onClick: () => setCount(count() + 1) },
+    () => `Clicked ${count()} times`
+  ),
+  '#app'
+);
+```
+
+```bash
+npx vite
+```
+
+For **esbuild**, **tsup**, or other bundlers — no special config is needed. FormaJS ships standard ESM and CJS via `package.json` exports.
+
 ## Why FormaJS?
 
 Most UI libraries make you choose: simple but limited (Alpine, htmx), or powerful but complex (React, Vue, Svelte). FormaJS gives you a single reactive core that scales from a CDN script tag to a full-stack Rust SSR pipeline.
@@ -65,6 +100,8 @@ Drop a script tag, write `data-*` attributes. Zero config, zero tooling.
 | `data-persist` | Persist state to localStorage | `data-persist="{count}"` |
 | `data-fetch` | Fetch data from URL | `data-fetch="GET /api/items → items"` |
 | `data-transition:*` | Enter/leave CSS transitions | `data-transition:enter="fade-in"` |
+| `$el` | Reference to the current DOM element | `data-on:click="{$el.classList.toggle('active')}"` |
+| `$dispatch` | Fire a CustomEvent (bubbles, crosses Shadow DOM) | `data-on:click="{$dispatch('selected', {id: itemId})}"` |
 
 CSP-safe expression parser — no `eval()` or `new Function()` by default. For strict CSP environments, use the hardened build:
 
@@ -125,15 +162,14 @@ mount(() => <Counter />, '#app');
 
 ## CDN Usage
 
-### Standard (recommended)
-```html
-<script src="https://unpkg.com/@getforma/core/dist/forma-runtime.js"></script>
-```
+Both long and short filenames are provided. They are identical files — use whichever you prefer:
 
-### CSP-Safe (strict Content-Security-Policy)
-```html
-<script src="https://unpkg.com/@getforma/core/dist/forma-runtime-csp.js"></script>
-```
+| Build | URL |
+|-------|-----|
+| **Standard** (recommended) | `unpkg.com/@getforma/core/dist/formajs-runtime.global.js` |
+| Standard (short alias) | `unpkg.com/@getforma/core/dist/forma-runtime.js` |
+| **CSP-safe** (no `new Function`) | `unpkg.com/@getforma/core/dist/formajs-runtime-hardened.global.js` |
+| CSP-safe (short alias) | `unpkg.com/@getforma/core/dist/forma-runtime-csp.js` |
 
 > The CSP build uses a hand-written expression parser and never calls `new Function`.
 > It supports most common patterns. See [examples/csp](./examples/csp) for a working demo.
@@ -231,6 +267,60 @@ const Timer = defineComponent(() => {
 document.body.appendChild(Timer());
 ```
 
+#### Lifecycle: `onMount` vs `onUnmount`
+
+- **`onMount(fn)`** — runs after the component's DOM is created. If `fn` returns a function, that function is automatically registered as an unmount callback.
+- **`onUnmount(fn)`** — explicitly registers a cleanup function that runs when the component is disposed.
+
+Both mechanisms feed into the same cleanup queue — the `onMount` return shorthand is convenience for the common pattern of setting up and tearing down in one place:
+
+```typescript
+// These are equivalent:
+onMount(() => {
+  const id = setInterval(tick, 1000);
+  return () => clearInterval(id);
+});
+
+// vs.
+onMount(() => {
+  const id = setInterval(tick, 1000);
+  onUnmount(() => clearInterval(id));
+});
+```
+
+### Error Handling
+
+**`mount()` fails fast.** If the container selector doesn't match any element, it throws:
+
+```typescript
+mount(() => h('p', null, 'hello'), '#nonexistent');
+// Error: mount: container not found — "#nonexistent"
+```
+
+**Global error handler.** Register a handler for errors in effects and lifecycle callbacks:
+
+```typescript
+import { onError } from '@getforma/core';
+
+onError((error, info) => {
+  console.error(`[${info?.source}]`, error);
+});
+```
+
+**Error boundaries.** Catch rendering errors and display fallback UI with a retry option:
+
+```typescript
+import { createErrorBoundary, h } from '@getforma/core';
+
+createErrorBoundary(
+  () => h(UnstableComponent),
+  (error, retry) => h('div', null,
+    h('p', null, `Something went wrong: ${error.message}`),
+    h('button', { onClick: retry }, 'Retry'),
+  ),
+);
+```
+
 ### Context (Dependency Injection)
 
 ```typescript
@@ -244,27 +334,70 @@ const theme = inject(ThemeCtx); // 'dark'
 
 ## Islands Architecture
 
-For server-rendered HTML, activate independent interactive regions:
+For server-rendered HTML, activate independent interactive regions. Each island callback receives the root DOM element and parsed props, then returns a component tree — the same `h()` calls you'd use for client-side rendering. The hydration system walks the descriptor tree against the existing SSR DOM, attaching event handlers and reactive bindings without recreating elements.
 
 ```typescript
 import { activateIslands, createSignal, h } from '@getforma/core';
 
 activateIslands({
   Counter: (el, props) => {
-    const [count, setCount] = createSignal(props.initial ?? 0);
-    // Hydrate: attach reactivity to existing server-rendered DOM
+    const [count, setCount] = createSignal(props?.initial ?? 0);
+
+    // el is the island's root HTMLElement — useful for layout measurement,
+    // focus management, CSS classes, or reading extra data-* attributes.
+    el.classList.add('is-hydrated');
+
+    // Return the same tree shape as the SSR output.
+    // Hydration matches this against existing DOM — no elements are created.
+    return h('div', null,
+      h('span', null, () => String(count())),
+      h('button', { onClick: () => setCount(c => c + 1) }, '+1'),
+    );
   },
 });
 ```
 
 ```html
 <!-- Server-rendered HTML -->
-<div data-forma-island="Counter" data-forma-props='{"initial": 5}'>
+<div data-forma-island="0" data-forma-component="Counter" data-forma-props='{"initial": 5}'>
   <span>5</span>
   <button>+1</button>
 </div>
 ```
 
+Each island is activated inside its own `createRoot` scope with error isolation — a broken island never takes down its siblings.
+
+### Hydration Triggers
+
+Control when an island hydrates via `data-forma-hydrate`:
+
+| Trigger | When it hydrates | Use case |
+|---------|-----------------|----------|
+| `load` (default) | Immediately on page load | Above-the-fold interactive content |
+| `visible` | When island enters viewport | Below-the-fold components |
+| `idle` | During browser idle time (`requestIdleCallback`) | Non-critical functionality |
+| `interaction` | On first `pointerdown` or `focusin` | Skeleton+skin pattern |
+
+```html
+<div data-forma-island="1" data-forma-component="Comments" data-forma-hydrate="visible">
+  <!-- Only loads JS when scrolled into view -->
+</div>
+```
+
+### Island Disposal
+
+When swapping module content (e.g., inside `<forma-stage>` Shadow DOM), dispose islands to prevent leaked effects and listeners:
+
+```typescript
+import { deactivateIsland, deactivateAllIslands } from '@getforma/core';
+
+// Dispose all active islands under a root
+deactivateAllIslands(shadowRoot);
+
+// Or dispose a single island
+deactivateIsland(islandElement);
+```
+
 ## Subpath Exports
 
 | Import | Description |
@@ -288,12 +421,53 @@ See the [`examples/`](./examples) directory:
 - **todo** — todo list with `createList` and keyed reconciliation
 - **data-table** — sortable table with `createList`
 
+## How Is This Different from Solid?
+
+FormaJS shares Solid's core insight — fine-grained signals updating the real DOM without a virtual DOM. If you know Solid, you'll feel at home. The differences are in scope and delivery:
+
+| | Solid | FormaJS |
+|-|-------|---------|
+| **Build requirement** | Always needs a compiler (JSX transform) | CDN runtime works with zero build step; bundler is optional |
+| **Entry points** | JSX-first | HTML Runtime (`data-*` attributes), `h()` hyperscript, or JSX |
+| **CSP** | Relies on compiler output | Hand-written expression parser; hardened build has no `new Function()` |
+| **Islands** | Via [solid-start](https://start.solidjs.com/) meta-framework | Built-in `activateIslands()` — no meta-framework needed |
+| **Ecosystem** | Mature (router, meta-framework, devtools) | Minimal — reactive core only, you bring the architecture |
+| **Size** | ~7KB | ~15KB (includes runtime parser, stores, SSR) |
+
+**When to choose FormaJS:** You want to progressively enhance server-rendered HTML, need CSP compliance without a build step, or prefer a single library that scales from a `<script>` tag to a full SSR pipeline.
+
+**When to choose Solid:** You want a mature ecosystem with routing, SSR meta-framework, and community-built component libraries.
+
+## Stability
+
+Some features are more battle-tested than others:
+
+| Feature | Status | Notes |
+|---------|--------|-------|
+| Signals (`createSignal`, `createEffect`, `createComputed`, `batch`) | **Stable** | Core primitive, well-tested |
+| `h()` / JSX rendering | **Stable** | |
+| `mount()`, `createShow`, `createSwitch`, `createList` | **Stable** | |
+| HTML Runtime (`data-*` directives) | **Stable** | Expression parser covers common patterns |
+| CSP-hardened runtime | **Stable** | No `new Function()`, tested with strict CSP headers |
+| `createStore` (deep reactivity) | **Stable** | |
+| Components (`defineComponent`, lifecycle) | **Stable** | |
+| Context (`createContext`, `provide`, `inject`) | **Stable** | |
+| Islands (`activateIslands`) | **Stable** | 10 activation + 88 hydration tests |
+| SSR (`renderToString`, `renderToStream`) | **Beta** | Functional, API may evolve |
+| TC39 Signals compat (`Signal.State`, `Signal.Computed`) | **Beta** | 9 tests, but tracks an evolving TC39 proposal |
+
 ## Ecosystem
 
-| Package | Description |
-|---------|-------------|
-| [@getforma/core](https://www.npmjs.com/package/@getforma/core) | This library — `npm install @getforma/core` |
-| [forma](https://github.com/getforma-dev/forma) | Rust server framework (forma-ir + forma-server) |
+FormaJS is the reactive frontend layer of a full-stack Rust + TypeScript framework. The pipeline flows: TypeScript components → `@getforma/compiler` → FMIR binary → `forma-ir` (parse) → `forma-server` (render) → Axum HTTP response.
+
+| Package | Language | Description |
+|---------|----------|-------------|
+| [@getforma/core](https://www.npmjs.com/package/@getforma/core) | TypeScript | This library — reactive DOM, signals, islands, SSR hydration |
+| [@getforma/compiler](https://github.com/getforma-dev/forma-tools) | TypeScript | TypeScript-to-FMIR compiler, Vite plugin, esbuild SSR plugin |
+| [@getforma/build](https://github.com/getforma-dev/forma-tools) | TypeScript | esbuild pipeline with content hashing, compression, manifest |
+| [@getforma/create-app](https://github.com/getforma-dev/create-forma-app) | TypeScript | `npx @getforma/create-app` — scaffold a new Forma project |
+| [forma-ir](https://crates.io/crates/forma-ir) | Rust | FMIR binary format: parser, walker, WASM exports |
+| [forma-server](https://crates.io/crates/forma-server) | Rust | Axum middleware for SSR page rendering, asset serving, CSP |
 
 ## License
 

package/dist/{chunk-KX5WRZH7.js → chunk-DPSAVBCP.js}

@@ -17,11 +17,10 @@ function createSignal(initialValue) {
   const setter = (v) => applySignalSet(s, v);
   return [getter, setter];
 }
-var createValueSignal = createSignal;
 function createComputed(fn) {
   return computed(fn);
 }
 
-export { createComputed, createSignal, createValueSignal };
-//# sourceMappingURL=chunk-KX5WRZH7.js.map
-//# sourceMappingURL=chunk-KX5WRZH7.js.map
+export { createComputed, createSignal };
+//# sourceMappingURL=chunk-DPSAVBCP.js.map
+//# sourceMappingURL=chunk-DPSAVBCP.js.map

package/dist/chunk-DPSAVBCP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/reactive/signal.ts","../src/reactive/computed.ts"],"names":["createRawSignal","rawComputed"],"mappings":";;;AAmDA,SAAS,cAAA,CACP,GACA,CAAA,EACM;AACN,EAAA,IAAI,OAAO,MAAM,UAAA,EAAY;AAC3B,IAAA,CAAA,CAAE,CAAC,CAAA;AACH,IAAA;AAAA,EACF;AAEA,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,OAAO,CAAA,EAAE;AACf,EAAA,cAAA,EAAe;AACf,EAAA,CAAA,CAAG,CAAA,CAAqB,IAAI,CAAC,CAAA;AAC/B;AAYO,SAAS,aAAgB,YAAA,EAA+D;AAC7F,EAAA,MAAM,CAAA,GAAIA,OAAmB,YAAY,CAAA;AACzC,EAAA,MAAM,MAAA,GAAS,CAAA;AACf,EAAA,MAAM,MAAA,GAA0B,CAAC,CAAA,KAA4B,cAAA,CAAe,GAAG,CAAC,CAAA;AAEhF,EAAA,OAAO,CAAC,QAAQ,MAAM,CAAA;AACxB;ACtDO,SAAS,eAAkB,EAAA,EAAsB;AACtD,EAAA,OAAOC,SAAY,EAAE,CAAA;AACvB","file":"chunk-DPSAVBCP.js","sourcesContent":["/**\n * Forma Reactive - Signal\n *\n * Fine-grained reactive primitive backed by alien-signals.\n * API: createSignal returns [getter, setter] tuple following SolidJS conventions.\n *\n * TC39 Signals equivalent: Signal.State\n */\n\nimport { signal as createRawSignal, pauseTracking, resumeTracking } from 'alien-signals';\n\n// ---------------------------------------------------------------------------\n// Public API\n// ---------------------------------------------------------------------------\n\nexport type SignalGetter<T> = () => T;\nexport type SignalSetter<T> = (v: T | ((prev: T) => T)) => void;\n\nexport interface SignalOptions<T> {\n  /** Debug name — attached to getter in dev mode for devtools inspection. */\n  name?: string;\n  /** Custom equality check. Default: Object.is (via alien-signals). */\n  equals?: (prev: T, next: T) => boolean;\n}\n\n/**\n * Wrap a value so the setter treats it as a literal value, not a functional updater.\n *\n * When `T` is itself a function type, passing a function to the setter is\n * ambiguous -- it looks like a functional update (`prev => next`). Use\n * `value()` to disambiguate:\n *\n * ```ts\n * const [getFn, setFn] = createSignal<() => void>(() => console.log('a'));\n *\n * // BUG: interpreted as a functional update -- calls the arrow with prev\n * // setFn(() => console.log('b'));\n *\n * // Correct: wraps in a thunk so the setter stores it as-is\n * setFn(value(() => console.log('b')));\n * ```\n */\nexport function value<T>(v: T): () => T {\n  return () => v;\n}\n\ntype RawSignal<T> = {\n  (): T;\n  (value: T): void;\n};\n\nfunction applySignalSet<T>(\n  s: RawSignal<T>,\n  v: T | ((prev: T) => T),\n): void {\n  if (typeof v !== 'function') {\n    s(v);\n    return;\n  }\n\n  pauseTracking();\n  const prev = s();\n  resumeTracking();\n  s((v as (prev: T) => T)(prev));\n}\n\n/**\n * Create a reactive signal.\n *\n * ```ts\n * const [count, setCount] = createSignal(0);\n * console.log(count()); // 0\n * setCount(1);\n * setCount(prev => prev + 1);\n * ```\n */\nexport function createSignal<T>(initialValue: T): [get: SignalGetter<T>, set: SignalSetter<T>] {\n  const s = createRawSignal<T>(initialValue) as RawSignal<T>;\n  const getter = s as unknown as SignalGetter<T>;\n  const setter: SignalSetter<T> = (v: T | ((prev: T) => T)) => applySignalSet(s, v);\n\n  return [getter, setter];\n}\n","/**\n * Forma Reactive - Computed\n *\n * Lazy, cached derived value that participates in the reactive graph.\n * Backed by alien-signals for automatic dependency tracking\n * and cache invalidation.\n *\n * TC39 Signals equivalent: Signal.Computed\n */\n\nimport { computed as rawComputed } from 'alien-signals';\n\n/**\n * Create a lazy, cached computed value.\n *\n * Note: Unlike SolidJS's createComputed (which is an eager synchronous\n * side effect), this is a lazy cached derivation — equivalent to\n * SolidJS's createMemo. Both createComputed and createMemo in FormaJS\n * are identical.\n *\n * ```ts\n * const [count, setCount] = createSignal(0);\n * const doubled = createComputed(() => count() * 2);\n * console.log(doubled()); // 0\n * setCount(5);\n * console.log(doubled()); // 10\n * ```\n */\nexport function createComputed<T>(fn: () => T): () => T {\n  return rawComputed(fn);\n}\n"]}

package/dist/{chunk-FPSLC62A.cjs → chunk-KH3F5NRU.cjs}

@@ -19,13 +19,11 @@ function createSignal(initialValue) {
   const setter = (v) => applySignalSet(s, v);
   return [getter, setter];
 }
-var createValueSignal = createSignal;
 function createComputed(fn) {
   return alienSignals.computed(fn);
 }
 
 exports.createComputed = createComputed;
 exports.createSignal = createSignal;
-exports.createValueSignal = createValueSignal;
-//# sourceMappingURL=chunk-FPSLC62A.cjs.map
-//# sourceMappingURL=chunk-FPSLC62A.cjs.map
+//# sourceMappingURL=chunk-KH3F5NRU.cjs.map
+//# sourceMappingURL=chunk-KH3F5NRU.cjs.map

package/dist/chunk-KH3F5NRU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/reactive/signal.ts","../src/reactive/computed.ts"],"names":["pauseTracking","resumeTracking","createRawSignal","rawComputed"],"mappings":";;;;;AAmDA,SAAS,cAAA,CACP,GACA,CAAA,EACM;AACN,EAAA,IAAI,OAAO,MAAM,UAAA,EAAY;AAC3B,IAAA,CAAA,CAAE,CAAC,CAAA;AACH,IAAA;AAAA,EACF;AAEA,EAAAA,0BAAA,EAAc;AACd,EAAA,MAAM,OAAO,CAAA,EAAE;AACf,EAAAC,2BAAA,EAAe;AACf,EAAA,CAAA,CAAG,CAAA,CAAqB,IAAI,CAAC,CAAA;AAC/B;AAYO,SAAS,aAAgB,YAAA,EAA+D;AAC7F,EAAA,MAAM,CAAA,GAAIC,oBAAmB,YAAY,CAAA;AACzC,EAAA,MAAM,MAAA,GAAS,CAAA;AACf,EAAA,MAAM,MAAA,GAA0B,CAAC,CAAA,KAA4B,cAAA,CAAe,GAAG,CAAC,CAAA;AAEhF,EAAA,OAAO,CAAC,QAAQ,MAAM,CAAA;AACxB;ACtDO,SAAS,eAAkB,EAAA,EAAsB;AACtD,EAAA,OAAOC,sBAAY,EAAE,CAAA;AACvB","file":"chunk-KH3F5NRU.cjs","sourcesContent":["/**\n * Forma Reactive - Signal\n *\n * Fine-grained reactive primitive backed by alien-signals.\n * API: createSignal returns [getter, setter] tuple following SolidJS conventions.\n *\n * TC39 Signals equivalent: Signal.State\n */\n\nimport { signal as createRawSignal, pauseTracking, resumeTracking } from 'alien-signals';\n\n// ---------------------------------------------------------------------------\n// Public API\n// ---------------------------------------------------------------------------\n\nexport type SignalGetter<T> = () => T;\nexport type SignalSetter<T> = (v: T | ((prev: T) => T)) => void;\n\nexport interface SignalOptions<T> {\n  /** Debug name — attached to getter in dev mode for devtools inspection. */\n  name?: string;\n  /** Custom equality check. Default: Object.is (via alien-signals). */\n  equals?: (prev: T, next: T) => boolean;\n}\n\n/**\n * Wrap a value so the setter treats it as a literal value, not a functional updater.\n *\n * When `T` is itself a function type, passing a function to the setter is\n * ambiguous -- it looks like a functional update (`prev => next`). Use\n * `value()` to disambiguate:\n *\n * ```ts\n * const [getFn, setFn] = createSignal<() => void>(() => console.log('a'));\n *\n * // BUG: interpreted as a functional update -- calls the arrow with prev\n * // setFn(() => console.log('b'));\n *\n * // Correct: wraps in a thunk so the setter stores it as-is\n * setFn(value(() => console.log('b')));\n * ```\n */\nexport function value<T>(v: T): () => T {\n  return () => v;\n}\n\ntype RawSignal<T> = {\n  (): T;\n  (value: T): void;\n};\n\nfunction applySignalSet<T>(\n  s: RawSignal<T>,\n  v: T | ((prev: T) => T),\n): void {\n  if (typeof v !== 'function') {\n    s(v);\n    return;\n  }\n\n  pauseTracking();\n  const prev = s();\n  resumeTracking();\n  s((v as (prev: T) => T)(prev));\n}\n\n/**\n * Create a reactive signal.\n *\n * ```ts\n * const [count, setCount] = createSignal(0);\n * console.log(count()); // 0\n * setCount(1);\n * setCount(prev => prev + 1);\n * ```\n */\nexport function createSignal<T>(initialValue: T): [get: SignalGetter<T>, set: SignalSetter<T>] {\n  const s = createRawSignal<T>(initialValue) as RawSignal<T>;\n  const getter = s as unknown as SignalGetter<T>;\n  const setter: SignalSetter<T> = (v: T | ((prev: T) => T)) => applySignalSet(s, v);\n\n  return [getter, setter];\n}\n","/**\n * Forma Reactive - Computed\n *\n * Lazy, cached derived value that participates in the reactive graph.\n * Backed by alien-signals for automatic dependency tracking\n * and cache invalidation.\n *\n * TC39 Signals equivalent: Signal.Computed\n */\n\nimport { computed as rawComputed } from 'alien-signals';\n\n/**\n * Create a lazy, cached computed value.\n *\n * Note: Unlike SolidJS's createComputed (which is an eager synchronous\n * side effect), this is a lazy cached derivation — equivalent to\n * SolidJS's createMemo. Both createComputed and createMemo in FormaJS\n * are identical.\n *\n * ```ts\n * const [count, setCount] = createSignal(0);\n * const doubled = createComputed(() => count() * 2);\n * console.log(doubled()); // 0\n * setCount(5);\n * console.log(doubled()); // 10\n * ```\n */\nexport function createComputed<T>(fn: () => T): () => T {\n  return rawComputed(fn);\n}\n"]}

package/dist/{chunk-5H52PKGF.js → chunk-TKGUHASG.js}

@@ -1,4 +1,4 @@
-import { createComputed, createSignal, createValueSignal } from './chunk-KX5WRZH7.js';
+import { createComputed, createSignal } from './chunk-DPSAVBCP.js';
 import { effect, startBatch, endBatch, pauseTracking, resumeTracking } from 'alien-signals';
 
 // src/reactive/root.ts
@@ -293,8 +293,8 @@ function getSuspenseContext() {
 // src/reactive/resource.ts
 function createResource(source, fetcher, options) {
   const [data, setData] = createSignal(options?.initialValue);
-  const [loading, setLoading] = createValueSignal(false);
-  const [error, setError] = createValueSignal(void 0);
+  const [loading, setLoading] = createSignal(false);
+  const [error, setError] = createSignal(void 0);
   const suspenseCtx = getSuspenseContext();
   let abortController = null;
   let fetchVersion = 0;
@@ -806,6 +806,10 @@ function appendChild(parent, child) {
   }
 }
 function h(tag, props, ...children) {
+  if (typeof tag === "function" && tag !== Fragment) {
+    const mergedProps = { ...props ?? {}, children };
+    return tag(mergedProps);
+  }
   if (tag === Fragment) {
     const frag = document.createDocumentFragment();
     for (const child of children) {
@@ -948,6 +952,7 @@ function createShow(when, thenFn, elseFn) {
 }
 
 // src/dom/hydrate.ts
+var ABORT_SYM2 = /* @__PURE__ */ Symbol.for("forma-abort");
 var hydrating = false;
 function setHydrating(value2) {
   hydrating = value2;
@@ -967,7 +972,12 @@ function applyDynamicProps(el, props) {
     const value2 = props[key];
     if (typeof value2 !== "function") continue;
     if (key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.length > 2) {
-      el.addEventListener(key.slice(2).toLowerCase(), value2);
+      let ac = el[ABORT_SYM2];
+      if (!ac) {
+        ac = new AbortController();
+        el[ABORT_SYM2] = ac;
+      }
+      el.addEventListener(key.slice(2).toLowerCase(), value2, { signal: ac.signal });
       continue;
     }
     const fn = value2;
@@ -1469,11 +1479,11 @@ function longestIncreasingSubsequence(arr) {
   return result;
 }
 var SMALL_LIST_THRESHOLD = 32;
-var ABORT_SYM2 = /* @__PURE__ */ Symbol.for("forma-abort");
+var ABORT_SYM3 = /* @__PURE__ */ Symbol.for("forma-abort");
 var CACHE_SYM2 = /* @__PURE__ */ Symbol.for("forma-attr-cache");
 var DYNAMIC_CHILD_SYM2 = /* @__PURE__ */ Symbol.for("forma-dynamic-child");
 function canPatchStaticElement(target, source) {
-  return target instanceof HTMLElement && source instanceof HTMLElement && target.tagName === source.tagName && !target[ABORT_SYM2] && !target[CACHE_SYM2] && !target[DYNAMIC_CHILD_SYM2] && !source[ABORT_SYM2] && !source[CACHE_SYM2] && !source[DYNAMIC_CHILD_SYM2];
+  return target instanceof HTMLElement && source instanceof HTMLElement && target.tagName === source.tagName && !target[ABORT_SYM3] && !target[CACHE_SYM2] && !target[DYNAMIC_CHILD_SYM2] && !source[ABORT_SYM3] && !source[CACHE_SYM2] && !source[DYNAMIC_CHILD_SYM2];
 }
 function patchStaticElement(target, source) {
   const sourceAttrNames = /* @__PURE__ */ new Set();
@@ -1757,7 +1767,7 @@ function createList(items, keyFn, renderFn, options) {
       if (cached.item === item) return;
       cached.item = item;
       if (!(node instanceof HTMLElement)) return;
-      if (node[ABORT_SYM2] || node[CACHE_SYM2] || node[DYNAMIC_CHILD_SYM2]) {
+      if (node[ABORT_SYM3] || node[CACHE_SYM2] || node[DYNAMIC_CHILD_SYM2]) {
         return;
       }
       const next = untrack(() => renderFn(item, cached.getIndex));
@@ -1804,6 +1814,6 @@ function createList(items, keyFn, renderFn, options) {
   return fragment2;
 }
 
-export { Fragment, __DEV__, batch, cleanup, createEffect, createList, createMemo, createReducer, createRef, createResource, createRoot, createShow, fragment, h, hydrateIsland, internalEffect, longestIncreasingSubsequence, on, onCleanup, onError, popSuspenseContext, pushSuspenseContext, reconcileList, untrack };
-//# sourceMappingURL=chunk-5H52PKGF.js.map
-//# sourceMappingURL=chunk-5H52PKGF.js.map
+export { Fragment, __DEV__, batch, cleanup, createEffect, createList, createMemo, createReducer, createRef, createResource, createRoot, createShow, fragment, h, hydrateIsland, internalEffect, on, onCleanup, onError, popSuspenseContext, pushSuspenseContext, reconcileList, reportError, untrack };
+//# sourceMappingURL=chunk-TKGUHASG.js.map
+//# sourceMappingURL=chunk-TKGUHASG.js.map