@getforma/core 1.0.6 → 1.0.8

package/README.md

@@ -43,7 +43,7 @@ Or use a CDN — no build step, no bundler:
 <script src="https://unpkg.com/@getforma/core/dist/formajs-runtime.global.js"></script>
 ```
 
-> **Production:** Pin the version (e.g., `@getforma/core@1.0.1`) instead of `@latest`.
+> **Production:** Pin the version (e.g., `@getforma/core@1.0.7`) instead of `@latest`.
 
 ---
 
@@ -701,17 +701,17 @@ deactivateIsland(islandElement);
 
 ```html
 <!-- jsDelivr (recommended) -->
-<script src="https://cdn.jsdelivr.net/npm/@getforma/core@1.0.1/dist/formajs-runtime.global.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@getforma/core@1.0.7/dist/formajs-runtime.global.js"></script>
 
 <!-- unpkg -->
-<script src="https://unpkg.com/@getforma/core@1.0.1/dist/formajs-runtime.global.js"></script>
+<script src="https://unpkg.com/@getforma/core@1.0.7/dist/formajs-runtime.global.js"></script>
 ```
 
 ### ESM import (modern browsers, no bundler)
 
 ```html
 <script type="module">
-  import { createSignal, h, mount } from "https://cdn.jsdelivr.net/npm/@getforma/core@1.0.1/dist/index.js";
+  import { createSignal, h, mount } from "https://cdn.jsdelivr.net/npm/@getforma/core@1.0.7/dist/index.js";
 
   const [count, setCount] = createSignal(0);
   mount(() => h("button", { onClick: () => setCount((c) => c + 1) }, () => `${count()}`), "#app");

