@uurtech/jdf 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uurtech/jdf",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "Render JDF (JSON Document Format) documents in the browser. Drop-in replacement for embedding PDFs — point at a .jdf file and it appears on the page, fully styled, searchable, with a clickable TOC.",
   "license": "MIT",
   "author": "Ugur Kazdal <ugur@uurtech.com>",
@@ -57,5 +57,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "jszip": "^3.10.1"
   }
 }

package/src/jdfx.ts

@@ -0,0 +1,58 @@
+import JSZip from "jszip";
+import {
+  JDFX_DOCUMENT_PATH,
+  JDFX_MANIFEST_PATH,
+  type JdfDocument,
+  type JdfxManifest,
+} from "@jdf/core";
+
+/**
+ * Open a `.jdfx` zip bundle and return the embedded JDF document with all
+ * `image` element `resource` references rewritten to blob URLs that work as
+ * `<img src>`. The blob URLs are leaked intentionally — they live for the
+ * lifetime of the page; jdf.js does not (yet) support unmounting a viewer
+ * and reclaiming them.
+ */
+export async function unpackJdfxToDocument(bytes: ArrayBuffer | Uint8Array): Promise<JdfDocument> {
+  const zip = await JSZip.loadAsync(bytes as ArrayBuffer);
+
+  const docFile = zip.file(JDFX_DOCUMENT_PATH);
+  if (!docFile) throw new Error(`${JDFX_DOCUMENT_PATH} missing from .jdfx bundle`);
+  const doc = JSON.parse(await docFile.async("string")) as JdfDocument;
+
+  const manifestFile = zip.file(JDFX_MANIFEST_PATH);
+  let manifest: JdfxManifest | null = null;
+  if (manifestFile) {
+    try {
+      manifest = JSON.parse(await manifestFile.async("string")) as JdfxManifest;
+    } catch {
+      manifest = null;
+    }
+  }
+
+  const idToBlobUrl = new Map<string, string>();
+  if (manifest?.assets) {
+    for (const entry of manifest.assets) {
+      const file = zip.file(entry.path);
+      if (!file) continue;
+      const data = await file.async("uint8array");
+      const blob = new Blob([data as BlobPart], { type: entry.mimeType });
+      idToBlobUrl.set(entry.id, URL.createObjectURL(blob));
+    }
+  }
+
+  function rebind(els: any[] | undefined) {
+    if (!els) return;
+    for (const el of els) {
+      if (el?.type === "image" && el.resource) {
+        const url = idToBlobUrl.get(el.resource);
+        if (url) el.src = url;
+      }
+      if (el?.elements) rebind(el.elements);
+      if (el?.children) rebind(el.children);
+    }
+  }
+  for (const page of doc.pages || []) rebind(page.elements as any[]);
+
+  return doc;
+}

package/src/viewer.ts

@@ -62,9 +62,21 @@ export async function embed(
   const el = resolveContainer(container);
   el.classList.add("jdfjs-loading");
   try {
-    const res = await fetch(url, { headers: { Accept: "application/json,application/jdf+json" } });
+    const isJdfx = /\.jdfx(\?|#|$)/i.test(url);
+    const res = await fetch(url, {
+      headers: isJdfx
+        ? { Accept: "application/jdf+zip,application/zip" }
+        : { Accept: "application/json,application/jdf+json" },
+    });
     if (!res.ok) throw new Error(`Failed to fetch ${url} (${res.status})`);
-    const doc = (await res.json()) as JdfDocument;
+
+    let doc: JdfDocument;
+    if (isJdfx) {
+      const { unpackJdfxToDocument } = await import("./jdfx");
+      doc = await unpackJdfxToDocument(await res.arrayBuffer());
+    } else {
+      doc = (await res.json()) as JdfDocument;
+    }
     if (!doc?.$jdf) throw new Error("Not a valid JDF document (missing $jdf field)");
     el.classList.remove("jdfjs-loading");
     return render(el, doc, options);