@epoch32/visage 0.0.0-stage → 1.0.0

package/src/vite/plugin.ts

@@ -0,0 +1,102 @@
+import { transformHmr } from "./hmr";
+import { createViteRpcMiddleware } from "./rpc-middleware";
+import type { VisagePluginOptions, VisageVitePlugin } from "./types";
+
+/**
+ * Official Visage Vite Plugin
+ *
+ * Provides zero-configuration JSX compilation, Hot Module Replacement (HMR),
+ * DevTools auto-injection, and full-stack RPC development server middleware.
+ *
+ * Example:
+ * ```ts
+ * // vite.config.ts
+ * import { defineConfig } from "vite";
+ * import visage from "visage/vite";
+ *
+ * export default defineConfig({
+ *   plugins: [visage()]
+ * });
+ * ```
+ */
+declare const process: any;
+
+export function visage(options: VisagePluginOptions = {}): VisageVitePlugin[] {
+  const isDev = typeof process !== "undefined" ? process.env?.NODE_ENV !== "production" : true;
+
+  const configPlugin: VisageVitePlugin = {
+    name: "visage:config",
+    config(_userConfig, { command }) {
+      return {
+        esbuild: {
+          jsx: "automatic",
+          jsxImportSource: "visage"
+        },
+        oxc: {
+          jsx: {
+            runtime: "automatic",
+            importSource: "visage",
+            development: command === "serve"
+          }
+        },
+        optimizeDeps: {
+          exclude: [
+            "@epoch32/visage",
+            "visage",
+            "visage/signals",
+            "visage/dom",
+            "visage/query",
+            "visage/rpc",
+            "visage/style",
+            "visage/router",
+            "visage/form",
+            "visage/virtual",
+            "visage/devtools",
+            "visage/api",
+            "visage/charts"
+          ]
+        },
+        resolve: {
+          dedupe: ["@epoch32/visage", "visage"]
+        }
+      };
+    }
+  };
+
+  const transformPlugin: VisageVitePlugin = {
+    name: "visage:transform",
+    transform(code: string, id: string) {
+      if (options.hmr !== false && isDev) {
+        return transformHmr(code, id);
+      }
+      return null;
+    }
+  };
+
+  const devServerPlugin: VisageVitePlugin = {
+    name: "visage:server",
+    apply: "serve",
+    configureServer(server) {
+      if (options.rpc) {
+        server.middlewares.use(createViteRpcMiddleware(options.rpc));
+      }
+    },
+    transformIndexHtml(html: string) {
+      if (options.devtools === false || !isDev) {
+        return html;
+      }
+      // Inject DevTools hint meta
+      if (!html.includes('name="visage-devtools"')) {
+        return html.replace(
+          "<head>",
+          '<head>\n    <meta name="visage-devtools" content="enabled" />'
+        );
+      }
+      return html;
+    }
+  };
+
+  return [configPlugin, transformPlugin, devServerPlugin];
+}
+
+export default visage;

package/src/vite/rpc-middleware.ts

@@ -0,0 +1,82 @@
+import { createFetchHandler } from "../rpc/server";
+import type { VisagePluginOptions } from "./types";
+
+declare const Buffer: any;
+
+/**
+ * Attach Visage RPC handler to Vite's Connect dev server middleware
+ */
+export function createViteRpcMiddleware(options: NonNullable<VisagePluginOptions["rpc"]>) {
+  const endpoint = options.endpoint ?? "/api/rpc";
+  const handler = createFetchHandler({
+    router: options.router,
+    endpoint,
+    cors: true
+  });
+
+  return async (req: any, res: any, next: () => void) => {
+    const url = req.url || "";
+    if (!url.startsWith(endpoint)) {
+      return next();
+    }
+
+    try {
+      // 1. Read request body if present
+      const chunks: any[] = [];
+      for await (const chunk of req) {
+        chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
+      }
+      const rawBody = chunks.length > 0 ? Buffer.concat(chunks).toString("utf-8") : undefined;
+
+      // 2. Construct standard Web Request
+      const protocol = req.headers["x-forwarded-proto"] || "http";
+      const host = req.headers.host || "localhost";
+      const fullUrl = `${protocol}://${host}${url}`;
+
+      const headers = new Headers();
+      for (const [k, v] of Object.entries(req.headers)) {
+        if (v !== undefined) {
+          if (Array.isArray(v)) {
+            for (const item of v) headers.append(k, item);
+          } else {
+            headers.set(k, String(v));
+          }
+        }
+      }
+
+      const webReq = new Request(fullUrl, {
+        method: req.method,
+        headers,
+        body: req.method !== "GET" && req.method !== "HEAD" ? rawBody : undefined
+      });
+
+      // 3. Execute Visage RPC handler
+      const webRes = await handler(webReq);
+
+      // 4. Send response back through Connect/Vite res
+      res.statusCode = webRes.status;
+      webRes.headers.forEach((val, key) => {
+        res.setHeader(key, val);
+      });
+
+      // Handle SSE streams or standard bodies
+      const isStream = webRes.headers.get("content-type")?.includes("text/event-stream");
+      if (isStream && webRes.body) {
+        const reader = webRes.body.getReader();
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          res.write(value);
+        }
+        res.end();
+      } else {
+        const text = await webRes.text();
+        res.end(text);
+      }
+    } catch (err: any) {
+      res.statusCode = 500;
+      res.setHeader("Content-Type", "application/json");
+      res.end(JSON.stringify({ error: err?.message || "Internal Server Error" }));
+    }
+  };
+}

package/src/vite/types.ts

@@ -0,0 +1,65 @@
+import type { createRouter } from "../rpc/router";
+
+/**
+ * Options for the Visage Vite Plugin
+ */
+export interface VisagePluginOptions {
+  /**
+   * Automatically auto-inject Visage DevTools in development mode
+   * @default true
+   */
+  devtools?: boolean;
+
+  /**
+   * Enable Hot Module Replacement (HMR) with signal state preservation
+   * @default true
+   */
+  hmr?: boolean;
+
+  /**
+   * Extract static <Style> blocks into production CSS bundle
+   * @default true
+   */
+  extractCss?: boolean;
+
+  /**
+   * Enable Server-Side Rendering (SSR) pipeline
+   * @default false
+   */
+  ssr?: boolean;
+
+  /**
+   * Optional full-stack RPC router configuration for Vite dev server middleware
+   */
+  rpc?: {
+    router: ReturnType<typeof createRouter<any>>;
+    endpoint?: string;
+  };
+}
+
+/**
+ * Minimal interface representation of Vite Plugin to ensure zero hard runtime dependencies
+ */
+export interface VisageVitePlugin {
+  name: string;
+  enforce?: "pre" | "post";
+  apply?: "serve" | "build" | ((config: any, env: { command: string; mode: string }) => boolean);
+  config?: (config: any, env: any) => any;
+  configResolved?: (config: any) => void;
+  configureServer?: (server: any) => void | Promise<void>;
+  resolveId?: (
+    source: string,
+    importer?: string,
+    options?: any
+  ) => Promise<string | null | undefined> | string | null | undefined;
+  load?: (
+    id: string,
+    options?: any
+  ) => Promise<string | null | undefined> | string | null | undefined;
+  transform?: (
+    code: string,
+    id: string,
+    options?: { ssr?: boolean }
+  ) => Promise<{ code: string; map?: any } | null> | { code: string; map?: any } | null;
+  transformIndexHtml?: (html: string) => string | Promise<string>;
+}