@epoch32/visage 0.0.0 → 1.1.0

package/dist/vite/index.js

@@ -1,3 +1,73 @@
+// src/vite/lucide.ts
+function parseNamedImports(importClause) {
+  return importClause.split(",").map((s) => s.trim()).filter(Boolean).map((item) => {
+    const parts = item.split(/\s+as\s+/).map((p) => p.trim());
+    const importedName = parts[0];
+    const localName = parts[1] ?? importedName;
+    return {
+      raw: item,
+      importedName,
+      localName
+    };
+  });
+}
+function visageLucide(options = {}) {
+  const aliases = options.aliases ?? ["lucide-react"];
+  return {
+    name: "visage:lucide",
+    enforce: "pre",
+    config() {
+      return {
+        optimizeDeps: {
+          exclude: aliases
+        }
+      };
+    },
+    resolveId(id) {
+      if (aliases.includes(id)) {
+        return `\x00visage-lucide:${id}`;
+      }
+      return null;
+    },
+    load(id) {
+      if (id.startsWith("\x00visage-lucide:")) {
+        return "export default {};";
+      }
+      return null;
+    },
+    transform(code, id) {
+      if (!id.match(/\.[jt]sx?$/) || id.includes("node_modules")) {
+        return null;
+      }
+      let transformed = code;
+      let hasMatches = false;
+      for (const alias of aliases) {
+        const regex = new RegExp(`import\\s*\\{([^}]+)\\}\\s*from\\s*['"]${alias}['"];?`, "g");
+        transformed = transformed.replace(regex, (_match, importClause) => {
+          const imports = parseNamedImports(importClause);
+          if (imports.length === 0)
+            return "";
+          hasMatches = true;
+          const lucideNamedImports = imports.map((imp) => `${imp.importedName} as __icon_node_${imp.importedName}`).join(", ");
+          const componentDeclarations = imports.map((imp) => {
+            return `const ${imp.localName} = /* @__PURE__ */ __visageCreateIcon("${imp.importedName}", __icon_node_${imp.importedName});`;
+          }).join(`
+`);
+          return `import { createIcon as __visageCreateIcon } from "visage/ui";
+import { ${lucideNamedImports} } from "lucide";
+${componentDeclarations}`;
+        });
+      }
+      if (!hasMatches) {
+        return null;
+      }
+      return {
+        code: transformed,
+        map: null
+      };
+    }
+  };
+}
 // src/vite/hmr.ts
 function transformHmr(code, id) {
   if (!/\.[jt]sx$/.test(id) || id.includes("node_modules")) {
@@ -13,8 +83,8 @@ 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?.();
+      if (typeof window !== "undefined" && window.__VISAGE_DEVTOOLS__) {
+        window.__VISAGE_DEVTOOLS__.refresh?.();
       }
     }
   });
@@ -22,7 +92,7 @@ if (import.meta.hot) {
 `;
   return {
     code: `${code}
-${hmrFooter}`,
+;${hmrFooter}`,
     map: null
   };
 }
@@ -39,16 +109,46 @@ var ERROR_CODE_TO_STATUS = {
   UNPROCESSABLE_CONTENT: 422,
   INTERNAL_SERVER_ERROR: 500
 };
+var STATUS_TO_ERROR_CODE = {
+  400: "BAD_REQUEST",
+  401: "UNAUTHORIZED",
+  403: "FORBIDDEN",
+  404: "NOT_FOUND",
+  405: "METHOD_NOT_ALLOWED",
+  408: "TIMEOUT",
+  409: "CONFLICT",
+  422: "UNPROCESSABLE_CONTENT",
+  500: "INTERNAL_SERVER_ERROR"
+};
+
 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;
+  constructor(codeOrStatusOrOptions, message) {
+    if (typeof codeOrStatusOrOptions === "number") {
+      const code = STATUS_TO_ERROR_CODE[codeOrStatusOrOptions] || "INTERNAL_SERVER_ERROR";
+      super(message || code);
+      this.name = "RPCError";
+      this.code = code;
+      this.status = codeOrStatusOrOptions;
+    } else if (typeof codeOrStatusOrOptions === "string") {
+      super(message || codeOrStatusOrOptions);
+      this.name = "RPCError";
+      this.code = codeOrStatusOrOptions;
+      this.status = ERROR_CODE_TO_STATUS[codeOrStatusOrOptions] || 500;
+    } else {
+      super(codeOrStatusOrOptions.message ?? codeOrStatusOrOptions.code, {
+        cause: codeOrStatusOrOptions.cause
+      });
+      this.name = "RPCError";
+      this.code = codeOrStatusOrOptions.code;
+      this.status = ERROR_CODE_TO_STATUS[codeOrStatusOrOptions.code] ?? 500;
+      this.issues = codeOrStatusOrOptions.issues;
+    }
+  }
+  get statusCode() {
+    return this.status;
   }
 }
 
