@getforma/core 1.2.0 → 1.4.0

package/dist/index.d.cts

@@ -334,6 +334,19 @@ declare function onError(handler: ErrorHandler): () => void;
 declare const Fragment: (props: {
     children?: unknown;
 }) => DocumentFragment;
+/**
+ * Run `build()` with the SVG namespace active so nested `h()` calls create
+ * SVG-namespaced elements — including dual-use tags like `<a>` that `h()` would
+ * otherwise create as HTML. `h()` resolves tags by this explicit context (there
+ * is no automatic parent-walk); a `foreignObject` creates the SVG element but
+ * does not auto-switch its descendants back to HTML (author those with plain
+ * `h()` outside `svg()`). MathML is not supported.
+ *
+ * ```ts
+ * const icon = svg(() => h('svg', { viewBox: '0 0 10 10' }, h('a', { href: '#' })));
+ * ```
+ */
+declare function svg<T extends Node>(build: () => T): T;
 /**
  * Remove all event listeners previously attached via `h()` on the given element.
  *
@@ -1175,4 +1188,4 @@ declare function onIntersect(el: HTMLElement, handler: (entry: IntersectionObser
  */
 declare function onMutation(el: HTMLElement, handler: (mutations: MutationRecord[]) => void, options?: MutationObserverInit): () => void;
 
-export { $, $$, type CleanupFn, type ComponentDef, type Context, type CreateListOptions, type Dispatch, type ErrorHandler, type EventBus, Fragment, type HistoryControls, type IslandHydrateFn, type KeyOptions, type ListTransitionHooks, type PersistErrorPhase, type PersistOptions, type ReconcileResult, type Ref, type SetupFn, SignalGetter, type StoreSetter, type SwitchCase, activateIslands, addClass, batch, children, cleanup, closest, createBus, createComputed, createContext, createEffect, createErrorBoundary, createHistory, createList, createMemo, createPortal, createReducer, createRef, createRoot, createShow, createStore, createSuspense, createSwitch, createText, createUnownedRoot, deactivateAllIslands, deactivateIsland, defineComponent, delegate, disposeComponent, fragment, h, hydrateIsland, inject, mount, nextSibling, on, onCleanup, onError, onIntersect, onKey, onMount, onMutation, onResize, onUnmount, parent, persist, prevSibling, provide, reconcileList, removeClass, setAttr, setHTMLUnsafe, setStyle, setText, siblings, template, templateMany, toggleClass, trackDisposer, unprovide, untrack };
+export { $, $$, type CleanupFn, type ComponentDef, type Context, type CreateListOptions, type Dispatch, type ErrorHandler, type EventBus, Fragment, type HistoryControls, type IslandHydrateFn, type KeyOptions, type ListTransitionHooks, type PersistErrorPhase, type PersistOptions, type ReconcileResult, type Ref, type SetupFn, SignalGetter, type StoreSetter, type SwitchCase, activateIslands, addClass, batch, children, cleanup, closest, createBus, createComputed, createContext, createEffect, createErrorBoundary, createHistory, createList, createMemo, createPortal, createReducer, createRef, createRoot, createShow, createStore, createSuspense, createSwitch, createText, createUnownedRoot, deactivateAllIslands, deactivateIsland, defineComponent, delegate, disposeComponent, fragment, h, hydrateIsland, inject, mount, nextSibling, on, onCleanup, onError, onIntersect, onKey, onMount, onMutation, onResize, onUnmount, parent, persist, prevSibling, provide, reconcileList, removeClass, setAttr, setHTMLUnsafe, setStyle, setText, siblings, svg, template, templateMany, toggleClass, trackDisposer, unprovide, untrack };

package/dist/index.d.ts

@@ -334,6 +334,19 @@ declare function onError(handler: ErrorHandler): () => void;
 declare const Fragment: (props: {
     children?: unknown;
 }) => DocumentFragment;
