@getforma/core 1.1.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,
@@ -625,6 +626,9 @@ var FormaJS = (() => {
 
   // src/reactive/signal.ts
   var signalNames = /* @__PURE__ */ new WeakMap();
+  function value(v) {
+    return () => v;
+  }
   function applySignalSet(s, v, equals) {
     if (typeof v !== "function") {
       if (!equals) {
@@ -1283,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 {
@@ -2074,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",
@@ -2607,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);
@@ -2873,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);
@@ -2930,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];
@@ -2940,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 {
@@ -2972,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();
@@ -2980,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;
@@ -3156,6 +3219,19 @@ var FormaJS = (() => {
   function createStore(initial) {
     const signals = /* @__PURE__ */ new Map();
     const children2 = /* @__PURE__ */ new Map();
+    const arrayVersions = /* @__PURE__ */ new Map();
+    function getArrayVersion(path) {
+      let p = arrayVersions.get(path);
+      if (!p) {
+        p = createSignal(0);
+        arrayVersions.set(path, p);
+      }
+      return p;
+    }
+    function bumpArrayVersion(path) {
+      const p = arrayVersions.get(path);
+      if (p) p[1]((n) => n + 1);
+    }
     function registerChild(path) {
       const lastDot = path.lastIndexOf(".");
       if (lastDot === -1) return;
@@ -3187,14 +3263,37 @@ var FormaJS = (() => {
       }
       childSet.clear();
     }
+    function lastSegment(path) {
+      const d = path.lastIndexOf(".");
+      return d === -1 ? path : path.substring(d + 1);
+    }
+    function setLiteral(pair, v) {
+      pair[1](typeof v === "function" ? value(v) : v);
+    }
+    function reconcileChildren(parentPath, rawParent) {
+      const set = children2.get(parentPath);
+      if (!set) return;
+      for (const childPath of set) {
+        const key = lastSegment(childPath);
+        const nv = rawParent[key];
+        const pair = signals.get(childPath);
+        if (pair) setLiteral(pair, nv);
+        if (nv != null && typeof nv === "object") {
+          reconcileChildren(childPath, nv);
+        } else {
+          invalidateChildren(childPath);
+        }
+      }
+    }
     function wrap(raw, basePath) {
       if (!shouldWrap(raw)) return raw;
-      const cached = proxyCache.get(raw);
-      if (cached) return cached;
+      let byPath = proxyCache.get(raw);
+      if (byPath) {
+        const hit = byPath.get(basePath);
+        if (hit) return hit;
+      }
       const isArr = Array.isArray(raw);
       const basePrefix = basePath ? basePath + "." : "";
-      let lastKey = "";
-      let lastSignal;
       const proxy = new Proxy(raw, {
         // -------------------------------------------------------------------
         // GET
@@ -3215,12 +3314,10 @@ var FormaJS = (() => {
                   (a) => a != null && typeof a === "object" && a[RAW] ? a[RAW] : a
                 );
                 result = target[key].apply(target, rawArgs);
-                invalidateChildren(basePath);
-                const [, setLen] = getSignal(
-                  basePrefix + "length",
-                  target.length
-                );
-                setLen(target.length);
+                reconcileChildren(basePath, target);
+                const lenPair = signals.get(basePrefix + "length");
+                if (lenPair) lenPair[1](target.length);
+                if (basePath) bumpArrayVersion(basePath);
               });
               return result;
             };
@@ -3231,15 +3328,11 @@ var FormaJS = (() => {
             return target.length;
           }
           const value2 = Reflect.get(target, prop);
-          let pair;
-          if (key === lastKey && lastSignal) {
-            pair = lastSignal;
-          } else {
-            pair = getSignal(childPath, value2);
-            lastKey = key;
-            lastSignal = pair;
-          }
+          const pair = getSignal(childPath, value2);
           pair[0]();
+          if (Array.isArray(value2)) {
+            getArrayVersion(childPath)[0]();
+          }
           if (shouldWrap(value2)) {
             return wrap(value2, childPath);
           }
@@ -3255,9 +3348,11 @@ var FormaJS = (() => {
           const key = String(prop);
           const childPath = basePrefix + key;
           const rawValue = value2 != null && typeof value2 === "object" && value2[RAW] ? value2[RAW] : value2;
+          const oldRaw = Reflect.get(target, prop);
           Reflect.set(target, prop, rawValue);
-          if (rawValue != null && typeof rawValue === "object") {
+          if (rawValue != null && typeof rawValue === "object" && oldRaw !== rawValue) {
             invalidateChildren(childPath);
+            evictProxy(oldRaw, childPath);
           }
           if (isArr && key !== "length") {
             const lengthPath = basePrefix + "length";
@@ -3266,6 +3361,12 @@ var FormaJS = (() => {
               lenPair[1](target.length);
             }
           }
+          if (isArr && key === "length") {
+            batch(() => {
+              reconcileChildren(basePath, target);
+              if (basePath) bumpArrayVersion(basePath);
+            });
+          }
           const [, setter2] = getSignal(childPath, rawValue);
           setter2(rawValue);
           return true;
@@ -3304,24 +3405,30 @@ var FormaJS = (() => {
           }
           const key = String(prop);
           const childPath = basePrefix + key;
+          const oldRaw = Reflect.get(target, prop);
           const result = Reflect.deleteProperty(target, prop);
+          const delPair = signals.get(childPath);
+          if (delPair) delPair[1](void 0);
+          evictProxy(oldRaw, childPath);
           invalidateChildren(childPath);
-          signals.delete(childPath);
-          const parentPath = basePath;
-          if (parentPath !== void 0) {
-            const parentSet = children2.get(parentPath);
-            if (parentSet) {
-              parentSet.delete(childPath);
-              if (parentSet.size === 0) children2.delete(parentPath);
-            }
-          }
-          children2.delete(childPath);
           return result;
         }
       });
-      proxyCache.set(raw, proxy);
+      if (!byPath) {
+        byPath = /* @__PURE__ */ new Map();
+        proxyCache.set(raw, byPath);
+      }
+      byPath.set(basePath, proxy);
       return proxy;
     }
+    function evictProxy(oldRaw, path) {
+      if (oldRaw == null || typeof oldRaw !== "object") return;
+      const om = proxyCache.get(oldRaw);
+      if (om) {
+        om.delete(path);
+        if (om.size === 0) proxyCache.delete(oldRaw);
+      }
+    }
     const rootProxy = wrap(initial, "");
     function getCurrentSnapshot() {
       return untrack(() => deepClone(initial));
@@ -3338,10 +3445,24 @@ var FormaJS = (() => {
   }
 
   // src/state/history.ts
+  function cloneEntry(v, seen) {
+    if (v === null || typeof v !== "object") return v;
+    const proto = Object.getPrototypeOf(v);
+    if (!Array.isArray(v) && proto !== Object.prototype && proto !== null) return v;
+    if (!seen) seen = /* @__PURE__ */ new WeakSet();
+    if (seen.has(v)) return v;
+    seen.add(v);
+    if (Array.isArray(v)) return v.map((i) => cloneEntry(i, seen));
+    const out = {};
+    for (const k of Object.keys(v)) {
+      out[k] = cloneEntry(v[k], seen);
+    }
+    return out;
+  }
   function createHistory(source, options) {
     const [sourceGet, sourceSet] = source;
-    const maxLength = options?.maxLength ?? 100;
-    let _stack = [sourceGet()];
+    const maxLength = Math.max(1, options?.maxLength ?? 100);
+    let _stack = [cloneEntry(sourceGet())];
     let _cursor = 0;
     const [stackSignal, setStackSignal] = createSignal([..._stack]);
     const [cursorSignal, setCursorSignal] = createSignal(_cursor);
@@ -3353,45 +3474,52 @@ var FormaJS = (() => {
         setStackLenSignal(_stack.length);
       });
     }
-    let ignoreNext = false;
+    const NONE = /* @__PURE__ */ Symbol("none");
+    let _expected = NONE;
     let isFirstRun = true;
-    internalEffect(() => {
+    const disposeEffect = internalEffect(() => {
       const value2 = sourceGet();
       if (isFirstRun) {
         isFirstRun = false;
         return;
       }
-      if (ignoreNext) {
-        ignoreNext = false;
+      if (_expected !== NONE && Object.is(value2, _expected)) {
+        _expected = NONE;
         return;
       }
+      _expected = NONE;
       _stack = _stack.slice(0, _cursor + 1);
-      _stack.push(value2);
+      _stack.push(cloneEntry(value2));
       if (_stack.length > maxLength) {
         _stack.splice(0, _stack.length - maxLength);
       }
       _cursor = _stack.length - 1;
       syncSignals();
     });
+    const destroy = () => {
+      disposeEffect();
+    };
     const canUndo = () => cursorSignal() > 0;
     const canRedo = () => cursorSignal() < stackLenSignal() - 1;
     const undo = () => {
       if (_cursor <= 0) return;
       _cursor--;
-      ignoreNext = true;
-      sourceSet(_stack[_cursor]);
+      const restored = cloneEntry(_stack[_cursor]);
+      _expected = restored;
+      sourceSet(restored);
       syncSignals();
     };
     const redo = () => {
       if (_cursor >= _stack.length - 1) return;
       _cursor++;
-      ignoreNext = true;
-      sourceSet(_stack[_cursor]);
+      const restored = cloneEntry(_stack[_cursor]);
+      _expected = restored;
+      sourceSet(restored);
       syncSignals();
     };
     const clear = () => {
       const currentValue = sourceGet();
-      _stack = [currentValue];
+      _stack = [cloneEntry(currentValue)];
       _cursor = 0;
       syncSignals();
     };
@@ -3402,35 +3530,91 @@ var FormaJS = (() => {
       canRedo,
       history: () => stackSignal(),
       cursor: () => cursorSignal(),
-      clear
+      clear,
+      destroy
     };
   }
 
   // src/state/persist.ts
+  var ENVELOPE_TAG = "$forma:v";
   function persist(source, key, options) {
     const [sourceGet, sourceSet] = source;
     const storage = options?.storage ?? globalThis.localStorage;
     const serialize = options?.serialize ?? JSON.stringify;
     const deserialize = options?.deserialize ?? JSON.parse;
     const validate = options?.validate;
-    try {
-      const stored = storage.getItem(key);
-      if (stored !== null) {
-        const value2 = deserialize(stored);
+    const version = options?.version;
+    const migrate = options?.migrate;
+    const onError2 = options?.onError;
+    let writing = false;
+    function unwrap(stored) {
+      const parsed = deserialize(stored);
+      if (parsed != null && typeof parsed === "object" && Object.prototype.hasOwnProperty.call(parsed, ENVELOPE_TAG)) {
+        const env = parsed;
+        return { value: env.value, version: Number(env[ENVELOPE_TAG]) };
+      }
+      return { value: parsed, version: 0 };
+    }
+    function hydrate() {
+      let stored;
+      try {
+        stored = storage.getItem(key);
+      } catch (err) {
+        onError2?.(err, "hydrate");
+        return;
+      }
+      if (stored === null) return;
+      try {
+        const { value: raw, version: storedVersion } = unwrap(stored);
+        let value2 = raw;
+        if (version !== void 0 && storedVersion < version) {
+          if (!migrate) return;
+          try {
+            value2 = migrate(raw, storedVersion);
+          } catch (err) {
+            onError2?.(err, "migrate");
+            return;
+          }
+        }
         if (!validate || validate(value2)) {
-          sourceSet(value2);
+          writing = true;
+          try {
+            sourceSet(value2);
+          } finally {
+            writing = false;
+          }
         }
+      } catch (err) {
+        onError2?.(err, "hydrate");
       }
-    } catch {
     }
-    internalEffect(() => {
+    hydrate();
+    const stopEffect = internalEffect(() => {
       const value2 = sourceGet();
+      if (writing) return;
       try {
-        const serialized = serialize(value2);
+        const serialized = version !== void 0 ? serialize({ [ENVELOPE_TAG]: version, value: value2 }) : serialize(value2);
         storage.setItem(key, serialized);
-      } catch {
+      } catch (err) {
+        onError2?.(err, err?.name === "QuotaExceededError" ? "write" : "serialize");
       }
     });
+    const enableSync = options?.syncTabs ?? (typeof window !== "undefined" && storage === globalThis.localStorage);
+    let onStorage;
+    if (enableSync && typeof window !== "undefined") {
+      onStorage = (e) => {
+        if (e.storageArea !== storage) return;
+        if (e.key !== null && e.key !== key) return;
+        hydrate();
+      };
+      window.addEventListener("storage", onStorage);
+    }
+    return () => {
+      stopEffect();
+      if (onStorage && typeof window !== "undefined") {
+        window.removeEventListener("storage", onStorage);
+      }
+    };
   }
 
   // src/events/bus.ts