enigmatic 0.27.0 → 0.29.1

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,14 +1,14 @@
 {
-    "name": "enigmatic",
-    "main": "enigmatic.js",
-    "version": "0.27.0",
-    "scripts": {
-        "test": "jest",
-        "test:watch": "jest --watch"
-    },
-    "devDependencies": {
-        "jest": "^29.7.0",
-        "jest-environment-jsdom": "^29.7.0",
-        "whatwg-fetch": "^3.6.20"
-    }
+  "name": "enigmatic",
+  "version": "0.29.1",
+  "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"
+  }
 }

package/public/client.js

@@ -0,0 +1,127 @@
+window.api_url = "https://localhost:3000"
+window.$  = document.querySelector.bind(document)
+window.$$ = document.querySelectorAll.bind(document)
+window.$c = (selector) => $0.closest(selector);
+
+// Initialize custom elements
+window.initCustomElements = function() {
+  Object.keys(window.custom || {}).forEach(tagName => {
+    $$(tagName).forEach(async el => {
+      const f = window.custom[tagName];
+      if (typeof f === 'function') {
+        el.innerHTML = await f();
+      } else if (f && typeof f.render === 'function') {
+        el.innerHTML = f.render();
+      }
+    });
+  });
+}
+
+// Make window.custom a Proxy that auto-initializes when properties are added
+if (!window.custom) window.custom = {};
+const customProxy = new Proxy(window.custom, {
+  set(target, prop, value) {
+    target[prop] = value;
+    if (typeof value === 'function' || (value && typeof value.render === 'function')) {
+      setTimeout(() => {
+        $$(prop).forEach(async el => {
+          if (typeof value === 'function') {
+            el.innerHTML = await value();
+          } else {
+            el.innerHTML = value.render();
+          }
+        });
+      }, 0);
+    }
+    return true;
+  }
+});
+Object.defineProperty(window, 'custom', {
+  get: () => customProxy,
+  set: (val) => {
+    Object.assign(customProxy, val || {});
+  },
+  configurable: true
+});
+
+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 (!f) return;
+      if(typeof f === 'function') {
+        el.innerHTML = f(value);
+      } else if (f && typeof f.render === 'function') {
+        el.innerHTML = f.render(value);
+      }
+    });
+    return true
+  }
+})
+window.get = async function(key) {
+  const res = await fetch(`${window.api_url}/${encodeURIComponent(key)}`)
+  return await res.json()
+}
+window.set = async function(key, value) {
+  const res = await fetch(`${window.api_url}/${encodeURIComponent(key)}`, {
+    method: 'POST', body: typeof value === 'string' ? value : JSON.stringify(value)
+  })
+  return await res.json()
+}
+window.delete = async function(key) {
+  const res = await fetch(`${window.api_url}/${encodeURIComponent(key)}`, {
+    method: 'DELETE'
+  })
+  return await res.json()
+}
+window.put = async function(key, body) {
+  const res = await fetch(`${window.api_url}/${encodeURIComponent(key)}`, {
+    method: 'PUT', body: body instanceof Blob ? body : typeof body === 'string' ? body : JSON.stringify(body)
+  })
+  return await res.json()
+}
+window.purge = async function(key) {
+  const res = await fetch(`${window.api_url}/${encodeURIComponent(key)}`, {
+    method: 'PURGE'
+  })
+  return await res.json()
+}
+window.list = async function() {
+  const res = await fetch(`${window.api_url}`, {
+    method: 'PROPFIND'
+  })
+  return await res.json()
+}
+window.download = async function(key) {
+  try {
+    console.log('Downloading with method DOWNLOAD:', key);
+    const res = await fetch(`${window.api_url}/${encodeURIComponent(key)}`, { method: 'PATCH' });
+    console.log('Response:', key, res.status, res.statusText);
+    if (!res.ok) throw new Error('Download failed');
+    const blob = await res.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = key;
+    a.click();
+    URL.revokeObjectURL(url);
+  } catch (err) {
+    console.error('Download error:', err);
+    throw err;
+  }
+}
+window.login = function() {
+  window.location.href = `${window.api_url}/login`
+}
+window.logout = function() {
+  window.location.href = `${window.api_url}/logout`
+}
+
+// Auto-initialize on load
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', window.initCustomElements);
+} else {
+  window.initCustomElements();
+}

package/public/custom.js

