@aklinker1/aframe 0.1.0 → 0.2.0

package/README.md

@@ -8,14 +8,13 @@ Simple wrapper around Vite for creating pre-rendered, client-side web apps with
 ```html
 📂 {rootDir}/
    📁 app/
-      📄 .env
       📄 index.html
       📄 main.ts
    📁 public/
       📄 favicon.ico
    📁 server/
-      📄 .env
       📄 main.ts
+   📄 .env
    📄 aframe.config.ts
 ```
 
@@ -72,7 +71,7 @@ export default app;
   "scripts": {
     "dev": "aframe",
     "build": "aframe build",
-    "preview": "bun --cwd .output server-entry.js"
+    "preview": "bun --cwd .output --env-file ../.env server-entry.js"
   },
   "dependencies": {
     "@aklinker1/aframe": "@latest",
@@ -83,3 +82,27 @@ export default app;
   }
 }
 ```
+
+## Usage
+
+### Environment
+
+Create a single `.env` file in your project root. `app` secrets must be prefixed with `APP_`, whereas `server` secrets don't need any prefix:
+
+```sh
+# {rootDir}/.env
+APP_DEFAULT_MODEL=gemini-2.0-flash
+OPENAI_API_KEY=...
+```
+
+In this case, you could use `import.meta.env.VITE_DEFAULT_MODEL` in your `app` code and `process.env.OPENAI_API_KEY` in your server code.
+
+### Import files as text
+
+When importing a file as text, like an HTML template or a `.gql` schema, you should use `with { type: "text"
+ }`:
+
+```ts
+// server/main.ts
+import welcomeEmailTemplate from './assets/email-templates/welcome.html' with { type: "text" };
+```

package/bin/aframe.ts

@@ -1,8 +1,9 @@
-import { build, createServer, resolveConfig } from "../src/mod";
+import { build, createServer } from "../src";
+import { resolveConfig } from "../src/config";
 import { RESET, BOLD, DIM, UNDERLINE, GREEN, CYAN } from "../src/color";
 import { createTimer } from "../src/timer";
 
-const [_bun, _aframe, ...args] = Bun.argv;
+const [_bun, _aframe, ...args] = process.argv;
 
 async function dev(root?: string) {
   const devServerTimer = createTimer();
@@ -26,8 +27,8 @@ async function dev(root?: string) {
         "--eval",
         js,
       ],
-      // stdio: ["ignore", "inherit", "inherit"],
-      cwd: config.serverDir,
+      stdio: ["inherit", "inherit", "inherit"],
+      cwd: config.rootDir,
     });
   });
 
@@ -44,7 +45,7 @@ async function dev(root?: string) {
 }
 
 async function help() {
-  console.log("Help");
+  console.log("Help: TODO");
 }
 
 if (args[0] === "build") {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@aklinker1/aframe",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "packageManager": "bun@1.2.2",
   "type": "module",
   "license": "MIT",
   "exports": {
-    ".": "./src/mod.ts",
+    ".": "./src/index.ts",
     "./server": "./src/server.ts",
     "./env": "./src/env.d.ts"
   },
@@ -18,9 +18,9 @@
   ],
   "scripts": {
     "check": "check",
-    "dev": "bun bin/aframe.ts demo",
-    "build": "bun bin/aframe.ts build demo",
-    "preview": "bun --cwd demo/.output server-entry.js"
+    "dev": "bun node_modules/@aklinker1/aframe/bin/aframe.ts demo",
+    "build": "bun node_modules/@aklinker1/aframe/bin/aframe.ts build demo",
+    "preview": "bun --cwd demo/.output --env-file ../.env server-entry.js"
   },
   "dependencies": {},
   "devDependencies": {

package/src/config.ts

@@ -0,0 +1,150 @@
+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?: PrerendererOptions;
+};
+
+export type ResolvedConfig = {
+  rootDir: string;
+  appDir: string;
+  publicDir: string;
+  serverDir: string;
+  serverModule: string;
+  serverEntry: string;
+  prerenderToDir: string;
+  outDir: string;
+  serverOutDir: string;
+  appOutDir: string;
+  appPort: number;
+  serverPort: number;
+  vite: vite.InlineConfig;
+  prerenderedRoutes: string[];
+  prerenderer: () => Promise<PrerendererOptions>;
+};
+
+export function defineConfig(config: UserConfig): UserConfig {
+  return config;
+}
+
+export async function resolveConfig(
+  root: string | undefined,
+  command: "build" | "serve",
+  mode: string,
+): Promise<ResolvedConfig> {
+  const rootDir = root ? resolve(root) : process.cwd();
+  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;
+  const appPort = 3000;
+  const serverPort = 3001;
+
+  // Ensure required directories exist
+  await mkdir(prerenderToDir, { recursive: true });
+
+  const configFile = join(rootDir, "aframe.config"); // No file extension to resolve any JS/TS file
+  const relativeConfigFile = "./" + relative(import.meta.dir, configFile);
+  const { default: userConfig }: { default: UserConfig } = await import(
+    relativeConfigFile
+  );
+
+  let viteConfig = await vite.defineConfig((await userConfig.vite) ?? {});
+  if (typeof viteConfig === "function") {
+    viteConfig = await viteConfig({ command, mode });
+  }
+  // Apply opinionated config that can be overwritten
+
+  viteConfig = vite.mergeConfig<vite.InlineConfig, vite.InlineConfig>(
+    // Defaults
+    {
+      envPrefix: "APP_",
+      build: {
+        emptyOutDir: true,
+      },
+    },
+    // Overrides
+    viteConfig,
+  );
+
+  // Override required config
+  viteConfig = vite.mergeConfig<vite.InlineConfig, vite.InlineConfig>(
+    // Defaults
+    viteConfig,
+    // Overrides
+    {
+      logLevel: "warn",
+      configFile: false,
+      root: appDir,
+      publicDir,
+      envDir: rootDir,
+      build: {
+        outDir: appOutDir,
+      },
+      server: {
+        port: appPort,
+        strictPort: true,
+        proxy: {
+          "/api": {
+            target: `http://localhost:${serverPort}`,
+            changeOrigin: true,
+          },
+        },
+      },
+    },
+  );
+
+  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,
+    publicDir,
+    serverDir,
+    serverModule,
+    serverEntry,
+    outDir,
+    serverOutDir,
+    appOutDir,
+    prerenderToDir,
+    appPort,
+    serverPort,
+
+    prerenderedRoutes: userConfig.prerenderedRoutes ?? ["/"],
+    prerenderer,
+    vite: viteConfig,
+  };
+}
+
+function tryResolve(specifier: string): string | undefined {
+  try {
+    return import.meta.resolve(specifier);
+  } catch {
+    return undefined;
+  }
+}

