@aklinker1/aframe 0.4.12 → 1.0.0

package/README.md

@@ -28,8 +28,8 @@ export default defineConfig({
   },
   // List of routes to pre-render.
   prerenderedRoutes: ["/"],
-  // See https://github.com/Tofandel/prerenderer?tab=readme-ov-file#prerenderer-options
-  prerenderer: {
+  // Configure how prerendering works, or set to `false` to disable
+  prerender: {
     // ...
   },
 });
@@ -141,5 +141,5 @@ const visible = !isPrerendering();
 ## Publish Update to NPM
 
 ```sh
-bun run release
+bun run release patch
 ```

package/bin/aframe.ts

@@ -1,6 +1,6 @@
 import { build, createServer } from "../src";
 import { resolveConfig } from "../src/config";
-import { RESET, BOLD, DIM, UNDERLINE, GREEN, CYAN } from "../src/color";
+import { RESET, BOLD, GREEN, CYAN } from "../src/color";
 import { createTimer } from "../src/timer";
 
 const [_bun, _aframe, ...args] = process.argv;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aklinker1/aframe",
-  "version": "0.4.12",
-  "packageManager": "bun@1.2.5",
+  "version": "1.0.0",
+  "packageManager": "bun@1.3.2",
   "type": "module",
   "license": "MIT",
   "exports": {
@@ -21,11 +21,10 @@
     "check": "check",
     "aframe": "bun --silent bin/aframe.ts",
     "dev": "bun aframe demo",
-    "build": "bun aframe build demo",
+    "build": "bun aframe build demo && bun run demo/post-build.js",
     "preview": "bun --cwd demo/.output --env-file ../.env server-entry.js",
     "release": "bun run scripts/release.ts"
   },
-  "dependencies": {},
   "devDependencies": {
     "@aklinker1/check": "^1.4.5",
     "@types/bun": "latest",
@@ -39,5 +38,10 @@
   "peerDependencies": {
     "vite": "*",
     "puppeteer": "*"
+  },
+  "peerDependenciesMeta": {
+    "puppeteer": {
+      "optional": true
+    }
   }
 }

package/src/client/server.ts

@@ -1,15 +1,18 @@
 import type { BunFile } from "bun";
-import { resolve } from "node:path";
-
-const headers = {
-  "Cache-Control": "max-age=31536000",
-};
+import { readFileSync } from "node:fs";
+import { join, extname, basename } from "node:path";
 
 export interface AframeServer {
   listen(port: number): void | never;
 }
 
