@dinoreic/fez 0.4.0 → 0.5.2

package/src/fez/lib/await-helper.js

@@ -0,0 +1,64 @@
+/**
+ * Async await helper for {#await} blocks in templates
+ *
+ * Manages promise state tracking and triggers re-renders when promises resolve/reject.
+ */
+
+/**
+ * Handle promise state for {#await} blocks in templates
+ * Returns { status: 'pending'|'resolved'|'rejected', value, error }
+ *
+ * @param {FezBase} component - The component instance
+ * @param {number} awaitId - Unique ID for this await block
+ * @param {Promise|any} promiseOrValue - The promise or value to await
+ * @returns {Object} { status, value, error }
+ */
+export default function awaitHelper(component, awaitId, promiseOrValue) {
+  // Initialize await states map on the component
+  component._awaitStates ||= new Map()
+
+  // Check if we already have state for this await block
+  const existing = component._awaitStates.get(awaitId)
+
+  // If not a promise, return resolved immediately
+  if (!promiseOrValue || typeof promiseOrValue.then !== 'function') {
+    return { status: 'resolved', value: promiseOrValue, error: null }
+  }
+
+  // If we have existing state for this exact promise, return it
+  if (existing && existing.promise === promiseOrValue) {
+    return existing
+  }
+
+  // New promise - set pending state and start tracking
+  const state = { status: 'pending', value: null, error: null, promise: promiseOrValue }
+  component._awaitStates.set(awaitId, state)
+
+  // Handle promise resolution
+  promiseOrValue
+    .then(value => {
+      // Only update if this is still the current promise for this await block
+      const current = component._awaitStates.get(awaitId)
+      if (current && current.promise === promiseOrValue) {
+        current.status = 'resolved'
+        current.value = value
+        // Trigger re-render
+        if (component.isConnected) {
+          component.fezNextTick(component.fezRender, 'fezRender')
+        }
+      }
+    })
+    .catch(error => {
+      const current = component._awaitStates.get(awaitId)
+      if (current && current.promise === promiseOrValue) {
+        current.status = 'rejected'
+        current.error = error
+        // Trigger re-render
+        if (component.isConnected) {
+          component.fezNextTick(component.fezRender, 'fezRender')
+        }
+      }
+    })
+
+  return state
+}

package/src/fez/lib/global-state.js

@@ -3,7 +3,7 @@
 // Components access state via this.globalState proxy which automatically:
 // - Registers component as listener when reading a value
 // - Notifies component when that value changes
-// - Calls onGlobalStateChange(key, value) if defined, then render()
+// - Calls onGlobalStateChange(key, value) if defined, then fezRender()
 //
 // Example usage:
 //
