@dinoreic/fez 0.2.0 → 0.3.0

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) {
@@ -286,14 +262,48 @@ export default class FezBase {
   onDestroy() {}
   onStateChange() {}
   onGlobalStateChange() {}
-  publish = Fez.publish
+
+  // component publish will search for parent component that subscribes by name
+  publish(channel, ...args) {
+    const handle_publish = (component) => {
+      if (Fez._subs && Fez._subs[channel]) {
+        const sub = Fez._subs[channel].find(([comp]) => comp === component)
+        if (sub) {
+          sub[1].bind(component)(...args)
+          return true
+        }
+      }
+      return false
+    }
+
+    // Check if current component has subscription
+    if (handle_publish(this)) {
+      return true
+    }
+
+    // Bubble up to parent components
+    let parent = this.root.parentElement
+    while (parent) {
+      if (parent.fez) {
+        if (handle_publish(parent.fez)) {
+          return true
+        }
+      }
+      parent = parent.parentElement
+    }
+
+    // If no parent handled it, fall back to global publish
+    // Fez.publish(channel, ...args)
+    return false
+  }
+
   fezBlocks = {}
 
   parseHtml(text) {
     const base = this.fezHtmlRoot.replaceAll('"', '"')
 
     text = text
-      .replace(/(['"\s;])fez\./g, `$1${base}`)
+      .replace(/([!'"\s;])fez\.(\w)/g, `$1${base}$2`)
       .replace(/>\s+</g, '><')
 
     return text.trim()
@@ -325,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)) {
@@ -348,22 +359,18 @@ export default class FezBase {
       newNode.innerHTML = this.parseHtml(renderedTpl)
     }
 
-    // this comes only from array nodes this.n(...)
-    const slot = newNode.querySelector('slot')
-    if (slot) {
-      this.slot(this.root, slot.parentNode)
-      slot.parentNode.removeChild(slot)
-    }
+    newNode.querySelectorAll('[fez-keep]').forEach(newEl => {
+      const key = newEl.getAttribute('fez-keep')
+      const oldEl = this.root.querySelector(`[fez-keep="${key}"]`)
 
-    let newSlot = newNode.querySelector('.fez-slot')
-    if(newSlot) {
-      let currentSlot = this.find('.fez-slot')
-      if (currentSlot) {
-        newSlot.parentNode.replaceChild(currentSlot, newSlot)
-      } else {
-        this.slot(this.root, newSlot)
+      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))
       }
-    }
+    })
 
     Fez.morphdom(this.root, newNode)
 
@@ -437,8 +444,7 @@ export default class FezBase {
   refresh(selector) {
     alert('NEEDS FIX and remove htmlTemplate')
     if (selector) {
-      const n = document.createElement('div')
-      n.innerHTML = this.class.htmlTemplate
+      const n = Fez.domRoot(this.class.htmlTemplate)
       const tpl = n.querySelector(selector).innerHTML
       this.render(selector, tpl)
     } else {
@@ -457,13 +463,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) {
@@ -511,7 +525,7 @@ export default class FezBase {
 
   // get root node child nodes as array
   childNodes(func) {
-    const children = Array.from(this.root.children)
+    let children = Array.from(this.root.children)
 
     if (func) {
       // Create temporary container to avoid ancestor-parent errors
@@ -520,12 +534,11 @@ export default class FezBase {
       document.body.appendChild(tmpContainer)
       children.forEach(child => tmpContainer.appendChild(child))
 
-      let list = Array.from(tmpContainer.children).map(func)
+      children = Array.from(tmpContainer.children).map(func)
       document.body.removeChild(tmpContainer)
-      return list
-    } else {
-      return children
     }
+
+    return children
   }
 
   subscribe(channel, func) {
@@ -565,19 +578,14 @@ export default class FezBase {
 
   fezHide() {
     const node = this.root
+    const nodes = this.childNodes()
     const parent = this.root.parentNode
-    const fragment = document.createDocumentFragment();
 
-    while (node.firstChild) {
-      fragment.appendChild(node.firstChild)
-    }
+    nodes.reverse().forEach(el => parent.insertBefore(el, node.nextSibling))
 
-    // Replace the target element with the fragment (which contains the child elements)
-    node.parentNode.replaceChild(fragment, node);
-    // parent.classList.add('fez')
-    // parent.classList.add(`fez-${this.fezName}`)
+    this.root.remove()
     this.root = parent
-    return Array.from(this.root.children)
+    return nodes
   }
 
   reactiveStore(obj, handler) {

package/src/fez/lib/template.js

@@ -98,6 +98,10 @@ export default function createTemplate(text, opts = {}) {
     return parsedData
   });
 
+  result = result
+    .replace(/<!\-\-.*?\-\->/g, '')
+    .replace(/>\s+</g, '><')
+
   result = '`' + result.trim() + '`'
 
   try {

package/src/fez/root.js

@@ -117,7 +117,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 +136,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] ||= []
@@ -183,6 +165,19 @@ Fez.tag = (tag, opts = {}, html = '') => {
   // return data
 };
 
+// Resolve a function from a string or function reference
+Fez.getFunction = (pointer) => {
+  if (!pointer) {
+    return ()=>{}
+  }
+  else if (typeof pointer === 'function') {
+    return pointer;
+  }
+  else if (typeof pointer === 'string') {
+    return new Function(pointer);
+  }
+};
+
 Fez.error = (text, show) => {
   text = `Fez: ${text}`
   console.error(text)
@@ -211,125 +206,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');
-  }
-
-  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).')
-      }
+  return function(...args) {
+    const now = Date.now();
 
-      // 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,6 +370,10 @@ Fez.store = {
   }
 };
 
+// Load utility functions
+import addUtilities from './utility.js'
+addUtilities(Fez)
+
 Fez.compile = compile
 Fez.state = state