@dinoreic/fez 0.2.2 → 0.3.2

package/src/fez/instance.js

@@ -81,11 +81,6 @@ export default class FezBase {
     return formObject
   }
 
-  static fastBind() {
-    // return true to bind without requestAnimationFrame
-    // you can do this if you are sure you are not expecting innerHTML data
-    return false
-  }
 
   static nodeName = 'div'
 
@@ -106,42 +101,11 @@ export default class FezBase {
     if (this.root?.isConnected) {
       return true
     } else {
-      this.fezRemoveSelf()
+      this.fezOnDestroy()
       return false
     }
   }
 
-  // clear all node references
-  fezRemoveSelf() {
-    this._setIntervalCache ||= {}
-    Object.keys(this._setIntervalCache).forEach((key)=> {
-      clearInterval(this._setIntervalCache[key])
-    })
-
-    if (this._eventHandlers) {
-      Object.entries(this._eventHandlers).forEach(([eventName, handler]) => {
-        window.removeEventListener(eventName, handler);
-      });
-      this._eventHandlers = {};
-    }
-
-    if (this._timeouts) {
-      Object.values(this._timeouts).forEach(timeoutId => {
-        clearTimeout(timeoutId);
-      });
-      this._timeouts = {};
-    }
-
-    this.onDestroy()
-    this.onDestroy = () => {}
-
-    if (this.root) {
-      this.root.fez = undefined
-    }
-
-    this.root = undefined
-  }
-
   // get single node property
   prop(name) {
     let v = this.oldRoot[name] || this.props[name]
@@ -178,80 +142,92 @@ export default class FezBase {
     }
   }
 
