enigmatic 0.26.0 → 0.29.0

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,169 +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)
-        }
-    },
-    "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

@@ -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
-  }
-})