Refactor Vite integration and update docs

Introduced a Vite adapter with "fresh" and "cached" modes, centralized dev server configuration, and streamlined the example setup. Updated documentation with detailed steps for Vite integration and revised the internal dev environment to align with the changes.

app/src/adapter/vite/dev-server-config.ts

@@ -0,0 +1,14 @@
+export const devServerConfig = {
+   entry: "./server.ts",
+   exclude: [
+      /.*\.tsx?($|\?)/,
+      /^(?!.*\/__admin).*\.(s?css|less)($|\?)/,
+      // exclude except /api
+      /^(?!.*\/api).*\.(ico|mp4|jpg|jpeg|svg|png|vtt|mp3|js)($|\?)/,
+      /^\/@.+$/,
+      /\/components.*?\.json.*/, // @todo: improve
+      /^\/(public|assets|static)\/.+/,
+      /^\/node_modules\/.*/
+   ] as any,
+   injectClientScript: false
+} as const;

app/src/adapter/vite/vite.adapter.ts

@@ -2,8 +2,10 @@ import { serveStatic } from "@hono/node-server/serve-static";
 import { type DevServerOptions, default as honoViteDevServer } from "@hono/vite-dev-server";
 import { type RuntimeBkndConfig, createRuntimeApp } from "adapter";
 import type { App } from "bknd";
+import { devServerConfig } from "./dev-server-config";
 
 export type ViteBkndConfig<Env = any> = RuntimeBkndConfig<Env> & {
+   mode?: "cached" | "fresh";
    setAdminHtml?: boolean;
    forceDev?: boolean | { mainPath: string };
    html?: string;
@@ -29,6 +31,7 @@ async function createApp(config: ViteBkndConfig = {}, env?: any) {
    return await createRuntimeApp(
       {
          ...config,
+         registerLocalMedia: true,
          adminOptions:
             config.setAdminHtml === false
                ? undefined
@@ -44,7 +47,7 @@ async function createApp(config: ViteBkndConfig = {}, env?: any) {
    );
 }
 
-export function serveFresh(config: ViteBkndConfig = {}) {
+export function serveFresh(config: Omit<ViteBkndConfig, "mode"> = {}) {
    return {
       async fetch(request: Request, env: any, ctx: ExecutionContext) {
          const app = await createApp(config, env);
@@ -54,7 +57,7 @@ export function serveFresh(config: ViteBkndConfig = {}) {
 }
 
 let app: App;
-export function serveCached(config: ViteBkndConfig = {}) {
+export function serveCached(config: Omit<ViteBkndConfig, "mode"> = {}) {
    return {
       async fetch(request: Request, env: any, ctx: ExecutionContext) {
          if (!app) {
@@ -66,20 +69,13 @@ export function serveCached(config: ViteBkndConfig = {}) {
    };
 }
 
+export function serve({ mode, ...config }: ViteBkndConfig = {}) {
+   return mode === "fresh" ? serveFresh(config) : serveCached(config);
+}
+
 export function devServer(options: DevServerOptions) {
    return honoViteDevServer({
-      entry: "./server.ts",
-      exclude: [
-         /.*\.tsx?($|\?)/,
-         /^(?!.*\/__admin).*\.(s?css|less)($|\?)/,
-         // exclude except /api
-         /^(?!.*\/api).*\.(ico|mp4|jpg|jpeg|svg|png|vtt|mp3|js)($|\?)/,
-         /^\/@.+$/,
-         /\/components.*?\.json.*/, // @todo: improve
-         /^\/(public|assets|static)\/.+/,
-         /^\/node_modules\/.*/
-      ],
-      injectClientScript: false,
+      ...devServerConfig,
       ...options
    });
 }

app/vite.config.ts

@@ -1,48 +1,29 @@
 import devServer from "@hono/vite-dev-server";
 import react from "@vitejs/plugin-react";
-import { defineConfig, loadEnv } from "vite";
+import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { devServerConfig } from "./src/adapter/vite/dev-server-config";
 
 // https://vitejs.dev/config/
-export default defineConfig(async () => {
-   /**
-    * DEVELOPMENT MODE
-    */
-   if (process.env.NODE_ENV === "development") {
-      return {
-         define: {
-            __isDev: "1"
-         },
-         clearScreen: false,
-         publicDir: "./src/admin/assets",
-         server: {
-            host: true,
-            port: 28623,
-            hmr: {
-               overlay: true
-            }
-         },
-         plugins: [
-            react(),
-            tsconfigPaths(),
-            devServer({
-               entry: "./vite.dev.ts",
-               exclude: [
-                  // We need to override this option since the default setting doesn't fit
-                  /.*\.tsx?($|\?)/,
-                  /^(?!.*\/__admin).*\.(s?css|less)($|\?)/,
-                  /^(?!.*\/api).*\.(svg|png)($|\?)/, // exclude except /api
-                  /^\/@.+$/,
-                  /^\/favicon\.ico$/,
-                  /^\/(public|assets|static)\/.+/,
-                  /^\/node_modules\/.*/
-               ],
-               //injectClientScript: true
-               injectClientScript: false // This option is buggy, disable it and inject the code manually
-            })
-         ]
-      };
-   }
-
-   throw new Error("Don't use vite for building in production");
+export default defineConfig({
+   define: {
+      __isDev: "1"
+   },
+   clearScreen: false,
+   publicDir: "./src/admin/assets",
+   server: {
+      host: true,
+      port: 28623,
+      hmr: {
+         overlay: true
+      }
+   },
+   plugins: [
+      react(),
+      tsconfigPaths(),
+      devServer({
+         ...devServerConfig,
+         entry: "./vite.dev.ts"
+      })
+   ]
 });

app/vite.dev.ts

@@ -1,10 +1,4 @@
-import { serveStatic } from "@hono/node-server/serve-static";
-import { createClient } from "@libsql/client/node";
-import { App, registries } from "./src";
-import { LibsqlConnection } from "./src/data";
-import { StorageLocalAdapter } from "./src/media/storage/adapters/StorageLocalAdapter";
-
-registries.media.register("local", StorageLocalAdapter);
+import { serve } from "./src/adapter/vite";
 
 const credentials = {
    url: import.meta.env.VITE_DB_URL!,
@@ -14,22 +8,10 @@ if (!credentials.url) {
    throw new Error("Missing VITE_DB_URL env variable. Add it to .env file");
 }
 
-const connection = new LibsqlConnection(createClient(credentials));
-
-export default {
-   async fetch(request: Request) {
-      const app = App.create({ connection });
-
-      app.emgr.onEvent(
-         App.Events.AppBuiltEvent,
-         async () => {
-            app.registerAdminController({ forceDev: true });
-            app.module.server.client.get("/assets/*", serveStatic({ root: "./" }));
-         },
-         "sync"
-      );
-      await app.build();
-
-      return app.fetch(request);
-   }
-};
+export default serve({
+   connection: {
+      type: "libsql",
+      config: credentials
+   },
+   forceDev: true
+});