enigmatic 0.26.0 → 0.29.0

package/__tests__/e2.test.js

@@ -1,10 +1,11 @@
 const fs = require('fs')
 const path = require('path')
 
-// Load e2.js into jsdom
-const e2Code = fs.readFileSync(path.join(__dirname, '../e2.js'), 'utf8')
+// Load client.js and custom.js into jsdom
+const clientCode = fs.readFileSync(path.join(__dirname, '../public/client.js'), 'utf8')
+const customCode = fs.readFileSync(path.join(__dirname, '../public/custom.js'), 'utf8')
 
-describe('e2.js', () => {
+describe('client.js', () => {
   beforeEach(() => {
     // Reset DOM
     global.document.body.innerHTML = ''
@@ -13,205 +14,297 @@ describe('e2.js', () => {
     // Clear window.custom
     global.window.custom = {}
     
-    // Execute e2.js code
-    eval(e2Code)
+    // Execute custom.js first (defines window.custom)
+    eval(customCode)
+    // Execute client.js code
+    eval(clientCode)
   })
 
-  describe('fetchJson', () => {
-    test('fetches JSON with GET method', async () => {
-      const mockData = { id: 1, name: 'Test' }
-      global.fetch = jest.fn(() =>
-        Promise.resolve({
-          ok: true,
-          status: 200,
-          statusText: 'OK',
-          headers: new Headers({ 'content-type': 'application/json' }),
-          json: () => Promise.resolve(mockData)
-        })
-      )
+  describe('$ and $$ selectors', () => {
+    test('$ selects single element', () => {
+      global.document.body.innerHTML = '<div id="test">Hello</div>'
+      expect(window.$('#test').textContent).toBe('Hello')
+    })
+
+    test('$$ selects multiple elements', () => {
+      global.document.body.innerHTML = '<div class="item">1</div><div class="item">2</div>'
+      const items = window.$$('.item')
+      expect(items.length).toBe(2)
+      expect(items[0].textContent).toBe('1')
+      expect(items[1].textContent).toBe('2')
+    })
+
+    test('$ returns null for non-existent element', () => {
+      global.document.body.innerHTML = '<div>Test</div>'
+      expect(window.$('#nonexistent')).toBeNull()
+    })
+
+    test('$$ returns empty NodeList for non-existent elements', () => {
+      global.document.body.innerHTML = '<div>Test</div>'
+      expect(window.$$('.nonexistent').length).toBe(0)
+    })
+  })
+
+  describe('window API functions', () => {
+    let originalFetch
+    let originalLocation
 
-      const result = await window.fetchJson('GET', 'http://test.com/api')
+    beforeEach(() => {
+      originalFetch = global.fetch
+      global.fetch = jest.fn()
+      originalLocation = global.window.location
+      delete global.window.location
+      global.window.location = { href: '' }
+    })
+
+    afterEach(() => {
+      global.fetch = originalFetch
+      global.window.location = originalLocation
+    })
+
+    test('window.get makes GET request with encoded key', async () => {
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ value: 'test' })
+      })
+
+      const result = await window.get('test key')
 
       expect(global.fetch).toHaveBeenCalledWith(
-        'http://test.com/api',
-        expect.objectContaining({
-          method: 'GET',
-          headers: { 'Content-Type': 'application/json' },
-          credentials: 'include'
-        })
+        `${window.api_url}/test%20key`
       )
-      expect(result.data).toEqual(mockData)
-      expect(result.status).toBe(200)
-      expect(result.statusText).toBe('OK')
-      expect(result.headers).toBeDefined()
+      expect(result).toEqual({ value: 'test' })
     })
 
-    test('fetches JSON with POST method and body', async () => {
-      const mockData = { success: true }
-      const requestBody = { name: 'Test' }
-      
-      global.fetch = jest.fn(() =>
-        Promise.resolve({
-          ok: true,
-          status: 201,
-          statusText: 'Created',
-          headers: new Headers(),
-          json: () => Promise.resolve(mockData)
+    test('window.set makes POST request with string value', async () => {
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ status: 'saved' })
+      })
+
+      const result = await window.set('test', 'value')
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        `${window.api_url}/test`,
+        expect.objectContaining({
+          method: 'POST',
+          body: 'value'
         })
       )
+      expect(result).toEqual({ status: 'saved' })
+    })
 
-      const result = await window.fetchJson('POST', 'http://test.com/api', {
-        body: JSON.stringify(requestBody)
+    test('window.set stringifies object values', async () => {
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ status: 'saved' })
       })
 
+      await window.set('test', { key: 'value' })
+
       expect(global.fetch).toHaveBeenCalledWith(
-        'http://test.com/api',
+        `${window.api_url}/test`,
         expect.objectContaining({
           method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          credentials: 'include',
-          body: JSON.stringify(requestBody)
+          body: JSON.stringify({ key: 'value' })
         })
       )
-      expect(result.data).toEqual(mockData)
-      expect(result.status).toBe(201)
-      expect(result.statusText).toBe('Created')
     })
 
-    test('fetches JSON with PUT method', async () => {
-      const mockData = { updated: true }
-      
-      global.fetch = jest.fn(() =>
-        Promise.resolve({
-          ok: true,
-          status: 200,
-          statusText: 'OK',
-          headers: new Headers(),
-          json: () => Promise.resolve(mockData)
+    test('window.delete makes DELETE request', async () => {
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ status: 'deleted' })
+      })
+
+      const result = await window.delete('test')
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        `${window.api_url}/test`,
+        expect.objectContaining({
+          method: 'DELETE'
         })
       )
+      expect(result).toEqual({ status: 'deleted' })
+    })
 
-      const result = await window.fetchJson('PUT', 'http://test.com/api/1', {
-        body: JSON.stringify({ name: 'Updated' })
+    test('window.put makes PUT request with string body', async () => {
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ status: 'saved' })
       })
 
+      const result = await window.put('test', 'content')
+
       expect(global.fetch).toHaveBeenCalledWith(
-        'http://test.com/api/1',
+        `${window.api_url}/test`,
         expect.objectContaining({
           method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          credentials: 'include'
+          body: 'content'
         })
       )
-      expect(result.data).toEqual(mockData)
+      expect(result).toEqual({ status: 'saved' })
     })
 
-    test('fetches JSON with DELETE method', async () => {
-      const mockData = { deleted: true }
-      
-      global.fetch = jest.fn(() =>
-        Promise.resolve({
-          ok: true,
-          status: 200,
-          statusText: 'OK',
-          headers: new Headers(),
-          json: () => Promise.resolve(mockData)
-        })
-      )
+    test('window.put stringifies object body', async () => {
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ status: 'saved' })
+      })
 
-      const result = await window.fetchJson('DELETE', 'http://test.com/api/1')
+      await window.put('test', { data: 'value' })
 
       expect(global.fetch).toHaveBeenCalledWith(
-        'http://test.com/api/1',
+        `${window.api_url}/test`,
         expect.objectContaining({
-          method: 'DELETE',
-          headers: { 'Content-Type': 'application/json' },
-          credentials: 'include'
+          method: 'PUT',
+          body: JSON.stringify({ data: 'value' })
         })
       )
-      expect(result.data).toEqual(mockData)
     })
 
-    test('overwrites custom headers with Content-Type', async () => {
-      global.fetch = jest.fn(() =>
-        Promise.resolve({
-          ok: true,
-          status: 200,
-          statusText: 'OK',
-          headers: new Headers(),
-          json: () => Promise.resolve({})
-        })
-      )
-
-      await window.fetchJson('GET', 'http://test.com/api', {
-        headers: { 'Authorization': 'Bearer token123' }
+    test('window.put handles Blob body', async () => {
+      const blob = new Blob(['test'], { type: 'text/plain' })
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ status: 'saved' })
       })
 
+      await window.put('test', blob)
+
       expect(global.fetch).toHaveBeenCalledWith(
-        'http://test.com/api',
+        `${window.api_url}/test`,
         expect.objectContaining({
-          headers: {
-            'Content-Type': 'application/json'
-          }
+          method: 'PUT',
+          body: blob
         })
       )
-      // Custom headers are overwritten by Content-Type
-      expect(global.fetch).not.toHaveBeenCalledWith(
-        expect.anything(),
+    })
+
+    test('window.purge makes PURGE request', async () => {
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ status: 'deleted' })
+      })
+
+      const result = await window.purge('test')
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        `${window.api_url}/test`,
         expect.objectContaining({
-          headers: expect.objectContaining({
-            'Authorization': 'Bearer token123'
-          })
+          method: 'PURGE'
         })
       )