-const publicDir = resolve(import.meta.dir, import.meta.publicDir);
+const staticPathsFile = join(aframe.rootDir, "static.json");
+const publicDir = aframe.publicDir;
+
+let staticPaths: Record<string, { cacheable: boolean; path: string }> = {};
+try {
+  staticPaths = JSON.parse(readFileSync(staticPathsFile, "utf-8"));
+} catch {}
 
 /**
  * Fetches a file from the `public` directory.
@@ -22,62 +25,60 @@ export function fetchStatic(options?: {
   ) => Promise<Response | undefined> | Response | undefined;
 }): (request: Request) => Promise<Response> {
   return async (request) => {
-    const path = new URL(request.url).pathname.replace(/\/+$/, "");
+    const path = new URL(request.url).pathname.replace(/\/+$/, "") || "/";
 
-    const paths = [`${publicDir}${path}`, `${publicDir}${path}/index.html`];
+    // Fetch file on disk
+    if (staticPaths[path]) {
+      const filePath = join(aframe.rootDir, staticPaths[path].path);
+      const file = Bun.file(filePath);
+      const gzFile = Bun.file(filePath + ".gz");
 
-    // Only fallback on the root HTML file when building application
-    if (import.meta.command === "build") {
-      paths.push(`${publicDir}/index.html`);
+      const customResponse = await options?.onFetch?.(path, file);
+      if (customResponse) return customResponse;
+
+      return new Response(gzFile.stream(), {
+        headers: {
+          "Content-Type": file.type,
+          "Content-Encoding": "gzip",
+          "Cache-Control": "max-age=31536000",
+        },
+      });
     }
 
-    for (const path of paths) {
-      const isHtml = path.includes(".html");
-      const gzFile = Bun.file(path + ".gz");
-      const file = Bun.file(path);
+    // If the path is asking for a file (e.g., it has an extension), return a
+    // 404 if it wasn't in the static list
+    const ext = extname(basename(path));
+    if (ext) {
+      return new Response(undefined, { status: 404 });
+    }
 
-      if (await isFile(gzFile)) {
-        const customResponse = await options?.onFetch?.(path, file);
-        if (customResponse) return customResponse;
-        return new Response(gzFile.stream(), {
+    // During development, render a fallback HTML page since Vite should handle
+    // all these routes before proxying the request to the server.
+    if (aframe.command === "serve") {
+      return new Response(
+        `<html>
+  <body>
+    This is a placeholder for your root <code>index.html</code> file during development.
+    <br/>
+    In production (or via the app's dev server), this path will fallback on the root <code>index.html</code>.
+  </body>
+</html>`,
+        {
           headers: {
-            ...(isHtml ? {} : headers),
-            "content-type": file.type,
-            "content-encoding": "gzip",
+            "Content-Type": "text/html",
           },
-        });
-      }
-
-      if (await isFile(file)) {
-        const customResponse = await options?.onFetch?.(path, file);
-        if (customResponse) return customResponse;
-
-        return new Response(file.stream(), { headers });
-      }
+        },
+      );
     }
 
-    return new Response(
-      `<html>
-        <body>
-          This is a placeholder for your root <code>index.html</code> file during development.
-          <br/>
-          In production (or via the app's dev server), this path will fallback on the root <code>index.html</code>.
-        </body>
-      </html>`,
-      {
-        headers: {
-          "Content-Type": "text/html",
-        },
+    // Fallback to public/index.html file
+    const file = Bun.file(join(publicDir, "index.html"));
+    const gzFile = Bun.file(join(publicDir, "index.html.gz"));
+    return new Response(gzFile.stream(), {
+      headers: {
+        "Content-Type": file.type,
+        "Content-Encoding": "gzip",
       },
-    );
+    });
   };
 }
-
-async function isFile(file: BunFile): Promise<boolean> {
-  try {
-    const stats = await file.stat();
-    return stats.isFile();
-  } catch {
-    return false;
-  }
-}

package/src/config.ts

@@ -1,8 +1,11 @@
 import * as vite from "vite";
 import { resolve, join, relative } from "node:path/posix";
-import { mkdir } from "node:fs/promises";
 import type { LaunchOptions } from "puppeteer";
 
+export type AframeHooks = {
+  afterServerBuild?: (config: ResolvedConfig) => Promise<void> | void;
+};
+
 export type UserConfig = {
   vite?: vite.UserConfigExport;
   /**
@@ -11,12 +14,13 @@ export type UserConfig = {
    */
   proxyPaths?: string[];
   prerenderedRoutes?: string[];
-  prerenderer?: PrerendererConfig | false;
+  prerender?: PrerenderConfig | false;
   appPort?: number;
   serverPort?: number;
+  hooks?: AframeHooks;
 };
 
