@epoch32/visage 0.0.0-stage → 0.0.0

package/dist/vite/index.js

@@ -0,0 +1,707 @@
+// src/vite/hmr.ts
+function transformHmr(code, id) {
+  if (!/\.[jt]sx$/.test(id) || id.includes("node_modules")) {
+    return null;
+  }
+  const hasExports = /\bexport\s+(?:default\s+)?(?:function|const|class)\s+([A-Z][A-Za-z0-9_]*)/.test(code) || /\bexport\s+\{\s*([A-Za-z0-9_,\s]+)\s*\}/.test(code);
+  if (!hasExports) {
+    return null;
+  }
+  const hmrFooter = `
+/* @visage/vite-hmr */
+if (import.meta.hot) {
+  import.meta.hot.accept((newMod) => {
+    if (newMod) {
+      // Re-trigger reactive components without wiping signal stores
+      if (typeof window !== "undefined" && (window as any).__VISAGE_DEVTOOLS__) {
+        (window as any).__VISAGE_DEVTOOLS__.refresh?.();
+      }
+    }
+  });
+}
+`;
+  return {
+    code: `${code}
+${hmrFooter}`,
+    map: null
+  };
+}
+
+// src/rpc/error.ts
+var ERROR_CODE_TO_STATUS = {
+  BAD_REQUEST: 400,
+  UNAUTHORIZED: 401,
+  FORBIDDEN: 403,
+  NOT_FOUND: 404,
+  METHOD_NOT_ALLOWED: 405,
+  TIMEOUT: 408,
+  CONFLICT: 409,
+  UNPROCESSABLE_CONTENT: 422,
+  INTERNAL_SERVER_ERROR: 500
+};
+class RPCError extends Error {
+  code;
+  status;
+  issues;
+  constructor(options) {
+    super(options.message ?? options.code, { cause: options.cause });
+    this.name = "RPCError";
+    this.code = options.code;
+    this.status = ERROR_CODE_TO_STATUS[options.code] ?? 500;
+    this.issues = options.issues;
+  }
+}
+
+// src/form/schema.ts
+class Schema {
+  "~standard" = {
+    version: 1,
+    vendor: "visage",
+    validate: (val) => {
+      const res = this.validate(val);
+      if (res.success) {
+        return { value: res.data };
+      }
+      return {
+        issues: (res.issues || []).map((i) => ({
+          path: [i.path],
+          message: i.message
+        }))
+      };
+    }
+  };
+}
+function validateWithSchema(schema, value, path = "") {
+  if (!schema)
+    return { success: true, data: value };
+  if (schema instanceof Schema) {
+    return schema.validate(value, path);
+  }
+  if (typeof schema === "object" && "~standard" in schema) {
+    const res = schema["~standard"].validate(value);
+    if ("value" in res) {
+      return { success: true, data: res.value };
+    }
+    return {
+      success: false,
+      issues: res.issues.map((i) => ({
+        path: i.path ? i.path.join(".") : path,
+        message: i.message
+      }))
+    };
+  }
+  if (typeof schema === "function") {
+    const res = schema(value);
+    if (res === true || res === null || res === undefined) {
+      return { success: true, data: value };
+    }
+    if (typeof res === "string") {
+      return { success: false, issues: [{ path, message: res }] };
+    }
+    if (typeof res === "object") {
+      return res;
+    }
+  }
+  return { success: true, data: value };
+}
+
+// src/rpc/procedure.ts
+async function executeProcedure(procedure, opts) {
+  let input = opts.rawInput;
+  if (procedure.inputSchema) {
+    const res = validateWithSchema(procedure.inputSchema, opts.rawInput);
+    if (!res.success) {
+      throw new RPCError({
+        code: "BAD_REQUEST",
+        message: "Invalid procedure input",
+        issues: res.issues
+      });
+    }
+    input = res.data;
+  }
+  let currentIndex = 0;
+  let currentContext = opts.ctx;
+  const runPipeline = async (ctx) => {
+    currentContext = ctx;
+    if (currentIndex < procedure.middlewares.length) {
+      const mw = procedure.middlewares[currentIndex++];
+      return mw({
+        ctx: currentContext,
+        req: opts.req,
+        signal: opts.signal,
+        next: async (nextOpts) => {
+          return runPipeline(nextOpts?.ctx ?? currentContext);
+        }
+      });
+    }
+    return procedure.resolve({
+      input,
+      ctx: currentContext,
+      req: opts.req,
+      signal: opts.signal
+    });
+  };
+  const output = await runPipeline(currentContext);
+  if (procedure.outputSchema && procedure.type !== "subscription") {
+    const res = validateWithSchema(procedure.outputSchema, output);
+    if (!res.success) {
+      throw new RPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: "Invalid procedure output",
+        issues: res.issues
+      });
+    }
+    return res.data;
+  }
+  return output;
+}
+
+// src/rpc/server.ts
+function getCORSHeaders(cors, req) {
+  const headers = new Headers;
+  if (!cors)
+    return headers;
+  const opts = typeof cors === "object" ? cors : {};
+  const originHeader = req.headers.get("origin") ?? "*";
+  let allowOrigin = "*";
+  if (typeof opts.origin === "function") {
+    const res = opts.origin(originHeader);
+    if (typeof res === "string")
+      allowOrigin = res;
+    else if (res)
+      allowOrigin = originHeader;
+  } else if (typeof opts.origin === "string") {
+    allowOrigin = opts.origin;
+  } else if (Array.isArray(opts.origin)) {
+    if (opts.origin.includes(originHeader))
+      allowOrigin = originHeader;
+  } else {
+    allowOrigin = originHeader || "*";
+  }
+  headers.set("Access-Control-Allow-Origin", allowOrigin);
+  headers.set("Access-Control-Allow-Methods", (opts.methods ?? ["GET", "POST", "OPTIONS", "HEAD"]).join(", "));
+  headers.set("Access-Control-Allow-Headers", (opts.allowedHeaders ?? ["Content-Type", "Authorization", "X-Requested-With"]).join(", "));
+  if (opts.exposedHeaders) {
+    headers.set("Access-Control-Expose-Headers", opts.exposedHeaders.join(", "));
+  }
+  if (opts.credentials) {
+    headers.set("Access-Control-Allow-Credentials", "true");
+  }
+  if (opts.maxAge !== undefined) {
+    headers.set("Access-Control-Max-Age", opts.maxAge.toString());
+  }
+  return headers;
+}
+function resolveProcedureFromPath(router, path) {
+  const parts = path.split(/[./]/).filter(Boolean);
+  let current = router._def.record;
+  for (let i = 0;i < parts.length; i++) {
+    const part = parts[i];
+    if (!current || typeof current !== "object") {
+      throw new RPCError({
+        code: "NOT_FOUND",
+        message: `Procedure '${path}' not found`
+      });
+    }
+    if (i === parts.length - 1) {
+      if (part in current && "type" in current[part]) {
+        return current[part];
+      }
+      throw new RPCError({
+        code: "NOT_FOUND",
+        message: `Procedure '${path}' not found`
+      });
+    }
+    if (part in current && "_def" in current[part]) {
+      current = current[part]._def.record;
+    } else if (part in current && typeof current[part] === "object") {
+      current = current[part];
+    } else {
+      throw new RPCError({
+        code: "NOT_FOUND",
+        message: `Procedure '${path}' not found`
+      });
+    }
+  }
+  throw new RPCError({
+    code: "NOT_FOUND",
+    message: `Procedure '${path}' not found`
+  });
+}
+function matchesRulePattern(pattern, urlPath, procedurePath) {
+  if (pattern === "*")
+    return true;
+  const cleanUrl = urlPath.replace(/^\/+|\/+$/g, "");
+  const cleanPattern = pattern.replace(/^\/+|\/+$/g, "");
+  const cleanProc = procedurePath.replace(/^\/+|\/+$/g, "");
+  if (cleanUrl === cleanPattern || cleanProc === cleanPattern || cleanProc === cleanPattern.replace(/\//g, ".")) {
+    return true;
+  }
+  if (cleanPattern.endsWith("*")) {
+    const prefix = cleanPattern.slice(0, -1);
+    if (cleanUrl.startsWith(prefix) || cleanProc.startsWith(prefix)) {
+      return true;
+    }
+    const dotPrefix = prefix.replace(/\//g, ".");
+    if (cleanProc.startsWith(dotPrefix)) {
+      return true;
+    }
+  }
+  try {
+    const regexStr = cleanPattern.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, ".*");
+    const regex = new RegExp(`^${regexStr}$`);
+    return regex.test(cleanUrl) || regex.test(cleanProc);
+  } catch {
+    return false;
+  }
+}
+function createFetchHandler(options) {
+  const {
+    router,
+    endpoint = "",
+    createContext,
+    onError,
+    cors = true,
+    securityHeaders = true,
+    rules
+  } = options;
+  return async (request, ...extra) => {
+    const corsHeaders = getCORSHeaders(cors, request);
+    if (request.method === "OPTIONS") {
+      return new Response(null, {
+        status: 204,
+        headers: corsHeaders
+      });
+    }
+    const baseHeaders = new Headers(corsHeaders);
+    if (securityHeaders) {
+      if (typeof securityHeaders === "object") {
+        for (const [k, v] of Object.entries(securityHeaders)) {
+          baseHeaders.set(k, v);
+        }
+      } else {
+        baseHeaders.set("X-Content-Type-Options", "nosniff");
+      }
+    }
+    const url = new URL(request.url);
+    let pathname = url.pathname;
+    if (endpoint && pathname.startsWith(endpoint)) {
+      pathname = pathname.slice(endpoint.length);
+    }
+    pathname = pathname.replace(/^\/+|\/+$/g, "");
+    const procedurePath = pathname || url.searchParams.get("procedure") || "";
+    let ctx = {};
+    try {
+      if (createContext) {
+        ctx = await createContext({ req: request, extra });
+      }
+    } catch (err) {
+      const error = err instanceof RPCError ? err : new RPCError({
+        code: "UNAUTHORIZED",
+        message: err.message ?? "Context initialization failed",
+        cause: err
+      });
+      onError?.({ error, req: request });
+      baseHeaders.set("Content-Type", "application/json");
+      return new Response(JSON.stringify({
+        error: {
+          code: error.code,
+          message: error.message,
+          issues: error.issues
+        }
+      }), {
+        status: error.status,
+        headers: baseHeaders
+      });
+    }
+    const rulesList = [];
+    if (rules) {
+      if (Array.isArray(rules)) {
+        rulesList.push(...rules);
+      } else {
+        for (const [match, rule] of Object.entries(rules)) {
+          rulesList.push({ match, ...rule });
+        }
+      }
+    }
+    const matchingRules = rulesList.filter((r) => matchesRulePattern(r.match, url.pathname, procedurePath));
+    for (const rule of matchingRules) {
+      if (rule.requireHeaders) {
+        for (const headerName of rule.requireHeaders) {
+          if (!request.headers.get(headerName)) {
+            const error = new RPCError({
+              code: "UNAUTHORIZED",
+              message: `Missing required header '${headerName}' for rule '${rule.match}'`
+            });
+            onError?.({ error, path: procedurePath, req: request });
+            baseHeaders.set("Content-Type", "application/json");
+            return new Response(JSON.stringify({
+              error: {
+                code: error.code,
+                message: error.message
+              }
+            }), {
+              status: 401,
+              headers: baseHeaders
+            });
+          }
+        }
+      }
+      if (rule.requireParams) {
+        for (const paramName of rule.requireParams) {
+          if (!url.searchParams.has(paramName)) {
+            const error = new RPCError({
+              code: "BAD_REQUEST",
+              message: `Missing required query parameter '${paramName}' for rule '${rule.match}'`
+            });
+            onError?.({ error, path: procedurePath, req: request });
+            baseHeaders.set("Content-Type", "application/json");
+            return new Response(JSON.stringify({
+              error: {
+                code: error.code,
+                message: error.message
+              }
+            }), {
+              status: 400,
+              headers: baseHeaders
+            });
+          }
+        }
+      }
+      if (rule.guard) {
+        try {
+          const guardResult = await rule.guard({ req: request, ctx, path: procedurePath });
+          if (guardResult === false) {
+            throw new RPCError({
+              code: "UNAUTHORIZED",
+              message: `Access denied by route rule guard for '${rule.match}'`
+            });
+          }
+        } catch (err) {
+          const error = err instanceof RPCError ? err : new RPCError({
+            code: "UNAUTHORIZED",
+            message: err.message ?? "Unauthorized",
+            cause: err
+          });
+          onError?.({ error, path: procedurePath, req: request });
+          baseHeaders.set("Content-Type", "application/json");
+          return new Response(JSON.stringify({
+            error: {
+              code: error.code,
+              message: error.message
+            }
+          }), {
+            status: error.status,
+            headers: baseHeaders
+          });
+        }
+      }
+      if (rule.headers) {
+        const resHeaders = typeof rule.headers === "function" ? await rule.headers(request, ctx) : rule.headers;
+        for (const [k, v] of Object.entries(resHeaders)) {
+          baseHeaders.set(k, v);
+        }
+      }
+    }
+    if (request.method === "POST" && (!pathname || pathname === "batch")) {
+      try {
+        const body = await request.json();
+        if (Array.isArray(body)) {
+          const batchResults = await Promise.all(body.map(async (item) => {
+            try {
+              const proc = resolveProcedureFromPath(router, item.path);
+              const data = await executeProcedure(proc, {
+                rawInput: item.input,
+                ctx,
+                req: request,
+                signal: request.signal
+              });
+              return {
+                id: item.id,
+                result: { data }
+              };
+            } catch (err) {
+              const error = err instanceof RPCError ? err : new RPCError({
+                code: "INTERNAL_SERVER_ERROR",
+                message: err.message ?? "Internal Server Error",
+                cause: err
+              });
+              onError?.({ error, path: item.path, req: request });
+              return {
+                id: item.id,
+                error: {
+                  code: error.code,
+                  message: error.message,
+                  issues: error.issues
+                }
+              };
+            }
+          }));
+          baseHeaders.set("Content-Type", "application/json");
+          return new Response(JSON.stringify(batchResults), {
+            status: 200,
+            headers: baseHeaders
+          });
+        }
+      } catch (err) {
+        const error = new RPCError({
+          code: "BAD_REQUEST",
+          message: "Malformed batch request body",
+          cause: err
+        });
+        baseHeaders.set("Content-Type", "application/json");
+        return new Response(JSON.stringify({
+          error: {
+            code: error.code,
+            message: error.message
+          }
+        }), {
+          status: 400,
+          headers: baseHeaders
+        });
+      }
+    }
+    try {
+      const procedure = resolveProcedureFromPath(router, procedurePath);
+      if (procedure.type === "mutation" && request.method !== "POST") {
+        throw new RPCError({
+          code: "METHOD_NOT_ALLOWED",
+          message: "Mutations must use POST method"
+        });
+      }
+      let rawInput;
+      if (request.method === "GET") {
+        const inputParam = url.searchParams.get("input");
+        if (inputParam !== null) {
+          try {
+            rawInput = JSON.parse(inputParam);
+          } catch {
+            rawInput = inputParam;
+          }
+        }
+      } else if (request.method === "POST") {
+        try {
+          const body = await request.json();
+          rawInput = body && typeof body === "object" && "input" in body ? body.input : body;
+        } catch {
+          rawInput = undefined;
+        }
+      }
+      if (procedure.type === "subscription") {
+        const iterable = await executeProcedure(procedure, {
+          rawInput,
+          ctx,
+          req: request,
+          signal: request.signal
+        });
+        if (!iterable || typeof iterable[Symbol.asyncIterator] !== "function") {
+          throw new RPCError({
+            code: "INTERNAL_SERVER_ERROR",
+            message: "Subscription procedure must return an AsyncIterable"
+          });
+        }
+        const encoder = new TextEncoder;
+        const stream = new ReadableStream({
+          async start(controller) {
+            try {
+              for await (const chunk of iterable) {
+                if (request.signal.aborted)
+                  break;
+                const message = `data: ${JSON.stringify(chunk)}
+
+`;
+                controller.enqueue(encoder.encode(message));
+              }
+              controller.close();
+            } catch (err) {
+              const errorMessage = `event: error
+data: ${JSON.stringify({ message: err.message ?? "Stream error" })}
+
+`;
+              controller.enqueue(encoder.encode(errorMessage));
+              controller.close();
+            }
+          },
+          cancel() {
+            if (typeof iterable.return === "function") {
+              iterable.return();
+            }
+          }
+        });
+        baseHeaders.set("Content-Type", "text/event-stream; charset=utf-8");
+        baseHeaders.set("Cache-Control", "no-cache, no-transform");
+        baseHeaders.set("Connection", "keep-alive");
+        return new Response(stream, {
+          status: 200,
+          headers: baseHeaders
+        });
+      }
+      const data = await executeProcedure(procedure, {
+        rawInput,
+        ctx,
+        req: request,
+        signal: request.signal
+      });
+      const responsePayload = {
+        result: { data }
+      };
+      baseHeaders.set("Content-Type", "application/json");
+      return new Response(JSON.stringify(responsePayload), {
+        status: 200,
+        headers: baseHeaders
+      });
+    } catch (err) {
+      const error = err instanceof RPCError ? err : new RPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: err.message ?? "Internal Server Error",
+        cause: err
+      });
+      onError?.({ error, path: procedurePath, req: request });
+      const responsePayload = {
+        error: {
+          code: error.code,
+          message: error.message,
+          issues: error.issues
+        }
+      };
+      baseHeaders.set("Content-Type", "application/json");
+      return new Response(JSON.stringify(responsePayload), {
+        status: ERROR_CODE_TO_STATUS[error.code] ?? 500,
+        headers: baseHeaders
+      });
+    }
+  };
+}
+
+// src/vite/rpc-middleware.ts
+function createViteRpcMiddleware(options) {
+  const endpoint = options.endpoint ?? "/api/rpc";
+  const handler = createFetchHandler({
+    router: options.router,
+    endpoint,
+    cors: true
+  });
+  return async (req, res, next) => {
+    const url = req.url || "";
+    if (!url.startsWith(endpoint)) {
+      return next();
+    }
+    try {
+      const chunks = [];
+      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;
+      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
+      });
+      const webRes = await handler(webReq);
+      res.statusCode = webRes.status;
+      webRes.headers.forEach((val, key) => {
+        res.setHeader(key, val);
+      });
+      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) {
+      res.statusCode = 500;
+      res.setHeader("Content-Type", "application/json");
+      res.end(JSON.stringify({ error: err?.message || "Internal Server Error" }));
+    }
+  };
+}
+
+// src/vite/plugin.ts
+function visage(options = {}) {
+  const isDev = typeof process !== "undefined" ? process.env?.NODE_ENV !== "production" : true;
+  const configPlugin = {
+    name: "visage:config",
+    config(_userConfig, { command }) {
+      return {
+        esbuild: {
+          jsx: "automatic",
+          jsxImportSource: "visage",
+          jsxDev: command === "serve"
+        },
+        optimizeDeps: {
+          include: [
+            "visage",
+            "visage/signals",
+            "visage/dom",
+            "visage/query",
+            "visage/rpc",
+            "visage/style",
+            "visage/router",
+            "visage/form",
+            "visage/virtual",
+            "visage/devtools"
+          ]
+        },
+        resolve: {
+          dedupe: ["visage"]
+        }
+      };
+    }
+  };
+  const transformPlugin = {
+    name: "visage:transform",
+    transform(code, id) {
+      if (options.hmr !== false && isDev) {
+        return transformHmr(code, id);
+      }
+      return null;
+    }
+  };
+  const devServerPlugin = {
+    name: "visage:server",
+    apply: "serve",
+    configureServer(server) {
+      if (options.rpc) {
+        server.middlewares.use(createViteRpcMiddleware(options.rpc));
+      }
+    },
+    transformIndexHtml(html) {
+      if (options.devtools === false || !isDev) {
+        return html;
+      }
+      if (!html.includes('name="visage-devtools"')) {
+        return html.replace("<head>", `<head>
+    <meta name="visage-devtools" content="enabled" />`);
+      }
+      return html;
+    }
+  };
+  return [configPlugin, transformPlugin, devServerPlugin];
+}
+var plugin_default = visage;
+export {
+  plugin_default as default,
+  visage
+};