@dinoreic/fez 0.3.0 → 0.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dinoreic/fez",
-  "version": "0.3.0",
-  "description": "Runtime custom dom elements",
+  "version": "0.4.0",
+  "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,16 @@ 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 == 'false') {
+    return false
+  } else {
+    return fezFast || isFast
+  }
+}
+
 /**
  * Converts self-closing custom tags to full open/close format
  * Required for proper HTML parsing of custom elements
@@ -138,7 +132,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 +165,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 +209,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

@@ -53,6 +53,41 @@ const loadDefaults = () => {
       }
     }
   })
+
+  // Memory store for memoization
+  const memoStore = new Map()
+
+  // memoize component content by key
+  // <fez-memoize key="unique-key">content to memoize</fez-memoize>
+  Fez('fez-memoize', class {
+    init(props) {
+      if (!props.key) {
+        Fez.error('fez-memoize: key prop is required')
+        return
+      }
+
+      if (memoStore.has(props.key)) {
+        // Restore from memory in init
+        const storedNode = memoStore.get(props.key)
+        Fez.log(`Memoize - key: "${props.key}" - restore`)
+        this.root.innerHTML = ''
+        this.root.appendChild(storedNode.cloneNode(true))
+      }
+    }
+
+    onMount(props) {
+      // Only store if not already in memory
+      if (!memoStore.has(props.key)) {
+        requestAnimationFrame(() => {
+          // Store current DOM content
+          const contentNode = document.createElement('div')
+          contentNode.innerHTML = this.root.innerHTML
+          Fez.log(`Memoize - key: "${props.key}" - set`)
+          memoStore.set(props.key, contentNode)
+        })
+      }
+    }
+  })
 }
 
 // Only load defaults if Fez is available
@@ -61,4 +96,4 @@ if (typeof Fez !== 'undefined' && Fez) {
 }
 
 // Export for use in tests
-export { loadDefaults }
+export { loadDefaults }

package/src/fez/instance.js

@@ -359,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)
@@ -397,11 +390,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}`)
+          }
+        }
       }
     })
 
@@ -413,7 +419,7 @@ export default class FezBase {
       if (lastClass) {
         setTimeout(()=>{
           n.classList.add(lastClass)
-        }, 300)
+        }, 1)
       }
     })
 
@@ -440,6 +446,63 @@ 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') {
+        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)
+            }
+          )
+        }
+      }
+    })
+  }
+
+  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')
@@ -576,7 +639,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
@@ -584,7 +658,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
   }
 

package/src/fez/root.js

@@ -4,6 +4,8 @@ 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 highlightAll from './utils/highlight_all.js'
 import connect from './connect.js'
 import compile from './compile.js'
 import state from './lib/global-state.js'
@@ -105,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
 }
@@ -144,40 +142,6 @@ Fez.publish = (channel, ...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;
-  }
-  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
-};
-
-// 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)
@@ -185,151 +149,13 @@ Fez.error = (text, show) => {
     return `<span style="border: 1px solid red; font-size: 14px; padding: 3px 7px; background: #fee; border-radius: 4px;">${text}</span>`
   }
 }
+
 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)
-  }
-}
-
-// 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();
-  }
-
-  // Check for callback function
-  if (typeof args[0] === 'function') {
-    callback = args.shift();
-  }
-
-  // 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;
-    }
-  }
-
-  // Set method
-  opts.method = method;
-
-  // Create cache key from method, url, and stringified opts
-  const cacheKey = `${method}:${url}:${JSON.stringify(opts)}`;
-
-  // 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);
-  }
-
-  // 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;
-  }
-
-  // Return promise with automatic JSON parsing
-  return fetch(url, opts)
-    .then(processResponse)
-    .then(data => {
-      Fez._fetchCache[cacheKey] = data;
-      return data;
-    });
-}
 
 Fez.onError = (kind, message) => {
   // Ensure kind is always a string
@@ -340,14 +166,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(),
@@ -372,9 +190,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.dump = highlightAll
+
+Fez.onReady(() => {
+  Fez.log('Fez.LOG === true, logging enabled.')
+})
 
 export default Fez