-export type PrerendererConfig = {
+export type PrerenderConfig = {
   /** Wait for an selector`document.querySelector` to be in the DOM before grabbing the HTML. */
   waitForSelector?: string;
   /** When `waitForSelector` is set, also wait for the element to be visible before grabbing the HTML. */
@@ -34,12 +38,12 @@ export type PrerendererConfig = {
 
 export type ResolvedConfig = {
   rootDir: string;
+  packageJsonPath: string;
   appDir: string;
   publicDir: string;
   serverDir: string;
   serverModule: string;
-  serverEntry: string;
-  prerenderToDir: string;
+  prerenderedDir: string;
   proxyPaths: string[];
   outDir: string;
   serverOutDir: string;
@@ -48,7 +52,8 @@ export type ResolvedConfig = {
   serverPort: number;
   vite: vite.InlineConfig;
   prerenderedRoutes: string[];
-  prerenderer: PrerendererConfig | false;
+  prerender: PrerenderConfig | false;
+  hooks: AframeHooks | undefined;
 };
 
 export function defineConfig(config: UserConfig): UserConfig {
@@ -61,18 +66,15 @@ export async function resolveConfig(
   mode: string,
 ): Promise<ResolvedConfig> {
   const rootDir = root ? resolve(root) : process.cwd();
+  const packageJsonPath = join(rootDir, "package.json");
   const appDir = join(rootDir, "app");
   const serverDir = join(rootDir, "server");
   const serverModule = join(serverDir, "main.ts");
-  const serverEntry = join(import.meta.dir, "server-entry.ts");
   const publicDir = join(rootDir, "public");
   const outDir = join(rootDir, ".output");
   const appOutDir = join(outDir, "public");
-  const serverOutDir = outDir;
-  const prerenderToDir = appOutDir;
-
-  // Ensure required directories exist
-  await mkdir(prerenderToDir, { recursive: true });
+  const serverOutDir = join(outDir, "server");
+  const prerenderedDir = join(outDir, "prerendered");
 
   const configFile = join(rootDir, "aframe.config"); // No file extension to resolve any JS/TS file
   const relativeConfigFile = "./" + relative(import.meta.dir, configFile);
@@ -120,6 +122,7 @@ export async function resolveConfig(
       publicDir,
       envDir: rootDir,
       build: {
+        emptyOutDir: false,
         outDir: appOutDir,
       },
       server: {
@@ -132,21 +135,22 @@ export async function resolveConfig(
 
   return {
     rootDir,
+    packageJsonPath,
     appDir,
     publicDir,
     serverDir,
     serverModule,
-    serverEntry,
     outDir,
     serverOutDir,
     appOutDir,
-    prerenderToDir,
+    prerenderedDir,
     appPort,
     serverPort,
     proxyPaths,
 
     prerenderedRoutes: userConfig.prerenderedRoutes ?? ["/"],
     vite: viteConfig,
-    prerenderer: userConfig.prerenderer ?? {},
+    prerender: userConfig.prerender ?? {},
+    hooks: userConfig.hooks,
   };
 }

package/src/dev-server.ts

@@ -11,21 +11,18 @@ export async function createServer(
 
   let serverProcess: Subprocess | undefined;
   const startServer = () => {
-    const js = [
-      `import server from '${config.serverModule}';`,
-      `server.listen(${config.serverPort});`,
-    ].join("\n");
+    const js = `globalThis.aframe = {
+  command: "serve",
+  rootDir: "${config.rootDir}",
+  publicDir: "${config.publicDir}",
+};
+
+const { default: server } = await import('${config.serverModule}');
+
+server.listen(${config.serverPort});
+`;
     return Bun.spawn({
-      cmd: [
-        "bun",
-        "--watch",
-        "--define",
-        `import.meta.publicDir:"${config.publicDir}"`,
-        "--define",
-        `import.meta.command:"serve"`,
-        "--eval",
-        js,
-      ],
+      cmd: ["bun", "--watch", "--eval", js],
       stdio: ["inherit", "inherit", "inherit"],
       cwd: config.rootDir,
     });

package/src/env.d.ts

@@ -1,16 +1,11 @@
 import "vite/client";
 
 declare global {
-  interface ImportMeta {
-    /**
-     * Absolute path or relative path (relative to main server file, not CWD).
-     * This ensures the public directory path is constant regardless of the CWD.
-     * It allows dev mode, production builds, and preview mode to all run from
-     * any working directory.
-     */
+  declare var aframe: {
+    command: "build" | "serve";
+    rootDir: string;
     publicDir: string;
-    command: string;
-  }
+  };
 }
 
 export {};

package/src/index.ts

@@ -1,12 +1,13 @@
-import type { BunPlugin } from "bun";
-import { lstatSync } from "node:fs";
-import { mkdir, rm } from "node:fs/promises";
+import { createReadStream, createWriteStream, lstatSync } from "node:fs";
+import { cp, mkdir, readdir, rm, writeFile } from "node:fs/promises";
 import { join, relative } from "node:path/posix";
 import * as vite from "vite";
-import { BLUE, BOLD, CYAN, DIM, GREEN, MAGENTA, RESET } from "./color";
+import { BLUE, BOLD, CYAN, DIM, GREEN, MAGENTA, RESET, YELLOW } from "./color";
 import type { ResolvedConfig } from "./config";
 import { createTimer } from "./timer";
-import { prerenderPages, type PrerenderedRoute } from "./prerenderer";
+import { prerenderPages, type PrerenderedRoute } from "./prerender";
+import { createGzip } from "node:zlib";
+import { pipeline } from "node:stream/promises";
 
 export * from "./config";
 export * from "./dev-server";
@@ -22,36 +23,54 @@ export async function build(config: ResolvedConfig) {
   console.log(
     `${BOLD}${CYAN}ℹ${RESET} Building ${CYAN}./app${RESET} with ${GREEN}Vite ${vite.version}${RESET}`,
   );
-  const { output: app } = (await vite.build(
-    config.vite,
-  )) as vite.Rollup.RollupOutput;
+  const appOutput = (await vite.build(config.vite)) as vite.Rollup.RollupOutput;
   console.log(`${GREEN}✔${RESET} Built in ${appTimer()}`);
 
+  const allAbsoluteAppFiles = (
+    await readdir(config.appOutDir, { recursive: true, withFileTypes: true })
+  )
+    .filter((entry) => entry.isFile())
+    .map((entry) => join(entry.parentPath, entry.name));
+  const allAppFiles = allAbsoluteAppFiles.map((path) =>
+    relative(config.appOutDir, path),
+  );
+
+  const bundledAppFiles = appOutput.output.map((entry) => entry.fileName);
+  const bundledAppFileSet = new Set(bundledAppFiles);
+  const publicAppFiles = allAppFiles.filter(
+    (file) => !bundledAppFileSet.has(file),
+  );
+
+  await gzipFiles(config, allAbsoluteAppFiles);
+
+  const staticRoutesFile = join(config.outDir, "static.json");
+  let staticRoutes = [
+    ...Array.from(bundledAppFiles)
+      .filter((path) => path !== "index.html")
+      .map((path) => [`/${path}`, { cacheable: true, path: `public/${path}` }]),
+    ...publicAppFiles
+      .filter((path) => path !== "index.html")
+      .map((path) => [
+        `/${path}`,
+        { cacheable: false, path: `public/${path}` },
+      ]),
+  ];
+  await writeFile(
+    staticRoutesFile,
+    JSON.stringify(Object.fromEntries(staticRoutes)),
+  );
+
   console.log();
 
   const serverTimer = createTimer();
-  console.log(
-    `${BOLD}${CYAN}ℹ${RESET} Building ${CYAN}./server${RESET} with ${MAGENTA}Bun ${Bun.version}${RESET}`,
-  );
-  const server = await Bun.build({
-    outdir: config.serverOutDir,
-    sourcemap: "external",
-    entrypoints: [config.serverEntry],
-    target: "bun",
-    define: {
-      // In production, the public directory is inside the CWD
-      "import.meta.publicDir": `"public"`,
-      "import.meta.command": `"build"`,
-    },
-    plugins: [aframeServerMainBunPlugin(config)],
-    throw: true,
-  });
+  console.log(`${BOLD}${CYAN}ℹ${RESET} Building ${CYAN}./server${RESET}`);
+  await buildServer(config);
   console.log(`${GREEN}✔${RESET} Built in ${serverTimer()}`);
 
   console.log();
 
   let prerendered: PrerenderedRoute[] = [];
-  if (config.prerenderer !== false) {
+  if (config.prerender !== false) {
     const prerenderTimer = createTimer();
     console.log(
       `${BOLD}${CYAN}ℹ${RESET} Prerendering...\n` +
@@ -62,23 +81,37 @@ export async function build(config: ResolvedConfig) {
     prerendered = await prerenderPages(config);
     console.log(`${GREEN}✔${RESET} Prerendered in ${prerenderTimer()}`);
   } else {
-    console.log(`${DIM}${BOLD}→${RESET} Pre-rendering disabled`);
+    console.log(`${DIM}${BOLD}→${RESET} Pre-render disabled`);
   }
 
+  await gzipFiles(
+    config,
+    prerendered.map((entry) => entry.absolutePath),
+  );
+
+  staticRoutes = staticRoutes.concat(
+    prerendered.map((entry) => [
+      entry.route,
+      { cacheable: false, path: `prerendered/${entry.relativePath}` },
+    ]),
+  );
+  await writeFile(
+    staticRoutesFile,
+    JSON.stringify(Object.fromEntries(staticRoutes)),
+  );
+
   console.log();
 
   console.log(`${GREEN}✔${RESET} Application built in ${buildTimer()}`);
   const relativeOutDir = `${relative(config.rootDir, config.outDir)}/`;
-  const files = [
-    ...server.outputs.map((output) => output.path),
-    ...prerendered.map((output) => output.file),
-    ...app
-      .filter((output) => output.fileName !== "index.html")
-      .map((output) => join(config.appOutDir, output.fileName)),
-  ].map((file): [file: string, size: number] => [
-    relative(config.outDir, file),
-    lstatSync(file).size,
-  ]);
+  const files = (
+    await listDirFiles(config.outDir, (path) => !path.includes("node_modules"))
+  )
+    .toSorted()
+    .map((file): [file: string, size: number] => [
+      relative(config.outDir, file),
+      lstatSync(file).size,
+    ]);
   const fileColumnCount = files.reduce(
     (max, [file]) => Math.max(file.length, max),
     0,
@@ -94,21 +127,79 @@ export async function build(config: ResolvedConfig) {
   );
   console.log(`${CYAN}Σ Total size:${RESET} ${prettyBytes(totalSize)}`);
   console.log();
+
+  console.log(
+    `To preview production build, run:
+
+    ${GREEN}bun run ${relative(process.cwd(), config.outDir)}/server-entry.ts${RESET}
+`,
+  );
 }
 
-function aframeServerMainBunPlugin(config: ResolvedConfig): BunPlugin {
-  return {
-    name: "aframe:resolve-server-main",
-    setup(bun) {
-      bun.onResolve({ filter: /^aframe:server-main$/ }, () => ({
-        path: config.serverModule,
-      }));
+async function buildServer(config: ResolvedConfig): Promise<void> {
+  await cp(config.serverDir, config.serverOutDir, {
+    recursive: true,
+    filter: (src) =>
+      !src.includes("__tests__") &&
+      !src.includes(".test.") &&
+      !src.includes(".spec."),
+  });
+  await Promise.all(
+    ["bun.lock", "bun.lockb", "tsconfig.json"].map((file) =>
+      cp(join(config.rootDir, file), join(config.outDir, file)).catch(() => {
+        // Ignore errors
+      }),
+    ),
+  );
+  const packageJson = await Bun.file(config.packageJsonPath)
+    .json()
+    .catch(() => ({}));
+  await Bun.write(
+    join(config.outDir, "package.json"),
+    JSON.stringify(
+      {
+        dependencies: packageJson.dependencies,
+        devDependencies: packageJson.devDependencies,
+      },
+      null,
+      2,
+    ),
+  );
+  await Bun.write(
+    join(config.outDir, "server-entry.ts"),
+    `import { resolve } from 'node:path';
+
+globalThis.aframe = {
+  command: "build",
+  rootDir: import.meta.dir,
+  publicDir: resolve(import.meta.dir, "public"),
+};
+
+const { default: server } = await import("./server/main");
+
+const port = Number(process.env.PORT) || 3000;
+console.log(\`Server running @ http://localhost:\${port}\`);
+server.listen(port);
+`,
+  );
+  const installProc = Bun.spawn(
+    ["bun", "i", "--production", "--frozen-lockfile"],
+    {
+      cwd: config.outDir,
     },
-  };
+  );
+  const installStatus = await installProc.exited;
+  if (installStatus !== 0) {
+    throw new Error(`Failed to run "bun i --production" in ${config.outDir}`);
+  }
+
+  await config.hooks?.afterServerBuild?.(config);
 }
 
 function getColor(file: string) {
   if (file.endsWith(".js")) return CYAN;
+  if (file.endsWith(".ts")) return CYAN;
+  if (file.endsWith(".json")) return YELLOW;
   if (file.endsWith(".html")) return GREEN;
   if (file.endsWith(".css")) return MAGENTA;
   if (file.endsWith(".map")) return DIM;
@@ -125,3 +216,42 @@ function prettyBytes(bytes: number) {
   const value = bytes / Math.pow(base, exponent);
   return `${unit === "B" ? value : value.toFixed(2)} ${unit}`;
 }
+
+async function gzipFiles(
+  config: ResolvedConfig,
+  files: string[],
+): Promise<void> {
+  for (const file of files) await gzipFile(config, file);
+}
+
+async function gzipFile(config: ResolvedConfig, file: string): Promise<void> {
+  await writeFile(`${file}.gz`, "");
+  await pipeline(
+    createReadStream(file),
+    createGzip(),
+    createWriteStream(`${file}.gz`),
+  );
+}
+
+async function listDirFiles(
+  dir: string,
+  filter: (path: string) => boolean,
+): Promise<string[]> {
+  const entries = await readdir(dir, { withFileTypes: true });
+  const files: string[] = [];
+
+  for (const entry of entries) {
+    const fullPath = join(entry.parentPath, entry.name);
+
+    if (!filter(fullPath)) continue;
+
+    if (entry.isFile()) {
+      files.push(fullPath);
+    } else if (entry.isDirectory()) {
+      const subFiles = await listDirFiles(fullPath, filter);
+      files.push(...subFiles);
+    }
+  }
+
+  return files;
+}

package/src/{prerenderer.ts → prerender.ts}

@@ -1,18 +1,18 @@
-import {} from "node:url";
-import { join } from "node:path";
+import { dirname, join } from "node:path";
 import { mkdir, writeFile } from "node:fs/promises";
 import type { Browser } from "puppeteer";
 import type { ResolvedConfig } from "./config";
 
 export type PrerenderedRoute = {
   route: string;
-  file: string;
+  absolutePath: string;
+  relativePath: string;
 };
 
 export async function prerenderPages(
   config: ResolvedConfig,
 ): Promise<PrerenderedRoute[]> {
-  if (config.prerenderer === false) return [];
+  if (config.prerender === false) return [];
 
   const puppeteer = await import("puppeteer");
   const {
@@ -21,10 +21,10 @@ export async function prerenderPages(
     waitForSelector,
     waitForSelectorVisible,
     waitForTimeout,
-  } = config.prerenderer ?? {};
+  } = config.prerender ?? {};
 
   const server = Bun.spawn({
-    cmd: ["bun", join(config.serverOutDir, "server-entry.js")],
+    cmd: ["bun", join(config.outDir, "server-entry.ts")],
     cwd: config.rootDir,
     stdio: ["inherit", "inherit", "inherit"],
   });
@@ -67,13 +67,15 @@ export async function prerenderPages(
         throw Error("Vite error prevented page from being rendered.");
       }
 
-      const dir = join(config.appOutDir, route.substring(1));
-      const file = join(dir, "index.html");
+      const relativePath = join(route.substring(1), "index.html");
+      const absolutePath = join(config.prerenderedDir, relativePath);
+      const dir = dirname(absolutePath);
       await mkdir(dir, { recursive: true });
-      await writeFile(file, html);
+      await writeFile(absolutePath, html);
       results.push({
-        file,
         route,
+        relativePath,
+        absolutePath,
       });
     }
   } finally {

package/src/server-entry.ts

@@ -1,6 +0,0 @@
-// This import is resolved by a Bun plugin pointing to your project's `server/main.ts` file.
-import server from "aframe:server-main";
-
-const port = Number(process.env.PORT) || 3000;
-console.log(`Server running @ http://localhost:${port}`);
-server.listen(port);

package/src/virtual-modules.d.ts

@@ -1,4 +0,0 @@
-declare module "aframe:server-main" {
-  const server: import("./server").AframeServer;
-  export default server;
-}