@@ -0,0 +1,29 @@
+window.custom = {
+  "hello-world": (data) => `Hello ${data}`,
+  "hello-world-2": {
+    prop: (data) => `${data} World`,
+    render: function(data) { 
+      return this.prop(data); 
+    }
+  },
+"file-widget": async () => {
+  const list = await window.list();
+  const style = `<style>.w-c{font:13px sans-serif;border:1px solid #ddd;border-radius:6px;overflow:hidden;max-width:320px}.w-i{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.w-i:hover{background:#f9f9f9}.w-d{border:none;background:none;cursor:pointer;opacity:.5;transition:.2s}.w-d:hover{opacity:1}.w-u{display:block;padding:10px;background:#f5f5f5;text-align:center;cursor:pointer;color:#555;font-weight:600;transition:.2s}.w-u:hover{background:#eee}</style>`;
+  
+  const items = list.map(item => `
+    <div class="w-i">
+      <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:10px">${item.name}</span>
+      <button class="w-d" onclick="window.download('${item.name}')" title="Download">⬇️</button>
+      <button class="w-d" onclick="(async()=>{await window.purge('${item.name}');location.reload()})()" title="Delete">🗑️</button>
+    </div>`
+  ).join('');
+
+  const upload = `
+    <label class="w-u">
+      📂 Upload
+      <input type="file" style="display:none" onchange="(async()=>{const f=this.files[0];if(f){await window.put(f.name,f);location.reload()}})()">
+    </label>`;
+
+  return style + `<div class="w-c">${items}${upload}</div>`;
+}
+}

package/public/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>API Test</title>
+  <script src="custom.js"></script>
+  <script src="client.js"></script>
+  <style>
+    body { font-family: sans-serif; max-width: 800px; margin: 20px auto; padding: 20px; }
+    .section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
+    input, button { margin: 5px; padding: 8px; }
+    input { width: 200px; }
+    button { cursor: pointer; }
+    #result { margin-top: 10px; padding: 10px; background: #f5f5f5; border-radius: 3px; white-space: pre-wrap; }
+    .error { color: red; }
+    .success { color: green; }
+  </style>
+</head>
+<body>
+  <h1>Server API Test</h1>
+
+  <div class="section">
+    <h2>KV Storage</h2>
+    <input type="text" id="kv-key" placeholder="Key" value="test-key">
+    <input type="text" id="kv-value" placeholder="Value" value="test-value">
+    <button onclick="window.set(document.querySelector('#kv-key').value, document.querySelector('#kv-value').value).then(r => window.$('#result').textContent = JSON.stringify(r)).catch(err => window.$('#result').textContent = 'Error: ' + err.message)">POST</button>
+    <button onclick="window.get(document.querySelector('#kv-key').value).then(r => window.$('#result').textContent = JSON.stringify(r)).catch(err => window.$('#result').textContent = 'Error: ' + err.message)">GET</button>
+    <button onclick="window.delete(document.querySelector('#kv-key').value).then(r => window.$('#result').textContent = JSON.stringify(r)).catch(err => window.$('#result').textContent = 'Error: ' + err.message)">DELETE</button>
+  </div>
+
+  <div class="section">
+    <h2>R2 Storage</h2>
+    <file-widget></file-widget>
+  </div>
+
+  <div class="section">
+    <h2>Auth</h2>
+    <button onclick="window.login()">Login</button>
+    <button onclick="window.logout()">Logout</button>
+  </div>
+
+  <pre id="result"></pre>
+</body>
+</html>

package/README.md

