enigmatic 0.25.0 → 0.27.0

package/__tests__/e2.test.js

@@ -0,0 +1,92 @@
+const fs = require('fs')
+const path = require('path')
+
+// Load e2.js into jsdom
+const e2Code = fs.readFileSync(path.join(__dirname, '../e2.js'), 'utf8')
+
+describe('e2.js', () => {
+  beforeEach(() => {
+    // Reset DOM
+    global.document.body.innerHTML = ''
+    global.document.head.innerHTML = ''
+    
+    // Clear window.custom
+    global.window.custom = {}
+    
+    // Execute e2.js code
+    eval(e2Code)
+  })
+
+  describe('fetchJson', () => {
+    test('fetches JSON with GET method', async () => {
+      const result = await window.fetchJson('GET', 'https://httpbin.org/json')
+
+      expect(result.status).toBe(200)
+      expect(result.statusText).toBe('OK')
+      expect(result.data).toBeDefined()
+      expect(typeof result.data).toBe('object')
+      expect(result.headers).toBeDefined()
+    })
+
+    test('fetches JSON with POST method and body', async () => {
+      const requestBody = { name: 'Test', value: 123 }
+      
+      const result = await window.fetchJson('POST', 'https://httpbin.org/post', {
+        body: JSON.stringify(requestBody)
+      })
+
+      expect(result.status).toBe(200)
+      expect(result.data).toBeDefined()
+      expect(result.data.json).toEqual(requestBody)
+    })
+
+    test('fetches JSON with PUT method', async () => {
+      const requestBody = { name: 'Updated' }
+      
+      const result = await window.fetchJson('PUT', 'https://httpbin.org/put', {
+        body: JSON.stringify(requestBody)
+      })
+
+      expect(result.status).toBe(200)
+      expect(result.data).toBeDefined()
+      expect(result.data.json).toEqual(requestBody)
+    })
+
+    test('fetches JSON with DELETE method', async () => {
+      const result = await window.fetchJson('DELETE', 'https://httpbin.org/delete')
+
+      expect(result.status).toBe(200)
+      expect(result.data).toBeDefined()
+    })
+
+    test('includes Content-Type header', async () => {
+      const result = await window.fetchJson('POST', 'https://httpbin.org/post', {
+        body: JSON.stringify({ test: 'data' })
+      })
+
+      expect(result.status).toBe(200)
+      expect(result.data.headers['Content-Type']).toBe('application/json')
+    })
+
+    test('includes credentials in request', async () => {
+      const result = await window.fetchJson('GET', 'https://httpbin.org/get')
+
+      expect(result.status).toBe(200)
+      // httpbin doesn't expose credentials, but we verify the request succeeded
+      expect(result.data).toBeDefined()
+    })
+
+    test('handles error responses', async () => {
+      // httpbin status endpoints return empty body, so fetchJson will throw on JSON parse
+      await expect(
+        window.fetchJson('GET', 'https://httpbin.org/status/404')
+      ).rejects.toThrow()
+    })
+
+    test('handles network errors', async () => {
+      await expect(
+        window.fetchJson('GET', 'https://invalid-domain-that-does-not-exist-12345.com/api')
+      ).rejects.toThrow()
+    })
+  })
+})

package/components.js

@@ -5,117 +5,6 @@ window.components = {
             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
-            }
-        }
     }
 }
 

package/e2.js

@@ -1,6 +1,16 @@
 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": {

package/index.html

@@ -1,5 +1,6 @@
 <script src="components.js"></script>
 <script src="enigmatic.js"></script>
+<script src="e2.js"></script>
 <link rel="stylesheet" href="enigmatic.css">
 
 <body style="--cols:1fr; --rows:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr">

package/jest.config.js

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

package/jest.setup.js

@@ -3,3 +3,8 @@ if (typeof window !== 'undefined' && !window.components) {
   window.components = {}
 }
 
+// Add fetch polyfill for jsdom
+if (typeof global.fetch === 'undefined') {
+  global.fetch = require('whatwg-fetch').fetch
+}
+

package/package.json

@@ -1,13 +1,14 @@
 {
     "name": "enigmatic",
     "main": "enigmatic.js",
-    "version": "0.25.0",
+    "version": "0.27.0",
     "scripts": {
         "test": "jest",
         "test:watch": "jest --watch"
     },
     "devDependencies": {
         "jest": "^29.7.0",
-        "jest-environment-jsdom": "^29.7.0"
+        "jest-environment-jsdom": "^29.7.0",
+        "whatwg-fetch": "^3.6.20"
     }
 }