+/**
+ * Run `build()` with the SVG namespace active so nested `h()` calls create
+ * SVG-namespaced elements — including dual-use tags like `<a>` that `h()` would
+ * otherwise create as HTML. `h()` resolves tags by this explicit context (there
+ * is no automatic parent-walk); a `foreignObject` creates the SVG element but
+ * does not auto-switch its descendants back to HTML (author those with plain
+ * `h()` outside `svg()`). MathML is not supported.
+ *
+ * ```ts
+ * const icon = svg(() => h('svg', { viewBox: '0 0 10 10' }, h('a', { href: '#' })));
+ * ```
+ */
+declare function svg<T extends Node>(build: () => T): T;
 /**
  * Remove all event listeners previously attached via `h()` on the given element.
  *
@@ -1175,4 +1188,4 @@ declare function onIntersect(el: HTMLElement, handler: (entry: IntersectionObser
  */
 declare function onMutation(el: HTMLElement, handler: (mutations: MutationRecord[]) => void, options?: MutationObserverInit): () => void;
 
-export { $, $$, type CleanupFn, type ComponentDef, type Context, type CreateListOptions, type Dispatch, type ErrorHandler, type EventBus, Fragment, type HistoryControls, type IslandHydrateFn, type KeyOptions, type ListTransitionHooks, type PersistErrorPhase, type PersistOptions, type ReconcileResult, type Ref, type SetupFn, SignalGetter, type StoreSetter, type SwitchCase, activateIslands, addClass, batch, children, cleanup, closest, createBus, createComputed, createContext, createEffect, createErrorBoundary, createHistory, createList, createMemo, createPortal, createReducer, createRef, createRoot, createShow, createStore, createSuspense, createSwitch, createText, createUnownedRoot, deactivateAllIslands, deactivateIsland, defineComponent, delegate, disposeComponent, fragment, h, hydrateIsland, inject, mount, nextSibling, on, onCleanup, onError, onIntersect, onKey, onMount, onMutation, onResize, onUnmount, parent, persist, prevSibling, provide, reconcileList, removeClass, setAttr, setHTMLUnsafe, setStyle, setText, siblings, template, templateMany, toggleClass, trackDisposer, unprovide, untrack };
+export { $, $$, type CleanupFn, type ComponentDef, type Context, type CreateListOptions, type Dispatch, type ErrorHandler, type EventBus, Fragment, type HistoryControls, type IslandHydrateFn, type KeyOptions, type ListTransitionHooks, type PersistErrorPhase, type PersistOptions, type ReconcileResult, type Ref, type SetupFn, SignalGetter, type StoreSetter, type SwitchCase, activateIslands, addClass, batch, children, cleanup, closest, createBus, createComputed, createContext, createEffect, createErrorBoundary, createHistory, createList, createMemo, createPortal, createReducer, createRef, createRoot, createShow, createStore, createSuspense, createSwitch, createText, createUnownedRoot, deactivateAllIslands, deactivateIsland, defineComponent, delegate, disposeComponent, fragment, h, hydrateIsland, inject, mount, nextSibling, on, onCleanup, onError, onIntersect, onKey, onMount, onMutation, onResize, onUnmount, parent, persist, prevSibling, provide, reconcileList, removeClass, setAttr, setHTMLUnsafe, setStyle, setText, siblings, svg, template, templateMany, toggleClass, trackDisposer, unprovide, untrack };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { hydrateIsland } from './chunk-YRNYOZF3.js';
-export { Fragment, cleanup, createList, createShow, fragment, h, hydrateIsland, reconcileList } from './chunk-YRNYOZF3.js';
+import { hydrateIsland } from './chunk-AJP4OVCN.js';
+export { Fragment, cleanup, createList, createShow, fragment, h, hydrateIsland, reconcileList, svg } from './chunk-AJP4OVCN.js';
 import { internalEffect, createUnownedRoot, createRoot, untrack, registerDisposer, createEffect, pushSuspenseContext, popSuspenseContext, batch } from './chunk-Y3A2EVVS.js';
 export { batch, createEffect, createMemo, createReducer, createRef, createResource, createRoot, createUnownedRoot, getBatchDepth, isComputed, isEffect, isEffectScope, isSignal, on, onCleanup, trigger, untrack } from './chunk-Y3A2EVVS.js';
 import { createSignal, __DEV__, reportError, value } from './chunk-ETPJTPYD.js';