@@ -34,15 +34,19 @@ const GlobalState = {
   globalSubscribers: new Set(), // Set of functions that listen to all changes
 
   notify(key, value, oldValue) {
-    Fez.log(`Global state change for ${key}: ${value} (from ${oldValue})`)
+    Fez.consoleLog(`Global state change for ${key}: ${value} (from ${oldValue})`)
 
     // Notify component listeners
     const listeners = this.listeners.get(key)
     if (listeners) {
       listeners.forEach(comp => {
         if (comp.isConnected) {
-          comp.onGlobalStateChange(key, value, oldValue)
-          comp.render()
+          try {
+            comp.onGlobalStateChange(key, value, oldValue)
+            comp.fezRender()
+          } catch (error) {
+            console.error(`Error in component listener for key ${key}:`, error)
+          }
         } else {
           listeners.delete(comp)
         }
@@ -72,8 +76,19 @@ const GlobalState = {
   },
 
   createProxy(component) {
+    // Register cleanup when component is destroyed
+    component.addOnDestroy(() => {
+      for (const [key, listeners] of this.listeners) {
+        listeners.delete(component)
+      }
+      component._globalStateKeys?.clear()
+    })
+
     return new Proxy({}, {
       get: (target, key) => {
+        // Skip symbol keys and prototype methods
+        if (typeof key === 'symbol') return undefined
+
         // Skip if already listening to this key
         component._globalStateKeys ||= new Set()
         if (!component._globalStateKeys.has(key)) {
@@ -89,6 +104,9 @@ const GlobalState = {
       },
 
       set: (target, key, value) => {
+        // Skip symbol keys
+        if (typeof key === 'symbol') return true
+
         const oldValue = this.data[key]
         if (oldValue !== value) {
           this.data[key] = value

package/src/fez/lib/index.js

@@ -0,0 +1,140 @@
+/**
+ * Unified Component Index
+ *
+ * Single source of truth for all component data:
+ *   Fez.index['ui-btn'].class   - Component class
+ *   Fez.index['ui-btn'].meta    - Metadata from META = {...}
+ *   Fez.index['ui-btn'].demo    - Demo HTML string
+ *   Fez.index['ui-btn'].info    - Info HTML string
+ *   Fez.index['ui-btn'].source  - Raw .fez source
+ *
+ * Helper methods:
+ *   Fez.index.get('ui-btn')     - Get entry with DOM nodes for demo/info
+ *   Fez.index.apply('ui-btn', el) - Render demo into element
+ *   Fez.index.names()           - Get all registered component names
+ *   Fez.index.withDemo()        - Get names of components with demos
+ *   Fez.index.all()             - Get all components as object
+ */
+
+function createDomNode(html) {
+  const node = document.createElement("div");
+  node.innerHTML = html;
+  return node;
+}
+
+const index = {
+  // Component entries stored directly: index['ui-btn'] = { class, meta, ... }
+
+  /**
+   * Get or create entry for component
+   * @param {string} name - Component name
+   * @returns {{ class: Function|null, meta: Object|null, demo: string|null, info: string|null, source: string|null }}
+   */
+  ensure(name) {
+    if (
+      !this[name] ||
+      typeof this[name] !== "object" ||
+      !("class" in this[name])
+    ) {
+      this[name] = {
+        class: null,
+        meta: null,
+        demo: null,
+        info: null,
+        source: null,
+      };
+    }
+    return this[name];
+  },
+
+  /**
+   * Get component data with DOM nodes for demo/info
+   * @param {string} name - Component name
+   * @returns {{ class: Function|null, meta: Object|null, demo: HTMLDivElement|null, info: HTMLDivElement|null, source: string|null }}
+   */
+  get(name) {
+    const entry = this[name];
+    if (!entry || typeof entry !== "object" || !("class" in entry)) {
+      return { class: null, meta: null, demo: null, info: null, source: null };
+    }
+
+    return {
+      class: entry.class,
+      meta: entry.meta,
+      source: entry.source,
+      demo: entry.demo ? createDomNode(entry.demo) : null,
+      info: entry.info ? createDomNode(entry.info) : null,
+    };
+  },
+
+  /**
+   * Apply demo to element and execute scripts
+   * Scripts are executed first to define data/variables, then DOM is injected
+   * @param {string} name - Component name
+   * @param {HTMLElement} target - Target element to render into
+   * @returns {boolean} - True if demo was found and applied
+   */
+  apply(name, target) {
+    const entry = this[name];
+    if (!entry?.demo || !target) return false;
+
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = entry.demo;
+
+    // Execute top-level scripts first (before DOM parsing triggers components)
+    tempDiv.querySelectorAll(":scope > script").forEach((script) => {
+      const content = script.textContent;
+      if (content.trim()) {
+        try {
+          new Function(content)();
+        } catch (e) {
+          console.error(`Fez.index.apply("${name}") script error:`, e.message);
+        }
+      }
+      script.remove();
+    });
+
+    target.innerHTML = tempDiv.innerHTML;
+    return true;
+  },
+
+  /**
+   * Get all registered component names
+   * @returns {string[]}
+   */
+  names() {
+    return Object.keys(this).filter(
+      (k) =>
+        typeof this[k] === "object" && this[k] !== null && "class" in this[k],
+    );
+  },
+
+  /**
+   * Get names of components that have demos
+   * @returns {string[]}
+   */
+  withDemo() {
+    return this.names().filter((name) => this[name].demo);
+  },
+
+  /**
+   * Get all components as object with DOM nodes
+   * @returns {Object} Object with component names as keys
+   */
+  all() {
+    const result = {};
+    for (const name of this.names()) {
+      result[name] = this.get(name);
+    }
+    return result;
+  },
+
+  /**
+   * Print registered components to console
+   */
+  info() {
+    console.log("Fez components:", this.names());
+  },
+};
+
+export default index;

package/src/fez/lib/localstorage.js

@@ -0,0 +1,44 @@
+/**
+ * localStorage wrapper with automatic JSON serialization
+ * Preserves types: integers, floats, strings, objects, arrays, booleans, null
+ *
+ * @example
+ * localStorage.set('count', 42)
+ * localStorage.get('count') // 42 (number, not string)
+ *
+ * localStorage.set('user', { name: 'John', age: 30 })
+ * localStorage.get('user') // { name: 'John', age: 30 }
+ *
+ * localStorage.get('missing', 'default') // 'default'
+ */
+
+const storage = () => globalThis.localStorage || window.localStorage
+
+function set(key, value) {
+  try {
+    storage().setItem(key, JSON.stringify(value))
+  } catch (e) {
+    console.error(`Fez localStorage: Failed to set "${key}"`, e)
+  }
+}
+
+function get(key, defaultValue = null) {
+  try {
+    const item = storage().getItem(key)
+    if (item === null) return defaultValue
+    return JSON.parse(item)
+  } catch (e) {
+    console.error(`Fez localStorage: Failed to get "${key}"`, e)
+    return defaultValue
+  }
+}
+
+function remove(key) {
+  storage().removeItem(key)
+}
+
+function clear() {
+  storage().clear()
+}
+
+export default { set, get, remove, clear }

package/src/fez/lib/n.js

@@ -7,59 +7,74 @@
 // Licence MIT
 
 export default function n(name, attrs = {}, data) {
-  if (typeof attrs === 'string') {
-    [attrs, data] = [data, attrs]
-    attrs ||= {}
+  if (typeof attrs === "string") {
+    [attrs, data] = [data, attrs];
+    attrs ||= {};
   }
 
   if (attrs instanceof Node) {
-    data = attrs
-    attrs = {}
+    data = attrs;
+    attrs = {};
   }
 
   if (Array.isArray(name)) {
-    data = name
-    name = 'div'
+    data = name;
+    name = "div";
   }
 
-  if (typeof attrs !== 'object' || Array.isArray(attrs)) {
-    data = attrs
-    attrs = {}
+  if (typeof attrs !== "object" || Array.isArray(attrs)) {
+    data = attrs;
+    attrs = {};
   }
 
-  if (name.includes('.')) {
-    const parts = name.split('.')
-    name = parts.shift() || 'div'
-    const c = parts.join(' ');
+  if (name.includes(".")) {
+    const parts = name.split(".");
+    name = parts.shift() || "div";
+    const c = parts.join(" ");
     if (attrs.class) {
       attrs.class += ` ${c}`;
     } else {
-      attrs.class = c
+      attrs.class = c;
     }
   }
 
   const node = document.createElement(name);
 
+  const booleanAttrs = [
+    "checked",
+    "disabled",
+    "selected",
+    "readonly",
+    "required",
+    "hidden",
+    "multiple",
+    "autofocus",
+  ];
+
   for (const [k, v] of Object.entries(attrs)) {
-    if (typeof v === 'function') {
-      node[k] = v.bind(this)
+    if (typeof v === "function") {
+      node[k] = v.bind(this);
+    } else if (booleanAttrs.includes(k)) {
+      if (v) {
+        node.setAttribute(k, k);
+      }
     } else {
-      const value = String(v).replaceAll('fez.', this.fezHtmlRoot);
-      node.setAttribute(k, value)
+      const value = String(v).replaceAll("fez.", this.fezHtmlRoot);
+      node.setAttribute(k, value);
     }
   }
 
   if (data) {
     if (Array.isArray(data)) {
       for (const n of data) {
-        node.appendChild(n)
+        node.appendChild(n);
       }
     } else if (data instanceof Node) {
-      node.appendChild(data)
+      node.appendChild(data);
     } else {
-      node.innerHTML = String(data)
+      node.innerHTML = String(data);
     }
   }
 
-  return node
+  return node;
 }

package/src/fez/lib/pubsub.js

@@ -0,0 +1,208 @@
+/**
+ * Fez Pub/Sub System
+ *
+ * Global API:
+ *   Fez.subscribe('event', callback)                 // Always fires
+ *   Fez.subscribe('#selector', 'event', callback)   // Fires if selector found at publish time
+ *   Fez.subscribe(node, 'event', callback)          // Fires if node.isConnected
+ *   Fez.publish('event', ...args)                    // Broadcast to all
+ *
+ * Instance API (see instance.js):
+ *   this.subscribe('event', callback)               // Auto-cleanup on destroy
+ *   this.publish('event', ...args)                  // Bubble to parent components
+ */
+
+// =============================================================================
+// STORAGE
+// =============================================================================
+
+// Global subscriptions: channel -> Set of { selector, node, callback }
+const globalSubs = new Map()
+
+// Component subscriptions: channel -> [[component, callback], ...]
+// Used for parent-child bubbling (this.publish)
+const componentSubs = {}
+
+// =============================================================================
+// GLOBAL PUB/SUB
+// =============================================================================
+
+/**
+ * Subscribe to a channel (global)
+ *
+ * @param {string|Node} nodeOrSelector - Selector, node, or channel name
+ * @param {string|Function} channelOrCallback - Channel name or callback
+ * @param {Function} [callback] - Callback function
+ * @returns {Function} Unsubscribe function
+ *
+ * @example
+ *   subscribe('user-login', (user) => console.log(user))
+ *   subscribe('#header', 'theme-change', (theme) => ...)
+ *   subscribe(document.body, 'resize', () => ...)
+ */
+function subscribe(nodeOrSelector, channelOrCallback, callback) {
+  let selector = null
+  let node = null
+  let channel
+
+  // Normalize arguments
+  if (typeof channelOrCallback === 'function') {
+    // subscribe('event', callback)
+    channel = nodeOrSelector
+    callback = channelOrCallback
+  } else {
+    // subscribe(node/selector, 'event', callback)
+    channel = channelOrCallback
+    if (typeof nodeOrSelector === 'string') {
+      selector = nodeOrSelector  // Store selector, resolve at publish time
+    } else {
+      node = nodeOrSelector  // Store node reference
+    }
+  }
+
+  if (!globalSubs.has(channel)) {
+    globalSubs.set(channel, new Set())
+  }
+
+  const channelSubs = globalSubs.get(channel)
+
+  // Remove duplicate (same selector/node + callback)
+  for (const sub of channelSubs) {
+    if (sub.callback === callback && sub.selector === selector && sub.node === node) {
+      channelSubs.delete(sub)
+    }
+  }
+
+  const subscription = { selector, node, callback }
+  channelSubs.add(subscription)
+
+  // Return unsubscribe function
+  return () => channelSubs.delete(subscription)
+}
+
+/**
+ * Publish to a channel (global broadcast)
+ *
+ * @param {string} channel - Event name
+ * @param {...any} args - Arguments to pass to callbacks
+ */
+function publish(channel, ...args) {
+  const channelSubs = globalSubs.get(channel)
+  if (channelSubs) {
+    for (const sub of channelSubs) {
+      let target = null
+
+      if (sub.selector) {
+        // Resolve selector at publish time
+        target = document.querySelector(sub.selector)
+        if (!target) continue  // Skip if not found
+      } else if (sub.node) {
+        // Check node connection
+        if (!sub.node.isConnected) {
+          channelSubs.delete(sub)  // Auto-cleanup disconnected
+          continue
+        }
+        target = sub.node
+      }
+
+      // Call with target as context (or null for global)
+      try {
+        sub.callback.call(target, ...args)
+      } catch (e) {
+        console.error(`Fez pubsub error on "${channel}":`, e)
+      }
+    }
+  }
+
+  // Also trigger component subscriptions (legacy compatibility)
+  if (componentSubs[channel]) {
+    componentSubs[channel].forEach(([comp, cb]) => {
+      if (comp.isConnected) {
+        cb.bind(comp)(...args)
+      }
+    })
+  }
+}
+
+// =============================================================================
+// COMPONENT PUB/SUB (for this.subscribe / this.publish)
+// =============================================================================
+
+/**
+ * Subscribe from a component (used by this.subscribe)
+ * Stores subscription for parent-child bubbling
+ *
+ * @param {FezBase} component - Component instance
+ * @param {string} channel - Event name
+ * @param {Function} callback - Handler function
+ * @returns {Function} Unsubscribe function
+ */
+function componentSubscribe(component, channel, callback) {
+  componentSubs[channel] ||= []
+
+  // Clean up disconnected components
+  componentSubs[channel] = componentSubs[channel].filter(([comp]) => comp.isConnected)
+
+  // Add subscription
+  componentSubs[channel].push([component, callback])
+
+  // Return unsubscribe function
+  return () => {
+    componentSubs[channel] = componentSubs[channel].filter(
+      ([comp, cb]) => !(comp === component && cb === callback)
+    )
+  }
+}
+
+/**
+ * Publish from a component (used by this.publish)
+ * Bubbles up through parent components
+ *
+ * @param {FezBase} component - Component instance
+ * @param {string} channel - Event name
+ * @param {...any} args - Arguments
+ * @returns {boolean} True if a parent handled the event
+ */
+function componentPublish(component, channel, ...args) {
+  const handlePublish = (comp) => {
+    if (componentSubs[channel]) {
+      const sub = componentSubs[channel].find(([c]) => c === comp)
+      if (sub) {
+        sub[1].bind(comp)(...args)
+        return true
+      }
+    }
+    return false
+  }
+
+  // Check current component first
+  if (handlePublish(component)) {
+    return true
+  }
+
+  // Bubble up to parent components
+  let parent = component.root?.parentElement
+  while (parent) {
+    if (parent.fez) {
+      if (handlePublish(parent.fez)) {
+        return true
+      }
+    }
+    parent = parent.parentElement
+  }
+
+  return false
+}
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+export {
+  subscribe,
+  publish,
+  componentSubscribe,
+  componentPublish,
+  globalSubs,
+  componentSubs
+}