-  // Generic function to handle window events with automatic cleanup
-  // eventName: 'resize', 'scroll', etc.
-  // func: callback function to execute
-  // delay: throttle delay in ms (default: 100ms)
-  on(eventName, func, delay = 200) {
-    this._eventHandlers = this._eventHandlers || {};
-    this._timeouts = this._timeouts || {};
-
-    if (this._eventHandlers[eventName]) {
-      window.removeEventListener(eventName, this._eventHandlers[eventName]);
+  // clear all node references
+  // Centralized destroy logic
+  fezOnDestroy() {
+    // Execute all registered cleanup callbacks
+    if (this._onDestroyCallbacks) {
+      this._onDestroyCallbacks.forEach(callback => {
+        try {
+          callback();
+        } catch (e) {
+          console.error('Fez: Error in cleanup callback:', e);
+        }
+      });
+      this._onDestroyCallbacks = [];
     }
 
-    if (this._timeouts[eventName]) {
-      clearTimeout(this._timeouts[eventName]);
+    // Call user's onDestroy lifecycle hook
+    this.onDestroy()
+    this.onDestroy = () => {}
+
+    // Clean up root references
+    if (this.root) {
+      this.root.fez = undefined
     }
 
-    let lastRun = 0;
+    this.root = undefined
+  }
 
-    const doExecute = () => {
-      if (!this.isConnected) {
-        if (this._eventHandlers[eventName]) {
-          window.removeEventListener(eventName, this._eventHandlers[eventName]);
-          delete this._eventHandlers[eventName];
-        }
-        if (this._timeouts[eventName]) {
-          clearTimeout(this._timeouts[eventName]);
-          delete this._timeouts[eventName];
-        }
-        return false;
-      }
-      func.call(this);
-      return true;
-    };
+  // Add a cleanup callback to be executed on destroy
+  addOnDestroy(callback) {
+    this._onDestroyCallbacks = this._onDestroyCallbacks || [];
+    this._onDestroyCallbacks.push(callback);
+  }
 
-    const handleEvent = () => {
-      const now = Date.now();
+  // Generic function to handle window events with automatic cleanup
+  on(eventName, func, delay = 200) {
+    this._eventHandlers = this._eventHandlers || {};
 
-      if (now - lastRun >= delay) {
-        if (doExecute()) {
-          lastRun = now;
-        } else {
-          return;
-        }
-      }
+    if (this._eventHandlers[eventName]) {
+      window.removeEventListener(eventName, this._eventHandlers[eventName]);
+    }
 
-      // Clear previous timeout and set new one to ensure final event
-      if (this._timeouts[eventName]) {
-        clearTimeout(this._timeouts[eventName]);
+    const throttledFunc = Fez.throttle(() => {
+      if (this.isConnected) {
+        func.call(this);
       }
+    }, delay);
 
-      this._timeouts[eventName] = setTimeout(() => {
-        if (now > lastRun && doExecute()) {
-          lastRun = Date.now();
-        }
-        delete this._timeouts[eventName];
-      }, delay);
-    };
+    this._eventHandlers[eventName] = throttledFunc;
+    window.addEventListener(eventName, throttledFunc);
 
-    this._eventHandlers[eventName] = handleEvent;
-    window.addEventListener(eventName, handleEvent);
+    this.addOnDestroy(() => {
+      window.removeEventListener(eventName, throttledFunc);
+      delete this._eventHandlers[eventName];
+    });
   }
 
   // Helper function for resize events
-  onResize(func, delay) {
+  onWindowResize(func, delay) {
     this.on('resize', func, delay);
     func();
   }
 
   // Helper function for scroll events
-  onScroll(func, delay) {
+  onWindowScroll(func, delay) {
     this.on('scroll', func, delay);
     func();
   }
 
+  // Helper function for element resize events using ResizeObserver
+  onElementResize(el, func, delay = 200) {
+    const throttledFunc = Fez.throttle(() => {
+      if (this.isConnected) {
+        func.call(this, el.getBoundingClientRect(), el);
+      }
+    }, delay);
+
+    const observer = new ResizeObserver(throttledFunc);
+    observer.observe(el);
+
+    func.call(this, el.getBoundingClientRect(), el);
+
+    this.addOnDestroy(() => {
+      observer.disconnect();
+    });
+  }
+
   // copy child nodes, natively to preserve bound events
   // if node name is SLOT insert adjacent and remove SLOT, else as a child nodes
   slot(source, target) {
@@ -359,7 +335,8 @@ export default class FezBase {
 
     this.beforeRender()
 
-    const newNode = document.createElement(this.class.nodeName || 'div')
+    const nodeName = typeof this.class.nodeName == 'function' ? this.class.nodeName(this.root) : this.class.nodeName
+    const newNode = document.createElement(nodeName || 'div')
 
     let renderedTpl
     if (Array.isArray(template)) {
@@ -382,27 +359,20 @@ export default class FezBase {
       newNode.innerHTML = this.parseHtml(renderedTpl)
     }
 
-    newNode.querySelectorAll('[fez-keep]').forEach(newEl => {
-      const key = newEl.getAttribute('fez-keep')
-      const oldEl = this.root.querySelector(`[fez-keep="${key}"]`)
+    // Handle fez-keep attributes
+    this.fezKeepNode(newNode)
 
-      if (oldEl) {
-        // Keep the old element in place of the new one
-        newEl.parentNode.replaceChild(oldEl, newEl)
-      } else if (key === 'default-slot') {
-        // First render - populate the slot with current root children
-        Array.from(this.root.childNodes).forEach(child => newEl.appendChild(child))
-      }
-    })
+    // Handle fez-memoize attributes
+    this.fezMemoization(newNode)
 
     Fez.morphdom(this.root, newNode)
 
-    this.renderFezPostProcess()
+    this.fezRenderPostProcess()
 
     this.afterRender()
   }
 
-  renderFezPostProcess() {
+  fezRenderPostProcess() {
     const fetchAttr = (name, func) => {
       this.root.querySelectorAll(`*[${name}]`).forEach((n)=>{
         let value = n.getAttribute(name)
@@ -463,6 +433,43 @@ export default class FezBase {
     })
   }
 
+  fezKeepNode(newNode) {
+    newNode.querySelectorAll('[fez-keep]').forEach(newEl => {
+      const key = newEl.getAttribute('fez-keep')
+      const oldEl = this.root.querySelector(`[fez-keep="${key}"]`)
+
+      if (oldEl) {
+        // Keep the old element in place of the new one
+        newEl.parentNode.replaceChild(oldEl, newEl)
+      } else if (key === 'default-slot') {
+        // First render - populate the slot with current root children
+        Array.from(this.root.childNodes).forEach(child => newEl.appendChild(child))
+      }
+    })
+  }
+
+  fezMemoization(newNode) {
+    // Find the single memoize element in new DOM (excluding fez components)
+    const newMemoEl = newNode.querySelector('[fez-memoize]:not(.fez)')
+    if (!newMemoEl) return
+
+    this.fezMemoStore ||= new Map()
+
+    const newMemoElKey = newMemoEl.getAttribute('fez-memoize')
+    const storedNode = this.fezMemoStore.get(newMemoElKey)
+
+    if (storedNode) {
+      Fez.log(`Memoize restore ${this.fezName}: ${newMemoElKey}`)
+      newMemoEl.parentNode.replaceChild(storedNode.cloneNode(true), newMemoEl)
+    } else {
+      const oldMemoEl = this.root.querySelector('[fez-memoize]:not(.fez)')
+      if (oldMemoEl) {
+        const oldMemoElKey = oldMemoEl.getAttribute('fez-memoize')
+        this.fezMemoStore.set(oldMemoElKey, oldMemoEl.cloneNode(true))
+      }
+    }
+  }
+
   // refresh single node only
   refresh(selector) {
     alert('NEEDS FIX and remove htmlTemplate')
@@ -486,13 +493,21 @@ export default class FezBase {
     this._setIntervalCache ||= {}
     clearInterval(this._setIntervalCache[name])
 
-    this._setIntervalCache[name] = setInterval(() => {
+    const intervalID = setInterval(() => {
       if (this.isConnected) {
         func()
       }
     }, tick)
 
-    return this._setIntervalCache[name]
+    this._setIntervalCache[name] = intervalID
+
+    // Register cleanup callback
+    this.addOnDestroy(() => {
+      clearInterval(intervalID);
+      delete this._setIntervalCache[name];
+    });
+
+    return intervalID
   }
 
   find(selector) {

package/src/fez/root.js

@@ -4,6 +4,7 @@ import Gobber from './vendor/gobber.js'
 // morph dom from one state to another
 import { Idiomorph } from './vendor/idiomorph.js'
 
+import objectDump from './utils/dump.js'
 import connect from './connect.js'
 import compile from './compile.js'
 import state from './lib/global-state.js'
@@ -117,7 +118,7 @@ Fez.globalCss = (cssClass, opts = {}) => {
 }
 
 Fez.info = () => {
-  console.log(JSON.stringify(Fez.fastBindInfo, null, 2))
+  console.log('Fez components:', Object.keys(Fez.classes || {}))
 }
 
 Fez.morphdom = (target, newNode, opts = {}) => {
@@ -136,24 +137,6 @@ Fez.morphdom = (target, newNode, opts = {}) => {
   }
 }
 
-Fez.htmlEscape = (text) => {
-  if (typeof text == 'string') {
-    text = text
-      // .replaceAll('&', "&")
-      .replace(/font-family\s*:\s*(?:&[^;]+;|[^;])*?;/gi, '')
-      .replaceAll("&", '&')
-      .replaceAll("'", ''')
-      .replaceAll('"', '"')
-      .replaceAll('<', '&lt;')
-      .replaceAll('>', '&gt;')
-      // .replaceAll('@', '&#64;') // needed for template escaping
-
-    return text
-  } else {
-    return text === undefined ? '' : text
-  }
-}
-
 Fez.publish = (channel, ...args) => {
   Fez._subs ||= {}
   Fez._subs[channel] ||= []
@@ -211,125 +194,25 @@ Fez.untilTrue = (func, pingRate) => {
   }
 }
 
-// Script from URL
-//   Fez.head({ js: 'https://example.com/script.js' });
-// Script with attributes
-//   Fez.head({ js: 'https://example.com/script.js', type: 'module', async: true });
-// Script with callback
-//   Fez.head({ js: 'https://example.com/script.js' }, () => { console.log('loaded') });
-// Module loading with auto-import to window
-//   Fez.head({ js: 'https://example.com/module.js', module: 'MyModule' }); // imports and sets window.MyModule
-// CSS inclusion
-//   Fez.head({ css: 'https://example.com/styles.css' });
-// CSS with additional attributes and callback
-//   Fez.head({ css: 'https://example.com/styles.css', media: 'print' }, () => { console.log('CSS loaded') })
-// Inline script evaluation
-//   Fez.head({ script: 'console.log("Hello world")' })
-// Extract from nodes
-//   Fez.head(domNode)
-Fez.head = (config, callback) => {
-  if (config.nodeName) {
-    if (config.nodeName == 'SCRIPT') {
-      Fez.head({script: config.innerText})
-      config.remove()
-    } else {
-      config.querySelectorAll('script').forEach((n) => Fez.head(n) )
-      config.querySelectorAll('template[fez], xmp[fez], script[fez]').forEach((n) => Fez.compile(n) )
-    }
+// throttle function calls
+Fez.throttle = (func, delay = 200) => {
+  let lastRun = 0;
+  let timeout;
 
-    return
-  }
-
-  if (typeof config !== 'object' || config === null) {
-    throw new Error('head requires an object parameter');
-  }
+  return function(...args) {
+    const now = Date.now();
 
-  let src, attributes = {}, elementType;
-
-  if (config.script) {
-    if (config.script.includes('import ')) {
-      if (callback) {
-        Fez.error('Fez.head callback is not supported when script with import is passed (module context).')
-      }
-
-      // Evaluate inline script in context in the module
-      const script = document.createElement('script');
-      script.type = 'module';
-      script.textContent = config.script;
-      document.head.appendChild(script);
-      setTimeout(()=>script.remove(), 100)
+    if (now - lastRun >= delay) {
+      func.apply(this, args);
+      lastRun = now;
     } else {
-      try {
-        new Function(config.script)();
-        if (callback) callback();
-      } catch (error) {
-        Fez.error('Error executing script:', error);
-        console.log(config.script);
-      }
-    }
-    return;
-  } else if (config.js) {
-    src = config.js;
-    elementType = 'script';
-    // Copy all properties except 'js' as attributes
-    for (const [key, value] of Object.entries(config)) {
-      if (key !== 'js' && key !== 'module') {
-        attributes[key] = value;
-      }
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        func.apply(this, args);
+        lastRun = Date.now();
+      }, delay - (now - lastRun));
     }
-    // Handle module loading
-    if (config.module) {
-      attributes.type = 'module';
-    }
-  } else if (config.css) {
-    src = config.css;
-    elementType = 'link';
-    attributes.rel = 'stylesheet';
-    // Copy all properties except 'css' as attributes
-    for (const [key, value] of Object.entries(config)) {
-      if (key !== 'css') {
-        attributes[key] = value;
-      }
-    }
-  } else {
-    throw new Error('head requires either "script", "js" or "css" property');
-  }
-
-  const existingNode = document.querySelector(`${elementType}[src="${src}"], ${elementType}[href="${src}"]`);
-  if (existingNode) {
-    if (callback) callback();
-    return existingNode;
-  }
-
-  const element = document.createElement(elementType);
-
-  if (elementType === 'link') {
-    element.href = src;
-  } else {
-    element.src = src;
-  }
-
-  for (const [key, value] of Object.entries(attributes)) {
-    element.setAttribute(key, value);
-  }
-
-  if (callback || config.module) {
-    element.onload = () => {
-      // If module name is provided, import it and assign to window
-      if (config.module && elementType === 'script') {
-        import(src).then(module => {
-          window[config.module] = module.default || module[config.module] || module;
-        }).catch(error => {
-          console.error(`Error importing module ${config.module}:`, error);
-        });
-      }
-      if (callback) callback();
-    };
-  }
-
-  document.head.appendChild(element);
-
-  return element;
+  };
 }
 
 // Fetch wrapper with automatic caching and data handling
@@ -475,26 +358,12 @@ Fez.store = {
   }
 };
 
-// create dom root and return it
-Fez.domRoot = (data, name = 'div') => {
-  if (data instanceof Node) {
-    return data
-  } else {
-    const root = document.createElement(name)
-    root.innerHTML = data
-    return root
-  }
-}
-
-// add class by name to node and remove it from siblings
-Fez.activateNode = (node, klass = 'active') => {
-  Array.from(node.parentElement.children).forEach(child => {
-    child.classList.remove(klass)
-  })
-  node.classList.add(klass)
-}
+// Load utility functions
+import addUtilities from './utility.js'
+addUtilities(Fez)
 
 Fez.compile = compile
 Fez.state = state
+Fez.dump = objectDump
 
 export default Fez