@@ -216,8 +216,14 @@ function createSuspense(fallback, children2) {
     const isPending = pending() > 0;
     const newNode = isPending ? fallbackNode ??= fallback() : resolvedNode;
     if (newNode === currentNode) return;
-    if (currentNode && currentNode.parentNode === parent2) {
-      parent2.removeChild(currentNode);
+    if (currentNode) {
+      if (currentNode.parentNode === parent2) {
+        parent2.removeChild(currentNode);
+      } else if (currentNode.nodeType === 11) {
+        while (startMarker.nextSibling && startMarker.nextSibling !== endMarker) {
+          currentNode.appendChild(startMarker.nextSibling);
+        }
+      }
     }
     if (newNode) {
       parent2.insertBefore(newNode, endMarker);
@@ -273,6 +279,10 @@ function activateIslands(registry) {
   const sharedProps = scriptBlock ? JSON.parse(scriptBlock.textContent) : null;
   const islands = document.querySelectorAll("[data-forma-island]");
   for (const root of islands) {
+    const status = root.getAttribute("data-forma-status");
+    if (status === "active" || status === "hydrating" || status === "disposed" || status === "error") continue;
+    if (root.__formaScheduled) continue;
+    delete root.__formaDisposed;
     const id = parseInt(root.getAttribute("data-forma-island"), 10);
     const componentName = root.getAttribute("data-forma-component");
     const hydrateFn = registry[componentName];
@@ -283,30 +293,39 @@ function activateIslands(registry) {
     }
     const trigger2 = root.getAttribute("data-forma-hydrate") || "load";
     if (trigger2 === "visible") {
+      root.__formaScheduled = true;
       const observer = new IntersectionObserver(
         (entries) => {
           for (const entry of entries) {
             if (!entry.isIntersecting) continue;
             observer.disconnect();
+            delete root.__formaObserver;
             hydrateIslandRoot(root, id, componentName, hydrateFn, sharedProps);
           }
         },
         { rootMargin: "200px" }
       );
+      root.__formaObserver = observer;
       observer.observe(root);
     } else if (trigger2 === "idle") {
+      root.__formaScheduled = true;
       const hydrate = () => hydrateIslandRoot(root, id, componentName, hydrateFn, sharedProps);
       if (typeof requestIdleCallback === "function") {
-        requestIdleCallback(hydrate);
+        const handle = requestIdleCallback(hydrate);
+        root.__formaIdleCancel = () => cancelIdleCallback(handle);
       } else {
-        setTimeout(hydrate, 200);
+        const handle = setTimeout(hydrate, 200);
+        root.__formaIdleCancel = () => clearTimeout(handle);
       }
     } else if (trigger2 === "interaction") {
+      root.__formaScheduled = true;
       const hydrate = () => {
         root.removeEventListener("pointerdown", hydrate, true);
         root.removeEventListener("focusin", hydrate, true);
+        delete root.__formaInteractionHandler;
         hydrateIslandRoot(root, id, componentName, hydrateFn, sharedProps);
       };
+      root.__formaInteractionHandler = hydrate;
       root.addEventListener("pointerdown", hydrate, { capture: true, once: true });
       root.addEventListener("focusin", hydrate, { capture: true, once: true });
     } else {
@@ -315,6 +334,24 @@ function activateIslands(registry) {
   }
 }
 function deactivateIsland(el) {
+  const observer = el.__formaObserver;
+  if (observer) {
+    observer.disconnect();
+    delete el.__formaObserver;
+  }
+  const interactionHandler = el.__formaInteractionHandler;
+  if (interactionHandler) {
+    el.removeEventListener("pointerdown", interactionHandler, true);
+    el.removeEventListener("focusin", interactionHandler, true);
+    delete el.__formaInteractionHandler;
+  }
+  const idleCancel = el.__formaIdleCancel;
+  if (idleCancel) {
+    idleCancel();
+    delete el.__formaIdleCancel;
+  }
+  delete el.__formaScheduled;
+  el.__formaDisposed = true;
   const dispose = el.__formaDispose;
   if (typeof dispose === "function") {
     dispose();
@@ -323,13 +360,15 @@ function deactivateIsland(el) {
   }
 }
 function deactivateAllIslands(root = document) {
-  const islands = root.querySelectorAll('[data-forma-status="active"]');
+  const islands = root.querySelectorAll("[data-forma-island]");
   for (const island of islands) {
     deactivateIsland(island);
   }
 }
 function hydrateIslandRoot(root, id, componentName, hydrateFn, sharedProps) {
+  if (root.__formaDisposed) return;
   try {
+    delete root.__formaScheduled;
     const props = loadIslandProps(root, id, sharedProps);
     root.setAttribute("data-forma-status", "hydrating");
     let activeRoot = root;