@fruit-ui/core 1.2.9 → 1.3.0

package/package.json

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

package/src/index.js

@@ -49,7 +49,7 @@
  * @property {object} state - The component's state.
  * @property {object} setState - Functions to set the component's state with automatic reactivity.
  * @property {Object.<string, Binding>} bindings - The component's bindings.
- * @property {object} [memo] - The component's memo, if given.
+ * @property {*} [memo] - The component's last memo value, if given.
  */
 
 /**
@@ -66,7 +66,8 @@
  * @property {() => Object.<string, any>} [state] - The initializer for local state.
  * @property {string} [key] - The element's key, used to distinguish re-ordered siblings and preserve state.
  * @property {string} [binding] - The element's binding.
- * @property {object} [memo] - The element's memoized props, used to control rerendering.
+ * @property {() => any} [memo] - The element's memo, used to control rerendering.
+ * @property {() => boolean} [customMemo] - The element's custom memo, used to control rerendering.
  */
 
 /**
@@ -119,7 +120,7 @@ function createThis(component) {
         state: {},
         setState: {},
         bindings: {},
-        memo: typeof component.memo === 'object' ? deepClone(component.memo) : component.memo
+        memo: 'memo' in component ? deepClone(component.memo()) : false
     };
 }
 
@@ -181,7 +182,7 @@ function createElementFromTemplate(template, onMounts, producer = null) {
     }
     if (template.style) {
         for (const k in template.style) {
-            element.style[k] = template.style[k];
+            element.style.setProperty(k, template.style[k]);
         }
     }
     if (template.on) {
@@ -432,8 +433,8 @@ function rerenderElementFromTemplate(element, template, onMounts) {
         }
     }
     if (template.style) {
-        for (let key in template.style) {
-            element.style[key] = template.style[key];
+        for (const k in template.style) {
+            element.style.setProperty(k, template.style[k]);
         }
     }
     if (template.dataset) {
@@ -499,17 +500,18 @@ function deepClone(value) {
 }
 
 /**
- * Returns true iff a component has a memo (functional or otherwise) and it is satisfied.
+ * Returns true iff a component has a memo or customMemo and it is satisfied.
  * @param {This} this - the This.
  * @param {Component} component - the Component.
- * @returns {boolean} whether the memo exists and is satisfied.
+ * @returns {boolean} whether a memo exists and is satisfied.
  */
 function evaluateMemo(component) {
-    if (component.memo && this.memo) {
-        // 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 = deepClone(component.memo);
+    if (component.customMemo) {
+        return !component.customMemo();
+    } else if (component.memo) {
+        const componentMemoValue = component.memo();
+        const equal = deepEqual(componentMemoValue, this.memo);
+        this.memo = deepClone(componentMemoValue);
         return equal;
     } else return false;
 }