enigmatic 0.21.7 → 0.23.0

package/components.js

@@ -1,16 +1,169 @@
 window.components = {
-    'hello-world': {
-        style: 'color: red',
-        onMount: async x => console.log('mounted h-w'),
-        template: 'Hello World'
+    "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)
+        }
     },
-    'random-users': {
-        template: 'Hello Random user: {results[0].name.first} {results[0].name.last}',
-        onMount: e => console.log('Mounted', e.tagName, e.props),
-        beforeData: x => x.results[0].name.first = 'John'
-    },
-    'tailwind-example': {
-        template: '<div class="bg-blue-300 text-white font-bold py-2 px-4 rounded">I am Tailwind</div>',
-        onMount: async e => await loadCSS('https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css')
+    "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/enigmatic.js

@@ -1,28 +1,32 @@
 const w = {}, d = document
-w.enigmatic = { version: '2023-07-29 0.21.2' }
+w.enigmatic = { version: '2026-01-03 0.23.0' }
 
-window.onerror = (err, l, n) => {
-  document.write(`<h2 style="border:8px solid Tomato;">${[l, 'line: ' + n, err].join('<br>')}</h2>`)
+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, source, line, col) => {
+  showError(err, source, line, col)
+  return false
+}
+
+window.addEventListener('unhandledrejection', (e) => {
+  showError(e.reason?.message || e.reason || 'Unhandled Promise Rejection', '', '', '')
+})
+
 w.$ = d.querySelector.bind(d)
 w.$$ = d.querySelectorAll.bind(d)
+
 w.loadJS = (src) => {
   return new Promise((r, j) => {
-    if ($(`script[src="${src}"]`)) return r(true)
+    if (w.$(`script[src="${src}"]`)) return r(true)
     const s = d.createElement('script')
     s.src = src
     s.addEventListener('load', r)
-    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)
+    s.addEventListener('error', j)
     d.head.appendChild(s)
   })
 }
@@ -31,188 +35,168 @@ w.wait = (ms) => new Promise((r) => setTimeout(r, ms))
 
 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
-}
-
 w.e = (name, fn = {}, style = {}) => {
+  console.log(`registering component ${name}`)
   customElements.define(name, class extends HTMLElement {
     connectedCallback() {
       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') {
+        this.set = (data) => {
+          this.innerHTML = fn(data)
         }
-        this.template = template
-        if (!this.template.match('{')) this.innerHTML = this.template
+      } else {
         Object.assign(this, fn)
-      }
-      set(o) {
-        o = beforeData(o)
-        this.innerHTML = w.flatten(o, this.template)
-        return o
+        Object.keys(fn).filter(k=>k.match(/click|mouseover/)).forEach(k=>{
+          this.addEventListener(k, fn[k], true)
+        })
+        if(this.init) this.init(this)
       }
     }
-  )
-}
-
-if (window.components) {
-  for (let name in window.components) w.element(name, window.components[name])
+  })
 }
 
 w.state = new Proxy({}, {
   set: async (obj, prop, value) => {
     await w.ready()
     console.log('state change:', prop, value)
-    if (this[prop] === value) {
+    if (obj[prop] === value) {
       return true
     }
-    for (const e of $$(`[data=${prop}]`)) {
+    for (const e of w.$$(`[data="${prop}"]`)) {
       if (e.set) e.set(value)
     }
     obj[prop] = value
-    return value
+    return true
   },
   get: (obj, prop, receiver) => {
     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)
-  }
+})
+
+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)
   if (key) w.state[key] = data
   return data
 }
 
 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
