enigmatic 0.22.0 → 0.24.0

package/components.js

@@ -1,8 +1,169 @@
 window.components = {
+    "hello-world": (data) => `Hello ${data?.name || 'World'}!`,
     "markdown-block": {
         async init() {
             await loadJS('https://cdn.jsdelivr.net/npm/marked/marked.min.js')
             this.innerHTML = marked.parse(this.innerText)
         }
+    },
+    "auto-complete": {
+        init() {
+            // Prevent re-initialization
+            if (this._initialized) return
+            this._initialized = true
+            
+            // Ensure element is visible
+            this.style.display = 'block'
+            this.style.width = '100%'
+            this.style.minWidth = '200px'
+            this.style.margin = '10px 0'
+            this.style.padding = '0'
+            this.style.backgroundColor = 'transparent'
+            
+            this.input = document.createElement('input')
+            this.input.type = 'text'
+            this.input.placeholder = this.getAttribute('placeholder') || 'Type to search...'
+            this.input.style.cssText = 'width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;font-size:14px;'
+            
+            this.dropdown = document.createElement('div')
+            this.dropdown.style.cssText = 'position:absolute;top:100%;left:0;right:0;background:white;border:1px solid #ccc;border-top:none;max-height:200px;overflow-y:auto;z-index:1000;display:none;box-shadow:0 2px 4px rgba(0,0,0,0.1);'
+            
+            this.container = document.createElement('div')
+            this.container.style.cssText = 'position:relative;width:100%;min-width:200px;'
+            this.container.appendChild(this.input)
+            this.container.appendChild(this.dropdown)
+            
+            // Clear existing content
+            this.innerHTML = ''
+            this.appendChild(this.container)
+            
+            this.items = []
+            this.filtered = []
+            this.selectedIndex = -1
+            
+            this.input.addEventListener('input', () => this.filter())
+            this.input.addEventListener('keydown', (e) => this.handleKey(e))
+            this.input.addEventListener('focus', () => {
+                if (this.filtered.length > 0) this.dropdown.style.display = 'block'
+            })
+            
+            // Use a unique handler per instance
+            this._clickHandler = (e) => {
+                if (!this.contains(e.target)) {
+                    this.dropdown.style.display = 'none'
+                }
+            }
+            document.addEventListener('click', this._clickHandler)
+        },
+        set(data) {
+            this.items = Array.isArray(data) ? data : (data?.items || [])
+            this.filter()
+        },
+        filter() {
+            const query = this.input.value.toLowerCase()
+            this.filtered = this.items.filter(item => {
+                const text = typeof item === 'string' ? item : (item.label || item.name || String(item))
+                return text.toLowerCase().includes(query)
+            })
+            this.render()
+        },
+        render() {
+            if (this.filtered.length === 0) {
+                this.dropdown.style.display = 'none'
+                return
+            }
+            
+            this.dropdown.innerHTML = this.filtered.map((item, i) => {
+                const text = typeof item === 'string' ? item : (item.label || item.name || String(item))
+                const selected = i === this.selectedIndex ? 'background:#f0f0f0;' : ''
+                return `<div data-index="${i}" style="padding:8px;cursor:pointer;${selected}">${text}</div>`
+            }).join('')
+            
+            this.dropdown.style.display = 'block'
+            
+            this.dropdown.querySelectorAll('div').forEach((div, i) => {
+                div.addEventListener('click', () => this.select(i))
+                div.addEventListener('mouseenter', () => {
+                    this.selectedIndex = i
+                    this.render()
+                })
+            })
+        },
+        select(index) {
+            const item = this.filtered[index]
+            const text = typeof item === 'string' ? item : (item.label || item.name || String(item))
+            this.input.value = text
+            this.dropdown.style.display = 'none'
+            this.selectedIndex = -1
+            
+            const event = new CustomEvent('select', { detail: item })
+            this.dispatchEvent(event)
+        },
+        handleKey(e) {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault()
+                this.selectedIndex = Math.min(this.selectedIndex + 1, this.filtered.length - 1)
+                this.render()
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault()
+                this.selectedIndex = Math.max(this.selectedIndex - 1, -1)
+                this.render()
+            } else if (e.key === 'Enter' && this.selectedIndex >= 0) {
+                e.preventDefault()
+                this.select(this.selectedIndex)
+            } else if (e.key === 'Escape') {
+                this.dropdown.style.display = 'none'
+                this.selectedIndex = -1
+            }
+        }
     }