package/src/{mod.ts → index.ts}

@@ -7,6 +7,9 @@ import { lstatSync } from "node:fs";
 import type { BunPlugin } from "bun";
 import { RESET, DIM, GREEN, BLUE, MAGENTA, CYAN, BOLD } from "./color";
 import { createTimer } from "./timer";
+import { type ResolvedConfig, resolveConfig } from "./config";
+
+export * from "./config";
 
 export async function createServer(
   config: ResolvedConfig,
@@ -145,151 +148,3 @@ function prettyBytes(bytes: number) {
   const value = bytes / Math.pow(base, exponent);
   return `${unit === "B" ? value : value.toFixed(2)} ${unit}`;
 }
-
-///
-/// CONFIG
-///
-
-export type UserConfig = {
-  vite?: vite.UserConfigExport;
-  prerenderedRoutes?: string[];
-  prerenderer?: PrerendererOptions;
-};
-
-export type ResolvedConfig = {
-  rootDir: string;
-  appDir: string;
-  publicDir: string;
-  serverDir: string;
-  serverModule: string;
-  serverEntry: string;
-  prerenderToDir: string;
-  outDir: string;
-  serverOutDir: string;
-  appOutDir: string;
-  appPort: number;
-  serverPort: number;
-  vite: vite.InlineConfig;
-  prerenderedRoutes: string[];
-  prerenderer: () => Promise<PrerendererOptions>;
-};
-
-export function defineConfig(config: UserConfig): UserConfig {
-  return config;
-}
-
-export async function resolveConfig(
-  root: string | undefined,
-  command: "build" | "serve",
-  mode: string,
-): Promise<ResolvedConfig> {
-  const rootDir = root ? resolve(root) : process.cwd();
-  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;
-  const appPort = 3000;
-  const serverPort = 3001;
-
-  // Ensure required directories exist
-  await mkdir(prerenderToDir, { recursive: true });
-
-  const configFile = join(rootDir, "aframe.config"); // No file extension to resolve any JS/TS file
-  const relativeConfigFile = "./" + relative(import.meta.dir, configFile);
-  const { default: userConfig }: { default: UserConfig } = await import(
-    relativeConfigFile
-  );
-
-  let viteConfig = await vite.defineConfig((await userConfig.vite) ?? {});
-  if (typeof viteConfig === "function") {
-    viteConfig = await viteConfig({ command, mode });
-  }
-  // Apply opinionated config that can be overwritten
-
-  viteConfig = vite.mergeConfig<vite.InlineConfig, vite.InlineConfig>(
-    // Defaults
-    {
-      build: {
-        emptyOutDir: true,
-      },
-    },
-    // Overrides
-    viteConfig,
-  );
-
-  // Override required config
-  viteConfig = vite.mergeConfig<vite.InlineConfig, vite.InlineConfig>(
-    // Defaults
-    viteConfig,
-    // Overrides
-    {
-      logLevel: "warn",
-      configFile: false,
-      root: appDir,
-      publicDir,
-      build: {
-        outDir: appOutDir,
-      },
-      server: {
-        port: appPort,
-        strictPort: true,
-        proxy: {
-          "/api": {
-            target: `http://localhost:${serverPort}`,
-            changeOrigin: true,
-          },
-        },
-      },
-    },
-  );
-
-  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,
-    publicDir,
-    serverDir,
-    serverModule,
-    serverEntry,
-    outDir,
-    serverOutDir,
-    appOutDir,
-    prerenderToDir,
-    appPort,
-    serverPort,
-
-    prerenderedRoutes: userConfig.prerenderedRoutes ?? ["/"],
-    prerenderer,
-    vite: viteConfig,
-  };
-}
-
-function tryResolve(specifier: string): string | undefined {
-  try {
-    return import.meta.resolve(specifier);
-  } catch {
-    return undefined;
-  }
-}

package/src/server.ts

@@ -22,9 +22,19 @@ export async function fetchStatic(request: Request): Promise<Response> {
 
 function fetchRootHtml() {
   if (import.meta.command === "serve") {
-    return Response.json(
-      { status: 404, error: "Root index.html not served during development" },
-      { status: 404 },
+    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",
+        },
+      },
     );
   }
 
@@ -33,7 +43,8 @@ function fetchRootHtml() {
 
 async function isFile(file: BunFile): Promise<boolean> {
   try {
-    return (await file.stat()).isFile();
+    const stats = await file.stat();
+    return stats.isFile();
   } catch {
     return false;
   }