+      expect(result).toEqual({ status: 'deleted' })
     })
 
-    test('always includes credentials', async () => {
-      global.fetch = jest.fn(() =>
-        Promise.resolve({
-          ok: true,
-          status: 200,
-          statusText: 'OK',
-          headers: new Headers(),
-          json: () => Promise.resolve({})
-        })
-      )
+    test('window.list makes PROPFIND request to base URL', async () => {
+      global.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve([{ name: 'file1' }])
+      })
 
-      await window.fetchJson('GET', 'http://test.com/api')
+      const result = await window.list()
 
       expect(global.fetch).toHaveBeenCalledWith(
-        'http://test.com/api',
+        window.api_url,
         expect.objectContaining({
-          credentials: 'include'
+          method: 'PROPFIND'
         })
       )
+      expect(result).toEqual([{ name: 'file1' }])
     })
 
-    test('handles error responses', async () => {
-      global.fetch = jest.fn(() =>
-        Promise.resolve({
-          ok: false,
-          status: 404,
-          statusText: 'Not Found',
-          headers: new Headers(),
-          json: () => Promise.resolve({ error: 'Not found' })
-        })
-      )
+    test('window.login redirects to /login', () => {
+      window.login()
+      expect(global.window.location.href).toBe(`${window.api_url}/login`)
+    })
 
-      const result = await window.fetchJson('GET', 'http://test.com/api')
+    test('window.logout redirects to /logout', () => {
+      window.logout()
+      expect(global.window.location.href).toBe(`${window.api_url}/logout`)
+    })
+  })
 
