@getforma/core 1.2.0 → 1.3.0

package/dist/formajs.global.js

@@ -86,6 +86,7 @@ var FormaJS = (() => {
     setStyle: () => setStyle,
     setText: () => setText,
     siblings: () => siblings,
+    svg: () => svg,
     template: () => template,
     templateMany: () => templateMany,
     toggleClass: () => toggleClass,
@@ -1286,14 +1287,18 @@ var FormaJS = (() => {
     }
     const oldKeyMap = /* @__PURE__ */ new Map();
     for (let i = 0; i < oldLen; i++) {
-      oldKeyMap.set(keyFn(oldItems[i]), i);
+      const k = keyFn(oldItems[i]);
+      const bucket = oldKeyMap.get(k);
+      if (bucket) bucket.push(i);
+      else oldKeyMap.set(k, [i]);
     }
     const oldIndices = new Array(newLen);
     const oldUsed = new Uint8Array(oldLen);
     for (let i = 0; i < newLen; i++) {
       const key = keyFn(newItems[i]);
-      const oldIdx = oldKeyMap.get(key);
-      if (oldIdx !== void 0) {
+      const bucket = oldKeyMap.get(key);
+      if (bucket && bucket.length > 0) {
+        const oldIdx = bucket.shift();
         oldIndices[i] = oldIdx;
         oldUsed[oldIdx] = 1;
       } else {
@@ -2077,6 +2082,17 @@ var FormaJS = (() => {
   var Fragment = /* @__PURE__ */ Symbol.for("forma.fragment");
   var SVG_NS = "http://www.w3.org/2000/svg";
   var XLINK_NS = "http://www.w3.org/1999/xlink";
+  var DUAL_USE_SVG_TAGS = /* @__PURE__ */ new Set(["a", "title", "script", "style", "font"]);
+  var currentNamespace = null;
+  function svg(build) {
+    const prev = currentNamespace;
+    currentNamespace = SVG_NS;
+    try {
+      return build();
+    } finally {
+      currentNamespace = prev;
+    }
+  }
   var SVG_TAGS = /* @__PURE__ */ new Set([
     "svg",
     "path",
@@ -2610,7 +2626,12 @@ var FormaJS = (() => {
       return { type: "element", tag: tagName, props: props ?? null, children: children2 };
     }
     let el;
-    if (ELEMENT_PROTOS && ELEMENT_PROTOS[tagName]) {
+    const svgCtx = currentNamespace === SVG_NS;
+    if (svgCtx && (SVG_TAGS.has(tagName) || DUAL_USE_SVG_TAGS.has(tagName))) {
+      el = document.createElementNS(SVG_NS, tagName);
+    } else if (!svgCtx && DUAL_USE_SVG_TAGS.has(tagName)) {
+      el = getProto(tagName).cloneNode(false);
+    } else if (ELEMENT_PROTOS && ELEMENT_PROTOS[tagName]) {
       el = ELEMENT_PROTOS[tagName].cloneNode(false);
     } else if (SVG_TAGS.has(tagName)) {
       el = document.createElementNS(SVG_NS, tagName);
@@ -2876,8 +2897,14 @@ var FormaJS = (() => {
       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);
@@ -2933,6 +2960,10 @@ var FormaJS = (() => {
     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];
@@ -2943,30 +2974,39 @@ var FormaJS = (() => {
       }
       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 {
@@ -2975,6 +3015,24 @@ var FormaJS = (() => {
     }
   }
   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();
@@ -2983,13 +3041,15 @@ var FormaJS = (() => {
     }
   }
   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;