-}
+}
+
+/**
+ * Component Definitions
+ * 
+ * Components are registered via window.components object.
+ * Each component is a custom HTML element that can be used in your HTML.
+ * 
+ * Structure:
+ *   window.components = {
+ *     "component-name": {
+ *       // Component methods and properties
+ *     }
+ *   }
+ * 
+ * Available Options:
+ * 
+ * 1. init(element) - Called when component is first connected to DOM
+ *    - Receives the element instance as parameter
+ *    - Use for setup, loading resources, initial rendering
+ *    - Can be async
+ * 
+ * 2. set(data) - Called when component receives data (via data attribute binding)
+ *    - Receives data object from state or fetch
+ *    - Use to update component content based on data
+ * 
+ * 3. click(ev), mouseover(ev), etc. - Event handlers
+ *    - Automatically bound as event listeners
+ *    - Any method matching /click|mouseover/ pattern is auto-bound
+ *    - Receives the event object
+ * 
+ * 4. style - Object with CSS properties
+ *    - Applied as inline styles when component connects
+ *    - Use camelCase or kebab-case (with quotes) for CSS properties
+ * 
+ * 5. Any other methods - Available as instance methods
+ *    - Can be called directly on element: element.myMethod()
+ * 
+ * Usage in HTML:
+ *   <component-name data="stateKey"></component-name>
+ * 
+ * Example:
+ *   window.components = {
+ *     "my-button": {
+ *       init: (e) => e.innerText = 'Click me',
+ *       click: (ev) => alert('Clicked!'),
+ *       style: { color: 'blue', padding: '10px' }
+ *     }
+ *   }
+ */

package/e2.js

@@ -0,0 +1,29 @@
+window.$  = document.querySelector.bind(document)
+window.$$ = document.querySelectorAll.bind(document)
+
+window.custom = {
+  "hello-world": (data) => `Hello ${data}`,
+  "hello-world-2": {
+    prop: (data) => `${data} World`,
+    render: function(data) { 
+      return this.prop(data); 
+    }
+  }
+}
+
+window.state = new Proxy({}, {
+set(obj, prop, value) {
+  obj[prop] = value
+  console.log('set', prop, value);
+  $$(`hello-world, hello-world-2`).forEach(el => {
+    console.log('setting', el.tagName);
+    const f = window.custom[el.tagName.toLowerCase()];
+    if(typeof f === 'function') {
+      el.innerHTML = f(value);
+    } else {
+      el.innerHTML = f.render(value);
+    }
+  });
+  return true
+}
+})

package/enigmatic.js

@@ -1,218 +1,248 @@
+// Global namespace object and document shortcut
 const w = {}, d = document
-w.enigmatic = { version: '2023-07-29 0.21.2' }
+w.enigmatic = { version: '2026-01-03 0.23.0' }
+
+// Display error banner at top of page
+const showError = (err, source, line, col) => {
+  const errorDiv = d.createElement('div')
+  errorDiv.style.cssText = 'position:fixed;top:0;left:0;right:0;background:#ff4444;color:white;padding:20px;z-index:10000;font-family:monospace;border-bottom:4px solid #cc0000;'
+  errorDiv.innerHTML = `<strong>JavaScript Error:</strong><br>${err}<br><small>${source ? source + ':' : ''}${line ? ' line ' + line : ''}${col ? ':' + col : ''}</small>`
+  d.body.insertBefore(errorDiv, d.body.firstChild)
+}
 