-      expect(result.status).toBe(404)
-      expect(result.statusText).toBe('Not Found')
-      expect(result.data).toEqual({ error: 'Not found' })
+  describe('window.custom components', () => {
+    test('hello-world component is a function', () => {
+      expect(typeof window.custom['hello-world']).toBe('function')
     })
 
-    test('handles network errors', async () => {
-      global.fetch = jest.fn(() =>
-        Promise.reject(new Error('Network error'))
-      )
+    test('hello-world component renders correctly', () => {
+      const result = window.custom['hello-world']('Test')
+      expect(result).toBe('Hello Test')
+    })
+
+    test('hello-world-2 component has prop and render methods', () => {
+      expect(window.custom['hello-world-2']).toBeDefined()
+      expect(typeof window.custom['hello-world-2'].prop).toBe('function')
+      expect(typeof window.custom['hello-world-2'].render).toBe('function')
+    })
 
-      await expect(window.fetchJson('GET', 'http://test.com/api')).rejects.toThrow('Network error')
+    test('hello-world-2 component prop works', () => {
+      const result = window.custom['hello-world-2'].prop('Test')
+      expect(result).toBe('Test World')
+    })
+
+    test('hello-world-2 component render works', () => {
+      const result = window.custom['hello-world-2'].render('Test')
+      expect(result).toBe('Test World')
     })
   })
-})
 