package/dist/{chunk-V732ZBCU.cjs → chunk-7L3KHGEA.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkDCTOXHPF_cjs = require('./chunk-DCTOXHPF.cjs');
-var chunk3U57L2TY_cjs = require('./chunk-3U57L2TY.cjs');
+var chunkBARF67I6_cjs = require('./chunk-BARF67I6.cjs');
+var chunkQLPCVK7C_cjs = require('./chunk-QLPCVK7C.cjs');
 
 // src/dom/element.ts
 var Fragment = /* @__PURE__ */ Symbol.for("forma.fragment");
@@ -156,7 +156,7 @@ function getCache(el) {
 }
 function handleClass(el, _key, value) {
   if (typeof value === "function") {
-    chunkDCTOXHPF_cjs.internalEffect(() => {
+    chunkBARF67I6_cjs.internalEffect(() => {
       const v = value();
       const cache = getCache(el);
       if (cache["class"] === v) return;
@@ -181,7 +181,7 @@ function handleClass(el, _key, value) {
 function handleStyle(el, _key, value) {
   if (typeof value === "function") {
     let prevKeys = [];
-    chunkDCTOXHPF_cjs.internalEffect(() => {
+    chunkBARF67I6_cjs.internalEffect(() => {
       const v = value();
       if (typeof v === "string") {
         const cache = getCache(el);
@@ -220,7 +220,7 @@ function handleEvent(el, key, value) {
 }
 function handleInnerHTML(el, _key, value) {
   if (typeof value === "function") {
-    chunkDCTOXHPF_cjs.internalEffect(() => {
+    chunkBARF67I6_cjs.internalEffect(() => {
       const resolved = value();
       if (resolved == null) {
         el.innerHTML = "";
@@ -264,7 +264,7 @@ function handleInnerHTML(el, _key, value) {
 function handleXLink(el, key, value) {
   const localName = key.slice(6);
   if (typeof value === "function") {
-    chunkDCTOXHPF_cjs.internalEffect(() => {
+    chunkBARF67I6_cjs.internalEffect(() => {
       const v = value();
       if (v == null || v === false) {
         el.removeAttributeNS(XLINK_NS, localName);
@@ -282,7 +282,7 @@ function handleXLink(el, key, value) {
 }
 function handleBooleanAttr(el, key, value) {
   if (typeof value === "function") {
-    chunkDCTOXHPF_cjs.internalEffect(() => {
+    chunkBARF67I6_cjs.internalEffect(() => {
       const v = value();
       const cache = getCache(el);
       if (cache[key] === v) return;
@@ -306,7 +306,7 @@ function handleBooleanAttr(el, key, value) {
 }
 function handleGenericAttr(el, key, value) {
   if (typeof value === "function") {
-    chunkDCTOXHPF_cjs.internalEffect(() => {
+    chunkBARF67I6_cjs.internalEffect(() => {
       const v = value();
       if (v == null || v === false) {
         const cache = getCache(el);
@@ -369,7 +369,11 @@ function applyProp(el, key, value) {
 function applyStaticProp(el, key, value) {
   if (value == null || value === false) return;
   if (key === "class" || key === "className") {
-    el.className = value;
+    if (el instanceof HTMLElement) {
+      el.className = value;
+    } else {
+      el.setAttribute("class", value);
+    }
     return;
   }
   if (key === "style") {
@@ -430,17 +434,58 @@ function appendChild(parent, child) {
       parent[DYNAMIC_CHILD_SYM] = true;
     }
     let currentNode = null;
-    chunkDCTOXHPF_cjs.internalEffect(() => {
+    let currentFragChildren = null;
+    let warnedArray = false;
+    const DEBUG = typeof globalThis.__FORMA_DEBUG__ !== "undefined";
+    const clearCurrent = () => {
+      if (currentFragChildren) {
+        for (const c of currentFragChildren) {
+          if (c.parentNode === parent) parent.removeChild(c);
+        }
+        currentFragChildren = null;
+      }
+      if (currentNode && currentNode.parentNode === parent) {
+        parent.removeChild(currentNode);
+      }
+      currentNode = null;
+    };
+    chunkBARF67I6_cjs.internalEffect(() => {
       const v = child();
-      if (v instanceof Node) {
-        if (currentNode) {
-          parent.replaceChild(v, currentNode);
-        } else {
-          parent.appendChild(v);
+      let resolved = v;
+      if (Array.isArray(v)) {
+        const frag = document.createDocumentFragment();
+        for (const item of v) {
+          if (item instanceof Node) frag.appendChild(item);
+          else if (Array.isArray(item)) {
+            if (DEBUG) console.warn("[forma] Nested arrays in function children are not supported. Flatten the array or use createList().");
+          } else if (item != null && item !== false && item !== true) {
+            frag.appendChild(new Text(String(item)));
+          }
+        }
+        resolved = frag.childNodes.length > 0 ? frag : null;
+        if (DEBUG && !warnedArray) {
+          warnedArray = true;
+          console.warn("[forma] Function child returned an array \u2014 auto-wrapped in DocumentFragment. Consider using createList() or wrapping in a container element for better performance.");
         }
-        currentNode = v;
+      }
+      if (resolved instanceof Node) {
+        clearCurrent();
+        const isNewFrag = resolved instanceof DocumentFragment;
+        if (isNewFrag) {
+          currentFragChildren = Array.from(resolved.childNodes);
+        }
+        parent.appendChild(resolved);
+        currentNode = isNewFrag ? null : resolved;
+      } else if (resolved == null || resolved === false || resolved === true) {
+        clearCurrent();
       } else {
-        const text = typeof v === "symbol" ? String(v) : String(v ?? "");
+        if (currentFragChildren) {
+          for (const c of currentFragChildren) {
+            if (c.parentNode === parent) parent.removeChild(c);
+          }
+          currentFragChildren = null;
+        }
+        const text = typeof resolved === "symbol" ? String(resolved) : String(resolved ?? "");
         if (!currentNode) {
           currentNode = new Text(text);
           parent.appendChild(currentNode);
@@ -535,9 +580,9 @@ function fragment(...children) {
 }
 
 // src/dom/show.ts
-function createShow(when, thenFn, elseFn) {
+function createShow(when, thenFn, elseFn = () => null) {
   if (hydrating) {
-    const branch = when() ? thenFn() : elseFn?.() ?? null;
+    const branch = when() ? thenFn() : elseFn();
     return {
       type: "show",
       condition: when,
@@ -554,7 +599,7 @@ function createShow(when, thenFn, elseFn) {
   let currentNode = null;
   let lastTruthy = null;
   let currentDispose = null;
-  const showDispose = chunkDCTOXHPF_cjs.internalEffect(() => {
+  const showDispose = chunkBARF67I6_cjs.internalEffect(() => {
     const truthy = !!when();
     const DEBUG = typeof globalThis.__FORMA_DEBUG__ !== "undefined";
     const DEBUG_LABEL = DEBUG ? thenFn.toString().slice(0, 60) : "";
@@ -586,9 +631,9 @@ function createShow(when, thenFn, elseFn) {
     const branchFn = truthy ? thenFn : elseFn;
     if (branchFn) {
       let branchDispose;
-      currentNode = chunkDCTOXHPF_cjs.createRoot((dispose) => {
+      currentNode = chunkBARF67I6_cjs.createRoot((dispose) => {
         branchDispose = dispose;
-        return chunkDCTOXHPF_cjs.untrack(() => branchFn());
+        return chunkBARF67I6_cjs.untrack(() => branchFn());
       });
       currentDispose = branchDispose;
     } else {
@@ -639,7 +684,7 @@ function applyDynamicProps(el, props) {
     }
     const fn = value;
     const attrKey = key;
-    chunkDCTOXHPF_cjs.internalEffect(() => {
+    chunkBARF67I6_cjs.internalEffect(() => {
       const v = fn();
       if (v === false || v == null) {
         el.removeAttribute(attrKey);
@@ -751,13 +796,13 @@ function setupShowEffect(desc, marker) {
   let elseFragment = null;
   const hasSSRContent = marker.start.nextSibling !== marker.end;
   if (!hasSSRContent && currentCondition) {
-    if (chunkDCTOXHPF_cjs.__DEV__) console.warn("[forma] Hydration: show condition mismatch \u2014 SSR empty but client condition is true");
+    if (chunkBARF67I6_cjs.__DEV__) console.warn("[forma] Hydration: show condition mismatch \u2014 SSR empty but client condition is true");
     const trueBranch = desc.whenTrue();
     if (trueBranch instanceof Node) {
       marker.start.parentNode.insertBefore(trueBranch, marker.end);
     }
   }
-  chunkDCTOXHPF_cjs.internalEffect(() => {
+  chunkBARF67I6_cjs.internalEffect(() => {
     const next = !!desc.condition();
     if (next === currentCondition) return;
     currentCondition = next;
@@ -804,7 +849,7 @@ function adoptBranchContent(desc, regionStart, regionEnd) {
 }
 function adoptNode(desc, ssrEl) {
   if (!ssrEl || ssrEl.tagName !== desc.tag.toUpperCase()) {
-    if (chunkDCTOXHPF_cjs.__DEV__) console.warn(`Hydration mismatch: expected <${desc.tag}>, got <${ssrEl?.tagName?.toLowerCase() ?? "nothing"}>`);
+    if (chunkBARF67I6_cjs.__DEV__) console.warn(`Hydration mismatch: expected <${desc.tag}>, got <${ssrEl?.tagName?.toLowerCase() ?? "nothing"}>`);
     const fresh = descriptorToElement(desc);
     if (ssrEl) ssrEl.replaceWith(fresh);
     return;
@@ -878,7 +923,7 @@ function adoptNode(desc, ssrEl) {
             }
             node = node.nextSibling;
           }
-          const currentItems = chunkDCTOXHPF_cjs.untrack(() => child.items());
+          const currentItems = chunkBARF67I6_cjs.untrack(() => child.items());
           const listKeyFn = child.keyFn;
           const listRenderFn = child.renderFn;
           const useIndexFallback = ssrKeyMap.size === 0 && ssrElements.length > 0;
@@ -902,11 +947,11 @@ function adoptNode(desc, ssrEl) {
               adoptedNodes.push(ssrNode);
               adoptedItems.push(item);
             } else {
-              if (chunkDCTOXHPF_cjs.__DEV__) console.warn(`[FormaJS] Hydration: list item key "${key}" not found in SSR \u2014 rendering fresh`);
+              if (chunkBARF67I6_cjs.__DEV__) console.warn(`[FormaJS] Hydration: list item key "${key}" not found in SSR \u2014 rendering fresh`);
               const prevHydrating = hydrating;
               hydrating = false;
               try {
-                const [getIndex] = chunk3U57L2TY_cjs.createSignal(i);
+                const [getIndex] = chunkQLPCVK7C_cjs.createSignal(i);
                 const fresh = listRenderFn(item, getIndex);
                 end.parentNode.insertBefore(fresh, end);
                 adoptedNodes.push(fresh);
@@ -924,7 +969,7 @@ function adoptNode(desc, ssrEl) {
             }
           } else {
             for (const [unusedKey, unusedNode] of ssrKeyMap) {
-              if (chunkDCTOXHPF_cjs.__DEV__) console.warn(`[FormaJS] Hydration: removing extra SSR list item with key "${unusedKey}"`);
+              if (chunkBARF67I6_cjs.__DEV__) console.warn(`[FormaJS] Hydration: removing extra SSR list item with key "${unusedKey}"`);
               if (unusedNode.parentNode) {
                 unusedNode.parentNode.removeChild(unusedNode);
               }
@@ -938,7 +983,7 @@ function adoptNode(desc, ssrEl) {
           for (let i = 0; i < adoptedItems.length; i++) {
             const item = adoptedItems[i];
             const key = listKeyFn(item);
-            const [getIndex, setIndex] = chunk3U57L2TY_cjs.createSignal(i);
+            const [getIndex, setIndex] = chunkQLPCVK7C_cjs.createSignal(i);
             cache.set(key, {
               element: adoptedNodes[i],
               item,
@@ -948,7 +993,7 @@ function adoptNode(desc, ssrEl) {
           }
           let reconcileNodes = adoptedNodes.slice();
           let reconcileItems = adoptedItems.slice();
-          chunkDCTOXHPF_cjs.internalEffect(() => {
+          chunkBARF67I6_cjs.internalEffect(() => {
             const newItems = child.items();
             const parent2 = start.parentNode;
             if (!parent2) return;
@@ -963,8 +1008,8 @@ function adoptNode(desc, ssrEl) {
                 hydrating = false;
                 try {
                   const key = listKeyFn(item);
-                  const [getIndex, setIndex] = chunk3U57L2TY_cjs.createSignal(0);
-                  const element = chunkDCTOXHPF_cjs.untrack(() => listRenderFn(item, getIndex));
+                  const [getIndex, setIndex] = chunkQLPCVK7C_cjs.createSignal(0);
+                  const element = chunkBARF67I6_cjs.untrack(() => listRenderFn(item, getIndex));
                   cache.set(key, { element, item, getIndex, setIndex });
                   return element;
                 } finally {
@@ -1013,12 +1058,12 @@ function adoptNode(desc, ssrEl) {
           const endMarker = findClosingMarker(cursor);
           let textNode = cursor.nextSibling;
           if (!textNode || textNode.nodeType !== 3) {
-            if (chunkDCTOXHPF_cjs.__DEV__) console.warn(`[FormaJS] Hydration: created text node for marker ${data} \u2014 SSR walker should emit content between markers`);
+            if (chunkBARF67I6_cjs.__DEV__) console.warn(`[FormaJS] Hydration: created text node for marker ${data} \u2014 SSR walker should emit content between markers`);
             const created = document.createTextNode("");
             cursor.parentNode.insertBefore(created, endMarker || cursor.nextSibling);
             textNode = created;
           }
-          chunkDCTOXHPF_cjs.internalEffect(() => {
+          chunkBARF67I6_cjs.internalEffect(() => {
             textNode.data = String(child());
           });
           cursor = endMarker ? endMarker.nextSibling : textNode.nextSibling;
@@ -1028,11 +1073,11 @@ function adoptNode(desc, ssrEl) {
           if (end) {
             let textNode = findTextBetween(start, end);
             if (!textNode) {
-              if (chunkDCTOXHPF_cjs.__DEV__) console.warn(`[FormaJS] Hydration: created text node for show marker ${start.data} \u2014 SSR walker should emit content between markers`);
+              if (chunkBARF67I6_cjs.__DEV__) console.warn(`[FormaJS] Hydration: created text node for show marker ${start.data} \u2014 SSR walker should emit content between markers`);
               textNode = document.createTextNode("");
               start.parentNode.insertBefore(textNode, end);
             }
-            chunkDCTOXHPF_cjs.internalEffect(() => {
+            chunkBARF67I6_cjs.internalEffect(() => {
               textNode.data = String(child());
             });
             cursor = end.nextSibling;
@@ -1045,14 +1090,14 @@ function adoptNode(desc, ssrEl) {
       } else if (cursor && cursor.nodeType === 3) {
         const textNode = cursor;
         cursor = cursor.nextSibling;
-        chunkDCTOXHPF_cjs.internalEffect(() => {
+        chunkBARF67I6_cjs.internalEffect(() => {
           textNode.data = String(child());
         });
       } else {
-        if (chunkDCTOXHPF_cjs.__DEV__) console.warn(`[FormaJS] Hydration: created text node in empty <${ssrEl.tagName.toLowerCase()}> \u2014 IR may not cover this component`);
+        if (chunkBARF67I6_cjs.__DEV__) console.warn(`[FormaJS] Hydration: created text node in empty <${ssrEl.tagName.toLowerCase()}> \u2014 IR may not cover this component`);
         const textNode = document.createTextNode("");
         ssrEl.appendChild(textNode);
-        chunkDCTOXHPF_cjs.internalEffect(() => {
+        chunkBARF67I6_cjs.internalEffect(() => {
           textNode.data = String(child());
         });
       }
@@ -1066,7 +1111,7 @@ function adoptNode(desc, ssrEl) {
 function hydrateIsland(component, target) {
   const hasSSRContent = target.childElementCount > 0 || target.childNodes.length > 0 && Array.from(target.childNodes).some((n) => n.nodeType === 1 || n.nodeType === 3 && n.data.trim());
   if (!hasSSRContent) {
-    if (chunkDCTOXHPF_cjs.__DEV__) {
+    if (chunkBARF67I6_cjs.__DEV__) {
       const name = target.getAttribute("data-forma-component") || "unknown";
       console.warn(
         `[forma] Island "${name}" has no SSR content \u2014 falling back to CSR. This means the IR walker did not render content between ISLAND_START and ISLAND_END.`
@@ -1382,14 +1427,14 @@ function createList(items, keyFn, renderFn, options) {
   let currentNodes = [];
   let currentItems = [];
   const updateOnItemChange = options?.updateOnItemChange ?? "none";
-  chunkDCTOXHPF_cjs.internalEffect(() => {
+  chunkBARF67I6_cjs.internalEffect(() => {
     const newItems = items();
     const parent = startMarker.parentNode;
     if (!parent) {
       return;
     }
     if (!Array.isArray(newItems)) {
-      if (chunkDCTOXHPF_cjs.__DEV__) {
+      if (chunkBARF67I6_cjs.__DEV__) {
         console.warn("[forma] createList: value is not an array, treating as empty");
       }
       for (const node of currentNodes) {
@@ -1407,7 +1452,7 @@ function createList(items, keyFn, renderFn, options) {
         break;
       }
     }
-    if (chunkDCTOXHPF_cjs.__DEV__) {
+    if (chunkBARF67I6_cjs.__DEV__) {
       const seen = /* @__PURE__ */ new Set();
       for (const item of cleanItems) {
         const key = keyFn(item);
@@ -1427,7 +1472,7 @@ function createList(items, keyFn, renderFn, options) {
       if (node[ABORT_SYM3] || node[CACHE_SYM2] || node[DYNAMIC_CHILD_SYM2]) {
         return;
       }
-      const next = chunkDCTOXHPF_cjs.untrack(() => renderFn(item, cached.getIndex));
+      const next = chunkBARF67I6_cjs.untrack(() => renderFn(item, cached.getIndex));
       if (canPatchStaticElement(node, next)) {
         patchStaticElement(node, next);
         cached.element = node;
@@ -1446,8 +1491,8 @@ function createList(items, keyFn, renderFn, options) {
       // createFn: create element + cache entry
       (item) => {
         const key = keyFn(item);
-        const [getIndex, setIndex] = chunk3U57L2TY_cjs.createSignal(0);
-        const element = chunkDCTOXHPF_cjs.untrack(() => renderFn(item, getIndex));
+        const [getIndex, setIndex] = chunkQLPCVK7C_cjs.createSignal(0);
+        const element = chunkBARF67I6_cjs.untrack(() => renderFn(item, getIndex));
         cache.set(key, { element, item, getIndex, setIndex });
         return element;
       },
@@ -1479,5 +1524,5 @@ exports.fragment = fragment;
 exports.h = h;
 exports.hydrateIsland = hydrateIsland;
 exports.reconcileList = reconcileList;
-//# sourceMappingURL=chunk-V732ZBCU.cjs.map
-//# sourceMappingURL=chunk-V732ZBCU.cjs.map
+//# sourceMappingURL=chunk-7L3KHGEA.cjs.map
+//# sourceMappingURL=chunk-7L3KHGEA.cjs.map