@dinoreic/fez 0.1.0

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

@@ -0,0 +1,157 @@
+// Global state manager with automatic component subscription
+//
+// 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()
+//
+// Example usage:
+//
+//   class Counter extends FezBase {
+//     increment() {
+//       this.globalState.count = (this.globalState.count || 0) + 1
+//     }
+//
+//     onGlobalStateChange(key, value) {
+//       console.log(`State ${key} changed to ${value}`)
+//     }
+//
+//     render() {
+//       return `<button onclick="fez.increment()">
+//         Count: ${this.globalState.count || 0}
+//       </button>`
+//     }
+//   }
+//
+// External access:
+//   Fez.state.set('count', 10)
+//   Fez.state.get('count') // 10
+
+const GlobalState = {
+  data: {},
+  listeners: new Map(), // key -> Set of components
+  subscribers: new Map(), // key -> Set of functions (for subscribe method)
+  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})`)
+
+    // Notify component listeners
+    const listeners = this.listeners.get(key)
+    if (listeners) {
+      listeners.forEach(comp => {
+        if (comp.isConnected) {
+          comp.onGlobalStateChange(key, value, oldValue)
+          comp.render()
+        } else {
+          listeners.delete(comp)
+        }
+      })
+    }
+
+    // Notify key-specific subscribers
+    const subscribers = this.subscribers.get(key)
+    if (subscribers) {
+      subscribers.forEach(func => {
+        try {
+          func(value, oldValue, key)
+        } catch (error) {
+          console.error(`Error in subscriber for key ${key}:`, error)
+        }
+      })
+    }
+
+    // Notify global subscribers
+    this.globalSubscribers.forEach(func => {
+      try {
+        func(key, value, oldValue)
+      } catch (error) {
+        console.error(`Error in global subscriber:`, error)
+      }
+    })
+  },
+
+  createProxy(component) {
+    return new Proxy({}, {
+      get: (target, key) => {
+        // Skip if already listening to this key
+        component._globalStateKeys ||= new Set()
+        if (!component._globalStateKeys.has(key)) {
+          component._globalStateKeys.add(key)
+
+          if (!this.listeners.has(key)) {
+            this.listeners.set(key, new Set())
+          }
+          this.listeners.get(key).add(component)
+        }
+
+        return this.data[key]
+      },
+
+      set: (target, key, value) => {
+        const oldValue = this.data[key]
+        if (oldValue !== value) {
+          this.data[key] = value
+          this.notify(key, value, oldValue)
+        }
+        return true
+      }
+    })
+  },
+
+  // Direct methods for use outside components
+  set(key, value) {
+    const oldValue = this.data[key]
+    if (oldValue !== value) {
+      this.data[key] = value
+      this.notify(key, value, oldValue)
+    }
+  },
+
+  get(key) {
+    return this.data[key]
+  },
+
+  // Execute function for each component listening to a key
+  forEach(key, func) {
+    const listeners = this.listeners.get(key)
+    if (listeners) {
+      listeners.forEach(comp => {
+        if (comp.isConnected) {
+          func(comp)
+        } else {
+          listeners.delete(comp)
+        }
+      })
+    }
+  },
+
+  // Subscribe to state changes
+  // Usage: Fez.state.subscribe(func) - listen to all changes
+  //        Fez.state.subscribe(key, func) - listen to specific key changes
+  subscribe(keyOrFunc, func) {
+    if (typeof keyOrFunc === 'function') {
+      // subscribe(func) - global subscription
+      this.globalSubscribers.add(keyOrFunc)
+      return () => this.globalSubscribers.delete(keyOrFunc)
+    } else {
+      // subscribe(key, func) - key-specific subscription
+      const key = keyOrFunc
+      if (!this.subscribers.has(key)) {
+        this.subscribers.set(key, new Set())
+      }
+      this.subscribers.get(key).add(func)
+      return () => {
+        const keySubscribers = this.subscribers.get(key)
+        if (keySubscribers) {
+          keySubscribers.delete(func)
+          if (keySubscribers.size === 0) {
+            this.subscribers.delete(key)
+          }
+        }
+      }
+    }
+  }
+}
+
+export default GlobalState

package/src/fez/lib/n.js

@@ -0,0 +1,65 @@
+// Exposes node building method, that gets node name, attrs and body.
+// n('span', {id: id}), n('.foo', {id: id}, body), n('.foo', {id: id}, [...])
+// * you can switch places for attrs and body, and body can be list of nodes
+// * n('.foo.bar') -> n('div', { class: 'foo bar' })
+//
+// copyright @dux, 2024
+// Licence MIT
+
+export default function n(name, attrs = {}, data) {
+  if (typeof attrs === 'string') {
+    [attrs, data] = [data, attrs]
+    attrs ||= {}
+  }
+
+  if (attrs instanceof Node) {
+    data = attrs
+    attrs = {}
+  }
+
+  if (Array.isArray(name)) {
+    data = name
+    name = 'div'
+  }
+
+  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 (attrs.class) {
+      attrs.class += ` ${c}`;
+    } else {
+      attrs.class = c
+    }
+  }
+
+  const node = document.createElement(name);
+
+  for (const [k, v] of Object.entries(attrs)) {
+    if (typeof v === 'function') {
+      node[k] = v.bind(this)
+    } else {
+      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)
+      }
+    } else if (data instanceof Node) {
+      node.appendChild(data)
+    } else {
+      node.innerHTML = String(data)
+    }
+  }
+
+  return node
+}

package/src/fez/lib/template.js

@@ -0,0 +1,119 @@
+function parseBlock(data, ifStack) {
+  data = data
+    .replace(/^#?raw/, '@html')
+    .replace(/^#?html/, '@html')
+
+  // Handle #if directive
+  if (data.startsWith('#if') || data.startsWith('if')) {
+    ifStack.push(false)
+    data = data.replace(/^#?if/, '')
+    return `\${ ${data} ? \``
+  }
+  else if (data.startsWith('#unless') || data.startsWith('unless')) {
+    ifStack.push(false)
+    data = data.replace(/^#?unless/, '')
+    return `\${ !(${data}) ? \``
+  }
+  else if (data == '/block') {
+    return '`) && \'\'}'
+  }
+  else if (data.startsWith('#for') || data.startsWith('for')) {
+    data = data.replace(/^#?for/, '')
+    const el = data.split(' in ', 2)
+    return '${' + el[1] + '.map((' + el[0] + ')=>`'
+  }
+  else if (data.startsWith('#each') || data.startsWith('each')) {
+    data = data.replace(/^#?each/, '')
+    const el = data.split(' as ', 2)
+    return '${' + el[0] + '.map((' + el[1] + ')=>`'
+  }
+  else if (data == ':else' || data == 'else') {
+    ifStack[ifStack.length - 1] = true
+    return '` : `'
+  }
+  else if (data == '/if' || data == '/unless') {
+    return ifStack.pop() ? '`}' : '` : ``}'
+  }
+  else if (data == '/for' || data == '/each') {
+    return '`).join("")}'
+  }
+  else {
+    const prefix = '@html '
+
+    if (data.startsWith(prefix)) {
+      data = data.replace(prefix, '')
+    } else {
+      data = `Fez.htmlEscape(${data})`
+    }
+
+    return '${' + data + '}'
+  }
+}
+
+// let tpl = createTemplate(string)
+// tpl({ ... this state ...})
+export default function createTemplate(text, opts = {}) {
+  const ifStack = []
+
+  // some templating engines, as GoLangs use {{ for templates. Allow usage of [[ for fez
+  text = text
+    .replaceAll('[[', '{{')
+    .replaceAll(']]', '}}')
+
+  text = text.replace(/(\w+)=\{\{\s*(.*?)\s*\}\}([\s>])/g, (match, p1, p2, p3) => {
+    return `${p1}="{`+`{ ${p2} }`+`}"${p3}`
+  })
+
+  // {{block foo}} ... {{/block}}
+  // {{block:foo}}
+  const blocks = {}
+  text = text.replace(/\{\{block\s+(\w+)\s*\}\}([^§]+)\{\{\/block\}\}/g, (_, name, block) => {
+    blocks[name] = block
+    return ''
+  })
+  text = text.replace(/\{\{block:([\w\-]+)\s*\}\}/g, (_, name) => blocks[name] || `block:${name}?`)
+
+  // {{#for el in list }}}}
+  //   <ui-comment :comment="el"></ui-comment>
+  //   -> :comment="{{ JSON.stringify(el) }}"
+  // skip attr="foo.bar"
+  text = text.replace(/:(\w+)="([\w\.\[\]]+)"/, (_, m1, m2) => {
+    return `:${m1}=Fez.store.delete({{ Fez.store.set(${m2}) }})`
+  })
+
+  let result = text.replace(/{{(.*?)}}/g, (_, content) => {
+    content = content.replaceAll('&#x60;', '`')
+
+    content = content
+      .replaceAll('&lt;', '<')
+      .replaceAll('&gt;', '>')
+      .replaceAll('&amp;', '&')
+    const parsedData = parseBlock(content, ifStack);
+
+    return parsedData
+  });
+
+  result = '`' + result.trim() + '`'
+
+  try {
+    const funcBody = `const fez = this;
+      with (this) {
+        return ${result}
+      }
+    `
+    const tplFunc = new Function(funcBody);
+    const outFunc = (o) => {
+      try {
+        return tplFunc.bind(o)()
+      } catch(e) {
+        e.message = `FEZ template runtime error: ${e.message}\n\nTemplate source: ${result}`
+        console.error(e)
+      }
+    }
+    return outFunc
+  } catch(e) {
+    e.message = `FEZ template compile error: ${e.message}Template source:\n${result}`
+    console.error(e)
+    return ()=>Fez.error(`Template Compile Error`, true)
+  }
+}