@fruit-ui/core 1.3.3 → 1.3.4

package/package.json

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

package/src/index.js

@@ -132,6 +132,7 @@ function createThis(component) {
  */
 function initializeThis(element, producer) {
     this.element = element;
+    if (producer === null) return;
     this.producer = producer;
     this.rerender = rerender.bind(this);
     this.setState = new Proxy({}, {
@@ -142,6 +143,14 @@ function initializeThis(element, producer) {
             }
         }
     });
+    this.bindings = new Proxy({}, {
+        get: (o, p, r) => {
+            return {
+                element: findSubelement(this.element, p),
+                rerender: () => rerenderByBinding.call(this, p)
+            }
+        }
+    });
 }
 
 /**
@@ -153,20 +162,26 @@ function initializeThis(element, producer) {
  * @returns {HTMLElement} - An HTMLElement.
  */
 function createElementFromTemplate(template, onMounts, producer = null) {
-    if (template.cloneFrom) {
+    if ('cloneFrom' in template) {
         const element = template.cloneFrom.cloneNode(true);
-        if (this && !this.element) {
+        if (template.componentId !== undefined) {
+            element.dataset.componentId = template.componentId;
             initializeThis.call(this, element, producer);
         }
         return element;
-    } else if (template.HTML) {
+    } else if ('HTML' in template) {
         const div = document.createElement('div');
         div.innerHTML = template.HTML;
-        return div.firstChild;
+        const element = div.firstChild;
+        if (template.componentId !== undefined) {
+            element.dataset.componentId = template.componentId;
+            initializeThis.call(this, element, producer);
+        }
+        return element;
     }
     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) {
+    if ('class' in template) {
         switch (typeof template.class) {
             case 'string':
                 element.className = template.class;
@@ -180,12 +195,12 @@ function createElementFromTemplate(template, onMounts, producer = null) {
                 }
         }
     }
-    if (template.style) {
+    if ('style' in template) {
         for (const k in template.style) {
             element.style.setProperty(k, template.style[k]);
         }
     }
-    if (template.on) {
+    if ('on' in template) {
         const {mount: onMount, ...listeners} = template.on;
         for (const type in listeners) {
             if (!listeners[type]) continue;
@@ -201,43 +216,30 @@ function createElementFromTemplate(template, onMounts, producer = null) {
         else
             element.setAttribute(attribute, template[attribute]);
     }
-    if (template.dataset) {
+    if ('dataset' in template) {
         for (const k in template.dataset) {
             element.dataset[k] = template.dataset[k];
         }
     }
-    if (template.componentId) {
-        element.dataset.componentId = template.componentId;
-    }
-    if (template.key) {
+    if (template.key !== undefined) {
         element.dataset.key = template.key;
     }
-    if (template.binding) {
+    if (template.binding !== undefined) {
         element.dataset.binding = template.binding;
     }
-    if (this && !this.element) {
+    if (template.componentId !== undefined) {
+        element.dataset.componentId = template.componentId;
         initializeThis.call(this, element, producer);
     }
-    if (template.innerHTML) {
+    if ('innerHTML' in template) {
         element.innerHTML = template.innerHTML;
-    } else if (template.children !== undefined) {
+    } else if ('children' in template) {
         if (Array.isArray(template.children)) {
             element.replaceChildren(
                 ...template.children.map(ct => createElementFromElementable.call(this, ct, onMounts))
             );
-            // handle bindings
-            for (let i = 0; i < template.children.length; i++) {
-                const childTm = template.children[i];
-                if (childTm.binding && this) {
-                    setBinding.call(this, childTm.binding, element.childNodes[i]);
-                }
-            }
         } else {
             element.replaceChildren(createElementFromElementable.call(this, template.children, onMounts));
-            // handle binding
-            if (template.children.binding && this) {
-                setBinding.call(this, template.children.binding, element.childNodes[0]);
-            }
         }
     }
     return element;
@@ -333,7 +335,7 @@ function doOnMountHandling(func) {
 function rerender() {
     doOnMountHandling((onMounts) => {
         const template = this.producer();
-        rerenderElementFromTemplate.call(this, this.element, giveTemplateComponentMetadata(template, this.producer.componentId), onMounts);
+        rerenderElementFromTemplate.call(this, this.element, giveTemplateComponentMetadata(template, this.element.dataset.componentId, this.element.dataset.key, this.element.dataset.binding), onMounts);
     });
 }
 
@@ -372,7 +374,11 @@ function findSubelement(element, bindingName, atRoot = true) {
     } else if (!atRoot && 'componentId' in element.dataset) {
         return undefined;
     }
-    return Array.from(element.children).find(c => !!findSubelement(c, bindingName, false));
+    for (const child of element.children) {
+        const found = findSubelement(child, bindingName, false);
+        if (found) return found;
+    }
+    return undefined;
 }
 
 /**
@@ -389,7 +395,10 @@ function findSubtemplate(template, bindingName, atRoot = true) {
     }
     if (template.children) {
         if (Array.isArray(template.children)) {
-            return template.children.find(c => findSubtemplate(c, bindingName, false));
+            for (const child of template.children) {
+                const found = findSubtemplate(child, bindingName, false);
+                if (found) return found;
+            }
         } else {
             return findSubtemplate(template.children, bindingName, false);
         }
@@ -406,20 +415,32 @@ function findSubtemplate(template, bindingName, atRoot = true) {
  */
 function rerenderElementFromTemplate(element, template, onMounts) {
     if (typeof template !== 'object') {
-        return element.replaceWith(template.toString());
+        element.replaceWith(template.toString());
     }
-    if (template.cloneFrom && !element.isEqualNode(template.cloneFrom)) {
-        return element.replaceWith(template.cloneFrom.cloneNode(true));
-    } else if (template.HTML) {
+    if ('cloneFrom' in template && !element.isEqualNode(template.cloneFrom)) {
+        const newElement = template.cloneFrom.cloneNode(true);
+        if (template.componentId !== undefined) {
+            newElement.dataset.componentId = template.componentId;
+            this.element = newElement;
+        }
+        return element.replaceWith(newElement);
+    } else if ('HTML' in template) {
         const div = document.createElement('div');
         div.innerHTML = template.HTML;
-        return element.replaceWith(div.firstChild);
+        const newElement = div.firstChild;
+        if (template.componentId !== undefined) {
+            newElement.dataset.componentId = template.componentId;
+            this.element = newElement;
+        }
+        return element.replaceWith(newElement);
     }
-    if ((template.tag?.toUpperCase() || 'DIV') !== element.tagName) {
-        // tag cannot be changed
-        return element.replaceWith(createElementFromElementable.call(this, template, onMounts));
+    if ((template.tag?.toUpperCase() || 'DIV') !== element.tagName.toUpperCase()) {
+        const newElement = createElementFromElementable.call(this, template, onMounts);
+        if ('componentId' in template)
+            this.element = newElement;
+        return element.replaceWith(newElement);
     }
-    if (template.class) {
+    if ('class' in template) {
         if (typeof template.class === 'string') {
             element.className = template.class;
         } else if (Array.isArray(template)) {
@@ -434,12 +455,12 @@ function rerenderElementFromTemplate(element, template, onMounts) {
             }
         }
     }
-    if (template.style) {
+    if ('style' in template) {
         for (const k in template.style) {
             element.style.setProperty(k, template.style[k]);
         }
     }
-    if (template.dataset) {
+    if ('dataset' in template) {
         for (let key in template.dataset) {
             element.dataset[key] = template.dataset[key];
         }
@@ -451,7 +472,7 @@ function rerenderElementFromTemplate(element, template, onMounts) {
         else
             element.setAttribute(attribute, template[attribute]);
     }
-    if (template.innerHTML) {
+    if ('innerHTML' in template) {
         element.innerHTML = template.innerHTML;
     } else if (template.children === undefined || template.children.length === 0) {
         element.innerHTML = "";
@@ -533,7 +554,7 @@ function rerenderChildComponent(element, component, onMounts) {
         return;
     }
     cmpThis.producer = component.render.bind(cmpThis);
-    rerenderElementFromTemplate.call(cmpThis, element, cmpThis.producer(), onMounts);
+    rerenderElementFromTemplate.call(cmpThis, element, giveTemplateComponentMetadata(cmpThis.producer(), element.dataset.componentId, component.key, component.binding), onMounts);
 }
 
 /**
@@ -612,7 +633,6 @@ function rerenderChildren(element, template, onMounts) {
                         delete thisRecord[childEl.dataset.componentId];
                     }
                 }
-                if ('binding' in childEl.dataset) delete this.bindings[childEl.dataset.binding];
                 childEl.remove();
             }
         }
@@ -641,8 +661,6 @@ function rerenderChildren(element, template, onMounts) {
         // handle first Min(M,N) elements
         for (let i = 0; i < Math.min(elChildrenArray.length, tmChildrenArray.length); i++) {
             let childEl = elChildrenArray[i], childTm = tmChildrenArray[i];
-            if ('binding' in childEl.dataset && childEl.dataset.binding !== childTm.binding) 
-                delete this.bindings[childEl.dataset.binding];
             if (elementableIsComponent(childTm)) {
                 if ('componentId' in childEl.dataset) rerenderChildComponent(childEl, childTm, onMounts);
                 else childEl.replaceWith(createElementFromComponent(childTm, onMounts));
@@ -663,7 +681,6 @@ function rerenderChildren(element, template, onMounts) {
             for (let i = elChildrenArray.length - 1; i >= tmChildrenArray.length; 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();
             }
         }
@@ -672,7 +689,6 @@ function rerenderChildren(element, template, onMounts) {
         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) {
@@ -684,14 +700,6 @@ function rerenderChildren(element, template, onMounts) {
         }
     }
 
-    // handle bindings
-    for (let i = 0; i < tmChildrenArray.length; i++) {
-        const childTm = tmChildrenArray[i];
-        if (childTm.binding) {
-            setBinding.call(this, childTm.binding, element.children[i]);
-        }
-    }
-
     // handle text nodes
     for (let i = 0; i < tmChildNodeArray.length; i++) {
         if (i >= element.childNodes.length) {
@@ -748,19 +756,6 @@ function LIS(arr) {
 	return S;
 }
 
-/**
- * Sets a binding in a This.
- * @param {This} this - the This.
- * @param {string} bindingName - the name of the binding.
- * @param {HTMLElement} element - the element being bound.
- */
-function setBinding(bindingName, element) {
-    this.bindings[bindingName] = {
-        element,
-        rerender: () => rerenderByBinding.call(this, bindingName)
-    };
-}
-
 /**
  * Creates an HTMLElement given an Elementable.
  * @param {Elementable} elementable - the Elementable.