@fruit-ui/core 1.2.6 → 1.2.8

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,12 +1,12 @@
 {
   "name": "@fruit-ui/core",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "A vanilla JS toolkit for reactive UI",
   "main": "src/index.js",
   "homepage": "https://asantagata.github.io/fruit-ui/",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "terser .\\src\\index.js -o .\\dist\\index.js && copy ..\\README.md ."
+    "build": "terser .\\src\\index.js -o .\\dist\\index.js --mangle --toplevel && copy ..\\README.md ."
   },
   "keywords": [
     "fruit",

package/src/index.js

@@ -155,9 +155,13 @@ function createElementFromTemplate(template, onMounts, producer = null) {
             initializeThis.call(this, element, producer);
         }
         return element;
+    } else if (template.HTML) {
+        const div = document.createElement('div');
+        div.innerHTML = template.HTML;
+        return div.firstChild;
     }
-    const {tag, class: c, style, on, componentId, children, cloneFrom, dataset, key, binding, innerHTML, ...rest} = template;
-    const element = document.createElement(template.tag || 'div');
+    const {tag, class: c, style, on, componentId, children, cloneFrom, dataset, key, binding, innerHTML, xmlns, ...rest} = template;
+    const element = template.xmlns ? document.createElementNS(template.xmlns, template.tag) : document.createElement(template.tag || 'div');
     if (template.class) {
         switch (typeof template.class) {
             case 'string':
@@ -400,6 +404,10 @@ function rerenderElementFromTemplate(element, template, onMounts) {
     }
     if (template.cloneFrom && !element.isEqualNode(template.cloneFrom)) {
         return element.replaceWith(template.cloneFrom.cloneNode(true));
+    } else if (template.HTML) {
+        const div = document.createElement('div');
+        div.innerHTML = template.HTML;
+        return element.replaceWith(div.firstChild);
     }
     if ((template.tag?.toUpperCase() || 'DIV') !== element.tagName) {
         // tag cannot be changed
@@ -430,7 +438,7 @@ function rerenderElementFromTemplate(element, template, onMounts) {
             element.dataset[key] = template.dataset[key];
         }
     }
-    const {tag, cloneFrom, class: _, style, on, key, dataset, componentId, children, innerHTML, binding, ...rest} = template;
+    const {tag, class: c, style, on, componentId, children, cloneFrom, dataset, key, binding, innerHTML, xmlns, ...rest} = template;
     for (const attribute in rest) {
         element.setAttribute(attribute, template[attribute]);
     }
@@ -649,6 +657,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