@@ -1,218 +0,0 @@
-**Enigmatic.js - Documentation**
-
-*Note: This repository contains a single JavaScript file that exposes a small set of utility functions under the global `w` object.*
-
-**1. Introduction**
-
-Enigmatic.js provides helpers for loading resources, creating custom elements and managing a small reactive state. The library automatically activates once the script is loaded and offers the following features:
-
-- Resource Loading: load JavaScript files dynamically
-- Custom Elements: quickly define web components with built-in event wiring
-- State Management: update DOM elements automatically when state values change
-- Data Handling: fetch JSON on elements with a `fetch` attribute and receive server-sent events via streams
-- Error Handling: automatic error display for JavaScript errors and promise rejections
-- Template Engine: powerful templating with support for nested properties and special variables
-
-**2. Helpers**
-
-Several helper functions simplify common tasks:
-
-- `w.$(selector)`: return the first element matching the selector
-- `w.$$(selector)`: return all elements matching the selector
-- `w.loadJS(src)`: dynamically load a JavaScript file (returns Promise)
-- `w.wait(ms)`: resolve a Promise after `ms` milliseconds
-- `w.ready()`: resolve when the DOM is ready
-- `w.get(url, opts, transform, key)`: fetch JSON from URL, optionally transform and store in state
-
-**3. Template Flattening**
-
-`w.flatten(obj, text)` replaces placeholders like `{key}` within a template string using data from `obj`.
-
-**Basic usage:**
-```javascript
-w.flatten({ name: 'John', age: 30 }, 'Hello {name}, age {age}')
-// Returns: "Hello John, age 30"
-```
-
-**Nested properties:**
-```javascript
-w.flatten({ user: { name: 'John' } }, 'Hello {user.name}')
-// Returns: "Hello John"
-```
-
-**Arrays:**
-```javascript
-w.flatten([{ name: 'John' }, { name: 'Jane' }], 'Name: {name}')
-// Returns: "Name: JohnName: Jane"
-```
-
-**Special variables for iteration:**
-- `{$key}` - current key/index
-- `{$val}` - current value
-- `{$index}` - array index (for arrays)
-
-```javascript
-// For objects
-w.flatten({ k1: 'val1', k2: 'val2' }, '{$key}: {$val}')
-// Returns: "k1: val1k2: val2"
-
-// For arrays
-w.flatten(['a', 'b'], '{$index}: {$val}')
-// Returns: "0: a1: b"
-```
-
-**4. Custom Elements**
-
-Use `w.e(name, fn, style)` to register a custom element.
-
-**With object configuration:**
-```javascript
-w.e('my-element', {
-  init: (e) => e.innerText = 'ready',
-  click: (ev) => console.log('clicked'),
-  set: (data) => { /* handle data updates */ }
-}, {
-  color: 'red',
-  padding: '10px'
-})
-```
-
-**With function (simplified):**
-```javascript
-w.e('my-element', (data) => `<div>${data.name}</div>`)
-// Automatically creates a set() method that updates innerHTML
-```
-
-The `fn` parameter can be:
-- An object with methods (`init`, `set`, event handlers like `click`, `mouseover`)
-- A function that receives data and returns HTML string
-
-Event handlers matching `/click|mouseover/` are automatically bound as event listeners.
-
-**5. State and Reactivity**
-
-- `w.state`: reactive storage backed by a `Proxy`. Updating a key automatically calls `set()` on any element with a matching `data` attribute.
-
-```javascript
-w.state.users = [{ name: 'John' }]
-// All elements with data="users" will have their set() method called
-```
-
-- `w.state._all`: returns the entire state object
-- `w.stream(url, key)`: subscribe to an EventSource and populate `w.state[key]` with incoming data
-
-**6. Data Binding on Divs**
-
-The library automatically enhances all `<div>` elements with data binding capabilities:
-
-**Basic usage:**
-```html
-<div data="users" fetch="https://api.example.com/users">
-  <div>{name} - {email}</div>
-</div>
-```
-
-**Attributes:**
-- `data="key"` - binds to `w.state[key]`, updates when state changes
-- `fetch="url"` - fetch JSON from URL and render with template
-- `fetch='{"inline": "json"}'` - use inline JSON instead of URL
-- `defer` - skip automatic fetch on init (call `element.fetch()` manually)
-- `t="transform"` - transform function as string (e.g., `t="d=>d.results"`)
-
-**IGNORE blocks:**
-```html
-<div>
-  Hello {name}
-  <!--IGNORE-->
-  This won't be in the template
-  <!--ENDIGNORE-->
-</div>
-```
-
-**7. Error Handling**
-
-Enigmatic.js automatically displays JavaScript errors and unhandled promise rejections as a red banner at the top of the page, showing the error message and location.
-
-**8. Component Registration via window.components**
-
-You can also register components via `window.components`:
-
-```javascript
-window.components = {
-  "my-component": {
-    init: async () => {
-      // initialization
-    },
-    set: (data) => {
-      // handle data
-    },
-    click: (ev) => {
-      // click handler
-    },
-    style: { color: 'blue' } // optional styles
-  }
-}
-```
-
-See `components.js` for examples.
-
-**9. Usage Examples**
-
-**Basic example:**
-```html
-<script src="enigmatic.js"></script>
-<script>
-  e('custom-element', {
-    init: e => e.innerHTML = 'ready',
-    click: ev => console.log('clicked')
-  });
-
-  (async () => {
-    await ready();
-    w.state.example = { key1: 'value1', key2: 'value2' };
-  })();
-</script>
-```
-
-**Data binding example:**
-```html
-<div data="users" fetch="https://api.example.com/users">
-  <div>{name} - {email}</div>
-</div>
-
-<script>
-  // State updates automatically update the div
-  w.state.users = [{ name: 'John', email: 'john@example.com' }];
-</script>
-```
-
-**Component with function:**
-```html
-<script>
-  e('user-card', (data) => `
-    <div class="card">
-      <h3>${data.name}</h3>
-      <p>${data.email}</p>
-    </div>
-  `);
-</script>
-
-<user-card data="currentUser"></user-card>
-```
-
-**10. Testing**
-
-The library includes comprehensive headless tests using Jest:
-
-```bash
-npm test          # Run tests once
-npm run test:watch # Run tests in watch mode
-```
-
-**11. Global Object**
-
-All helper functions are attached to the global object `w` as well as directly on `window` for convenience.
-
-**12. Support**
-
-For bug reports, feature requests, or general inquiries, please visit the GitHub repository of Enigmatic.js.