@dinoreic/fez 0.1.1 → 0.2.2

package/src/fez/instance.js

@@ -19,6 +19,7 @@ export default class FezBase {
 
     for (const [key, val] of Object.entries(attrs)) {
       if ([':'].includes(key[0])) {
+        // LOG([key, val])
         delete attrs[key]
         try {
           const newVal = new Function(`return (${val})`).bind(newNode)()
@@ -110,14 +111,29 @@ export default class FezBase {
     }
   }
 
+  // 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 = ()=> {}
+    this.onDestroy = () => {}
 
     if (this.root) {
       this.root.fez = undefined
@@ -162,43 +178,78 @@ export default class FezBase {
     }
   }
 
-  // helper function to execute stuff on window resize, and clean after node is not connected any more
-  // if delay given, throttle, if not debounce
-  onResize(func, delay) {
-    let timeoutId;
-    let lastRun = 0;
+  // 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]);
+    }
+
+    if (this._timeouts[eventName]) {
+      clearTimeout(this._timeouts[eventName]);
+    }
 
-    func()
+    let lastRun = 0;
 
-    const checkAndExecute = () => {
+    const doExecute = () => {
       if (!this.isConnected) {
-        window.removeEventListener('resize', handleResize);
-        return;
+        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;
     };
 
-    const handleResize = () => {
-      if (!this.isConnected) {
-        window.removeEventListener('resize', handleResize);
-        return;
-      }
+    const handleEvent = () => {
+      const now = Date.now();
 
-      if (delay) {
-        // Throttle
-        const now = Date.now();
-        if (now - lastRun >= delay) {
-          checkAndExecute();
+      if (now - lastRun >= delay) {
+        if (doExecute()) {
           lastRun = now;
+        } else {
+          return;
         }
-      } else {
-        // Debounce
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(checkAndExecute, 200);
       }
+
+      // Clear previous timeout and set new one to ensure final event
+      if (this._timeouts[eventName]) {
+        clearTimeout(this._timeouts[eventName]);
+      }
+
+      this._timeouts[eventName] = setTimeout(() => {
+        if (now > lastRun && doExecute()) {
+          lastRun = Date.now();
+        }
+        delete this._timeouts[eventName];
+      }, delay);
     };
 
-    window.addEventListener('resize', handleResize);
+    this._eventHandlers[eventName] = handleEvent;
+    window.addEventListener(eventName, handleEvent);
+  }
+
+  // Helper function for resize events
+  onResize(func, delay) {
+    this.on('resize', func, delay);
+    func();
+  }
+
+  // Helper function for scroll events
+  onScroll(func, delay) {
+    this.on('scroll', func, delay);
+    func();
   }
 
   // copy child nodes, natively to preserve bound events
@@ -235,14 +286,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(/([^\w\.])fez\./g, `$1${base}`)
+      .replace(/([!'"\s;])fez\.(\w)/g, `$1${base}$2`)
       .replace(/>\s+</g, '><')
 
     return text.trim()
@@ -297,21 +382,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 currentSlot = this.root.querySelector(':not(span.fez):not(div.fez) > .fez-slot, .fez-slot:not(span.fez *):not(div.fez *)');
-    let currentSlot = this.find('.fez-slot')
-    if (currentSlot) {
-      const newSLot = newNode.querySelector('.fez-slot')
-      if (newSLot) {
-        newSLot.parentNode.replaceChild(currentSlot, 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)
 
@@ -385,8 +467,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 {
@@ -459,7 +540,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
@@ -468,12 +549,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) {
@@ -513,19 +593,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

@@ -40,6 +40,11 @@ function parseBlock(data, ifStack) {
   else {
     const prefix = '@html '
 
+    if (data.startsWith('json ')) {
+      data = data.replace('json ', "@html '<pre class=json>'+JSON.stringify(")
+      data += ", null, 2) + '</pre>'"
+    }
+
     if (data.startsWith(prefix)) {
       data = data.replace(prefix, '')
     } else {
@@ -93,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

@@ -141,6 +141,7 @@ Fez.htmlEscape = (text) => {
     text = text
       // .replaceAll('&', "&")
       .replace(/font-family\s*:\s*(?:&[^;]+;|[^;])*?;/gi, '')
+      .replaceAll("&", '&')
       .replaceAll("'", ''')
       .replaceAll('"', '"')
       .replaceAll('<', '&lt;')
@@ -191,6 +192,7 @@ Fez.error = (text, show) => {
 }
 Fez.log = (text) => {
   if (Fez.LOG === true) {
+    text = String(text).substring(0, 180)
     console.log(`Fez: ${text}`)
   }
 }
@@ -210,20 +212,34 @@ Fez.untilTrue = (func, pingRate) => {
 }
 
 // Script from URL
-//   head({ js: 'https://example.com/script.js' });
+//   Fez.head({ js: 'https://example.com/script.js' });
 // Script with attributes
-//   head({ js: 'https://example.com/script.js', type: 'module', async: true });
+//   Fez.head({ js: 'https://example.com/script.js', type: 'module', async: true });
 // Script with callback
-//   head({ js: 'https://example.com/script.js' }, () => { console.log('loaded') });
+//   Fez.head({ js: 'https://example.com/script.js' }, () => { console.log('loaded') });
 // Module loading with auto-import to window
-//   head({ js: 'https://example.com/module.js', module: 'MyModule' }); // imports and sets window.MyModule
+//   Fez.head({ js: 'https://example.com/module.js', module: 'MyModule' }); // imports and sets window.MyModule
 // CSS inclusion
-//   head({ css: 'https://example.com/styles.css' });
+//   Fez.head({ css: 'https://example.com/styles.css' });
 // CSS with additional attributes and callback
-//   head({ css: 'https://example.com/styles.css', media: 'print' }, () => { console.log('CSS loaded') })
+//   Fez.head({ css: 'https://example.com/styles.css', media: 'print' }, () => { console.log('CSS loaded') })
 // Inline script evaluation
-//   head({ script: 'console.log("Hello world")' })
+//   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) )
+    }
+
+    return
+  }
+
   if (typeof config !== 'object' || config === null) {
     throw new Error('head requires an object parameter');
   }
@@ -459,6 +475,25 @@ 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)
+}
+
 Fez.compile = compile
 Fez.state = state
 

package/src/fez.js

@@ -6,6 +6,9 @@ if (typeof window !== 'undefined') window.FezBase = FezBase
 import Fez from './fez/root.js'
 if (typeof window !== 'undefined') window.Fez = Fez
 
+// Load defaults after Fez is properly initialized
+import('./fez/defaults.js')
+
 // clear all unattached nodes
 setInterval(() => {
   for (const [key, el] of Fez.instances) {
@@ -22,18 +25,23 @@ const observer = new MutationObserver((mutations) => {
   for (const { addedNodes, removedNodes } of mutations) {
     addedNodes.forEach((node) => {
       if (node.nodeType !== 1) return; // only elements
-      // check the node itself
+
       if (node.matches('template[fez], xmp[fez], script[fez]')) {
-        window.requestAnimationFrame(()=>{
-          Fez.compile(node);
-          node.remove();
-        })
+        Fez.compile(node);
+        node.remove();
+      }
+
+      if (node.querySelectorAll) {
+        const nestedTemplates = node.querySelectorAll('template[fez], xmp[fez], script[fez]');
+        nestedTemplates.forEach(template => {
+          Fez.compile(template);
+          template.remove();
+        });
       }
     });
 
     removedNodes.forEach((node) => {
       if (node.nodeType === 1 && node.querySelectorAll) {
-        // check both the node itself and its descendants
         const fezElements = node.querySelectorAll('.fez, :scope.fez');
         fezElements
           .forEach(el => {
@@ -53,22 +61,5 @@ observer.observe(document.documentElement, {
   subtree: true
 });
 
-// fez custom tags
-
-//<fez-component name="some-node" :props="fez.props"></fez-node>
-Fez('fez-component', class {
-  init(props) {
-    const tag = document.createElement(props.name)
-    tag.props = props.props || props['data-props'] || props
-
-    while (this.root.firstChild) {
-      this.root.parentNode.insertBefore(this.root.lastChild, tag.nextSibling);
-    }
-
-    this.root.innerHTML = ''
-    this.root.appendChild(tag)
-  }
-})
-
 export default Fez
 export { Fez }

package/src/log.js

@@ -0,0 +1,154 @@
+// pretty print HTML
+const LOG_PP = (html) => {
+  const parts = html
+    .split(/(<\/?[^>]+>)/g)
+    .map(p => p.trim())
+    .filter(p => p);
+
+  let indent = 0;
+  const lines = [];
+
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    const nextPart = parts[i + 1];
+    const nextNextPart = parts[i + 2];
+
+    // Check if it's a tag
+    if (part.startsWith('<')) {
+      // Check if this is an opening tag followed by text and then its closing tag
+      if (!part.startsWith('</') && !part.endsWith('/>') && nextPart && !nextPart.startsWith('<') && nextNextPart && nextNextPart.startsWith('</')) {
+        // Combine them on one line
+        const actualIndent = Math.max(0, indent);
+        lines.push('  '.repeat(actualIndent) + part + nextPart + nextNextPart);
+        i += 2; // Skip the next two parts
+      }
+      // Closing tag
+      else if (part.startsWith('</')) {
+        indent--;
+        const actualIndent = Math.max(0, indent);
+        lines.push('  '.repeat(actualIndent) + part);
+      }
+      // Self-closing tag
+      else if (part.endsWith('/>') || part.includes(' />')) {
+        const actualIndent = Math.max(0, indent);
+        lines.push('  '.repeat(actualIndent) + part);
+      }
+      // Opening tag
+      else {
+        const actualIndent = Math.max(0, indent);
+        lines.push('  '.repeat(actualIndent) + part);
+        indent++;
+      }
+    }
+    // Text node
+    else if (part) {
+      const actualIndent = Math.max(0, indent);
+      lines.push('  '.repeat(actualIndent) + part);
+    }
+  }
+
+  return lines.join('\n');
+}
+
+const LOG = (() => {
+  const logs = [];
+  const logTypes = []; // Track the original type of each log
+  let currentIndex = 0;
+
+  return o => {
+    if (!document.body) {
+      window.requestAnimationFrame( () => LOG(o) )
+      return
+    }
+
+    if (o instanceof Node) {
+      o = LOG_PP(o.outerHTML)
+    }
+
+    // Store the original type
+    let originalType = typeof o;
+
+    if (o === undefined) { o = 'undefined' }
+    if (o === null) { o = 'null' }
+
+    if (Array.isArray(o)) {
+      originalType = 'array';
+    } else if (typeof o === 'object' && o !== null) {
+      originalType = 'object';
+    }
+
+    if (typeof o != 'string') {
+      o = JSON.stringify(o, (key, value) => {
+        if (typeof value === 'function') {
+          return String(value);
+        }
+        return value;
+      }, 2).replaceAll('<', '&lt;')
+    }
+
+    o = o.trim()
+
+    logs.push(o + `\n\ntype: ${originalType}`);
+    logTypes.push(originalType);
+
+    let d = document.getElementById('dump-dialog');
+    if (!d) {
+      d = document.body.appendChild(document.createElement('div'));
+      d.id = 'dump-dialog';
+      d.style.cssText =
+        'position:fixed;top:30px;left:30px;right:50px;bottom:50px;' +
+        'background:#fff;border:1px solid#333;box-shadow:0 0 10px rgba(0,0,0,0.5);' +
+        'padding:20px;overflow:auto;z-index:9999;font:13px/1.4 monospace;white-space:pre';
+    }
+
+    // Check if we have a saved index and it's still valid
+    const savedIndex = parseInt(localStorage.getItem('_LOG_INDEX'));
+    if (!isNaN(savedIndex) && savedIndex >= 0 && savedIndex < logs.length) {
+      currentIndex = savedIndex;
+    } else {
+      currentIndex = logs.length - 1;
+    }
+
+    const renderContent = () => {
+      const buttons = logs.map((_, i) => {
+        let bgColor = '#f0f0f0'; // default
+        if (i !== currentIndex) {
+          if (logTypes[i] === 'object') {
+            bgColor = '#d6e3ef'; // super light blue
+          } else if (logTypes[i] === 'array') {
+            bgColor = '#d8d5ef'; // super light indigo
+          }
+        }
+        return `<button style="padding:4px 8px;margin:0;cursor:pointer;background:${i === currentIndex ? '#333' : bgColor};color:${i === currentIndex ? '#fff' : '#000'}" data-index="${i}">${i + 1}</button>`
+      }).join('');
+
+      d.innerHTML =
+        '<div style="display:flex;flex-direction:column;height:100%">' +
+        '<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px">' +
+        '<div style="display:flex;flex-wrap:wrap;gap:4px;flex:1;margin-right:10px">' + buttons + '</div>' +
+        '<button style="padding:4px 8px;cursor:pointer;flex-shrink:0">&times;</button>' +
+        '</div>' +
+        '<xmp style="flex:1;overflow:auto;margin:0;padding:0;color:#000;background:#fff;font-size:14px;line-height:22px">' + logs[currentIndex] + '</xmp>' +
+        '</div>';
+
+      d.querySelector('button[style*="flex-shrink:0"]').onclick = () => d.remove();
+
+      d.querySelectorAll('button[data-index]').forEach(btn => {
+        btn.onclick = () => {
+          currentIndex = parseInt(btn.dataset.index);
+          localStorage.setItem('_LOG_INDEX', currentIndex);
+          renderContent();
+        };
+      });
+    };
+
+    renderContent();
+  };
+})();
+
+if (typeof window !== 'undefined') {
+  window.LOG = LOG
+  window.LOG_PP = LOG_PP
+}
+
+export default LOG

package/src/rollup.js

@@ -22,10 +22,4 @@ function fezPlugin() {
   };
 }
 
-// Export for ES modules
 export default fezPlugin;
-
-// Export for CommonJS
-// if (typeof module !== 'undefined') {
-//   module.exports = fezPlugin;
-// }