@aklinker1/aframe 0.2.5 → 0.4.0

package/README.md

@@ -13,6 +13,7 @@ Simple wrapper around Vite for creating pre-rendered, client-side web apps with
    📁 public/
       📄 favicon.ico
    📁 server/
+      📄 env.d.ts
       📄 main.ts
    📄 .env
    📄 aframe.config.ts
@@ -34,6 +35,11 @@ export default defineConfig({
 });
 ```
 
+```ts
+// server/env.d.ts
+/// <reference types="@aklinker1/aframe/env" />
+```
+
 ```ts
 // server/main.ts
 import { Elysia } from "elysia";
@@ -62,6 +68,11 @@ export default app;
 </html>
 ```
 
+```sh
+bun add elysia @aklinker1/aframe
+bun add -D puppeteer vite
+```
+
 ```jsonc
 // package.json
 {
@@ -69,16 +80,18 @@ export default app;
   "version": "1.0.0",
   "packageManager": "bun@1.2.2",
   "scripts": {
-    "dev": "aframe",
-    "build": "aframe build",
+    "aframe": "bun node_modules/@aklinker1/aframe/bin/aframe.ts",
+    "dev": "bun --silent aframe",
+    "build": "bun --silent aframe build",
     "preview": "bun --cwd .output --env-file ../.env server-entry.js"
   },
   "dependencies": {
-    "@aklinker1/aframe": "@latest",
-    "@prerenderer/prerenderer": "@latest",
-    "@prerenderer/renderer-puppeteer": "@latest"
-    "elysia": "@latest"
-    "vite": "@latest",
+    "@aklinker1/aframe": "latest",
+    "elysia": "latest"
+  },
+  "devDependencies": {
+    "vite": "latest",
+    "puppeteer": "latest",
   }
 }
 ```

package/bin/aframe.ts

@@ -10,27 +10,7 @@ async function dev(root?: string) {
   console.log(`${BOLD}${CYAN}ℹ${RESET} Spinning up dev servers...${RESET}`);
   const config = await resolveConfig(root, "serve", "development");
   const devServer = await createServer(config);
-
-  await devServer.listen(config.appPort).then(() => {
-    const js = [
-      `import server from '${config.serverModule}';`,
-      `server.listen(${config.serverPort});`,
-    ].join("\n");
-    Bun.spawn({
-      cmd: [
-        "bun",
-        "--watch",
-        "--define",
-        `import.meta.publicDir:"${config.publicDir}"`,
-        "--define",
-        `import.meta.command:"serve"`,
-        "--eval",
-        js,
-      ],
-      stdio: ["inherit", "inherit", "inherit"],
-      cwd: config.rootDir,
-    });
-  });
+  await devServer.listen();
 
   console.log(`${GREEN}✔${RESET} Dev servers started in ${devServerTimer()}`);
   console.log(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aklinker1/aframe",
-  "version": "0.2.5",
-  "packageManager": "bun@1.2.2",
+  "version": "0.4.0",
+  "packageManager": "bun@1.2.5",
   "type": "module",
   "license": "MIT",
   "exports": {
@@ -19,34 +19,24 @@
   ],
   "scripts": {
     "check": "check",
-    "dev": "bun node_modules/@aklinker1/aframe/bin/aframe.ts demo",
-    "build": "bun node_modules/@aklinker1/aframe/bin/aframe.ts build demo",
+    "aframe": "bun --silent bin/aframe.ts",
+    "dev": "bun aframe demo",
+    "build": "bun aframe build demo",
     "preview": "bun --cwd demo/.output --env-file ../.env server-entry.js"
   },
   "dependencies": {},
   "devDependencies": {
     "@aklinker1/check": "^1.4.5",
-    "@prerenderer/renderer-puppeteer": "1.2.4",
     "@types/bun": "latest",
     "oxlint": "^0.15.11",
     "prettier": "^3.5.2",
     "publint": "^0.3.6",
-    "puppeteer": "^24.2.1",
+    "puppeteer": "^24.4.0",
     "typescript": "^5.0.0",
     "vite": "^6.1.1"
   },
   "peerDependencies": {
     "vite": "*",
-    "@prerenderer/prerenderer": "*",
-    "@prerenderer/renderer-jsdom": "*",
-    "@prerenderer/renderer-puppeteer": "*"
-  },
-  "peerDependenciesMeta": {
-    "@prerenderer/prerenderer-jsdom": {
-      "optional": true
-    },
-    "@prerenderer/renderer-puppeteer": {
-      "optional": true
-    }
+    "puppeteer": "*"
   }
 }

package/src/client/server.ts

@@ -11,53 +11,67 @@ export interface AframeServer {
 /**
  * Fetches a file from the `public` directory.
  */
-export async function fetchStatic(request: Request): Promise<Response> {
-  const path = new URL(request.url).pathname.replace(/\/+$/, "");
+export function fetchStatic(options?: {
+  /** Override the fetch behavior of a file. */
+  onFetch?: (
+    path: string,
+    file: BunFile,
+  ) => Promise<Response | undefined> | Response | undefined;
+}): (request: Request) => Promise<Response> {
+  return async (request) => {
+    const path = new URL(request.url).pathname.replace(/\/+$/, "");
 
-  const paths = [
-    `${import.meta.publicDir}${path}`,
-    `${import.meta.publicDir}${path}/index.html`,
-  ];
+    const paths = [
+      `${import.meta.publicDir}${path}`,
+      `${import.meta.publicDir}${path}/index.html`,
+    ];
 
-  // Only fallback on the root HTML file when building application
-  if (import.meta.command === "build") {
-    paths.push(`${import.meta.publicDir}/index.html`);
-  }
+    // Only fallback on the root HTML file when building application
+    if (import.meta.command === "build") {
+      paths.push(`${import.meta.publicDir}/index.html`);
+    }
 
-  for (const path of paths) {
-    const gzFile = Bun.file(path + ".gz");
-    const file = Bun.file(path);
+    for (const path of paths) {
+      const isHtml = path.includes(".html");
+      const gzFile = Bun.file(path + ".gz");
+      const file = Bun.file(path);
 
-    if (await isFile(gzFile)) {
-      return new Response(gzFile.stream(), {
-        headers: {
-          ...headers,
-          "content-type": file.type,
-          "content-encoding": "gzip",
-        },
-      });
-    }
+      if (await isFile(gzFile)) {
+        const customResponse = await options?.onFetch?.(path, file);
+        if (customResponse) return customResponse;
+        return new Response(gzFile.stream(), {
+          headers: {
+            ...(isHtml ? {} : headers),
+            "content-type": file.type,
+            "content-encoding": "gzip",
+          },
+        });
+      }
 
-    if (await isFile(file)) {
-      return new Response(file.stream(), { headers });
+      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",
-        ...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",
+          ...headers,
+        },
       },
-    },
-  );
+    );
+  };
 }
 
 async function isFile(file: BunFile): Promise<boolean> {

package/src/config.ts

@@ -1,12 +1,25 @@
 import * as vite from "vite";
-import type { PrerendererOptions } from "@prerenderer/prerenderer";
 import { resolve, join, relative } from "node:path/posix";
 import { mkdir } from "node:fs/promises";
 
 export type UserConfig = {
   vite?: vite.UserConfigExport;
   prerenderedRoutes?: string[];
-  prerenderer?: Partial<PrerendererOptions>;
+  prerenderer?: PrerendererConfig;
+};
+
+export type PrerendererConfig = {
+  /** 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. */
+  waitForSelectorVisible?: boolean;
+  /** Wait a set timeout in milliseconds before grabbing the HTML. */
+  waitForTimeout?: number;
+  /**
+   * Timeout before prerendering throws an error.
+   * @default 30e3
+   */
+  timeout?: number;
 };
 
 export type ResolvedConfig = {
@@ -24,7 +37,7 @@ export type ResolvedConfig = {
   serverPort: number;
   vite: vite.InlineConfig;
   prerenderedRoutes: string[];
-  prerenderer: () => Promise<PrerendererOptions>;
+  prerenderer: PrerendererConfig;
 };
 
 export function defineConfig(config: UserConfig): UserConfig {
@@ -103,24 +116,6 @@ export async function resolveConfig(
     },
   );
 
-  const prerenderer = async (): Promise<PrerendererOptions> => {
-    const rendererModule =
-      tryResolve("@prerenderer/renderer-puppeteer") ??
-      tryResolve("@prerenderer/renderer-jsdom");
-    if (!rendererModule)
-      throw Error(
-        `No renderer installed. Did you forget to install @prerenderer/renderer-puppeteer or @prerenderer/renderer-jsdom?`,
-      );
-
-    const { default: Renderer } = await import(rendererModule);
-    const renderer = new Renderer();
-    return {
-      ...userConfig.prerenderer,
-      renderer,
-      staticDir: appOutDir,
-    };
-  };
-
   return {
     rootDir,
     appDir,
@@ -136,15 +131,7 @@ export async function resolveConfig(
     serverPort,
 
     prerenderedRoutes: userConfig.prerenderedRoutes ?? ["/"],
-    prerenderer,
     vite: viteConfig,
+    prerenderer: userConfig.prerenderer ?? {},
   };
 }
-
-function tryResolve(specifier: string): string | undefined {
-  try {
-    return import.meta.resolve(specifier);
-  } catch {
-    return undefined;
-  }
-}

package/src/dev-server.ts

@@ -0,0 +1,45 @@
+import { createServer as createViteServer, type ViteDevServer } from "vite";
+import type { ResolvedConfig } from "./config";
+import type { Subprocess } from "bun";
+
+export async function createServer(
+  config: ResolvedConfig,
+): Promise<ViteDevServer> {
+  const devServer = await createViteServer(config.vite);
+  const ogListen = devServer.listen.bind(devServer);
+  const ogClose = devServer.close.bind(devServer);
+
+  let serverProcess: Subprocess | undefined;
+  const startServer = () => {
+    const js = [
+      `import server from '${config.serverModule}';`,
+      `server.listen(${config.serverPort});`,
+    ].join("\n");
+    return Bun.spawn({
+      cmd: [
+        "bun",
+        "--watch",
+        "--define",
+        `import.meta.publicDir:"${config.publicDir}"`,
+        "--define",
+        `import.meta.command:"serve"`,
+        "--eval",
+        js,
+      ],
+      stdio: ["inherit", "inherit", "inherit"],
+      cwd: config.rootDir,
+    });
+  };
+
+  devServer.listen = async (port, isRestart) => {
+    const res = await ogListen(port, isRestart);
+    serverProcess = startServer();
+    return res;
+  };
+  devServer.close = async () => {
+    void ogClose();
+    serverProcess?.kill("SIGINT");
+  };
+
+  return devServer;
+}

package/src/index.ts

@@ -1,4 +1,3 @@
-import Prerenderer from "@prerenderer/prerenderer";
 import type { BunPlugin } from "bun";
 import { lstatSync } from "node:fs";
 import { mkdir, rm, writeFile } from "node:fs/promises";
@@ -7,14 +6,10 @@ import * as vite from "vite";
 import { BLUE, BOLD, CYAN, DIM, GREEN, MAGENTA, RESET } from "./color";
 import type { ResolvedConfig } from "./config";
 import { createTimer } from "./timer";
+import { prerenderPages } from "./prerenderer";
 
 export * from "./config";
-
-export async function createServer(
-  config: ResolvedConfig,
-): Promise<vite.ViteDevServer> {
-  return await vite.createServer(config.vite);
-}
+export * from "./dev-server";
 
 export async function build(config: ResolvedConfig) {
   const buildTimer = createTimer();
@@ -62,34 +57,7 @@ export async function build(config: ResolvedConfig) {
         .map((route) => `  ${DIM}-${RESET} ${CYAN}${route}${RESET}`)
         .join("\n"),
   );
-  const prerenderer = new Prerenderer(await config.prerenderer());
-  const prerendered = await prerenderer
-    .initialize()
-    .then(() =>
-      prerenderer.renderRoutes(
-        config.prerenderedRoutes.map((route) => `${route}?prerender`),
-      ),
-    )
-    .then((renderedRoutes) =>
-      Promise.all(
-        renderedRoutes.map(async (route) => {
-          const dir = join(config.prerenderToDir, route.route);
-          const file = join(dir, "index.html");
-          await mkdir(dir, { recursive: true });
-          await writeFile(file, route.html.trim());
-          return {
-            ...route,
-            file,
-          };
-        }),
-      ),
-    )
-    .catch((err) => {
-      throw err;
-    })
-    .finally(() => {
-      prerenderer.destroy();
-    });
+  const prerendered = await prerenderPages(config);
   console.log(`${GREEN}✔${RESET} Prerendered in ${prerenderTimer()}`);
 
   console.log();

package/src/prerenderer.ts

@@ -0,0 +1,63 @@
+import {} from "node:url";
+import { join } from "node:path";
+import { mkdir, writeFile } from "node:fs/promises";
+import type { Browser } from "puppeteer";
+import { createServer } from "./dev-server";
+import type { ResolvedConfig } from "./config";
+
+export type PrerenderedRoute = {
+  route: string;
+  file: string;
+};
+
+export async function prerenderPages(
+  config: ResolvedConfig,
+): Promise<PrerenderedRoute[]> {
+  const puppeteer = await import("puppeteer");
+  const timeout = config.prerenderer.timeout ?? 30e3;
+
+  const server = await createServer(config);
+  await server.listen();
+
+  const results: PrerenderedRoute[] = [];
+  let browser: Browser | undefined;
+
+  try {
+    browser = await puppeteer.launch({
+      headless: false,
+      timeout,
+    });
+    for (const route of config.prerenderedRoutes) {
+      const url = new URL(route, `http://localhost:${config.appPort}`);
+      const page = await browser.newPage();
+      page.setDefaultTimeout(timeout);
+      page.setDefaultNavigationTimeout(timeout);
+      await page.goto(url.href);
+      if (config.prerenderer.waitForSelector) {
+        await page.waitForSelector(config.prerenderer.waitForSelector, {
+          visible: config.prerenderer.waitForSelectorVisible,
+        });
+      } else if (config.prerenderer.waitForTimeout != null) {
+        await new Promise((res) =>
+          setTimeout(res, config.prerenderer.waitForTimeout),
+        );
+      }
+
+      const html = await page.content();
+      await page.close();
+
+      const dir = join(config.appOutDir, route.substring(1));
+      const file = join(dir, "index.html");
+      await mkdir(dir, { recursive: true });
+      await writeFile(file, html);
+      results.push({
+        file,
+        route,
+      });
+    }
+  } finally {
+    await Promise.allSettled([server.close(), browser?.close()]);
+  }
+
+  return results;
+}