+
+  describe('window.state proxy', () => {
+    test('state.set updates DOM elements with data attribute', () => {
+      global.document.body.innerHTML = '<hello-world data="name"></hello-world>'
+      
+      window.state.name = 'John'
+      
+      const el = global.document.querySelector('hello-world')
+      expect(el.innerHTML).toBe('Hello John')
+    })
+
+    test('state.set updates multiple elements with same data attribute', () => {
+      global.document.body.innerHTML = '<hello-world data="name"></hello-world><hello-world data="name"></hello-world>'
+      
+      window.state.name = 'Jane'
+      
+      const els = global.document.querySelectorAll('hello-world')
+      expect(els[0].innerHTML).toBe('Hello Jane')
+      expect(els[1].innerHTML).toBe('Hello Jane')
+    })
+
+    test('state.set works with object components', () => {
+      global.document.body.innerHTML = '<hello-world-2 data="test"></hello-world-2>'
+      
+      window.state.test = 'Hello'
+      
+      const el = global.document.querySelector('hello-world-2')
+      expect(el.innerHTML).toBe('Hello World')
+    })
+
+    test('state.set stores value in proxy object', () => {
+      window.state.test = 'value'
+      expect(window.state.test).toBe('value')
+    })
+
+    test('state.set handles multiple properties', () => {
+      global.document.body.innerHTML = '<hello-world data="a"></hello-world><hello-world data="b"></hello-world>'
+      
+      window.state.a = 'A'
+      window.state.b = 'B'
+      
+      expect(global.document.querySelector('[data="a"]').innerHTML).toBe('Hello A')
+      expect(global.document.querySelector('[data="b"]').innerHTML).toBe('Hello B')
+    })
+
+    test('state.set does not update elements without matching data attribute', () => {
+      global.document.body.innerHTML = '<hello-world data="name"></hello-world><div data="other">Original</div>'
+      
+      window.state.name = 'John'
+      
+      expect(global.document.querySelector('[data="name"]').innerHTML).toBe('Hello John')
+      expect(global.document.querySelector('[data="other"]').innerHTML).toBe('Original')
+    })
+  })
+})

package/__tests__/jest.config.js

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

package/{jest.setup.js → __tests__/jest.setup.js}

@@ -3,3 +3,7 @@ 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/bun-server.js

