@dinoreic/fez 0.3.2 → 0.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dinoreic/fez",
-  "version": "0.3.2",
-  "description": "Runtime custom dom elements",
+  "version": "0.4.1",
+  "description": "Runtime custom DOM elements lib",
   "main": "dist/fez.js",
   "type": "module",
   "exports": {

package/src/fez/compile.js

@@ -70,10 +70,7 @@ const compileToClass = (html) => {
   }
 
   if (String(result.style).includes(':')) {
-    Object.entries(Fez._styleMacros).forEach(([key, val])=>{
-      result.style = result.style.replaceAll(`:${key} `, `${val} `)
-    })
-
+    result.style = Fez.cssMixin(result.style)
     result.style = result.style.includes(':fez') || /(?:^|\s)body\s*\{/.test(result.style) ? result.style : `:fez {\n${result.style}\n}`
     klass = klass.replace(/\}\s*$/, `\n  CSS = \`${result.style}\`\n}`)
   }
@@ -105,8 +102,8 @@ function compile_bulk(data) {
       if (fezName && !fezName.includes('-')) {
         console.error(`Fez: Invalid custom element name "${fezName}". Custom element names must contain a dash (e.g., 'my-element', 'ui-button').`)
       }
-      // Compile the node directly
-      return compile(fezName, node.innerHTML)
+      compile(fezName, node.innerHTML)
+      return
     }
   }
   else {
@@ -195,7 +192,7 @@ function compile(tagName, html) {
   if (klass.includes('import ')) {
     Fez.head({script: klass})
 
-    // best we can do it inform that node did not compile, so we assume there is arrow
+    // best we can do it inform that node did not compile, so we assume there is an error
     setTimeout(()=>{
       if (!Fez.classes[tagName]) {
         Fez.error(`Template "${tagName}" possible compile error. (can be a false positive, it imports are not loaded)`)

package/src/fez/connect.js

@@ -1,6 +1,26 @@
 import createTemplate from './lib/template.js'
 import FezBase from './instance.js'
 
+/**
+ * Global mutation observer for reactive attribute changes
+ * Watches for attribute changes and triggers component updates
+ */
+const observer = new MutationObserver((mutationsList, _) => {
+  for (const mutation of mutationsList) {
+    if (mutation.type === 'attributes') {
+      const fez = mutation.target.fez
+      const name = mutation.attributeName
+      const value = mutation.target.getAttribute(name)
+
+      if (fez) {
+        fez.props[name] = value
+        fez.onPropsChange(name, value)
+        // console.log(`The [${name}] attribute was modified to [${value}].`);
+      }
+    }
+  }
+});
+
 /**
  * Registers a new custom element with Fez framework
  * @param {string} name - Custom element name (must contain a dash)
@@ -31,22 +51,17 @@ export default function connect(name, klass) {
     props.forEach(prop => newKlass.prototype[prop] = klassObj[prop])
 
     // Map component configuration properties
-    if (klassObj.GLOBAL) { newKlass.fezGlobal = klassObj.GLOBAL }  // Global instance reference
-    if (klassObj.CSS) { newKlass.css = klassObj.CSS }              // Component styles
+    if (klassObj.FAST) { newKlass.FAST = klassObj.FAST }           // Global instance reference
+    if (klassObj.GLOBAL) { newKlass.GLOBAL = klassObj.GLOBAL }       // Global instance reference
+    if (klassObj.CSS) { newKlass.css = klassObj.CSS }                // Component styles
     if (klassObj.HTML) {
-      newKlass.html = closeCustomTags(klassObj.HTML)               // Component template
+      newKlass.html = closeCustomTags(klassObj.HTML)                 // Component template
     }
-    if (klassObj.NAME) { newKlass.nodeName = klassObj.NAME }       // Custom DOM node name
+    if (klassObj.NAME) { newKlass.nodeName = klassObj.NAME }         // Custom DOM node name
 
     // Auto-mount global components to body
     if (klassObj.GLOBAL) {
-      const mountGlobalComponent = () => document.body.appendChild(document.createElement(name))
-
-      if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', mountGlobalComponent);
-      } else {
-        mountGlobalComponent()
-      }
+      document.body.appendChild(document.createElement(name))
     }
 
     klass = newKlass
@@ -59,11 +74,11 @@ export default function connect(name, klass) {
 
   // Process component template
   if (klass.html) {
-    // Replace <slot /> with reactive slot containers
-    klass.html = klass.html.replace(/<slot\s*\/>|<slot\s*>\s*<\/slot>/g, () => {
-      const slotTag = klass.SLOT || 'div'
-      return `<${slotTag} class="fez-slot" fez-keep="default-slot"></${slotTag}>`
-    })
+    let slotTag = klass.SLOT || 'div'
+
+    klass.html = klass.html
+      .replace('<slot', `<${slotTag} class="fez-slot" fez-keep="default-slot"`)
+      .replace('</slot>', `</${slotTag}>`)
 
     // Compile template function
     klass.fezHtmlFunc = createTemplate(klass.html)
@@ -76,47 +91,16 @@ export default function connect(name, klass) {
 
   Fez.classes[name] = klass
 
-  connectCustomElement(name, klass)
-}
-
-/**
- * Registers the custom element with the browser
- * Sets up batched rendering for optimal performance
- */
-function connectCustomElement(name, klass) {
-  const Fez = globalThis.window?.Fez || globalThis.Fez;
-
   if (!customElements.get(name)) {
     customElements.define(name, class extends HTMLElement {
       connectedCallback() {
-        // Batch all renders using microtasks for consistent timing and DOM completeness
-        if (!Fez._pendingConnections) {
-          Fez._pendingConnections = []
-          Fez._batchScheduled = false
-        }
-
-        Fez._pendingConnections.push({ name, node: this })
-
-        if (!Fez._batchScheduled) {
-          Fez._batchScheduled = true
-          Promise.resolve().then(() => {
-            const connections = Fez._pendingConnections.slice()
-            // console.error(`Batch processing ${connections.length} components:`, connections.map(c => c.name))
-            Fez._pendingConnections = []
-            Fez._batchScheduled = false
-
-            // Sort by DOM order to ensure parent nodes are processed before children
-            connections.sort((a, b) => {
-              if (a.node.contains(b.node)) return -1
-              if (b.node.contains(a.node)) return 1
-              return 0
-            })
-
-            connections.forEach(({ name, node }) => {
-              if (node.isConnected && node.parentNode) {
-                connectNode(name, node)
-              }
-            })
+        // Fez.onReady(()=>{connectNode(name, this)})
+        // connectNode(name, this)
+        if (useFastRender(this, klass)) {
+          connectNode(name, this)
+        } else {
+          requestAnimationFrame(()=>{
+            connectNode(name, this)
           })
         }
       }
@@ -124,6 +108,20 @@ function connectCustomElement(name, klass) {
   }
 }
 
+function useFastRender(node, klass) {
+  const fezFast = node.getAttribute('fez-fast')
+  var isFast = typeof klass.FAST === 'function' ? klass.FAST(node) : klass.FAST
+  if (fezFast || isFast || node.childNodes[0] || node.nextSibling) {
+    return true
+  }
+  else if (fezFast == 'false') {
+    return false
+  }
+  else {
+    return false
+  }
+}
+
 /**
  * Converts self-closing custom tags to full open/close format
  * Required for proper HTML parsing of custom elements
@@ -138,7 +136,6 @@ function closeCustomTags(html) {
   })
 }
 
-
 /**
  * Initializes a Fez component instance from a DOM node
  * Replaces the custom element with the component's rendered content
@@ -172,8 +169,8 @@ function connectNode(name, node) {
 
     newNode.fez = fez
 
-    if (klass.fezGlobal && klass.fezGlobal != true) {
-      window[klass.fezGlobal] = fez
+    if (klass.GLOBAL && klass.GLOBAL != true) {
+      window[klass.GLOBAL] = fez
     }
 
     if (window.$) {
@@ -216,23 +213,3 @@ function connectNode(name, node) {
     }
   }
 }
-
-/**
- * Global mutation observer for reactive attribute changes
- * Watches for attribute changes and triggers component updates
- */
-const observer = new MutationObserver((mutationsList, _) => {
-  for (const mutation of mutationsList) {
-    if (mutation.type === 'attributes') {
-      const fez = mutation.target.fez
-      const name = mutation.attributeName
-      const value = mutation.target.getAttribute(name)
-
-      if (fez) {
-        fez.props[name] = value
-        fez.onPropsChange(name, value)
-        // console.log(`The [${name}] attribute was modified to [${value}].`);
-      }
-    }
-  }
-});

package/src/fez/defaults.js

@@ -54,6 +54,17 @@ const loadDefaults = () => {
     }
   })
 
+  // Show node only if test validates
+  // <fez-if if="window.foo">...
+  Fez('fez-if', class {
+    init(props) {
+      const test = new Function(`return (${props.if || props.test})`)
+      if (!test()) {
+        this.root.remove()
+      }
+    }
+  })
+
   // Memory store for memoization
   const memoStore = new Map()
 

package/src/fez/instance.js

@@ -130,13 +130,11 @@ export default class FezBase {
           }
         }
 
-        if (name == 'style' || !this.root[name]) {
-          if (typeof value == 'string') {
-            this.root.setAttribute(name, value)
-          }
-          else {
-            this.root[name] = value
-          }
+        if (typeof value == 'string') {
+          this.root.setAttribute(name, value)
+        }
+        else {
+          this.root[name] = value
         }
       }
     }
@@ -390,11 +388,24 @@ export default class FezBase {
 
     // <button fez-use="animate" -> this.animate(node]
     fetchAttr('fez-use', (value, n) => {
-      const target = this[value]
-      if (typeof target == 'function') {
-        target(n)
-      } else {
-        console.error(`Fez error: "${value}" is not a function in ${this.fezName}`)
+      if (value.includes('=>')) {
+        // fez-use="el => el.focus()"
+        Fez.getFunction(value)(n)
+      }
+      else {
+        if (value.includes('.')) {
+          // fez-use="this.focus()"
+          Fez.getFunction(value).bind(n)()
+        }
+        else {
+          // fez-use="animate"
+          const target = this[value]
+          if (typeof target == 'function') {
+            target(n)
+          } else {
+            console.error(`Fez error: "${value}" is not a function in ${this.fezName}`)
+          }
+        }
       }
     })
 
@@ -406,7 +417,7 @@ export default class FezBase {
       if (lastClass) {
         setTimeout(()=>{
           n.classList.add(lastClass)
-        }, 300)
+        }, 1)
       }
     })
 
@@ -442,8 +453,28 @@ export default class FezBase {
         // 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))
+        if (newEl.getAttribute('hide')) {
+          // You cant use state any more
+          this.state = null
+
+          const parent = newEl.parentNode
+
+          // Insert all root children before the slot's next sibling
+          Array.from(this.root.childNodes).forEach(child => {
+            parent.insertBefore(child, newEl)
+          })
+
+          // Remove the slot element
+          newEl.remove()
+        }
+        else {
+          // First render - populate the slot with current root children
+          Array.from(this.root.childNodes).forEach(
+            child => {
+              newEl.appendChild(child)
+            }
+          )
+        }
       }
     })
   }
@@ -606,7 +637,18 @@ export default class FezBase {
     methods.forEach(method => this[method] = this[method].bind(this))
   }
 
-  fezHide() {
+  // dissolve into parent, if you want to promote first child or given node with this.root
+  dissolve(inNode) {
+    if (inNode) {
+      inNode.classList.add('fez')
+      inNode.classList.add(`fez-${this.fezName}`)
+      inNode.fez = this
+      if (this.attr('id')) inNode.setAttribute('id', this.attr('id'))
+
+      this.root.innerHTML = ''
+      this.root.appendChild(inNode)
+    }
+
     const node = this.root
     const nodes = this.childNodes()
     const parent = this.root.parentNode
@@ -614,7 +656,12 @@ export default class FezBase {
     nodes.reverse().forEach(el => parent.insertBefore(el, node.nextSibling))
 
     this.root.remove()
-    this.root = parent
+    this.root = undefined
+
+    if (inNode) {
+      this.root = inNode
+    }
+
     return nodes
   }
 
@@ -622,8 +669,10 @@ export default class FezBase {
     obj ||= {}
 
     handler ||= (o, k, v, oldValue) => {
-      this.onStateChange(k, v, oldValue)
-      this.nextTick(this.render, 'render')
+      if (v != oldValue) {
+        this.onStateChange(k, v, oldValue)
+        this.nextTick(this.render, 'render')
+      }
     }
 
     handler.bind(this)

package/src/fez/root.js

@@ -5,6 +5,7 @@ import Gobber from './vendor/gobber.js'
 import { Idiomorph } from './vendor/idiomorph.js'
 
 import objectDump from './utils/dump.js'
+import highlightAll from './utils/highlight_all.js'
 import connect from './connect.js'
 import compile from './compile.js'
 import state from './lib/global-state.js'
@@ -106,13 +107,9 @@ Fez.globalCss = (cssClass, opts = {}) => {
     cssClass = Fez.cssClass(text)
   }
 
-  if (document.body) {
+  Fez.onReady(() => {
     document.body.parentElement.classList.add(cssClass)
-  } else {
-    document.addEventListener("DOMContentLoaded", () => {
-      document.body.parentElement.classList.add(cssClass)
-    })
-  }
+  })
 
   return cssClass
 }
@@ -137,186 +134,77 @@ Fez.morphdom = (target, newNode, opts = {}) => {
   }
 }
 
+Fez._globalSubs ||= new Map()
+
 Fez.publish = (channel, ...args) => {
   Fez._subs ||= {}
   Fez._subs[channel] ||= []
   Fez._subs[channel].forEach((el) => {
     el[1].bind(el[0])(...args)
   })
-}
 
-  // get unique id from string
-Fez.fnv1 = (str) => {
-  var FNV_OFFSET_BASIS, FNV_PRIME, hash, i, j, ref;
-  FNV_OFFSET_BASIS = 2166136261;
-  FNV_PRIME = 16777619;
-  hash = FNV_OFFSET_BASIS;
-  for (i = j = 0, ref = str.length - 1; (0 <= ref ? j <= ref : j >= ref); i = 0 <= ref ? ++j : --j) {
-    hash ^= str.charCodeAt(i);
-    hash *= FNV_PRIME;
+  // Trigger global subscriptions
+  const subs = Fez._globalSubs.get(channel)
+  if (subs) {
+    subs.forEach((sub) => {
+      if (sub.node.isConnected) {
+        sub.callback.call(sub.node, ...args)
+      } else {
+        // Remove disconnected nodes from subscriptions
+        subs.delete(sub)
+      }
+    })
   }
-  return hash.toString(36).replaceAll('-', '');
 }
 
-Fez.tag = (tag, opts = {}, html = '') => {
-  const json = encodeURIComponent(JSON.stringify(opts))
-  return `<${tag} data-props="${json}">${html}</${tag}>`
-  // const json = JSON.stringify(opts, null, 2)
-  // const data = `<script type="text/template">${json}</script><${tag} data-json-template="true">${html}</${tag}>`
-  // return data
-};
-
-Fez.error = (text, show) => {
-  text = `Fez: ${text}`
-  console.error(text)
-  if (show) {
-    return `<span style="border: 1px solid red; font-size: 14px; padding: 3px 7px; background: #fee; border-radius: 4px;">${text}</span>`
+Fez.subscribe = (node, eventName, callback) => {
+  // If second arg is function, shift arguments
+  if (typeof eventName === 'function') {
+    callback = eventName
+    eventName = node
+    node = document.body
   }
-}
-Fez.log = (text) => {
-  if (Fez.LOG === true) {
-    text = String(text).substring(0, 180)
-    console.log(`Fez: ${text}`)
-  }
-}
-document.addEventListener('DOMContentLoaded', () => {
-  Fez.log('Fez.LOG === true, logging enabled.')
-})
-
-// execute function until it returns true
-Fez.untilTrue = (func, pingRate) => {
-  pingRate ||= 200
 
-  if (!func()) {
-    setTimeout(()=>{
-      Fez.untilTrue(func, pingRate)
-    } ,pingRate)
+  // Handle string selectors
+  if (typeof node === 'string') {
+    node = document.querySelector(node)
   }
-}
-
-// throttle function calls
-Fez.throttle = (func, delay = 200) => {
-  let lastRun = 0;
-  let timeout;
 
-  return function(...args) {
-    const now = Date.now();
-
-    if (now - lastRun >= delay) {
-      func.apply(this, args);
-      lastRun = now;
-    } else {
-      clearTimeout(timeout);
-      timeout = setTimeout(() => {
-        func.apply(this, args);
-        lastRun = Date.now();
-      }, delay - (now - lastRun));
-    }
-  };
-}
-
-// Fetch wrapper with automatic caching and data handling
-// Usage:
-//   Fez.fetch(url) - GET request (default)
-//   Fez.fetch(url, callback) - GET with callback
-//   Fez.fetch(url, data) - GET with query params (?foo=bar&baz=qux)
-//   Fez.fetch(url, data, callback) - GET with query params and callback
-//   Fez.fetch('POST', url, data) - POST with FormData body (multipart/form-data)
-//   Fez.fetch('POST', url, data, callback) - POST with FormData and callback
-// Data object is automatically converted:
-//   - GET: appended as URL query parameters
-//   - POST: sent as FormData (multipart/form-data) without custom headers
-Fez.fetch = function(...args) {
-  // Initialize cache if not exists
-  Fez._fetchCache ||= {};
-
-  let method = 'GET';
-  let url;
-  let callback;
-
-  // Check if first arg is HTTP method (uppercase letters)
-  if (typeof args[0] === 'string' && /^[A-Z]+$/.test(args[0])) {
-    method = args.shift();
-  }
-
-  // URL is required
-  url = args.shift();
-
-  // Check for data/options object
-  let opts = {};
-  let data = null;
-  if (typeof args[0] === 'object') {
-    data = args.shift();
+  if (!Fez._globalSubs.has(eventName)) {
+    Fez._globalSubs.set(eventName, new Set())
   }
 
-  // Check for callback function
-  if (typeof args[0] === 'function') {
-    callback = args.shift();
-  }
+  const subs = Fez._globalSubs.get(eventName)
 
-  // Handle data based on method
-  if (data) {
-    if (method === 'GET') {
-      // For GET, append data as query parameters
-      const params = new URLSearchParams(data);
-      url += (url.includes('?') ? '&' : '?') + params.toString();
-    } else if (method === 'POST') {
-      // For POST, convert to FormData
-      const formData = new FormData();
-      for (const [key, value] of Object.entries(data)) {
-        formData.append(key, value);
-      }
-      opts.body = formData;
+  // Remove existing subscription for same node and callback
+  subs.forEach(sub => {
+    if (sub.node === node && sub.callback === callback) {
+      subs.delete(sub)
     }
-  }
-
-  // Set method
-  opts.method = method;
+  })
 
-  // Create cache key from method, url, and stringified opts
-  const cacheKey = `${method}:${url}:${JSON.stringify(opts)}`;
+  const subscription = { node, callback }
+  subs.add(subscription)
 
-  // Check cache first
-  if (Fez._fetchCache[cacheKey]) {
-    const cachedData = Fez._fetchCache[cacheKey];
-    Fez.log(`fetch cache hit: ${method} ${url}`);
-    if (callback) {
-      callback(cachedData);
-      return;
-    }
-    return Promise.resolve(cachedData);
+  // Return unsubscribe function
+  return () => {
+    subs.delete(subscription)
   }
+}
 
-  // Log live fetch
-  Fez.log(`fetch live: ${method} ${url}`);
-
-  // Helper to process and cache response
-  const processResponse = (response) => {
-    if (response.headers.get('content-type')?.includes('application/json')) {
-      return response.json();
-    }
-    return response.text();
-  };
-
-  // If callback provided, execute and handle
-  if (callback) {
-    fetch(url, opts)
-      .then(processResponse)
-      .then(data => {
-        Fez._fetchCache[cacheKey] = data;
-        callback(data);
-      })
-      .catch(error => Fez.onError('fetch', error));
-    return;
+Fez.error = (text, show) => {
+  text = `Fez: ${text}`
+  console.error(text)
+  if (show) {
+    return `<span style="border: 1px solid red; font-size: 14px; padding: 3px 7px; background: #fee; border-radius: 4px;">${text}</span>`
   }
+}
 
-  // Return promise with automatic JSON parsing
-  return fetch(url, opts)
-    .then(processResponse)
-    .then(data => {
-      Fez._fetchCache[cacheKey] = data;
-      return data;
-    });
+Fez.log = (text) => {
+  if (Fez.LOG === true) {
+    text = String(text).substring(0, 180)
+    console.log(`Fez: ${text}`)
+  }
 }
 
 Fez.onError = (kind, message) => {
@@ -328,14 +216,6 @@ Fez.onError = (kind, message) => {
   console.error(`${kind}: ${message.toString()}`);
 }
 
-// define custom style macro
-// Fez.styleMacro('mobile', '@media (max-width:  768px)')
-// :mobile { ... } -> @media (max-width:  768px) { ... }
-Fez._styleMacros = {}
-Fez.styleMacro = (name, content) => {
-  Fez._styleMacros[name] = content
-}
-
 // work with tmp store
 Fez.store = {
   store: new Map(),
@@ -360,10 +240,17 @@ Fez.store = {
 
 // Load utility functions
 import addUtilities from './utility.js'
+import cssMixin from './utils/css_mixin.js'
 addUtilities(Fez)
+cssMixin(Fez)
 
 Fez.compile = compile
 Fez.state = state
 Fez.dump = objectDump
+Fez.highlightAll = highlightAll
+
+Fez.onReady(() => {
+  Fez.log('Fez.LOG === true, logging enabled.')
+})
 
 export default Fez