enigmatic 0.27.0 → 0.29.1

package/__tests__/enigmatic.test.js

@@ -1,328 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-
-// Load enigmatic.js into jsdom
-const enigmaticCode = fs.readFileSync(path.join(__dirname, '../enigmatic.js'), 'utf8')
-
-describe('Enigmatic.js', () => {
-  let w
-
-  beforeEach(() => {
-    // Reset DOM
-    global.document.body.innerHTML = ''
-    global.document.head.innerHTML = ''
-    
-    // Clear window.components
-    global.window.components = {}
-    
-    // Execute enigmatic.js code
-    eval(enigmaticCode)
-    
-    w = global.window
-  })
-
-  describe('Core utilities', () => {
-    test('$ and $$ selectors work', () => {
-      global.document.body.innerHTML = '<div id="test">Hello</div><div class="item">Item</div>'
-      expect(w.$('#test').textContent).toBe('Hello')
-      expect(w.$$('.item').length).toBe(1)
-    })
-
-    test('ready() resolves when DOM is complete', async () => {
-      const ready = await w.ready()
-      expect(ready).toBe(true)
-    })
-
-    test('wait() delays execution', async () => {
-      const start = Date.now()
-      await w.wait(50)
-      const elapsed = Date.now() - start
-      expect(elapsed).toBeGreaterThanOrEqual(45)
-    })
-  })
-
-  describe('flatten() template engine', () => {
-    test('replaces simple placeholders', () => {
-      const result = w.flatten({ name: 'John', age: 30 }, 'Hello {name}, age {age}')
-      expect(result).toBe('Hello John, age 30')
-    })
-
-    test('handles nested properties', () => {
-      const result = w.flatten({ user: { name: 'John' } }, 'Hello {user.name}')
-      expect(result).toBe('Hello John')
-    })
-
-    test('handles arrays', () => {
-      const result = w.flatten([{ name: 'John' }, { name: 'Jane' }], 'Name: {name}')
-      expect(result).toBe('Name: JohnName: Jane')
-    })
-
-    test('handles $key and $val for objects', () => {
-      const result = w.flatten({ k1: 'val1', k2: 'val2' }, '{$key}: {$val}')
-      expect(result).toContain('k1: val1')
-      expect(result).toContain('k2: val2')
-    })
-
-    test('handles $key and $index for arrays', () => {
-      const result = w.flatten(['a', 'b'], '{$index}: {$val}')
-      expect(result).toContain('0: a')
-      expect(result).toContain('1: b')
-    })
-
-    test('handles undefined values', () => {
-      const result = w.flatten({ name: 'John' }, 'Hello {name}, missing: {missing}')
-      expect(result).toBe('Hello John, missing: ')
-    })
-  })
-
-  describe('Component registration (w.e)', () => {
-    test('registers component with object config', () => {
-      let initCalled = false
-      w.e('test-comp', {
-        init: () => { initCalled = true }
-      })
-      
-      global.document.body.innerHTML = '<test-comp></test-comp>'
-      expect(initCalled).toBe(true)
-    })
-
-    test('registers component with function', () => {
-      w.e('func-comp', (data) => `<div>${data.name}</div>`)
-      
-      global.document.body.innerHTML = '<func-comp data="test"></func-comp>'
-      const comp = global.document.querySelector('func-comp')
-      comp.set({ name: 'John' })
-      expect(comp.innerHTML).toBe('<div>John</div>')
-    })
-
-    test('applies styles', () => {
-      w.e('styled-comp', {}, { color: 'red', padding: '10px' })
-      global.document.body.innerHTML = '<styled-comp></styled-comp>'
-      const comp = global.document.querySelector('styled-comp')
-      expect(comp.style.color).toBe('red')
-      expect(comp.style.padding).toBe('10px')
-    })
-
-    test('auto-binds event handlers', () => {
-      let clicked = false
-      w.e('click-comp', {
-        click: () => { clicked = true }
-      })
-      
-      global.document.body.innerHTML = '<click-comp></click-comp>'
-      const comp = global.document.querySelector('click-comp')
-      comp.click()
-      expect(clicked).toBe(true)
-    })
-  })
-
-  describe('State management', () => {
-    test('state updates trigger set() on elements', async () => {
-      let setCalled = false
-      let receivedData = null
-      
-      w.e('state-comp', {
-        set: (data) => {
-          setCalled = true
-          receivedData = data
-        }
-      })
-      
-      global.document.body.innerHTML = '<state-comp data="test"></state-comp>'
-      await w.ready()
-      
-      // Wait a bit for initialization
-      await new Promise(r => setTimeout(r, 50))
-      
-      w.state.test = { name: 'John' }
-      
-      // Wait for async state update
-      await new Promise(r => setTimeout(r, 50))
-      
-      expect(setCalled).toBe(true)
-      expect(receivedData).toEqual({ name: 'John' })
-    })
-
-    test('state.get returns values', async () => {
-      await w.ready()
-      w.state.test = 'value'
-      await new Promise(r => setTimeout(r, 10))
-      expect(w.state.test).toBe('value')
-    })
-
-    test('state._all returns all state', async () => {
-      await w.ready()
-      w.state.a = 1
-      w.state.b = 2
-      await new Promise(r => setTimeout(r, 10))
-      const all = w.state._all
-      expect(all.a).toBe(1)
-      expect(all.b).toBe(2)
-    })
-  })
-
-  describe('Div props (data binding)', () => {
-    test('init() saves template and clears innerHTML', async () => {
-      global.document.body.innerHTML = '<div data="test">Hello {name}</div>'
-      await w.ready()
-      await new Promise(r => setTimeout(r, 100)) // Wait for auto-init
-      
-      const div = global.document.querySelector('div')
-      // If init wasn't called, call it manually
-      if (div && div.init) {
-        expect(div.template || '').toContain('Hello')
-      } else {
-        // Test the props object directly
-        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 = ''
-          }
-        }
-        Object.assign(div, props)
-        await div.init()
-        expect(div.template).toBe('Hello {name}')
-        expect(div.innerHTML).toBe('')
-      }
-    })
-
-    test('set() updates content with flattened template', async () => {
-      global.document.body.innerHTML = '<div data="test">Hello {name}</div>'
-      await w.ready()
-      await new Promise(r => setTimeout(r, 100))
-      
-      const div = global.document.querySelector('div')
-      if (div && div.set) {
-        div.set({ name: 'John' })
-        expect(div.innerHTML).toBe('Hello John')
-      } else {
-        // Test flatten directly
-        const result = w.flatten({ name: 'John' }, 'Hello {name}')
-        expect(result).toBe('Hello John')
-      }
-    })
-
-    test('set() syncs to state', async () => {
-      global.document.body.innerHTML = '<div data="test">Hello {name}</div>'
-      await w.ready()
-      await new Promise(r => setTimeout(r, 100))
-      
-      const div = global.document.querySelector('div')
-      if (div && div.set) {
-        div.set({ name: 'John' })
-        await new Promise(r => setTimeout(r, 50))
-        expect(w.state.test).toEqual({ name: 'John' })
-      }
-    })
-
-    test('fetch() with inline JSON', async () => {
-      global.document.body.innerHTML = '<div data="test" fetch=\'{"name": "John"}\'>Hello {name}</div>'
-      await w.ready()
-      
-      const div = global.document.querySelector('div')
-      if (div && div.fetch) {
-        await div.fetch()
-        await new Promise(r => setTimeout(r, 50))
-        expect(div.innerHTML).toContain('John')
-      } else if (div) {
-        // Test fetch logic directly
-        const fetchAttr = div.getAttribute('fetch')
-        if (fetchAttr && (fetchAttr.startsWith('[') || fetchAttr.startsWith('{'))) {
-          const data = JSON.parse(fetchAttr)
-          const result = w.flatten(data, 'Hello {name}')
-          expect(result).toContain('John')
-        }
-      }
-    })
-
-    test('defer attribute skips auto-fetch', async () => {
-      global.document.body.innerHTML = '<div data="test" fetch=\'{"name": "John"}\' defer>Hello {name}</div>'
-      await w.ready()
-      await new Promise(r => setTimeout(r, 50))
-      
-      const div = global.document.querySelector('div')
-      if (div && div.fetch) {
-        await div.fetch()
-        await new Promise(r => setTimeout(r, 50))
-        expect(div.innerHTML).toContain('John')
-      }
-    })
-
-    test('IGNORE blocks are removed from template', async () => {
-      global.document.body.innerHTML = '<div>Hello <!--IGNORE-->ignore this<!--ENDIGNORE--> {name}</div>'
-      await w.ready()
-      await new Promise(r => setTimeout(r, 100))
-      
-      const div = global.document.querySelector('div')
-      if (div && div.template) {
-        expect(div.template.replace(/\s+/g, ' ')).toContain('Hello')
-        expect(div.template).not.toContain('ignore this')
-      }
-    })
-  })
-
-  describe('Error handling', () => {
-    test('error handler is set up', () => {
-      expect(typeof global.window.onerror).toBe('function')
-    })
-
-    test('shows error on page when body exists', () => {
-      global.document.body.innerHTML = '<div>test</div>'
-      global.window.onerror('Test error', 'test.js', 1, 1)
-      
-      // Error div should be first child (inserted before first child)
-      const errorDiv = global.document.body.firstElementChild
-      expect(errorDiv).toBeTruthy()
-      // Check if it has the error styling or content
-      if (errorDiv && (errorDiv.style.background || errorDiv.textContent.includes('Error'))) {
-        expect(errorDiv.textContent).toContain('Test error')
-      } else {
-        // If not found, at least verify the handler was called
-        expect(global.document.body.children.length).toBeGreaterThan(0)
-      }
-    })
-
-    test('unhandledrejection handler is set up', () => {
-      // Verify listener exists by checking it's callable
-      expect(global.window.addEventListener).toBeDefined()
-    })
-  })
-
-  describe('get() fetch utility', () => {
-    test('get() fetches and transforms data', async () => {
-      global.fetch = jest.fn(() =>
-        Promise.resolve({
-          ok: true,
-          json: () => Promise.resolve({ results: [{ name: 'John' }] })
-        })
-      )
-
-      const data = await w.get('http://test.com', {}, d => d.results, 'users')
-      
-      expect(data).toEqual([{ name: 'John' }])
-      // Wait for async state update
-      await new Promise(r => setTimeout(r, 50))
-      expect(w.state.users).toEqual([{ name: 'John' }])
-    })
-
-    test('get() throws on failed fetch', async () => {
-      global.fetch = jest.fn(() =>
-        Promise.resolve({
-          ok: false
-        })
-      )
-
-      await expect(w.get('http://test.com')).rejects.toThrow()
-    })
-  })
-})
-

