@fruit-ui/core 1.2.5 → 1.2.7

package/README.md

@@ -64,7 +64,7 @@ Smaller apps don't always warrant heavyweight frameworks, but interfacing with t
 ## Getting started
 
 There are three ways to use FRUIT in your projects:
-- Download and copy the [Terser-compressed JS file](https://github.com/asantagata/fruit-ui/blob/main/core/dist/index.js) file into your project. (This is a compressed version built with Terser; you can just as well use the [non-compressed version](https://github.com/asantagata/fruit-ui/blob/main/core/src/index.js) which uses JSDoc annotations.) Then you can use `import * as fruit from "./modules/fruit.js"` or `<script type="module" src="./modules/fruit.js">` to access FRUIT in your JS apps.
+- Download and copy the [Terser-compressed JS file](https://github.com/asantagata/fruit-ui/blob/main/core/dist/index.js) file into your project. (This is a compressed version built with Terser; you can just as well use the [non-compressed version](https://github.com/asantagata/fruit-ui/blob/main/core/src/index.js) which uses JSDoc annotations). Then you can use `import * as fruit from "./modules/fruit.js"` or `<script type="module" src="./modules/fruit.js">` to access FRUIT in your JS apps.
 - Access via browser loading, i.e., `import * as fruit from "https://cdn.jsdelivr.net/npm/@fruit-ui/core@latest/src/index.js"`.
 - With NPM installed, run `npm install @fruit-ui/core`. Then use `import * as fruit from "@fruit-ui/core"`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fruit-ui/core",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "A vanilla JS toolkit for reactive UI",
   "main": "src/index.js",
   "homepage": "https://asantagata.github.io/fruit-ui/",

package/src/index.js

@@ -116,7 +116,7 @@ function createThis(component) {
         state: {},
         setState: {},
         bindings: {},
-        memo: structuredClone(component.memo)
+        memo: deepClone(component.memo)
     };
 }
 
@@ -472,6 +472,21 @@ function deepEqual(a, b) {
     } else return (a === b);
 }
 
+/**
+ * Deep clones a value.
+ * @param {*} value - the value. 
+ * @returns {*} - the clone.
+ */
+function deepClone(value) {
+    if (typeof value === 'object') {
+        if (value === null) return null;
+        if (Array.isArray(value)) return value.map(deepClone);
+        if (value instanceof Set) return new Set([...value].map(deepClone));
+        if (value instanceof Map) return new Map(value.entries().map(([k, v]) => [deepClone(k), deepClone(v)]));
+        return Object.fromEntries(Object.entries(value).map(([k,v]) => [k, deepClone(v)]));
+    } else return value;
+}
+
 /**
  * Returns true iff a component has a memo (functional or otherwise) and it is satisfied.
  * @param {This} this - the This.
@@ -483,7 +498,7 @@ function evaluateMemo(component) {
         // for functional memos: rerender if returns false
         if (typeof component.memo === 'function') return !!component.memo.call(this);
         const equal = deepEqual(component.memo, this.memo);
-        this.memo = structuredClone(component.memo);
+        this.memo = deepClone(component.memo);
         return equal;
     } else return false;
 }
@@ -634,6 +649,21 @@ function rerenderChildren(element, template, onMounts) {
                 childEl.remove();
             }
         }
+    } else if (tmChildrenArray.length === 0 && elChildrenArray.length > 0) {
+        // delete all children
+        for (let i = elChildrenArray.length - 1; i >= 0; i--) {
+            let childEl = elChildrenArray[i];
+            if ('componentId' in childEl.dataset) delete thisRecord[childEl.dataset.componentId];
+            if ('binding' in childEl.dataset) delete this.bindings[childEl.dataset.binding];
+            childEl.remove();
+        }
+    } else if (tmChildrenArray.length > 0 && elChildrenArray.length === 0) {
+        // create all children
+        for (let i = 0; i < tmChildrenArray.length; i++) {
+            let childTm = tmChildrenArray[i];
+            const newChild = createElementFromElementable.call(this, childTm, onMounts);
+            element.appendChild(newChild);
+        }
     }
 
     // handle bindings