-window.onerror = (err, l, n) => {
-  document.write(`<h2 style="border:8px solid Tomato;">${[l, 'line: ' + n, err].join('<br>')}</h2>`)
+// Global error handler for uncaught JavaScript errors
+window.onerror = (err, source, line, col) => {
+  showError(err, source, line, col)
+  return false
 }
 
+// Handle unhandled promise rejections
+window.addEventListener('unhandledrejection', (e) => {
+  showError(e.reason?.message || e.reason || 'Unhandled Promise Rejection', '', '', '')
+})
+
+// DOM query shortcuts
 w.$ = d.querySelector.bind(d)
 w.$$ = d.querySelectorAll.bind(d)
+
+// Dynamically load JavaScript file (prevents duplicate loading)
 w.loadJS = (src) => {
   return new Promise((r, j) => {
-    if ($(`script[src="${src}"]`)) return r(true)
+    if (w.$(`script[src="${src}"]`)) return r(true) // Already loaded
     const s = d.createElement('script')
     s.src = src
     s.addEventListener('load', r)
+    s.addEventListener('error', j)
     d.head.appendChild(s)
   })
 }
 
-w.loadCSS = (src) => {
-  return new Promise((r, j) => {
-    const s = document.createElement('link')
-    s.rel = 'stylesheet'
-    s.href = src
-    s.addEventListener('load', r)
-    d.head.appendChild(s)
-  })
-}
-
+// Utility: wait for specified milliseconds
 w.wait = (ms) => new Promise((r) => setTimeout(r, ms))
 
+// Wait for document to be fully loaded
 w.ready = async () => {
   return new Promise((r) => {
-    if (document.readyState === 'complete') r(true)
-    document.onreadystatechange = () => {
+    if (document.readyState === 'complete') return r(true)
+    document.addEventListener('readystatechange', () => {
       if (document.readyState === 'complete') r()
-    }
+    })
   })
 }
 
-w.flattenMap = (obj, text) => {
-  let template = ''
-  if (text.match(/\$key|\$val/i)) {
-    for (let k in obj) {
-      template += text.replaceAll('{$key}', k).replaceAll('{$val}', obj[k])
-    }
-    return template
-  }
-  for (let k in obj) {
-    text = text.replaceAll(`{${k}}`, obj[k])
-  }
-  return text
-}
-
-w.flatten = (obj, text) => {
-  if (!(obj instanceof Array) && typeof Object.values(obj)[0] === 'string') {
-    return w.flattenMap(obj, text)
-  }
-  let htmls = ''
-  if (obj instanceof Array) obj = { ...obj }
-  for (let k in obj) {
-    let html = text.replaceAll('{$key}', k)
-    for (let j in obj[k]) {
-      const val = typeof obj[k] === 'object' ? obj[k][j] : obj[k]
-      html = html.replaceAll('{_key_}', j).replaceAll('{$val}', val)
-      html = html.replaceAll(`{${j}}`, val)
-    }
-    htmls += html
-  }
-  return htmls
-}
-
+// Register custom web component
+// If fn is a function, it becomes a render function that receives data
+// If fn is an object, it can contain init, set, event handlers, etc.
 w.e = (name, fn = {}, style = {}) => {
+  console.log(`registering component ${name}`)
   customElements.define(name, class extends HTMLElement {
     connectedCallback() {
+      // Apply styles to element
       Object.assign(this.style, style)
-      Object.assign(this, fn)
-      Object.keys(fn).filter(k=>k.match(/click/)).forEach(k=>{
-        this.addEventListener(k, fn[k], true)
-      })
-      if(this.init) this.init(this)
-    }
-  })
-}
-
-w.element = (
-  name,
-  { onMount = x => x, beforeData = (x) => x, style, template = '', fn = {} }
-) => {
-  customElements.define(
-    name,
-    class extends HTMLElement {
-      connectedCallback(props) {
-        onMount(this)
-        if (style) {
-          const s = document.createElement('style')
-          s.innerHTML = `${name} {${style}}`
-          d.body.appendChild(s)
+      if (typeof fn === 'function') {
+        // Function mode: create set() method that renders HTML from function
+        this.set = (data) => {
+          this.innerHTML = fn(data)
         }
-        this.template = template
-        if (!this.template.match('{')) this.innerHTML = this.template
+      } else {
+        // Object mode: assign all methods/properties to element
         Object.assign(this, fn)
-      }
-      set(o) {
-        o = beforeData(o)
-        this.innerHTML = w.flatten(o, this.template)
-        return o
+        // Auto-bind event handlers (click, mouseover, etc.)
+        Object.keys(fn).filter(k=>k.match(/click|mouseover/)).forEach(k=>{
+          this.addEventListener(k, fn[k], true)
+        })
+        // Call init if provided
+        if(this.init) this.init(this)
       }
     }
-  )
-}
-
-if (window.components) {
-  for (let name in window.components) w.e(name, window.components[name], window.components[name]?.style)
+  })
 }
 
+// Reactive state: automatically updates elements when state changes
 w.state = new Proxy({}, {
   set: async (obj, prop, value) => {
     await w.ready()
     console.log('state change:', prop, value)
-    if (this[prop] === value) {
+    // Skip update if value hasn't changed
+    if (obj[prop] === value) {
       return true
     }
-    for (const e of $$(`[data=${prop}]`)) {
+    // Find all elements with matching data attribute and call their set() method
+    for (const e of w.$$(`[data="${prop}"]`)) {
       if (e.set) e.set(value)
     }
     obj[prop] = value
-    return value
+    return true
   },
   get: (obj, prop, receiver) => {
+    // Special property to get entire state object
     if (prop == '_all') return obj
     return obj[prop]
   }
-}
-)
-
-w.get = async (url, options = {}, transform, key) => {
-  console.log(`fetching ${url}`)
-  let data
-  if (url.startsWith('{') || url.startsWith('[')) {
-      data = JSON.parse(url)
-  } else {
-      let f = await fetch(url, options)
-      if (!f.ok) throw Error(`Could not fetch ${url}`)
-      data = await f.json()
-  }
-  if (transform) {
-    console.log('transforming ' + data)
-    data = transform(data)
-  }
-  if (key) w.state[key] = data
+})
+
+// Fetch JSON from URL, optionally transform and store in state
+w.get = async (url, opts = {}, transform, key) => {
+  const res = await fetch(url, opts)
+  if (!res.ok) throw Error(`Could not fetch ${url}`)
+  let data = await res.json()
+  if (transform) data = transform(data) // Apply transform function if provided
+  if (key) w.state[key] = data // Store in state if key provided
   return data
 }
 
+// Stream data via Server-Sent Events (SSE)
 w.stream = async (url, key) => {
   const ev = new EventSource(url)
-  ev.onmessage = (ev) => {
-    const data = JSON.parse(ev.data)
-    if (key) w.state[key] = data
-    return data
+  ev.onmessage = (e) => {
+    try {
+      const data = JSON.parse(e.data)
+      if (key) w.state[key] = data // Update state with each message
+      return data
+    } catch (err) {
+      showError(err.message || err, '', '', '')
+    }
   }
+  ev.onerror = (e) => {
+    showError('EventSource error', '', '', '')
+    ev.close()
+  }
+  return ev
 }
 
-w.start = async () => {
-  await w.ready();
-  [...$$('*')].map(e => {
-    e.attr = {};
-    [...e.attributes].map((a) => (e.attr[a.name] = a.value))
-    if (e.attr.fetch) {
-      e.fetch = async () => {
-        let template = e.innerHTML
-        let ignore = template.match(/<!--IGNORE-->.*>/gms) || ''
-        if(ignore)
-          template = template.replace(ignore, '')
-        const obj = await w.get(e.attr.fetch, {}, null, e.attr.data)
-        e.innerHTML = w.flatten(obj, template) + ignore
-        let pos = 0
-        for(c in e.children) {
-          const ele = e.children[c]
-          if(typeof ele === 'object' && 'set' in ele)
-            e.children[c].set(obj[pos++])
-        }
-        return obj
+// Template engine: replace {placeholder} with values from object
+// Supports nested properties (e.g., {user.name}) and special vars ($key, $val, $index)
+w.flatten = (obj, text, context = {}) => {
+  // Check if template uses special iteration variables
+  const hasSpecialVars = /{\$key}|{\$val}|{\$index}/.test(text)
+  
+  // Arrays: map over each item, providing $key, $index, $val
+  if (obj instanceof Array)
+    return obj.map((o, i) => w.flatten(o, text, { ...context, $key: i, $index: i, $val: o })).join('')
+  
+  // Objects with special vars: iterate over entries, providing $key and $val
+  if (hasSpecialVars && obj && typeof obj === 'object' && !Array.isArray(obj))
+    return Object.entries(obj).map(([k, v]) => w.flatten(v, text, { ...context, $key: k, $val: v })).join('')
+  
+  // Find all {placeholder} patterns in template
+  const m = text.match(/{([^}]*)}/gm) || []
+  for (const txt of m) {
+    const key = txt.replaceAll(/{|}/g, '')
+    // Check context first (for special vars), then object properties
+    let val = context[key] !== undefined ? context[key] : undefined
+    if (val === undefined && obj && typeof obj === 'object') {
+      // Support dot notation: {user.name}
+      val = obj
+      for (let k of key.split('.')) {
+        val = val?.[k]
       }
-      if (!e.hasAttribute('defer'))
-        e.fetch()
-    }
-    if (e.attr?.stream) {
-      e.stream = w.stream.bind(null, e.pr.stream, null, window[e.pr.transform], e.id)
+    } else if (val === undefined) {
+      // Fallback to obj itself if key not found
+      val = obj
     }
-    let dta = e.attr?.data
-    if (dta) {
-      console.log(`reactive ${e} ${dta}`)
-      if (!e.set) {
-        if (e.innerHTML) {
-          e.template = e.innerHTML
-          if (e.innerHTML.match('{') && !e.attr.preserve) {
-            e.innerHTML = ''
+    // Replace placeholder with value (or empty string if undefined)
+    text = text.replaceAll(txt, val ?? '')
+  }
+  return text
+}
+
+// Methods added to div elements for data binding
+const props = {
+    // Initialize: save template, clear content, optionally fetch data
+    async init() {
+      // Extract and remove IGNORE blocks from template
+      let ignore = this.innerHTML.match(/<!--IGNORE-->.*?<!--ENDIGNORE-->/gms) || []
+      if (!ignore.length) {
+        this.template = this.innerHTML
+      } else {
+        this.ignoreblock = ignore
+        this.template = this.innerHTML
+        // Remove all IGNORE blocks from template
+        ignore.forEach(block => {
+          this.template = this.template.replace(block, '')
+        })
+      }
+      this.innerHTML = '' // Clear for rendering
+      // Auto-fetch unless defer attribute is present
+      if (!this.hasAttribute('defer')) {
+        this.fetch()
+      }
+    },
+    // Update element content with data using template
+    set(o) {
+      console.log('setting', this, this.template, o)
+      this.innerHTML = w.flatten(o, this.template)
+      // Sync to state if data attribute exists
+      const dt = this.getAttribute('data')
+      if(dt)
+        w.state[dt] = o
+    },
+    // Fetch data from URL or parse inline JSON
+    async fetch() {
+      try {
+        const u = this.getAttribute('fetch')
+        if(!u) return
+        // Inline JSON: parse directly
+        if (u.startsWith('[') || u.startsWith('{'))
+          return this.set(JSON.parse(u))
+        const opts = {}
+        const f = await fetch(u, opts)
+        console.log(f)
+        if (!f.ok) throw Error(`Could not fetch ${u}`)
+        let data = await f.json()
+        // Apply transform function if 't' attribute exists
+        const tf = this.getAttribute('t')
+        if (tf) {
+          try {
+            data = new Function('return ' + tf)()(data)
+          } catch (err) {
+            showError(`Transform error: ${err.message}`, '', '', '')
           }
         }
-        e.set = (o) => {
-          e.innerHTML = w.flatten(o, e.template) || o
-        }
-      }
-      if (e.attr.value) {
-        let o = e.attr.value
-        try { o = JSON.parse(o) } catch (e) { }
-        w.state[dta] = o
+        this.set(data)
+      } catch (err) {
+        showError(err.message || err, '', '', '')
       }
     }
-  })
 }
 
+// Register components from window.components object
+for (let name in window.components) 
+  w.e(name, window.components[name], window.components[name]?.style)
+
+// Expose all functions to global scope (window)
 Object.assign(window, w);
 
+// Initialize: wait for DOM, then enhance all divs with data binding
 (async () => {
-  await w.start()
+  try {
+    await ready()
+    // Add props to all divs and initialize them
+    for (const i of w.$$('div')) {
+      Object.assign(i, props)
+      i?.init()
+    }
+  } catch (err) {
+    showError(err.message || err, '', '', '')
+  }
 })()