@getforma/core 1.0.8 → 1.0.9

package/dist/formajs.global.js

@@ -49,6 +49,7 @@ var FormaJS = (() => {
     createSuspense: () => createSuspense,
     createSwitch: () => createSwitch,
     createText: () => createText,
+    createUnownedRoot: () => createUnownedRoot,
     deactivateAllIslands: () => deactivateAllIslands,
     deactivateIsland: () => deactivateIsland,
     defineComponent: () => defineComponent,
@@ -622,11 +623,15 @@ var FormaJS = (() => {
   // src/reactive/root.ts
   var currentRoot = null;
   var rootStack = [];
-  function createRoot(fn) {
+  function createRootImpl(fn, owned) {
     const scope = { disposers: [], scopeDispose: null };
+    const parentRoot = owned ? currentRoot : null;
     rootStack.push(currentRoot);
     currentRoot = scope;
+    let disposed = false;
     const dispose = () => {
+      if (disposed) return;
+      disposed = true;
       if (scope.scopeDispose) {
         try {
           scope.scopeDispose();
@@ -642,16 +647,36 @@ var FormaJS = (() => {
       }
       scope.disposers.length = 0;
     };
+    if (parentRoot) {
+      parentRoot.disposers.push(dispose);
+    }
     let result;
     try {
-      scope.scopeDispose = effectScope(() => {
-        result = fn(dispose);
-      });
+      if (owned) {
+        scope.scopeDispose = effectScope(() => {
+          result = fn(dispose);
+        });
+      } else {
+        const prevSub = setActiveSub(void 0);
+        try {
+          scope.scopeDispose = effectScope(() => {
+            result = fn(dispose);
+          });
+        } finally {
+          setActiveSub(prevSub);
+        }
+      }
     } finally {
       currentRoot = rootStack.pop() ?? null;
     }
     return result;
   }
+  function createRoot(fn) {
+    return createRootImpl(fn, true);
+  }
+  function createUnownedRoot(fn) {
+    return createRootImpl(fn, false);
+  }
   function registerDisposer(dispose) {
     if (currentRoot) {
       currentRoot.disposers.push(dispose);
@@ -1314,18 +1339,26 @@ var FormaJS = (() => {
         const cached = cache2.get(key);
         if (cached) cached.item = item;
       };
+      const oldCache = cache2;
       const result = reconcileList(
         parent2,
         currentItems,
         cleanItems,
         currentNodes,
         keyFn,
-        // createFn: create element + cache entry
+        // createFn: create element + cache entry.
+        // Each item is rendered inside createRoot + untrack so that inner
+        // effects are owned by the item's root (not the parent), and are
+        // disposed when the item is removed from the list.
         (item) => {
           const key = keyFn(item);
           const [getIndex, setIndex] = createSignal(0);
-          const element = untrack(() => renderFn(item, getIndex));
-          cache2.set(key, { element, item, getIndex, setIndex });
+          let itemDispose;
+          const element = createRoot((dispose) => {
+            itemDispose = dispose;
+            return untrack(() => renderFn(item, getIndex));
+          });
+          cache2.set(key, { element, item, getIndex, setIndex, dispose: itemDispose });
           return element;
         },
         updateRow,
@@ -1335,16 +1368,29 @@ var FormaJS = (() => {
       const newCache = /* @__PURE__ */ new Map();
       for (let i = 0; i < cleanItems.length; i++) {
         const key = keyFn(cleanItems[i]);
-        const cached = cache2.get(key);
+        const cached = oldCache.get(key);
         if (cached) {
           cached.setIndex(i);
           newCache.set(key, cached);
         }
       }
+      for (const [key, cached] of oldCache) {
+        if (!newCache.has(key)) {
+          cached.dispose();
+        }
+      }
       cache2 = newCache;
       currentNodes = result.nodes;
       currentItems = result.items;
     });
+    registerDisposer(() => {
+      for (const cached of cache2.values()) {
+        cached.dispose();
+      }
+      cache2 = /* @__PURE__ */ new Map();
+      currentNodes = [];
+      currentItems = [];
+    });
     return fragment2;
   }
 
@@ -1412,6 +1458,13 @@ var FormaJS = (() => {
         parent2.insertBefore(currentNode, endMarker);
       }
     });
+    registerDisposer(() => {
+      if (currentDispose) {
+        currentDispose();
+        currentDispose = null;
+      }
+      currentNode = null;
+    });
     fragment2.__showDispose = () => {
       showDispose();
       if (currentDispose) {
@@ -2095,6 +2148,31 @@ var FormaJS = (() => {
       }
     }
   }
+  function parseCssString(css) {
+    const obj = {};
+    for (const decl of css.split(";")) {
+      const colon = decl.indexOf(":");
+      if (colon < 0) continue;
+      const prop = decl.slice(0, colon).trim();
+      const val = decl.slice(colon + 1).trim();
+      if (prop && val) {
+        const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+        obj[camel] = val;
+      }
+    }
+    return obj;
+  }
+  function applyStyleObj(el, obj, prevKeys) {
+    const style = el.style;
+    const nextKeys = Object.keys(obj);
+    for (const k of prevKeys) {
+      if (!(k in obj)) {
+        style.removeProperty(k.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()));
+      }
+    }
+    Object.assign(style, obj);
+    return nextKeys;
+  }
   function handleStyle(el, _key, value2) {
     if (typeof value2 === "function") {
       let prevKeys = [];
@@ -2104,25 +2182,16 @@ var FormaJS = (() => {
           const cache2 = getCache(el);
           if (cache2["style"] === v) return;
           cache2["style"] = v;
-          prevKeys = [];
-          el.style.cssText = v;
+          prevKeys = applyStyleObj(el, parseCssString(v), prevKeys);
         } else if (v && typeof v === "object") {
-          const style = el.style;
-          const nextKeys = Object.keys(v);
-          for (const k of prevKeys) {
-            if (!(k in v)) {
-              style.removeProperty(k.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()));
-            }
-          }
-          Object.assign(style, v);
-          prevKeys = nextKeys;
+          prevKeys = applyStyleObj(el, v, prevKeys);
         }
       });
     } else if (typeof value2 === "string") {
       const cache2 = getCache(el);
       if (cache2["style"] === value2) return;
       cache2["style"] = value2;
-      el.style.cssText = value2;
+      applyStyleObj(el, parseCssString(value2), []);
     } else if (value2 && typeof value2 === "object") {
       Object.assign(el.style, value2);
     }
@@ -2295,7 +2364,7 @@ var FormaJS = (() => {
     }
     if (key === "style") {
       if (typeof value2 === "string") {
-        el.style.cssText = value2;
+        applyStyleObj(el, parseCssString(value2), []);
       } else if (value2 && typeof value2 === "object") {
         Object.assign(el.style, value2);
       }
@@ -2516,12 +2585,12 @@ var FormaJS = (() => {
     }
     let disposeRoot;
     if (target.hasAttribute("data-forma-ssr")) {
-      createRoot((dispose) => {
+      createUnownedRoot((dispose) => {
         disposeRoot = dispose;
         hydrateIsland(component, target);
       });
     } else {
-      const dom = createRoot((dispose) => {
+      const dom = createUnownedRoot((dispose) => {
         disposeRoot = dispose;
         return component();
       });
@@ -2602,6 +2671,13 @@ var FormaJS = (() => {
         if (DEBUG) console.log("[forma:switch] inserted", currentNode.nodeName, "before end marker");
       }
     });
+    registerDisposer(() => {
+      for (const entry of cache2.values()) {
+        entry.dispose();
+      }
+      cache2.clear();
+      currentNode = null;
+    });
     fragment2.__switchDispose = () => {
       switchDispose();
       for (const entry of cache2.values()) {
@@ -2817,7 +2893,7 @@ var FormaJS = (() => {
       const props = loadIslandProps(root, id, sharedProps);
       root.setAttribute("data-forma-status", "hydrating");
       let activeRoot = root;
-      createRoot((dispose) => {
+      createUnownedRoot((dispose) => {
         activeRoot = hydrateIsland(() => hydrateFn(root, props), root);
         activeRoot.__formaDispose = dispose;
       });