@swmansion/popcorn 0.3.2 → 0.4.0-next.0

package/dist/plugins/vite.mjs

@@ -1,101 +1,227 @@
-import { readFile, stat } from 'fs/promises';
-import { dirname, resolve, basename } from 'path';
-import { fileURLToPath } from 'url';
+import { mkdir, cp, rm, readFile } from 'node:fs/promises';
+import { resolve, dirname, join, relative, isAbsolute } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { r as runtimeDirectory, p as popcorn$1 } from './shared.mjs';
+import 'node:child_process';
+import 'node:os';
+import 'node:util';
+import 'node:zlib';
 
-const __dirname$1 = dirname(fileURLToPath(import.meta.url));
-// Plugin is at dist/plugins/vite.mjs, dist/ is one level up
-const popcornDistDir = resolve(__dirname$1, "..");
+const CORS_HEADERS = {
+    "Cross-Origin-Opener-Policy": "same-origin",
+    "Cross-Origin-Embedder-Policy": "require-corp",
+};
+// Plugin is at dist/plugins/vite.mjs, dist/ is one level up.
+const distDir = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+/**
+ * Serves application assets during developmens.
+ *
+ * @example
+ * ```ts
+ * import { defineConfig } from "vite";
+ * import { popcorn } from "@swmansion/popcorn/vite";
+ *
+ * export default defineConfig({
+ *   plugins: [popcorn({ rootDir: "../my_app", app: "my_app" })],
+ * });
+ * ```
+ *
+ * @see {@link Options} for production server requirements.
+ */
 function popcorn(options) {
-    const bundlePaths = options.bundlePaths;
-    const bundles = bundlePaths.map((p) => ({
-        path: p,
-        name: basename(p),
-        url: `/${basename(p)}`,
-    }));
-    let assetsDir;
+    const resolveRuntime = async (source, importer) => {
+        if (importer !== undefined &&
+            resolve(dirname(importer.split("?")[0]), source) ===
+                join(distDir, "beam.mjs")) {
+            const { runtimeVariant } = await ensurePrepared();
+            const runtimeDir = runtimeDirectory(runtimeVariant);
+            return join(runtimeDir, "beam.mjs");
+        }
+    };
+    let prepared;
+    let repacking;
+    let dirty = false;
+    let outDir;
+    let assetsDir = "assets";
+    // Dev/preview: pack once at first request, re-pack lazily after the app's
+    // compiled beams change. A single in-flight promise dedupes concurrent
+    // requests; a change during a re-pack re-sets `dirty` so it isn't lost.
+    const ensurePrepared = () => {
+        if (prepared !== undefined && !dirty)
+            return Promise.resolve(prepared);
+        if (repacking === undefined) {
+            dirty = false;
+            repacking = popcorn$1(options)
+                .then(async (next) => {
+                if (prepared !== undefined) {
+                    await rm(prepared.dir, { recursive: true, force: true });
+                }
+                prepared = next;
+                return next;
+            })
+                .finally(() => {
+                repacking = undefined;
+            });
+        }
+        return repacking;
+    };
+    const cleanup = () => {
+        if (prepared !== undefined) {
+            rm(prepared.dir, { recursive: true, force: true });
+            prepared = undefined;
+        }
+    };
+    const serve = async (req, res, next) => {
+        const url = req.url;
+        if (url === undefined) {
+            next();
+            return;
+        }
+        const requestPath = decodeURIComponent(new URL(url, "http://localhost").pathname);
+        const requestRoot = [`/${assetsDir}/otp/`, `/@fs${distDir}/otp/`].find((root) => requestPath.startsWith(root));
+        if (requestRoot === undefined) {
+            next();
+            return;
+        }
+        let dir;
+        try {
+            ({ dir } = await ensurePrepared());
+        }
+        catch (error) {
+            next(error);
+            return;
+        }
+        const assetsRoot = join(dir, "otp");
+        const filePath = resolve(assetsRoot, requestPath.slice(requestRoot.length));
+        if (!isUnder(assetsRoot, filePath)) {
+            res.statusCode = 403;
+            setHeaders(res);
+            res.end("Forbidden");
+            return;
+        }
+        try {
+            const compressible = isCompressible(filePath);
+            const encoding = compressible
+                ? selectEncoding(req.headers["accept-encoding"]?.toString(), options.brotli ?? false)
+                : { name: null, suffix: "" };
+            if (compressible && encoding.name === null) {
+                res.statusCode = 406;
+                setHeaders(res);
+                res.setHeader("Vary", "Accept-Encoding");
+                res.end("No supported content encoding");
+                return;
+            }
+            const content = await readFile(`${filePath}${encoding.suffix}`);
+            setHeaders(res);
+            setContentType(res, filePath);
+            res.setHeader("Vary", "Accept-Encoding");
+            if (encoding.name !== null) {
+                res.setHeader("Content-Encoding", encoding.name);
+            }
+            res.end(content);
+        }
+        catch {
+            res.statusCode = 404;
+            setHeaders(res);
+            res.end("Not found");
+        }
+    };
     return {
-        name: "popcorn",
+        name: "popcorn-otp",
+        enforce: "pre",
+        resolveId: resolveRuntime,
         config() {
             return {
-                // Exclude popcorn from prebundling so import.meta.url resolves correctly
-                optimizeDeps: {
-                    exclude: ["@swmansion/popcorn"],
+                // Exclude from prebundling so import.meta.url resolves correctly.
+                optimizeDeps: { exclude: ["@swmansion/popcorn"] },
+                worker: {
+                    format: "es",
+                    plugins: () => [
+                        {
+                            name: "popcorn-runtime",
+                            enforce: "pre",
+                            resolveId: resolveRuntime,
+                        },
+                    ],
                 },
+                // COOP/COEP must be on every response (SharedArrayBuffer/pthreads),
+                // including the worker/beam files Vite serves from the package itself.
+                server: { headers: CORS_HEADERS },
+                preview: { headers: CORS_HEADERS },
             };
         },
-        async configResolved(config) {
-            const results = await Promise.allSettled(bundles.map((b) => stat(b.path)));
-            for (const [i, result] of results.entries()) {
-                if (result.status === "rejected") {
-                    this.error(`[popcorn] Bundle doesn't exist at '${bundles[i].path}'`);
-                }
-            }
-            config.server.fs.allow.push(popcornDistDir);
+        configResolved(config) {
+            config.server.fs.allow.push(distDir);
+            outDir = resolve(config.root, config.build.outDir);
             assetsDir = config.build.assetsDir;
         },
         configureServer(server) {
-            server.middlewares.use(async (req, res, next) => {
-                setSharedArrayBufferHeaders(res);
-                for (const bundle of bundles) {
-                    const opts = { bundleUrl: bundle.url, bundlePath: bundle.path };
-                    const served = await serveAvmBundle(req, res, opts);
-                    if (served)
-                        return;
-                }
-                next();
+            const rootDir = resolve(options.rootDir);
+            server.watcher.add(rootDir);
+            server.watcher.on("all", (_event, file) => {
+                if (isUnder(rootDir, file))
+                    dirty = true;
             });
+            server.middlewares.use(serve);
+            server.httpServer?.once("close", cleanup);
         },
         configurePreviewServer(server) {
-            server.middlewares.use(async (req, res, next) => {
-                setSharedArrayBufferHeaders(res);
-                for (const bundle of bundles) {
-                    const opts = { bundleUrl: bundle.url, bundlePath: bundle.path };
-                    const served = await serveAvmBundle(req, res, opts);
-                    if (served)
-                        return;
-                }
-                next();
-            });
+            server.middlewares.use(serve);
+            server.httpServer?.once("close", cleanup);
         },
-        async generateBundle() {
-            // Emit bundles to assets directory
-            for (const bundle of bundles) {
-                this.emitFile({
-                    type: "asset",
-                    fileName: `${assetsDir}/${bundle.name}`,
-                    source: await readFile(bundle.path),
-                });
+        async closeBundle() {
+            assert(outDir !== undefined, "outDir was not resolved");
+            const built = await ensurePrepared();
+            try {
+                const targetDir = join(outDir, assetsDir, "otp");
+                await mkdir(dirname(targetDir), { recursive: true });
+                await cp(join(built.dir, "otp"), targetDir, { recursive: true });
             }
-            // Emit AtomVM files to assets directory (same location as iframe.mjs)
-            // Vite treats iframe.mjs as a static asset and doesn't analyze its imports
-            for (const name of ["AtomVM.mjs", "AtomVM.wasm"]) {
-                this.emitFile({
-                    type: "asset",
-                    fileName: `${assetsDir}/${name}`,
-                    source: await readFile(resolve(popcornDistDir, name)),
-                });
+            finally {
+                await rm(built.dir, { recursive: true, force: true });
+                prepared = undefined;
             }
         },
     };
 }
-async function serveAvmBundle(req, res, { bundleUrl, bundlePath }) {
-    try {
-        if (req.url === bundleUrl) {
-            const content = await readFile(bundlePath);
-            res.setHeader("Content-Type", "application/octet-stream");
-            res.end(content);
-            return true;
-        }
-        return false;
+function isCompressible(path) {
+    return path.endsWith(".tar") || path.endsWith(".wasm");
+}
+function selectEncoding(header, useBrotli) {
+    if (useBrotli && header?.includes("br")) {
+        return { name: "br", suffix: ".br" };
     }
-    catch (err) {
-        console.error(`[popcorn] Failed to serve bundle:`, err);
-        throw err;
+    if (header?.includes("gzip"))
+        return { name: "gzip", suffix: ".gz" };
+    return { name: null, suffix: "" };
+}
+function isUnder(dir, file) {
+    const rel = relative(dir, file);
+    return rel !== "" && !rel.startsWith("..") && !isAbsolute(rel);
+}
+function setHeaders(res) {
+    for (const [key, value] of Object.entries(CORS_HEADERS)) {
+        res.setHeader(key, value);
+    }
+}
+function setContentType(res, path) {
+    if (path.endsWith(".mjs")) {
+        res.setHeader("Content-Type", "text/javascript");
+    }
+    else if (path.endsWith(".wasm")) {
+        res.setHeader("Content-Type", "application/wasm");
+    }
+    else if (path.endsWith(".json")) {
+        res.setHeader("Content-Type", "application/json");
+    }
+    else {
+        res.setHeader("Content-Type", "application/octet-stream");
     }
 }
-function setSharedArrayBufferHeaders(res) {
-    res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
-    res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
+function assert(ok, message) {
+    if (!ok) {
+        throw new Error(`[popcorn-otp] ${message}`);
+    }
 }
 
 export { popcorn };