memory-extract 0.1.0 → 0.1.1

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "memory-extract",
-  "description": "Tools for packing interactive scenes into PNG images.",
+  "description": "Tool for embedding data into PNG images",
   "license": "MIT",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "author": "semigarden",
   "repository": {
     "type": "git",
@@ -22,14 +22,14 @@
   },
   "bin": {
     "memory-pack": "./tools/pack.mjs",
-    "memory-unpack": "./tools/unpack.mjs"
+    "memory-unpack": "./tools/unpack.mjs",
+    "memory-play": "./tools/play.mjs"
   },
   "scripts": {
     "pack": "node tools/pack.mjs",
     "unpack": "node tools/unpack.mjs",
+    "play": "node tools/play.mjs",
+    "build:launcher": "node tools/buildPlayLauncher.mjs",
     "test": "node --test test/memory.test.mjs"
-  },
-  "dependencies": {
-    "sharp": "^0.34.5"
   }
 }

package/src/index.js

@@ -22,4 +22,4 @@ export {
     resolveSafePath,
 } from "./payloadFormat.js";
 
-export { createMemoryBlob } from "./loadMemory.js";
+export { createMemoryBlob, resolveLaunchAssetUrl } from "./loadMemory.js";

package/src/loadMemory.js

@@ -3,6 +3,11 @@ import {
     readMemoryFile,
     extractMemory,
 } from "./memoryFormat.js";
+import {
+    buildInteractiveBrowseDocument,
+    buildMemoryBrowseListings,
+    resolveMemoryPlayMode,
+} from "./memoryPlay.js";
 
 const textDecoder = new TextDecoder();
 
@@ -87,9 +92,9 @@ const extractCssAssetPaths = (cssText) => {
     return paths;
 };
 
