npm - enigmatic - Versions diffs - 0.34.0 → 0.36.0 - Mend

enigmatic 0.34.0 → 0.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/README.md +62 -96
package/bin/enigmatic.js +3 -0
package/client/public/AGENTS.md +314 -0
package/client/public/api.html +202 -0
package/client/public/client.js +106 -0
package/client/public/index.html +414 -0
package/clientserver.png +0 -0
package/package.json +7 -9
package/server/bun-server.js +132 -0
package/__tests__/e2.test.js +0 -340
package/__tests__/jest.config.js +0 -7
package/__tests__/jest.setup.js +0 -9
package/beemap.js +0 -47
package/bun-server.js +0 -122
package/public/client.js +0 -118
package/public/index.html +0 -48
package/public/index2.html +0 -10
/package/{public → client/public}/custom.js +0 -0

package/client/public/index.html ADDED Viewed

@@ -0,0 +1,414 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Enigmatic - Lightweight JavaScript Library</title>
+  <style>
+    :root {
+      --bg: #f8fafc;
+      --surface: #ffffff;
+      --text: #0f172a;
+      --text-muted: #64748b;
+      --accent: #6366f1;
+      --accent-hover: #4f46e5;
+      --border: #e2e8f0;
+      --code-bg: #1e293b;
+      --code-text: #e2e8f0;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: "Inter", system-ui, -apple-system, sans-serif;
+      font-size: 16px;
+      line-height: 1.6;
+      background: var(--bg);
+      color: var(--text);
+      -webkit-font-smoothing: antialiased;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+    header {
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      padding: 24px 0;
+      margin-bottom: 48px;
+    }
+    h1 {
+      font-size: 2.5rem;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      margin-bottom: 12px;
+      background: linear-gradient(135deg, var(--accent), #8b5cf6);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .tagline {
+      font-size: 1.25rem;
+      color: var(--text-muted);
+      margin-bottom: 32px;
+    }
+    .badge {
+      display: inline-block;
+      padding: 4px 12px;
+      background: var(--accent);
+      color: white;
+      border-radius: 6px;
+      font-size: 0.875rem;
+      font-weight: 500;
+      margin-bottom: 24px;
+    }
+    section {
+      background: var(--surface);
+      border-radius: 12px;
+      padding: 32px;
+      margin-bottom: 32px;
+      box-shadow: 0 1px 3px rgba(0,0,0,.06);
+      border: 1px solid var(--border);
+    }
+    h2 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin-bottom: 16px;
+      color: var(--text);
+    }
+    h3 {
+      font-size: 1.125rem;
+      font-weight: 600;
+      margin-top: 24px;
+      margin-bottom: 12px;
+      color: var(--text);
+    }
+    p {
+      margin-bottom: 16px;
+      color: var(--text-muted);
+    }
+    ul, ol {
+      margin-left: 24px;
+      margin-bottom: 16px;
+      color: var(--text-muted);
+    }
+    li {
+      margin-bottom: 8px;
+    }
+    code {
+      background: var(--code-bg);
+      color: var(--code-text);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: ui-monospace, monospace;
+      font-size: 0.9em;
+    }
+    pre {
+      background: var(--code-bg);
+      color: var(--code-text);
+      padding: 20px;
+      border-radius: 8px;
+      overflow-x: auto;
+      margin: 16px 0;
+      font-family: ui-monospace, monospace;
+      font-size: 0.875rem;
+      line-height: 1.6;
+    }
+    pre code {
+      background: none;
+      padding: 0;
+    }
+    .btn {
+      display: inline-block;
+      padding: 12px 24px;
+      background: var(--accent);
+      color: white;
+      text-decoration: none;
+      border-radius: 8px;
+      font-weight: 500;
+      transition: background 0.15s;
+      margin-right: 12px;
+      margin-bottom: 12px;
+    }
+    .btn:hover {
+      background: var(--accent-hover);
+    }
+    .btn-secondary {
+      background: var(--border);
+      color: var(--text);
+    }
+    .btn-secondary:hover {
+      background: #cbd5e1;
+    }
+    .features {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 24px;
+      margin-top: 24px;
+    }
+    .feature {
+      padding: 20px;
+      background: var(--bg);
+      border-radius: 8px;
+      border: 1px solid var(--border);
+    }
+    .feature h4 {
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 8px;
+      color: var(--text);
+    }
+    .feature p {
+      font-size: 0.9375rem;
+      margin: 0;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 16px 0;
+    }
+    th, td {
+      padding: 12px;
+      text-align: left;
+      border-bottom: 1px solid var(--border);
+    }
+    th {
+      font-weight: 600;
+      color: var(--text);
+      background: var(--bg);
+    }
+    td {
+      color: var(--text-muted);
+      font-size: 0.9375rem;
+    }
+    .links {
+      display: flex;
+      gap: 16px;
+      flex-wrap: wrap;
+      margin-top: 24px;
+    }
+    footer {
+      text-align: center;
+      padding: 48px 0;
+      color: var(--text-muted);
+      font-size: 0.875rem;
+    }
+  </style>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+  <header>
+    <div class="container">
+      <span class="badge">v0.35.0</span>
+      <h1>Enigmatic</h1>
+      <p class="tagline">A lightweight client-side JavaScript library for DOM manipulation, reactive state management, and API interactions, with an optional Bun server for backend functionality.</p>
+      <div class="links">
+        <a href="api.html" class="btn">Try Demo</a>
+        <a href="https://www.npmjs.com/package/enigmatic" class="btn btn-secondary" target="_blank">View on npm</a>
+      </div>
+    </div>
+  </header>
+  <div class="container">
+    <section>
+      <h2>Quick Start</h2>
+      <h3>Using client.js via CDN</h3>
+      <p>Include <code>client.js</code> in any HTML file using the unpkg CDN:</p>
+      <pre><code>&lt;script src="https://unpkg.com/enigmatic"&gt;&lt;/script&gt;
+&lt;script src="https://unpkg.com/enigmatic/client/public/custom.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+  window.api_url = 'https://your-server.com';
+  window.state.message = 'Hello World';
+&lt;/script&gt;</code></pre>
+      <h3>Using the Bun Server</h3>
+      <p>The Bun server provides a complete backend with:</p>
+      <ul>
+        <li><strong>Key-value storage</strong> – Per-user KV persisted as append-only JSONL</li>
+        <li><strong>File storage</strong> – Per-user files via Cloudflare R2 (or S3-compatible API)</li>
+        <li><strong>Authentication</strong> – Auth0 OAuth2 login/logout</li>
+        <li><strong>Static files</strong> – Served from <code>client/public/</code></li>
+      </ul>
+      <h3>Installation</h3>
+      <ol>
+        <li>Install <a href="https://bun.sh" target="_blank">Bun</a>:
+          <pre><code>curl -fsSL https://bun.sh/install | bash</code></pre>
+        </li>
+        <li>Install dependencies:
+          <pre><code>bun install</code></pre>
+        </li>
+        <li>TLS certificates: place <code>cert.pem</code> and <code>key.pem</code> in <code>server/certs/</code> for HTTPS</li>
+      </ol>
+      <h3>Running the Server</h3>
+      <pre><code>npm start
+# or
+npx enigmatic
+# or with hot reload
+npm run hot</code></pre>
+      <p>Server runs at <strong>https://localhost:3000</strong> (HTTPS is required for Auth0 cookies).</p>
+    </section>
+    <section>
+      <h2>Features</h2>
+      <div class="features">
+        <div class="feature">
+          <h4>DOM Utilities</h4>
+          <p>Simple selectors: <code>window.$</code>, <code>window.$$</code>, <code>window.$c</code></p>
+        </div>
+        <div class="feature">
+          <h4>Reactive State</h4>
+          <p>Proxy-based state management that automatically updates DOM elements</p>
+        </div>
+        <div class="feature">
+          <h4>Custom Elements</h4>
+          <p>Automatic initialization and reactive updates for custom HTML elements</p>
+        </div>
+        <div class="feature">
+          <h4>KV Storage</h4>
+          <p>Simple key-value operations: <code>get</code>, <code>set</code>, <code>delete</code></p>
+        </div>
+        <div class="feature">
+          <h4>File Storage</h4>
+          <p>Upload, download, list, and delete files via R2/S3-compatible storage</p>
+        </div>
+        <div class="feature">
+          <h4>Authentication</h4>
+          <p>Built-in Auth0 OAuth2 integration with login/logout</p>
+        </div>
+      </div>
+    </section>
+    <section>
+      <h2>API Endpoints</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>Method</th>
+            <th>Path</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>GET</td>
+            <td><code>/</code></td>
+            <td>Serves index.html</td>
+          </tr>
+          <tr>
+            <td>GET</td>
+            <td><code>/login</code></td>
+            <td>Redirects to Auth0 login</td>
+          </tr>
+          <tr>
+            <td>GET</td>
+            <td><code>/callback</code></td>
+            <td>Auth0 OAuth callback</td>
+          </tr>
+          <tr>
+            <td>GET</td>
+            <td><code>/logout</code></td>
+            <td>Logs out and clears session</td>
+          </tr>
+          <tr>
+            <td>GET</td>
+            <td><code>/me</code></td>
+            <td>Current user or 401 (no auth)</td>
+          </tr>
+          <tr>
+            <td>GET</td>
+            <td><code>/{key}</code></td>
+            <td>KV get (auth required)</td>
+          </tr>
+          <tr>
+            <td>POST</td>
+            <td><code>/{key}</code></td>
+            <td>KV set (auth required)</td>
+          </tr>
+          <tr>
+            <td>DELETE</td>
+            <td><code>/{key}</code></td>
+            <td>KV delete (auth required)</td>
+          </tr>
+          <tr>
+            <td>PUT</td>
+            <td><code>/{key}</code></td>
+            <td>Upload file to R2 (auth required)</td>
+          </tr>
+          <tr>
+            <td>PURGE</td>
+            <td><code>/{key}</code></td>
+            <td>Delete file from R2 (auth required)</td>
+          </tr>
+          <tr>
+            <td>PROPFIND</td>
+            <td><code>/</code></td>
+            <td>List R2 files (auth required)</td>
+          </tr>
+          <tr>
+            <td>PATCH</td>
+            <td><code>/{key}</code></td>
+            <td>Download file from R2 (auth required)</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+    <section>
+      <h2>Example Usage</h2>
+      <h3>Reactive State</h3>
+      <pre><code>&lt;hello-world data="message"&gt;&lt;/hello-world&gt;
+&lt;script&gt;
+  window.custom['hello-world'] = (data) => `Hello ${data}`;
+  window.state.message = "World"; // Automatically updates the element
+&lt;/script&gt;</code></pre>
+      <h3>KV Storage</h3>
+      <pre><code>// Get value
+const value = await window.get('my-key');
+// Set value
+await window.set('my-key', 'my-value');
+// Delete key
+await window.delete('my-key');</code></pre>
+      <h3>File Operations</h3>
+      <pre><code>// Upload file
+await window.put('filename.txt', fileBlob);
+// List files
+const files = await window.list();
+// Download file
+await window.download('filename.txt');
+// Delete file
+await window.purge('filename.txt');</code></pre>
+    </section>
+    <section>
+      <h2>Environment Variables</h2>
+      <p>Create a <code>.env</code> file in the project root:</p>
+      <pre><code># Auth0
+AUTH0_DOMAIN=your-tenant.auth0.com
+AUTH0_CLIENT_ID=your-client-id
+AUTH0_CLIENT_SECRET=your-client-secret
+# Cloudflare R2 (optional, for file storage)
+CLOUDFLARE_ACCESS_KEY_ID=your-access-key-id
+CLOUDFLARE_SECRET_ACCESS_KEY=your-secret-access-key
+CLOUDFLARE_BUCKET_NAME=your-bucket-name
+CLOUDFLARE_PUBLIC_URL=https://your-account-id.r2.cloudflarestorage.com</code></pre>
+    </section>
+  </div>
+  <footer>
+    <div class="container">
+      <p>MIT License • Built with Bun</p>
+    </div>
+  </footer>
+</body>
+</html>

package/clientserver.png ADDED Viewed

Binary file

package/package.json CHANGED Viewed

@@ -1,14 +1,12 @@
 {
   "name": "enigmatic",
-  "version": "0.34.0",
-  "unpkg": "./public/client.js",
-  "scripts": {
-    "start": "bun --hot ./bun-server.js",
-    "test": "jest --config __tests__/jest.config.js"
+  "version": "0.36.0",
+  "bin": {
+    "enigmatic": "./bin/enigmatic.js"
   },
-  "devDependencies": {
-    "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0",
-    "whatwg-fetch": "^3.6.20"
+  "unpkg": "./client/public/client.js",
+  "scripts": {
+    "start": "bun run bin/enigmatic.js",
+    "hot": "bun --hot bin/enigmatic.js"
   }
 }

package/server/bun-server.js ADDED Viewed

@@ -0,0 +1,132 @@
+import { S3Client } from "bun";
+import { join } from "path";
+import { appendFile, mkdir, readFile } from "fs/promises";
+const dir = import.meta.dir;
+const certsDir = join(dir, "certs");
+const publicDir = join(dir, "..", "client", "public");
+const kvDir = join(dir, "kv");
+const sessions = new Map();
+const userKv = {};
+let site_origin = "";
+const kvPath = (sub) => join(kvDir, `${String(sub).replace(/[^a-zA-Z0-9_-]/g, "_")}.jsonl`);
+const json = (d, s = 200, h = {}, origin = null) => new Response(JSON.stringify(d), { status: s, headers: { "Access-Control-Allow-Origin": origin || "*", "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PURGE, PROPFIND, PATCH, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization, Cookie", "Access-Control-Allow-Credentials": "true", "Content-Type": "application/json", ...h } });
+const redir = (url, cookie) => new Response(null, { status: 302, headers: { Location: url, ...(cookie && { "Set-Cookie": cookie }) } });
+async function getUserMap(sub) {
+  if (userKv[sub]) return userKv[sub];
+  const m = new Map();
+  try {
+    let buf = await readFile(kvPath(sub), "utf8");
+    if (buf.charCodeAt(0) === 0xfeff) buf = buf.slice(1);
+    const lines = buf.trim().split("\n").filter(Boolean);
+    for (const line of lines) {
+      try {
+        const row = JSON.parse(line);
+        if (Array.isArray(row) && row.length >= 2) {
+          m.set(row[0], row[1]);
+        } else if (row?.action === "update" && row.key !== undefined) {
+          m.set(row.key, row.value);
+        } else if (row?.action === "delete" && row.key !== undefined) {
+          m.delete(row.key);
+        }
+      } catch (_) { /* skip malformed line */ }
+    }
+  } catch (_) { /* file missing or unreadable */ }
+  userKv[sub] = m;
+  return m;
+}
+async function appendKvLog(sub, action, key, value) {
+  await mkdir(kvDir, { recursive: true });
+  const ts = new Date().toISOString();
+  const row = action === "update" ? { action, key, value, timestamp: ts } : { action, key, timestamp: ts };
+  await appendFile(kvPath(sub), JSON.stringify(row) + "\n");
+}
+async function saveUserKv(sub, action, key, value) {
+  await appendKvLog(sub, action, key, value);
+}
+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
+});
+export default {
+  async fetch(req) {
+    const url = new URL(req.url), key = url.pathname.slice(1), cb = `${url.origin}/callback`;
+    const origin = req.headers.get("Origin") || url.origin;
+    const token = req.headers.get("Cookie")?.match(/token=([^;]+)/)?.[1];
+    const user = (Bun.env.TEST_MODE === "1" && token === Bun.env.TEST_SESSION_ID) ? { sub: "test-user" } : (token ? sessions.get(token) : null);
+    if (req.method === "OPTIONS") return json(null, 204, {}, origin);
+    if (req.method === "GET") {
+      const p = url.pathname === "/" ? "index.html" : url.pathname.slice(1);
+      if (p === "index.html" || /\.[a-z0-9]+$/i.test(p)) {
+        const f = Bun.file(join(publicDir, p));
+        if (await f.exists()) return new Response(f);
+      }
+    }
+    if (url.pathname === "/login") {
+      site_origin = req.headers.get("referer");
+      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, {}, origin);
+      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, {}, origin);
+      const tokens = await tRes.json();
+      const userInfo = await (await fetch(`https://${Bun.env.AUTH0_DOMAIN}/userinfo`, { headers: { Authorization: `Bearer ${tokens.access_token}` } })).json();
+      const sid = crypto.randomUUID();
+      sessions.set(sid, { ...userInfo, login_time: new Date().toISOString(), access_token_expires_at: tokens.expires_in ? new Date(Date.now() + tokens.expires_in * 1000).toISOString() : null });
+      return redir(site_origin || url.origin, `token=${sid}; HttpOnly; Path=/; Secure; SameSite=None; Max-Age=86400`);
+    }
+    if (url.pathname === "/me") return user ? json(user, 200, {}, origin) : json({ error: "Unauthorized" }, 401, {}, origin);
+    if (!token || !user) return json({ error: "Unauthorized" }, 401, {}, origin);
+    if (url.pathname === "/logout") { sessions.delete(token); return redir(url.origin, "token=; Max-Age=0; Path=/; Secure; SameSite=None"); }
+    const m = await getUserMap(user.sub);
+    switch (req.method) {
+      case "GET": return json(m.get(key) ?? null, 200, {}, origin);
+      case "POST":
+        const val = await req.text();
+        const v = (() => { try { return JSON.parse(val); } catch { return val; } })();
+        m.set(key, v);
+        await saveUserKv(user.sub, "update", key, v);
+        return json({ key, value: v }, 200, {}, origin);
+      case "DELETE": m.delete(key); await saveUserKv(user.sub, "delete", key); return json({ status: "Deleted" }, 200, {}, origin);
+      case "PUT": await s3.write(`${user.sub}/${key}`, req.body); return json({ status: "Saved to R2" }, 200, {}, origin);
+      case "PURGE": await s3.delete(`${user.sub}/${key}`); return json({ status: "Deleted from R2" }, 200, {}, origin);
+      case "PROPFIND":
+        const list = await s3.list({ prefix: `${user.sub}/` });
+        const items = Array.isArray(list) ? list : (list?.contents || []);
+        return json(items.map((i) => ({ name: i.key?.split("/").pop() || i.name || i.Key, lastModified: i.lastModified || i.LastModified, size: i.size || i.Size || 0 })), 200, {}, origin);
+      case "PATCH":
+        try {
+          if (!(await s3.exists(`${user.sub}/${key}`))) {
+            const headers = { "Access-Control-Allow-Origin": origin, "Access-Control-Allow-Credentials": "true" };
+            return new Response(JSON.stringify({ error: "File not found" }), { status: 404, headers: { ...headers, "Content-Type": "application/json" } });
+          }
+          const f = await s3.file(`${user.sub}/${key}`);
+          if (f) {
+            const headers = { ...f.headers, "Access-Control-Allow-Origin": origin, "Access-Control-Allow-Credentials": "true" };
+            return new Response(f.stream(), { headers });
+          }
+          const headers = { "Access-Control-Allow-Origin": origin, "Access-Control-Allow-Credentials": "true" };
+          return new Response(JSON.stringify({ error: "File not found" }), { status: 404, headers: { ...headers, "Content-Type": "application/json" } });
+        } catch (e) { return json({ error: "File not found", details: e.message }, 404, {}, origin); }
+      default: return json({ error: "Method not allowed" }, 405, {}, origin);
+    }
+  },
+  port: 3000,
+  tls: { cert: Bun.file(join(certsDir, "cert.pem")), key: Bun.file(join(certsDir, "key.pem")) }
+};