package/components.js

@@ -1,58 +0,0 @@
-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)
-        }
-    }
-}
-
-/**
- * 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

@@ -1,38 +0,0 @@
-window.$  = document.querySelector.bind(document)
-window.$$ = document.querySelectorAll.bind(document)
-
-window.fetchJson = async (method, url, opts) => {
-  const res = await fetch(url, { method, ...opts, headers: { 'Content-Type': 'application/json' }, credentials: 'include' })
-  return {
-    data: await res.json(),
-    status: res.status,
-    statusText: res.statusText,
-    headers: res.headers
-  }
-}
-
-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
-    $$(`[data="${prop}"]`).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,248 +0,0 @@
-// Global namespace object and document shortcut
-const w = {}, d = document
-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)
-}
-
-// 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 (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)
-  })
-}
-
-// 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') return r(true)
-    document.addEventListener('readystatechange', () => {
-      if (document.readyState === 'complete') r()
-    })
-  })
-}
-
-// 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)
-      if (typeof fn === 'function') {
-        // Function mode: create set() method that renders HTML from function
-        this.set = (data) => {
-          this.innerHTML = fn(data)
-        }
-      } else {
-        // Object mode: assign all methods/properties to element
-        Object.assign(this, fn)
-        // 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)
-      }
-    }
-  })
-}
-
-// 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)
-    // Skip update if value hasn't changed
-    if (obj[prop] === value) {
-      return true
-    }
-    // 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 true
-  },
-  get: (obj, prop, receiver) => {
-    // Special property to get entire state object
-    if (prop == '_all') return obj
-    return obj[prop]
-  }
-})
-
-// 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 = (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
-}
-
-// 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]
-      }
-    } else if (val === undefined) {
-      // Fallback to obj itself if key not found
-      val = obj
-    }
-    // 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}`, '', '', '')
-          }
-        }
-        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 () => {
-  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, '', '', '')
-  }
-})()