+      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
+w.flatten = (obj, text, context = {}) => {
+  const hasSpecialVars = /{\$key}|{\$val}|{\$index}/.test(text)
+  
+  if (obj instanceof Array)
+    return obj.map((o, i) => w.flatten(o, text, { ...context, $key: i, $index: i, $val: o })).join('')
+  
+  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('')
+  
+  const m = text.match(/{([^}]*)}/gm) || []
+  for (const txt of m) {
+    const key = txt.replaceAll(/{|}/g, '')
+    let val = context[key] !== undefined ? context[key] : undefined
+    if (val === undefined && obj && typeof obj === 'object') {
+      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) {
+      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 = ''
+    text = text.replaceAll(txt, val ?? '')
+  }
+  return text
+}
+
+const props = {
+    async init() {
+      let ignore = this.innerHTML.match(/<!--IGNORE-->.*?<!--ENDIGNORE-->/gms) || []
+      if (!ignore.length) {
+        this.template = this.innerHTML
+      } else {
+        this.ignoreblock = ignore
+        this.template = this.innerHTML
+        ignore.forEach(block => {
+          this.template = this.template.replace(block, '')
+        })
+      }
+      this.innerHTML = ''
+      if (!this.hasAttribute('defer')) {
+        this.fetch()
+      }
+    },
+    set(o) {
+      console.log('setting', this, this.template, o)
+      this.innerHTML = w.flatten(o, this.template)
+      const dt = this.getAttribute('data')
+      if(dt)
+        w.state[dt] = o
+    },
+    async fetch() {
+      try {
+        const u = this.getAttribute('fetch')
+        if(!u) return
+        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()
+        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, '', '', '')
       }
     }
-  })
 }
 
+for (let name in window.components) 
+  w.e(name, window.components[name], window.components[name]?.style)
+
 Object.assign(window, w);
 
 (async () => {
-  await w.start()
+  try {
+    await ready()
+    for (const i of w.$$('div')) {
+      Object.assign(i, props)
+      i?.init()
+    }
+  } catch (err) {
+    showError(err.message || err, '', '', '')
+  }
 })()

package/index.html

@@ -1,33 +1,33 @@
-<script src=components.js></script>
-<script src=enigmatic.js></script>
-<link rel=stylesheet href=enigmatic.css>
+<script src="components.js"></script>
+<script src="enigmatic.js"></script>
+<link rel="stylesheet" href="enigmatic.css">
 
-<body style="--cols:3fr 10fr 3fr; --rows:3fr 11fr 2fr">
+<body style="--cols:1fr; --rows:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr">
+    <hello-world data="name"></hello-world>
+    <my-element></my-element>
 
-    <div class="bg-white"></div>
-    <div class="bg-white">
-        <img height='62' style='filter:invert(50%)' 
-          src='https://unpkg.com/simple-icons@v7/icons/apple.svg'>
+    <div id=one fetch="https://randomuser.me/api/?results=1" t="e=>e.results">{email}</div>
 
-    </div>
-    <div class="bg-white"></div>
-
-    <div class="bg-white"></div>
-    <section class="bg-white" style="--cols: 1fr 1fr 1fr; --rows: 1fr 1fr 1fr">
-        <div class="bg-green"></div>
-        <div class="bg-white"><hello-world></hello-world></div>
-        <div class="bg-white"></div>
-        <div class="bg-white"></div>
-        <div class="bg-white"></div>
-        <div class="bg-white"></div>
-        <div class="bg-white"></div>
-        <div class="bg-white"></div>
-        <div class="bg-green"></div>
-    </section>
-    <div class="bg-white"></div>
-
-    <div class="bg-yellow"></div>
-    <div class="bg-yellow"></div>
-    <div class="bg-yellow"></div>
-
-</body>
+    <script>
+      // Wait for DOM and enigmatic.js to be ready
+      document.addEventListener('DOMContentLoaded', async () => {
+        // Wait for e to be available (enigmatic.js assigns it)
+        while (typeof window.e === 'undefined') {
+          await new Promise(r => setTimeout(r, 10))
+        }
+        
+        e('my-element', {
+          init: (e) => e.innerText = 'ready',
+          click: (ev) => ev.target.style.color = 'green',
+          mouseover: (ev) => ev.target.style.color = 'yellow',
+        }, {
+          color: 'red',
+          "text-decoration": 'underline'
+        })
+        
+        // Set state for components
+        await ready()
+        state.name = { name: 'World' }
+      })
+    </script>
+</body>

package/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  testMatch: ['**/__tests__/**/*.test.js'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
+}
+

package/jest.setup.js

@@ -0,0 +1,5 @@
+// Mock window.components if not defined
+if (typeof window !== 'undefined' && !window.components) {
+  window.components = {}
+}
+

package/package.json

@@ -1,12 +1,13 @@
 {
     "name": "enigmatic",
     "main": "enigmatic.js",
-    "version": "0.21.7",
+    "version": "0.23.0",
     "scripts": {
-        "test": "node test.mjs"
+        "test": "jest",
+        "test:watch": "jest --watch"
     },
     "devDependencies": {
-        "instax": "^0.1.5",
-        "puppeteer": "^17.1.3"
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0"
     }
 }