@@ -0,0 +1,130 @@
+import { S3Client } from "bun";
+
+const dbPath = "db.json";
+const db = await Bun.file(dbPath).json().catch(() => ({}));
+const s3 = new S3Client({
+  accessKeyId: Bun.env.CLOUDFLARE_ACCESS_KEY_ID,
+  secretAccessKey: Bun.env.CLOUDFLARE_SECRET_ACCESS_KEY,
+  bucket: Bun.env.CLOUDFLARE_BUCKET_NAME,
+  endpoint: Bun.env.CLOUDFLARE_PUBLIC_URL
+});
+const json = (data, status = 200, extraHeaders = {}) => new Response(JSON.stringify(data), {
+  status,
+  headers: {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PURGE, PROPFIND, DOWNLOAD, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type, Authorization, Cookie, X-HTTP-Method-Override",
+    "Access-Control-Allow-Credentials": "true",
+    "Content-Type": "application/json",
+    ...extraHeaders
+  }
+});
+const writeDb = () => Bun.write(dbPath, JSON.stringify(db, null, 2));
+const redirect = (url, cookie = null) => new Response(null, {
+  status: 302,
+  headers: { Location: url, ...(cookie && { "Set-Cookie": cookie }) }
+});
+
+export default {
+  async fetch(req) {
+    console.log('req.method', req.method);
+    const url = new URL(req.url);
+    const key = url.pathname.slice(1);
+    const cb = `${url.origin}/callback`;
+    const token = req.headers.get("Cookie")?.match(/token=([^;]+)/)?.[1];
+    const user = token ? db[`session:${token}`] : null;
+
+    if (req.method === "OPTIONS") return json(null, 204);
+
+    if (url.pathname === '/login') {
+      return Response.redirect(`https://${Bun.env.AUTH0_DOMAIN}/authorize?${new URLSearchParams({
+        response_type: "code",
+        client_id: Bun.env.AUTH0_CLIENT_ID,
+        redirect_uri: cb,
+        scope: "openid email profile"
+      })}`);
+    }
+
+    if (url.pathname === '/callback') {
+      const code = url.searchParams.get("code");
+      if (!code) return json({ error: 'No code' }, 400);
+      const tRes = await fetch(`https://${Bun.env.AUTH0_DOMAIN}/oauth/token`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          grant_type: "authorization_code",
+          client_id: Bun.env.AUTH0_CLIENT_ID,
+          client_secret: Bun.env.AUTH0_CLIENT_SECRET,
+          code,
+          redirect_uri: cb
+        })
+      });
+      if (!tRes.ok) return json({ error: 'Auth error' }, 401);
+      const tokens = await tRes.json();
+      const userInfo = await (await fetch(`https://${Bun.env.AUTH0_DOMAIN}/userinfo`, {
+        headers: { Authorization: `Bearer ${tokens.access_token}` }
+      })).json();
+      const session = crypto.randomUUID();
+      db[`session:${session}`] = {
+        ...userInfo,
+        login_time: new Date().toISOString(),
+        access_token_expires_at: tokens.expires_in ? new Date(Date.now() + tokens.expires_in * 1000).toISOString() : null
+      };
+      await writeDb();
+      return redirect(url.origin, `token=${session}; HttpOnly; Path=/; Secure; SameSite=Lax; Max-Age=86400`);
+    }
+
+    if (!token || !user) return json({ error: 'Unauthorized' }, 401);
+
+    if (url.pathname === '/logout') {
+      delete db[`session:${token}`];
+      await writeDb();
+      return redirect(url.origin, "token=; Max-Age=0; Path=/");
+    }
+
+    const files = { '/': 'index.html', '/client.js': 'client.js', '/custom.js': 'custom.js' };
+    if (req.method === 'GET' && files[url.pathname]) return new Response(Bun.file(`./public/${files[url.pathname]}`));
+
+    console.log(req.method);
+    switch (req.method) {
+      case 'GET': return json(db[key]);
+      case 'POST':
+        const value = await req.text();
+        db[key] = (() => { try { return JSON.parse(value); } catch { return value; } })();
+        await writeDb();
+        return json({ key, value });
+      case 'DELETE':
+        delete db[key];
+        await writeDb();
+        return json({ status: "Deleted" });
+      case 'PUT':
+        await s3.write(`${user.sub}/${key}`, req.body);
+        return json({ status: "Saved to R2" });
+      case 'PURGE':
+        await s3.delete(`${user.sub}/${key}`);
+        return json({ status: "Deleted from R2" });
+      case 'PROPFIND':
+        const list = await s3.list({ prefix: `${user.sub}/` });
+        const items = Array.isArray(list) ? list : (list?.contents || []);
+        return json(items.map(item => ({
+          name: item.key?.split('/').pop() || item.name || item.Key,
+          lastModified: item.lastModified || item.LastModified,
+          size: item.size || item.Size || 0
+        })));
+      case 'PATCH':
+        try {
+          const exists = await s3.exists(`${user.sub}/${key}`);
+          if (!exists) return json({ error: 'File not found' }, 404);
+          const file = await s3.file(`${user.sub}/${key}`);
+          if (!file) return json({ error: 'File not found' }, 404);
+          return new Response(file.stream(), { headers: file.headers });
+        } catch (err) {
+          console.error('Download error:', err);
+          return json({ error: 'File not found', details: err.message }, 404);
+        }
+      default: return json({ error: 'Method not allowed' }, 405);
+    }
+  },
+  port: 3000,
+  tls: { cert: Bun.file("cert.pem"), key: Bun.file("key.pem") }
+};

package/package.json

@@ -1,13 +1,14 @@
 {
-    "name": "enigmatic",
-    "main": "enigmatic.js",
-    "version": "0.26.0",
-    "scripts": {
-        "test": "jest",
-        "test:watch": "jest --watch"
-    },
-    "devDependencies": {
-        "jest": "^29.7.0",
-        "jest-environment-jsdom": "^29.7.0"
-    }
+  "name": "enigmatic",
+  "version": "0.29.0",
+  "unpkg": "./public/client.js",
+  "scripts": {
+    "start": "bun --hot ./bun-server.js",
+    "test": "jest --config __tests__/jest.config.js"
+  },
+  "devDependencies": {
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "whatwg-fetch": "^3.6.20"
+  }
 }