@aklinker1/aframe 0.3.0 → 0.4.1

package/README.md

@@ -68,6 +68,11 @@ export default app;
 </html>
 ```
 
+```sh
+bun add elysia @aklinker1/aframe
+bun add -D puppeteer vite
+```
+
 ```jsonc
 // package.json
 {
@@ -75,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.3.0",
-  "packageManager": "bun@1.2.2",
+  "version": "0.4.1",
+  "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/app.ts

@@ -1,6 +1,10 @@
 /**
- * Return's `true` when the app is prerendering (when URL includes `?prerendering`).
+ * Return's `true` when the app is prerendering.
  */
 export function isPrerendering() {
-  return new URL(location.href).searchParams.has("prerendering");
+  return !!globalThis.__AFRAME_PRERENDERING;
+}
+
+declare global {
+  var __AFRAME_PRERENDERING: boolean;
 }

package/src/config.ts

@@ -1,12 +1,28 @@
 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";
+import type { LaunchOptions } from "puppeteer";
 
 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;
+  /** Configure puppeteer's launch options. */
+  launch?: LaunchOptions;
 };
 
 export type ResolvedConfig = {
@@ -24,7 +40,7 @@ export type ResolvedConfig = {
   serverPort: number;
   vite: vite.InlineConfig;
   prerenderedRoutes: string[];
-  prerenderer: () => Promise<PrerendererOptions>;
+  prerenderer: PrerendererConfig;
 };
 
 export function defineConfig(config: UserConfig): UserConfig {
@@ -103,24 +119,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 +134,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,65 @@
+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: true,
+      timeout,
+      ...config.prerenderer.launch,
+    });
+    for (const route of config.prerenderedRoutes) {
+      const url = new URL(route, `http://localhost:${config.appPort}`);
+      const page = await browser.newPage();
+      page.evaluateOnNewDocument(`globalThis.__AFRAME_PRERENDERING = true`);
+      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;
+}