@@ -71,6 +171,158 @@ class Schema {
     }
   };
 }
+
+class StringSchema extends Schema {
+  _min;
+  _max;
+  _emailMsg;
+  _regex;
+  _isOptional = false;
+  min(length, message) {
+    this._min = { val: length, msg: message };
+    return this;
+  }
+  max(length, message) {
+    this._max = { val: length, msg: message };
+    return this;
+  }
+  email(message) {
+    this._emailMsg = message ?? "Invalid email address";
+    return this;
+  }
+  regex(pattern, message) {
+    this._regex = { pattern, msg: message };
+    return this;
+  }
+  optional() {
+    this._isOptional = true;
+    return this;
+  }
+  validate(value, path = "") {
+    if (value === undefined || value === null || value === "") {
+      if (this._isOptional)
+        return { success: true, data: undefined };
+      return { success: false, issues: [{ path, message: "This field is required" }] };
+    }
+    if (typeof value !== "string") {
+      return { success: false, issues: [{ path, message: "Must be a string" }] };
+    }
+    if (this._min && value.length < this._min.val) {
+      return {
+        success: false,
+        issues: [{ path, message: this._min.msg ?? `Must be at least ${this._min.val} characters` }]
+      };
+    }
+    if (this._max && value.length > this._max.val) {
+      return {
+        success: false,
+        issues: [{ path, message: this._max.msg ?? `Must be at most ${this._max.val} characters` }]
+      };
+    }
+    if (this._emailMsg) {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(value)) {
+        return { success: false, issues: [{ path, message: this._emailMsg }] };
+      }
+    }
+    if (this._regex && !this._regex.pattern.test(value)) {
+      return {
+        success: false,
+        issues: [{ path, message: this._regex.msg ?? "Invalid format" }]
+      };
+    }
+    return { success: true, data: value };
+  }
+}
+
+class NumberSchema extends Schema {
+  _min;
+  _max;
+  _integer;
+  _isOptional = false;
+  min(value, message) {
+    this._min = { val: value, msg: message };
+    return this;
+  }
+  max(value, message) {
+    this._max = { val: value, msg: message };
+    return this;
+  }
+  integer(message) {
+    this._integer = { msg: message };
+    return this;
+  }
+  optional() {
+    this._isOptional = true;
+    return this;
+  }
+  validate(value, path = "") {
+    if (value === undefined || value === null || value === "") {
+      if (this._isOptional)
+        return { success: true, data: undefined };
+      return { success: false, issues: [{ path, message: "This field is required" }] };
+    }
+    const num = Number(value);
+    if (Number.isNaN(num) || typeof value === "boolean") {
+      return { success: false, issues: [{ path, message: "Must be a valid number" }] };
+    }
+    if (this._integer && !Number.isInteger(num)) {
+      return {
+        success: false,
+        issues: [{ path, message: this._integer.msg ?? "Must be an integer" }]
+      };
+    }
+    if (this._min && num < this._min.val) {
+      return {
+        success: false,
+        issues: [{ path, message: this._min.msg ?? `Must be at least ${this._min.val}` }]
+      };
+    }
+    if (this._max && num > this._max.val) {
+      return {
+        success: false,
+        issues: [{ path, message: this._max.msg ?? `Must be at most ${this._max.val}` }]
+      };
+    }
+    return { success: true, data: num };
+  }
+}
+
+class BooleanSchema extends Schema {
+  validate(value, _path = "") {
+    return { success: true, data: Boolean(value) };
+  }
+}
+
+class ObjectSchema extends Schema {
+  shape;
+  constructor(shape) {
+    super();
+    this.shape = shape;
+  }
+  validate(value, basePath = "") {
+    if (typeof value !== "object" || value === null) {
+      return { success: false, issues: [{ path: basePath, message: "Must be an object" }] };
+    }
+    const issues = [];
+    const data = {};
+    for (const key in this.shape) {
+      const fieldSchema = this.shape[key];
+      const fieldVal = value[key];
+      const fieldPath = basePath ? `${basePath}.${key}` : key;
+      const res = validateWithSchema(fieldSchema, fieldVal, fieldPath);
+      if (res.success) {
+        data[key] = res.data;
+      } else if (res.issues) {
+        issues.push(...res.issues);
+      }
+    }
+    if (issues.length > 0) {
+      return { success: false, issues };
+    }
+    return { success: true, data };
+  }
+}
 function validateWithSchema(schema, value, path = "") {
   if (!schema)
     return { success: true, data: value };
@@ -104,8 +356,23 @@ function validateWithSchema(schema, value, path = "") {
   }
   return { success: true, data: value };
 }
