@dinoreic/fez 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinoreic/fez",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Runtime custom dom elements",
   "main": "dist/fez.js",
   "type": "module",
@@ -12,24 +12,29 @@
     "./rollup": {
       "import": "./src/rollup.js",
       "require": "./src/rollup.js"
-    }
+    },
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "fez": "./bin/fez"
   },
   "files": [
+    "bin",
     "dist",
     "src",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "pages": "ruby demo/helper.rb > ./index.html",
     "build": "bun build.js b",
     "b": "bun build.js b",
     "watch": "bun build.js w",
     "server": "bun run lib/server.js",
-    "dev": "sh -c 'bun run server & SERVER_PID=$!; trap \"kill $SERVER_PID\" EXIT; find src demo lib| entr -c sh -c \"bun run pages && bun run b\"'",
+    "dev": "bunx concurrently --kill-others \"bun run server\" \"find src demo lib | entr -c sh -c 'bun run index && bun run b'\"",
     "test": "bun test",
-    "push": "bun run build && bun run test",
-    "prepublishOnly": "bun run build && bun run test"
+    "prepublishOnly": "bun run build && bun run test",
+    "publish": "npm publish --access public",
+    "index": "ruby ./bin/fez-index 'demo/fez/*.fez' > demo/fez/index.json"
   },
   "keywords": [
     "dom",
@@ -50,6 +55,7 @@
   "homepage": "https://github.com/dux/fez#readme",
   "devDependencies": {
     "coffeescript": "^2.7.0",
+    "concurrently": "^9.1.2",
     "esbuild": "0.23.0",
     "esbuild-coffeescript": "^2.2.0",
     "glob-cli": "^1.0.0",

package/src/fez/compile.js

@@ -26,6 +26,9 @@ const compileToClass = (html) => {
       currentBlock = [];
       currentType = null;
     } else if (currentType) {
+      // if (currentType == 'script' && line.startsWith('//')) {
+      //   continue
+      // }
       currentBlock.push(line);
     } else {
       result.html += line + '\n';
@@ -106,13 +109,7 @@ export default function (tagName, html) {
       Fez.log(`Loading from ${url}`)
 
       // Load HTML content via AJAX from URL
-      fetch(url)
-        .then(response => {
-          if (!response.ok) {
-            throw new Error(`Failed to load ${url}: ${response.status}`)
-          }
-          return response.text()
-        })
+      Fez.fetch(url)
         .then(htmlContent => {
           // Check if remote HTML has template/xmp tags with fez attribute
           const parser = new DOMParser()

package/src/fez/connect.js

@@ -143,7 +143,7 @@ function connectNode(name, node) {
     fez.props = klass.getProps(node, newNode)
     fez.class = klass
 
-    // copy child nodes, natively to preserve bound events
+    // move child nodes, natively to preserve bound events
     fez.slot(node, newNode)
 
     newNode.fez = fez
@@ -161,22 +161,8 @@ function connectNode(name, node) {
     }
 
     fez.fezRegister();
-    (fez.init || fez.created || fez.connect).bind(fez)(fez.props);
-
-    const oldRoot = fez.root.cloneNode(true)
-
-    if (fez.class.fezHtmlFunc) {
-      fez.render()
-    }
-
-    const slot = fez.root.querySelector('.fez-slot')
-    if (slot) {
-      if (fez.props.html) {
-        slot.innerHTML = fez.props.html
-      } else {
-        fez.slot(oldRoot, slot)
-      }
-    }
+    ;(fez.init || fez.created || fez.connect).bind(fez)(fez.props);
+    fez.render()
 
     if (fez.onSubmit) {
       const form = fez.root.nodeName == 'FORM' ? fez.root : fez.find('form')

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
@@ -242,7 +293,7 @@ export default class FezBase {
     const base = this.fezHtmlRoot.replaceAll('"', '"')
 
     text = text
-      .replace(/([^\w\.])fez\./g, `$1${base}`)
+      .replace(/(['"\s;])fez\./g, `$1${base}`)
       .replace(/>\s+</g, '><')
 
     return text.trim()
@@ -304,12 +355,13 @@ export default class FezBase {
       slot.parentNode.removeChild(slot)
     }
 
-    //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)
+    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)
       }
     }
 

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 {

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');
   }

package/src/fez.js

@@ -22,18 +22,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 => {
@@ -55,8 +60,11 @@ observer.observe(document.documentElement, {
 
 // fez custom tags
 
+// include fez component by name
 //<fez-component name="some-node" :props="fez.props"></fez-node>
 Fez('fez-component', class {
+  FAST = true
+
   init(props) {
     const tag = document.createElement(props.name)
     tag.props = props.props || props['data-props'] || props
@@ -70,4 +78,20 @@ Fez('fez-component', class {
   }
 })
 
+// include remote data from url
+// <fez-include src="./demo/fez/ui-slider.html"></fez-include>
+Fez('fez-include', class {
+  FAST = true
+
+  init(props) {
+    Fez.fetch(props.src, (data)=>{
+      const dom = document.createElement('div')
+      dom.innerHTML = data
+      Fez.head(dom) // include scripts and load fez components
+      this.root.innerHTML = dom.innerHTML
+    })
+  }
+})
+
 export default Fez
+export { Fez }