@offlinejs/devtools-ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { OfflineEventName, OfflineDB } from '@offlinejs/types';
+
+interface DevtoolsEventEntry {
+    event: OfflineEventName;
+    payload: unknown;
+    timestamp: number;
+}
+interface DevtoolsController {
+    destroy(): void;
+    events(): DevtoolsEventEntry[];
+    /** Alias for render — mounts a live-updating timeline into the target. */
+    mount(target: HTMLElement): void;
+    render(target: HTMLElement): void;
+}
+declare const createDevtoolsController: (db: OfflineDB) => DevtoolsController;
+
+export { type DevtoolsController, type DevtoolsEventEntry, createDevtoolsController };

package/dist/index.js

@@ -0,0 +1,72 @@
+// src/index.ts
+var events = [
+  "sync:start",
+  "sync:end",
+  "offline",
+  "online",
+  "queue:add",
+  "queue:complete",
+  "conflict",
+  "error",
+  "worker:message",
+  "coordination:message"
+];
+var createDevtoolsController = (db) => {
+  const entries = [];
+  let target = null;
+  const refresh = () => {
+    if (target) {
+      target.innerHTML = createMarkup(entries);
+    }
+  };
+  const disposers = events.map(
+    (event) => db.on(event, (payload) => {
+      entries.unshift({
+        event,
+        payload,
+        timestamp: Date.now()
+      });
+      entries.splice(100);
+      refresh();
+    })
+  );
+  const render = (nextTarget) => {
+    target = nextTarget;
+    refresh();
+  };
+  return {
+    destroy() {
+      for (const dispose of disposers) {
+        dispose();
+      }
+      target = null;
+    },
+    events: () => [...entries],
+    mount: render,
+    render
+  };
+};
+var createMarkup = (entries) => `
+  <section class="offlinejs-devtools" style="font-family: ui-sans-serif, system-ui, sans-serif; padding: 12px">
+    <div style="display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px">
+      <h2 style="margin:0;font-size:1.05rem">OfflineJS Devtools</h2>
+      <span style="opacity:.7;font-size:.85rem">${entries.length} event${entries.length === 1 ? "" : "s"}</span>
+    </div>
+    ${entries.length === 0 ? `<p style="margin:0;opacity:.7">Waiting for sync, queue, network, and conflict events\u2026</p>` : `<ol style="padding-left:20px;margin:0;display:grid;gap:10px">
+            ${entries.map(
+  (entry) => `
+                  <li>
+                    <strong>${escapeHtml(entry.event)}</strong>
+                    <time style="margin-left:8px;opacity:.7;font-size:.85rem">${new Date(entry.timestamp).toLocaleTimeString()}</time>
+                    <pre style="margin:6px 0 0;padding:8px;overflow:auto;border-radius:8px;background:rgba(0,0,0,.06);font-size:12px">${escapeHtml(JSON.stringify(entry.payload, null, 2))}</pre>
+                  </li>
+                `
+).join("")}
+          </ol>`}
+  </section>
+`;
+var escapeHtml = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#039;");
+
+export { createDevtoolsController };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";AAgBA,IAAM,MAAA,GAA6B;AAAA,EACjC,YAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,wBAAA,GAA2B,CAAC,EAAA,KAAsC;AAC7E,EAAA,MAAM,UAAgC,EAAC;AACvC,EAAA,IAAI,MAAA,GAA6B,IAAA;AAEjC,EAAA,MAAM,UAAU,MAAY;AAC1B,IAAA,IAAI,MAAA,EAAQ;AACV,MAAA,MAAA,CAAO,SAAA,GAAY,aAAa,OAAO,CAAA;AAAA,IACzC;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,YAAY,MAAA,CAAO,GAAA;AAAA,IAAI,CAAC,KAAA,KAC5B,EAAA,CAAG,EAAA,CAAG,KAAA,EAAO,CAAC,OAAA,KAAyC;AACrD,MAAA,OAAA,CAAQ,OAAA,CAAQ;AAAA,QACd,KAAA;AAAA,QACA,OAAA;AAAA,QACA,SAAA,EAAW,KAAK,GAAA;AAAI,OACrB,CAAA;AACD,MAAA,OAAA,CAAQ,OAAO,GAAG,CAAA;AAClB,MAAA,OAAA,EAAQ;AAAA,IACV,CAAC;AAAA,GACH;AAEA,EAAA,MAAM,MAAA,GAAS,CAAC,UAAA,KAAkC;AAChD,IAAA,MAAA,GAAS,UAAA;AACT,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,OAAO;AAAA,IACL,OAAA,GAAU;AACR,MAAA,KAAA,MAAW,WAAW,SAAA,EAAW;AAC/B,QAAA,OAAA,EAAQ;AAAA,MACV;AACA,MAAA,MAAA,GAAS,IAAA;AAAA,IACX,CAAA;AAAA,IACA,MAAA,EAAQ,MAAM,CAAC,GAAG,OAAO,CAAA;AAAA,IACzB,KAAA,EAAO,MAAA;AAAA,IACP;AAAA,GACF;AACF;AAEA,IAAM,YAAA,GAAe,CAAC,OAAA,KAA0C;AAAA;AAAA;AAAA;AAAA,gDAAA,EAId,QAAQ,MAAM,CAAA,MAAA,EAAS,QAAQ,MAAA,KAAW,CAAA,GAAI,KAAK,GAAG,CAAA;AAAA;AAAA,IAAA,EAGlG,OAAA,CAAQ,MAAA,KAAW,CAAA,GACf,CAAA,8FAAA,CAAA,GACA,CAAA;AAAA,YAAA,EACI,OAAA,CACC,GAAA;AAAA,EACC,CAAC,KAAA,KAAU;AAAA;AAAA,4BAAA,EAEG,UAAA,CAAW,KAAA,CAAM,KAAK,CAAC,CAAA;AAAA,8EAAA,EAC2B,IAAI,IAAA,CAAK,KAAA,CAAM,SAAS,CAAA,CAAE,oBAAoB,CAAA;AAAA,sIAAA,EACU,UAAA,CAAW,KAAK,SAAA,CAAU,KAAA,CAAM,SAAS,IAAA,EAAM,CAAC,CAAC,CAAC,CAAA;AAAA;AAAA,gBAAA;AAG5K,CAAA,CACC,IAAA,CAAK,EAAE,CAAC;AAAA,eAAA,CAEnB;AAAA;AAAA,CAAA;AAIJ,IAAM,UAAA,GAAa,CAAC,KAAA,KAClB,KAAA,CACG,WAAW,GAAA,EAAK,OAAO,CAAA,CACvB,UAAA,CAAW,GAAA,EAAK,MAAM,EACtB,UAAA,CAAW,GAAA,EAAK,MAAM,CAAA,CACtB,UAAA,CAAW,KAAK,QAAQ,CAAA,CACxB,UAAA,CAAW,GAAA,EAAK,QAAQ,CAAA","file":"index.js","sourcesContent":["import type { OfflineDB, OfflineEventName, OfflineEvents } from \"@offlinejs/types\";\n\nexport interface DevtoolsEventEntry {\n  event: OfflineEventName;\n  payload: unknown;\n  timestamp: number;\n}\n\nexport interface DevtoolsController {\n  destroy(): void;\n  events(): DevtoolsEventEntry[];\n  /** Alias for render — mounts a live-updating timeline into the target. */\n  mount(target: HTMLElement): void;\n  render(target: HTMLElement): void;\n}\n\nconst events: OfflineEventName[] = [\n  \"sync:start\",\n  \"sync:end\",\n  \"offline\",\n  \"online\",\n  \"queue:add\",\n  \"queue:complete\",\n  \"conflict\",\n  \"error\",\n  \"worker:message\",\n  \"coordination:message\"\n];\n\nexport const createDevtoolsController = (db: OfflineDB): DevtoolsController => {\n  const entries: DevtoolsEventEntry[] = [];\n  let target: HTMLElement | null = null;\n\n  const refresh = (): void => {\n    if (target) {\n      target.innerHTML = createMarkup(entries);\n    }\n  };\n\n  const disposers = events.map((event) =>\n    db.on(event, (payload: OfflineEvents[typeof event]) => {\n      entries.unshift({\n        event,\n        payload,\n        timestamp: Date.now()\n      });\n      entries.splice(100);\n      refresh();\n    })\n  );\n\n  const render = (nextTarget: HTMLElement): void => {\n    target = nextTarget;\n    refresh();\n  };\n\n  return {\n    destroy() {\n      for (const dispose of disposers) {\n        dispose();\n      }\n      target = null;\n    },\n    events: () => [...entries],\n    mount: render,\n    render\n  };\n};\n\nconst createMarkup = (entries: DevtoolsEventEntry[]): string => `\n  <section class=\"offlinejs-devtools\" style=\"font-family: ui-sans-serif, system-ui, sans-serif; padding: 12px\">\n    <div style=\"display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px\">\n      <h2 style=\"margin:0;font-size:1.05rem\">OfflineJS Devtools</h2>\n      <span style=\"opacity:.7;font-size:.85rem\">${entries.length} event${entries.length === 1 ? \"\" : \"s\"}</span>\n    </div>\n    ${\n      entries.length === 0\n        ? `<p style=\"margin:0;opacity:.7\">Waiting for sync, queue, network, and conflict events…</p>`\n        : `<ol style=\"padding-left:20px;margin:0;display:grid;gap:10px\">\n            ${entries\n              .map(\n                (entry) => `\n                  <li>\n                    <strong>${escapeHtml(entry.event)}</strong>\n                    <time style=\"margin-left:8px;opacity:.7;font-size:.85rem\">${new Date(entry.timestamp).toLocaleTimeString()}</time>\n                    <pre style=\"margin:6px 0 0;padding:8px;overflow:auto;border-radius:8px;background:rgba(0,0,0,.06);font-size:12px\">${escapeHtml(JSON.stringify(entry.payload, null, 2))}</pre>\n                  </li>\n                `\n              )\n              .join(\"\")}\n          </ol>`\n    }\n  </section>\n`;\n\nconst escapeHtml = (value: string): string =>\n  value\n    .replaceAll(\"&\", \"&amp;\")\n    .replaceAll(\"<\", \"&lt;\")\n    .replaceAll(\">\", \"&gt;\")\n    .replaceAll('\"', \"&quot;\")\n    .replaceAll(\"'\", \"&#039;\");\n"]}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@offlinejs/devtools-ui",
+  "version": "0.1.0",
+  "description": "Framework-free Devtools UI for OfflineJS.",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@offlinejs/types": "0.1.0"
+  },
+  "devDependencies": {
+    "tsup": "latest",
+    "typescript": "latest"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  }
+}