+var v = {
+  string: () => new StringSchema,
+  number: () => new NumberSchema,
+  boolean: () => new BooleanSchema,
+  object: (shape) => new ObjectSchema(shape)
+};
 
 // src/rpc/procedure.ts
+function createProcedure(type, options, middlewares = []) {
+  return {
+    type,
+    inputSchema: options.input,
+    outputSchema: options.output,
+    middlewares: [...middlewares],
+    resolve: options.resolve
+  };
+}
 async function executeProcedure(procedure, opts) {
   let input = opts.rawInput;
   if (procedure.inputSchema) {
@@ -647,11 +914,18 @@ function visage(options = {}) {
       return {
         esbuild: {
           jsx: "automatic",
-          jsxImportSource: "visage",
-          jsxDev: command === "serve"
+          jsxImportSource: "visage"
+        },
+        oxc: {
+          jsx: {
+            runtime: "automatic",
+            importSource: "visage",
+            development: command === "serve"
+          }
         },
         optimizeDeps: {
-          include: [
+          exclude: [
+            "@epoch32/visage",
             "visage",
             "visage/signals",
             "visage/dom",
@@ -661,11 +935,17 @@ function visage(options = {}) {
             "visage/router",
             "visage/form",
             "visage/virtual",
-            "visage/devtools"
+            "visage/devtools",
+            "visage/api",
+            "visage/charts"
           ]
         },
         resolve: {
-          dedupe: ["visage"]
+          alias: [
+            { find: /^visage\/(.*)/, replacement: "@epoch32/visage/$1" },
+            { find: /^visage$/, replacement: "@epoch32/visage" }
+          ],
+          dedupe: ["@epoch32/visage", "visage"]
         }
       };
     }
@@ -703,5 +983,6 @@ function visage(options = {}) {
 var plugin_default = visage;
 export {
   plugin_default as default,
-  visage
+  visage,
+  visageLucide
 };

package/dist/vite/lucide.d.ts

@@ -0,0 +1,27 @@
+import type { VisageVitePlugin } from "./types";
+export interface VisageLucideOptions {
+    /**
+     * Module aliases to intercept and translate.
+     * Defaults to `["lucide-react"]`.
+     */
+    aliases?: string[];
+}
+/**
+ * Official Visage Lucide Vite Plugin
+ *
+ * Statically transforms `import { Icon } from "lucide-react"` at build time into
+ * native, tree-shaken Visage SVG component instances using `createIcon` and `lucide`.
+ *
+ * Example:
+ * ```ts
+ * // vite.config.ts
+ * import { defineConfig } from "vite";
+ * import visage, { visageLucide } from "visage/vite";
+ *
+ * export default defineConfig({
+ *   plugins: [visage(), visageLucide()]
+ * });
+ * ```
+ */
+export declare function visageLucide(options?: VisageLucideOptions): VisageVitePlugin;
+export default visageLucide;

package/dist/vite/plugin.d.ts

@@ -0,0 +1,3 @@
+import type { VisagePluginOptions, VisageVitePlugin } from "./types";
+export declare function visage(options?: VisagePluginOptions): VisageVitePlugin[];
+export default visage;

package/dist/vite/rpc-middleware.d.ts

@@ -0,0 +1,5 @@
+import type { VisagePluginOptions } from "./types";
+/**
+ * Attach Visage RPC handler to Vite's Connect dev server middleware
+ */
+export declare function createViteRpcMiddleware(options: NonNullable<VisagePluginOptions["rpc"]>): (req: any, res: any, next: () => void) => Promise<void>;

package/dist/vite/types.d.ts

@@ -0,0 +1,59 @@
+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>;
+}

package/package.json

@@ -1,82 +1,82 @@
 {
   "name": "@epoch32/visage",
-  "version": "0.0.0",
+  "version": "1.1.0",
   "description": "Lightning-fast, zero-VDOM, fine-grained reactive UI library with full TypeScript support",
   "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./signals": {
-      "types": "./src/signals/index.ts",
-      "import": "./src/signals/index.ts"
+      "types": "./dist/signals/index.d.ts",
+      "import": "./dist/signals/index.js"
     },
     "./dom": {
-      "types": "./src/dom/index.ts",
-      "import": "./src/dom/index.ts"
+      "types": "./dist/dom/index.d.ts",
+      "import": "./dist/dom/index.js"
     },
     "./router": {
-      "types": "./src/router/index.ts",
-      "import": "./src/router/index.ts"
+      "types": "./dist/router/index.d.ts",
+      "import": "./dist/router/index.js"
     },
     "./template": {
-      "types": "./src/template/index.ts",
-      "import": "./src/template/index.ts"
+      "types": "./dist/template/index.d.ts",
+      "import": "./dist/template/index.js"
     },
     "./server": {
-      "types": "./src/server/index.ts",
-      "import": "./src/server/index.ts"
+      "types": "./dist/server/index.d.ts",
+      "import": "./dist/server/index.js"
     },
     "./form": {
-      "types": "./src/form/index.ts",
-      "import": "./src/form/index.ts"
+      "types": "./dist/form/index.d.ts",
+      "import": "./dist/form/index.js"
     },
     "./virtual": {
-      "types": "./src/virtual/index.ts",
-      "import": "./src/virtual/index.ts"
+      "types": "./dist/virtual/index.d.ts",
+      "import": "./dist/virtual/index.js"
     },
     "./query": {
-      "types": "./src/query/index.ts",
-      "import": "./src/query/index.ts"
+      "types": "./dist/query/index.d.ts",
+      "import": "./dist/query/index.js"
     },
     "./rpc": {
-      "types": "./src/rpc/index.ts",
-      "import": "./src/rpc/index.ts"
+      "types": "./dist/rpc/index.d.ts",
+      "import": "./dist/rpc/index.js"
     },
     "./api": {
-      "types": "./src/api/index.ts",
-      "import": "./src/api/index.ts"
+      "types": "./dist/api/index.d.ts",
+      "import": "./dist/api/index.js"
     },
     "./style": {
-      "types": "./src/style/index.ts",
-      "import": "./src/style/index.ts"
+      "types": "./dist/style/index.d.ts",
+      "import": "./dist/style/index.js"
     },
     "./devtools": {
-      "types": "./src/devtools/index.ts",
-      "import": "./src/devtools/index.ts"
+      "types": "./dist/devtools/index.d.ts",
+      "import": "./dist/devtools/index.js"
     },
     "./vite": {
-      "types": "./src/vite/index.ts",
-      "import": "./src/vite/index.ts"
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite/index.js"
     },
     "./ui": {
-      "types": "./src/ui/index.ts",
-      "import": "./src/ui/index.ts"
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.js"
     },
     "./charts": {
-      "types": "./src/charts/index.ts",
-      "import": "./src/charts/index.ts"
+      "types": "./dist/charts/index.d.ts",
+      "import": "./dist/charts/index.js"
     },
     "./jsx-runtime": {
-      "types": "./src/jsx-runtime/index.ts",
-      "import": "./src/jsx-runtime/index.ts"
+      "types": "./dist/jsx-runtime/index.d.ts",
+      "import": "./dist/jsx-runtime/index.js"
     },
     "./jsx-dev-runtime": {
-      "types": "./src/jsx-runtime/index.ts",
-      "import": "./src/jsx-runtime/index.ts"
+      "types": "./dist/jsx-runtime/index.d.ts",
+      "import": "./dist/jsx-runtime/index.js"
     }
   },
   "sideEffects": false,
@@ -100,7 +100,7 @@
     "package.json"
   ],
   "scripts": {
-    "build": "bun build src/index.ts src/signals/index.ts src/dom/index.ts src/template/index.ts src/api/index.ts src/rpc/index.ts src/query/index.ts src/style/index.ts src/devtools/index.ts src/ui/index.ts src/virtual/index.ts src/form/index.ts src/server/index.ts src/router/index.ts src/vite/index.ts src/jsx-runtime/index.ts src/charts/index.ts --outdir dist/",
+    "build": "bun build src/index.ts src/signals/index.ts src/dom/index.ts src/template/index.ts src/api/index.ts src/rpc/index.ts src/query/index.ts src/style/index.ts src/devtools/index.ts src/ui/index.ts src/virtual/index.ts src/form/index.ts src/server/index.ts src/router/index.ts src/vite/index.ts src/jsx-runtime/index.ts src/charts/index.ts --root src --outdir dist/ && bun x tsc -p tsconfig.build.json",
     "test": "bun test",
     "test:watch": "bun test --watch",
     "test:coverage": "bun test --coverage",

package/src/signals/index.ts

@@ -49,6 +49,7 @@ export {
   COMPUTED_BRAND,
   type Dependency,
   isSignal,
+  type PersistOptions,
   type ReadonlySignal,
   SIGNAL_BRAND,
   type Subscriber,