enigmatic 0.26.0 → 0.29.0

package/public/client.js

@@ -0,0 +1,98 @@
+window.api_url = "https://localhost:3000"
+window.$  = document.querySelector.bind(document)
+window.$$ = document.querySelectorAll.bind(document)
+window.$c = (selector) => $0.closest(selector);
+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`
+}
+
+// Initialize custom elements on page load
+function initCustomElements() {
+  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();
+      }
+    });
+  });
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initCustomElements);
+} else {
+  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.