-const collectRequiredFiles = (manifest, fileBytes) => {
+const collectRequiredFiles = (manifest, fileBytes, entryPath) => {
     const manifestPaths = listManifestFiles(manifest);
-    const required = new Set([manifest.entry]);
+    const required = new Set([entryPath]);
 
     for (const filePath of manifestPaths) {
         if (filePath.endsWith(".js") || filePath.endsWith(".css")) {
@@ -131,13 +136,61 @@ const collectRequiredFiles = (manifest, fileBytes) => {
     return required;
 };
 
-const buildLaunchDocument = (html, urlByPath) => {
+const BLOB_LAUNCH_BASE = "http://localhost/";
+
+const injectBlobLaunchShim = (doc) => {
+    const base = doc.createElement("base");
+    base.setAttribute("href", BLOB_LAUNCH_BASE);
+    doc.head.prepend(base);
+
+    const shim = doc.createElement("script");
+    shim.textContent = `(function () {
+  var base = ${JSON.stringify(BLOB_LAUNCH_BASE)};
+  var NativeURL = URL;
+  var invalidBase = function (value) {
+    if (!value) return true;
+    var text = String(value);
+    return text === "null" || text.indexOf("blob:") === 0;
+  };
+  URL = function (url, baseUrl) {
+    if (typeof url === "string" && url.charAt(0) === "/" && invalidBase(baseUrl)) {
+      return new NativeURL(url, base);
+    }
+    return new NativeURL(url, baseUrl);
+  };
+  URL.prototype = NativeURL.prototype;
+  URL.createObjectURL = NativeURL.createObjectURL.bind(NativeURL);
+  URL.revokeObjectURL = NativeURL.revokeObjectURL.bind(NativeURL);
+})();`;
+    doc.head.prepend(shim);
+};
+
+export const resolveLaunchAssetUrl = (rawPath, urlByPath, entryPath, manifestPaths) => {
+    const direct = resolveAssetUrl(rawPath, urlByPath);
+    if (direct) {
+        return direct;
+    }
+
+    if (!rawPath || !entryPath || !manifestPaths) {
+        return null;
+    }
+
+    const resolved = resolveManifestPath(entryPath, rawPath, manifestPaths);
+    return resolved ? urlByPath.get(resolved) ?? null : null;
+};
+
+const buildLaunchDocument = (html, urlByPath, entryPath, manifestPaths) => {
     const doc = new DOMParser().parseFromString(html, "text/html");
 
     REWRITABLE_ATTRIBUTES.forEach(([tag, attribute]) => {
         doc.querySelectorAll(`${tag}[${attribute}]`).forEach((element) => {
             const rawPath = element.getAttribute(attribute);
-            const assetUrl = resolveAssetUrl(rawPath, urlByPath);
+            const assetUrl = resolveLaunchAssetUrl(
+                rawPath,
+                urlByPath,
+                entryPath,
+                manifestPaths
+            );
 
             if (assetUrl) {
                 element.setAttribute(attribute, assetUrl);
@@ -151,6 +204,8 @@ const buildLaunchDocument = (html, urlByPath) => {
         element.removeAttribute("crossorigin");
     });
 
+    injectBlobLaunchShim(doc);
+
     return `<!DOCTYPE html>\n${doc.documentElement.outerHTML}`;
 };
 
@@ -162,37 +217,98 @@ const getManifestFileMeta = (manifest, filePath) => {
     return manifest.files?.[filePath] ?? null;
 };
 
-export const createMemoryBlob = async (input) => {
-    const bytes = await readInput(input);
-    const { manifest, fileBytes } = await extractMemory(bytes);
-    const blobUrls = [];
+const attachBlobDispose = (blob, blobUrls) => {
+    blob.dispose = () => {
+        blobUrls.forEach((url) => URL.revokeObjectURL(url));
+    };
+
+    return blob;
+};
+
+const createFileLaunchBlob = (manifest, fileBytes, filePath, blobUrls) => {
+    const fileMeta = getManifestFileMeta(manifest, filePath);
+    const fileContent = readMemoryFile(manifest, filePath, fileBytes);
+    const mime = guessMimeType(filePath, fileMeta);
+    const launchBlob = new Blob([fileContent], { type: mime });
+
+    return attachBlobDispose(launchBlob, blobUrls);
+};
+
+const createBrowseLaunchBlob = (manifest, fileBytes, filePaths, blobUrls) => {
+    const fileUrlByPath = new Map();
+
+    for (const filePath of filePaths) {
+        const fileMeta = getManifestFileMeta(manifest, filePath);
+        const fileContent = readMemoryFile(manifest, filePath, fileBytes);
+        const mime = guessMimeType(filePath, fileMeta);
+        const assetUrl = URL.createObjectURL(new Blob([fileContent], { type: mime }));
+        blobUrls.push(assetUrl);
+        fileUrlByPath.set(filePath, assetUrl);
+    }
+
+    const listings = buildMemoryBrowseListings(filePaths, fileUrlByPath);
+    const launchDocument = buildInteractiveBrowseDocument(listings);
+    const launchBlob = new Blob([launchDocument], { type: "text/html" });
+
+    return attachBlobDispose(launchBlob, blobUrls);
+};
+
+const createPlayLaunchBlob = (manifest, fileBytes, entryPath, blobUrls) => {
     const urlByPath = new Map();
-    const requiredFiles = collectRequiredFiles(manifest, fileBytes);
+    const requiredFiles = collectRequiredFiles(manifest, fileBytes, entryPath);
 
     for (const filePath of requiredFiles) {
         const fileMeta = getManifestFileMeta(manifest, filePath);
         const fileContent = readMemoryFile(manifest, filePath, fileBytes);
         const mime = guessMimeType(filePath, fileMeta);
-        const assetBlob = new Blob([fileContent], { type: mime });
-        const assetUrl = URL.createObjectURL(assetBlob);
+        const assetUrl = URL.createObjectURL(new Blob([fileContent], { type: mime }));
         blobUrls.push(assetUrl);
         urlByPath.set(filePath, assetUrl);
         urlByPath.set(normalizeAssetPath(filePath), assetUrl);
     }
 
-    if (!requiredFiles.has(manifest.entry)) {
-        blobUrls.forEach((url) => URL.revokeObjectURL(url));
-        throw new Error(`Manifest entry not found: ${manifest.entry}`);
+    if (!requiredFiles.has(entryPath)) {
+        throw new Error(`Manifest entry not found: ${entryPath}`);
     }
 
-    const htmlBytes = readMemoryFile(manifest, manifest.entry, fileBytes);
+    const htmlBytes = readMemoryFile(manifest, entryPath, fileBytes);
     const html = textDecoder.decode(htmlBytes);
-    const launchDocument = buildLaunchDocument(html, urlByPath);
+    const manifestPaths = listManifestFiles(manifest);
+    const launchDocument = buildLaunchDocument(
+        html,
+        urlByPath,
+        entryPath,
+        manifestPaths
+    );
     const launchBlob = new Blob([launchDocument], { type: "text/html" });
 
-    launchBlob.dispose = () => {
-        blobUrls.forEach((url) => URL.revokeObjectURL(url));
-    };
+    return attachBlobDispose(launchBlob, blobUrls);
+};
+
+export const createMemoryBlob = async (input) => {
+    const bytes = await readInput(input);
+    const { manifest, fileBytes } = await extractMemory(bytes);
+    const filePaths = listManifestFiles(manifest);
+    const playMode = resolveMemoryPlayMode(manifest, filePaths);
+    const blobUrls = [];
 
-    return launchBlob;
+    try {
+        if (playMode.mode === "file") {
+            return createFileLaunchBlob(manifest, fileBytes, playMode.path, blobUrls);
+        }
+
+        if (playMode.mode === "browse") {
+            return createBrowseLaunchBlob(manifest, fileBytes, filePaths, blobUrls);
+        }
+
+        return createPlayLaunchBlob(
+            manifest,
+            fileBytes,
+            playMode.entry ?? manifest.entry,
+            blobUrls
+        );
+    } catch (error) {
+        blobUrls.forEach((url) => URL.revokeObjectURL(url));
+        throw error;
+    }
 };

package/src/memoryPlay.js

@@ -0,0 +1,246 @@
+export const INDEX_NAMES = ["index.html", "index.htm"];
+
+export const isHtmlEntry = (filePath) =>
+    filePath.endsWith(".html") || filePath.endsWith(".htm");
+
+export const resolveMemoryPlayMode = (
+    manifest,
+    filePaths
+) => {
+    if (filePaths.length === 1) {
+        return { mode: "file", path: filePaths[0] };
+    }
+
+    const indexEntry = filePaths.find(
+        (filePath) =>
+            filePath === "index.html" ||
+            filePath.endsWith("/index.html") ||
+            filePath === "index.htm" ||
+            filePath.endsWith("/index.htm")
+    );
+
+    if (indexEntry) {
+        return { mode: "play", entry: indexEntry };
+    }
+
+    if (filePaths.includes(manifest.entry) && isHtmlEntry(manifest.entry)) {
+        return { mode: "play", entry: manifest.entry };
+    }
+
+    return { mode: "browse" };
+};
+
+const urlPathToPrefix = (urlPath) =>
+    urlPath === "/" ? "" : urlPath.slice(1);
+
+export const listVirtualEntries = (filePaths, urlPath = "/") => {
+    const prefix = urlPathToPrefix(urlPath);
+    const entries = new Map();
+
+    for (const filePath of filePaths) {
+        if (prefix && !filePath.startsWith(`${prefix}/`)) {
+            continue;
+        }
+
+        const rest = prefix ? filePath.slice(prefix.length + 1) : filePath;
+        if (!rest) {
+            continue;
+        }
+
+        const slash = rest.indexOf("/");
+
+        if (slash === -1) {
+            entries.set(rest, { name: rest, isDirectory: false });
+            continue;
+        }
+
+        entries.set(rest.slice(0, slash), {
+            name: rest.slice(0, slash),
+            isDirectory: true,
+        });
+    }
+
+    return [...entries.values()];
+};
+
+export const collectVirtualDirectoryPaths = (filePaths) => {
+    const dirs = new Set(["/"]);
+
+    for (const filePath of filePaths) {
+        const parts = filePath.split("/");
+
+        for (let index = 1; index < parts.length; index += 1) {
+            dirs.add(`/${parts.slice(0, index).join("/")}`);
+        }
+    }
+
+    return [...dirs].sort(
+        (left, right) => right.split("/").length - left.split("/").length
+    );
+};
+
+export const parentVirtualPath = (urlPath) => {
+    if (urlPath === "/") {
+        return null;
+    }
+
+    const trimmed = urlPath.replace(/\/+$/, "");
+    const slash = trimmed.lastIndexOf("/");
+    return slash <= 0 ? "/" : trimmed.slice(0, slash);
+};
+
+export const buildBrowseListingDocument = (
+    urlPath,
+    entries,
+    { showParent = false, parentHref = "../" } = {}
+) => {
+    const sorted = [...entries].sort((left, right) => {
+        if (left.isDirectory !== right.isDirectory) {
+            return left.isDirectory ? -1 : 1;
+        }
+
+        return left.name.localeCompare(right.name);
+    });
+
+    const rows = sorted.map((entry) => {
+        const suffix = entry.isDirectory ? "/" : "";
+        return `<li><a href="${entry.href}">${entry.name}${suffix}</a></li>`;
+    });
+
+    if (showParent) {
+        rows.unshift(`<li><a href="${parentHref}">../</a></li>`);
+    }
+
+    return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Index of ${urlPath}</title>
+    <style>
+      body { font-family: system-ui, sans-serif; margin: 2rem; }
+      h1 { font-size: 1.1rem; font-weight: 600; }
+      ul { list-style: none; padding: 0; }
+      li { margin: 0.35rem 0; }
+      a { text-decoration: none; }
+      a:hover { text-decoration: underline; }
+    </style>
+  </head>
+  <body>
+    <h1>Index of ${urlPath}</h1>
+    <ul>
+      ${rows.join("\n      ")}
+    </ul>
+  </body>
+</html>
+`;
+};
+
+export const buildMemoryBrowseListings = (filePaths, fileUrlByPath) => {
+    const listings = {};
+
+    for (const urlPath of collectVirtualDirectoryPaths(filePaths)) {
+        const prefix = urlPath === "/" ? "" : urlPath.slice(1);
+
+        listings[urlPath] = listVirtualEntries(filePaths, urlPath).map((entry) => {
+            const fullPath = prefix ? `${prefix}/${entry.name}` : entry.name;
+
+            if (entry.isDirectory) {
+                return {
+                    name: entry.name,
+                    isDirectory: true,
+                    path: `/${fullPath}`.replace(/\/+/g, "/"),
+                };
+            }
+
+            return {
+                name: entry.name,
+                isDirectory: false,
+                href: fileUrlByPath.get(fullPath) ?? "#",
+            };
+        });
+    }
+
+    return listings;
+};
+
+export const buildInteractiveBrowseDocument = (listings, rootPath = "/") => `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Index of ${rootPath}</title>
+    <style>
+      body { font-family: system-ui, sans-serif; margin: 2rem; }
+      h1 { font-size: 1.1rem; font-weight: 600; }
+      ul { list-style: none; padding: 0; }
+      li { margin: 0.35rem 0; }
+      a { text-decoration: none; color: inherit; }
+      a:hover { text-decoration: underline; }
+    </style>
+  </head>
+  <body>
+    <h1 id="title">Index of ${rootPath}</h1>
+    <ul id="list"></ul>
+    <script>
+      const listings = ${JSON.stringify(listings)};
+      const title = document.getElementById("title");
+      const list = document.getElementById("list");
+
+      const parentPath = (path) => {
+        if (path === "/") return "/";
+        const trimmed = path.replace(/\\/+$/, "");
+        const slash = trimmed.lastIndexOf("/");
+        return slash <= 0 ? "/" : trimmed.slice(0, slash);
+      };
+
+      const render = (path) => {
+        const entries = listings[path] || [];
+        title.textContent = "Index of " + path;
+        list.replaceChildren();
+
+        if (path !== "/") {
+          const parentItem = document.createElement("li");
+          const parentLink = document.createElement("a");
+          parentLink.href = "#";
+          parentLink.textContent = "../";
+          parentLink.addEventListener("click", (event) => {
+            event.preventDefault();
+            render(parentPath(path));
+          });
+          parentItem.appendChild(parentLink);
+          list.appendChild(parentItem);
+        }
+
+        entries
+          .slice()
+          .sort((left, right) => {
+            if (left.isDirectory !== right.isDirectory) {
+              return left.isDirectory ? -1 : 1;
+            }
+            return left.name.localeCompare(right.name);
+          })
+          .forEach((entry) => {
+            const item = document.createElement("li");
+            const link = document.createElement("a");
+
+            if (entry.isDirectory) {
+              link.href = "#";
+              link.textContent = entry.name + "/";
+              link.addEventListener("click", (event) => {
+                event.preventDefault();
+                render(entry.path);
+              });
+            } else {
+              link.href = entry.href;
+              link.textContent = entry.name;
+            }
+
+            item.appendChild(link);
+            list.appendChild(item);
+          });
+      };
+
+      render(${JSON.stringify(rootPath)});
+    </script>
+  </body>
+</html>
+`;

package/src/payloadFormat.js

@@ -83,6 +83,7 @@ export const buildV2Manifest = ({
     files,
     kind = "web-app",
     runtime = "iframe-sandbox",
+    source = "",
 }) => {
     const sortedPaths = Object.keys(files).sort();
 
@@ -93,6 +94,7 @@ export const buildV2Manifest = ({
             name,
             entry,
             runtime,
+            ...(source ? { source } : {}),
             files: sortedPaths.map((filePath) => {
                 const bytes = toUint8Array(files[filePath]);
                 return {
@@ -106,13 +108,14 @@ export const buildV2Manifest = ({
     };
 };
 
-export const encodeV2Archive = ({ name, entry, files, kind, runtime }) => {
+export const encodeV2Archive = ({ name, entry, files, kind, runtime, source }) => {
     const { manifest, sortedPaths } = buildV2Manifest({
         name,
         entry,
         files,
         kind,
         runtime,
+        source,
     });
     const json = new TextEncoder().encode(JSON.stringify(manifest));
     const header = new Uint8Array(4);

package/tools/buildPlayLauncher.mjs

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+import { spawnSync } from "node:child_process";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const toolsDir = path.dirname(fileURLToPath(import.meta.url));
+const packageRoot = path.dirname(toolsDir);
+const outfile = path.join(toolsDir, "playLauncher.bundle.js");
+
+const result = spawnSync(
+    "npx",
+    [
+        "--yes",
+        "esbuild",
+        path.join(packageRoot, "src/index.js"),
+        "--bundle",
+        "--platform=browser",
+        "--format=iife",
+        "--global-name=MemoryExtract",
+        "--target=chrome109,firefox115,safari16",
+        `--outfile=${outfile}`,
+    ],
+    { cwd: packageRoot, stdio: "inherit" }
+);
+
+if (result.status !== 0) {
+    process.exit(result.status ?? 1);
+}
+
+console.log("Built tools/playLauncher.bundle.js");