@xrpckit/target-react-client 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,66 @@
+import { BaseCodeGenerator, GeneratorConfig, GeneratedFiles, CodeWriter } from '@xrpckit/codegen';
+import { ContractDefinition } from '@xrpckit/parser';
+
+declare class ReactCodeGenerator extends BaseCodeGenerator {
+    private typeGenerator;
+    private clientGenerator;
+    private contractPath;
+    constructor(config: GeneratorConfig);
+    generate(contract: ContractDefinition): GeneratedFiles;
+}
+
+declare class ReactTypeGenerator {
+    private w;
+    private contractPath;
+    private outputDir;
+    constructor(contractPath: string, outputDir: string);
+    generateTypes(contract: ContractDefinition): string;
+    private generateEndpointTypes;
+    private getSchemaName;
+    private getTypeName;
+    private calculateRelativePath;
+    private toPascalCase;
+    private toCamelCase;
+}
+
+declare class ReactClientGenerator {
+    private w;
+    constructor();
+    generateClient(contract: ContractDefinition): string;
+    private generateClientConfig;
+    private generateCallRpcFunction;
+    private generateEndpointFunction;
+    private generateQueryHook;
+    private generateMutationHook;
+    private getFunctionName;
+    private getSchemaName;
+    private getTypeName;
+    private toPascalCase;
+    private toCamelCase;
+}
+
+/**
+ * TypeScript/React-specific code builder with fluent DSL for common patterns
+ */
+declare class ReactBuilder extends CodeWriter {
+    l(text: string): this;
+    n(): this;
+    i(): this;
+    u(): this;
+    import(module: string, imports?: string[]): this;
+    type(name: string, definition: string): this;
+    const(name: string, value: string, exported?: boolean): this;
+    interface(name: string, fn: (b: this) => void): this;
+    function(signature: string, fn?: (b: this) => void): this;
+    asyncFunction(signature: string, fn: (b: this) => void): this;
+    hook(signature: string, fn: (b: this) => void): this;
+    return(value?: string): this;
+    comment(text: string): this;
+    blockComment(lines: string[]): this;
+    useState<T>(name: string, initialValue: string, type?: string): this;
+    useEffect(fn: (b: this) => void, deps?: string[]): this;
+    useRef<T>(name: string, initialValue: string, type?: string): this;
+    private toPascalCase;
+}
+
+export { ReactBuilder, ReactClientGenerator, ReactCodeGenerator, ReactTypeGenerator };

package/dist/index.js

@@ -0,0 +1,408 @@
+// src/generator.ts
+import { BaseCodeGenerator } from "@xrpckit/codegen";
+
+// src/react-builder.ts
+import { CodeWriter } from "@xrpckit/codegen";
+var ReactBuilder = class extends CodeWriter {
+  // Short aliases
+  l(text) {
+    return this.writeLine(text);
+  }
+  n() {
+    return this.newLine();
+  }
+  i() {
+    return this.indent();
+  }
+  u() {
+    return this.unindent();
+  }
+  // TypeScript/React-specific patterns
+  import(module, imports) {
+    if (!imports || imports.length === 0) {
+      return this.l(`import '${module}';`).n();
+    }
+    const valueImports = [];
+    const typeImports = [];
+    for (const imp of imports) {
+      if (imp.startsWith("type ")) {
+        typeImports.push(imp.replace("type ", ""));
+      } else {
+        valueImports.push(imp);
+      }
+    }
+    if (valueImports.length > 0 && typeImports.length > 0) {
+      this.l(`import { ${valueImports.join(", ")}, type ${typeImports.join(", type ")} } from '${module}';`).n();
+    } else if (valueImports.length > 0) {
+      this.l(`import { ${valueImports.join(", ")} } from '${module}';`).n();
+    } else if (typeImports.length > 0) {
+      this.l(`import type { ${typeImports.join(", ")} } from '${module}';`).n();
+    }
+    return this;
+  }
+  type(name, definition) {
+    return this.l(`export type ${name} = ${definition};`).n();
+  }
+  const(name, value, exported = true) {
+    const exportKeyword = exported ? "export " : "";
+    return this.l(`${exportKeyword}const ${name} = ${value};`).n();
+  }
+  interface(name, fn) {
+    this.l(`export interface ${name} {`).i();
+    fn(this);
+    return this.u().l("}").n();
+  }
+  function(signature, fn) {
+    if (fn) {
+      this.write(`export function ${signature} {`);
+      this.indent();
+      fn(this);
+      this.unindent();
+      this.writeLine("}");
+      this.newLine();
+    } else {
+      this.l(`export function ${signature};`);
+      this.n();
+    }
+    return this;
+  }
+  asyncFunction(signature, fn) {
+    this.write(`export async function ${signature} {`);
+    this.indent();
+    fn(this);
+    this.unindent();
+    this.writeLine("}");
+    this.newLine();
+    return this;
+  }
+  hook(signature, fn) {
+    return this.function(signature, fn);
+  }
+  return(value) {
+    return value ? this.l(`return ${value};`) : this.l("return;");
+  }
+  comment(text) {
+    return this.l(`// ${text}`);
+  }
+  blockComment(lines) {
+    this.l("/*");
+    for (const line of lines) {
+      this.l(` * ${line}`);
+    }
+    return this.l(" */");
+  }
+  // React-specific patterns
+  useState(name, initialValue, type) {
+    const typeParam = type ? `<${type}>` : "";
+    return this.l(`const [${name}, set${this.toPascalCase(name)}] = useState${typeParam}(${initialValue});`);
+  }
+  useEffect(fn, deps) {
+    this.l("useEffect(() => {").i();
+    fn(this);
+    this.u();
+    if (deps && deps.length > 0) {
+      return this.l(`}, [${deps.join(", ")}]);`).n();
+    }
+    return this.l("}, []);").n();
+  }
+  useRef(name, initialValue, type) {
+    const typeParam = type ? `<${type}>` : "";
+    return this.l(`const ${name}Ref = useRef${typeParam}(${initialValue});`);
+  }
+  toPascalCase(str) {
+    return str.split(/[-_]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+  }
+};
+
+// src/type-generator.ts
+import { relative, dirname } from "path";
+var ReactTypeGenerator = class {
+  w;
+  contractPath;
+  outputDir;
+  constructor(contractPath, outputDir) {
+    this.w = new ReactBuilder();
+    this.contractPath = contractPath;
+    this.outputDir = outputDir;
+  }
+  generateTypes(contract) {
+    const w = this.w.reset();
+    const relativePath = this.calculateRelativePath(this.contractPath, this.outputDir);
+    w.import(relativePath, ["router"]);
+    w.import("@xrpckit/schema", ["type InferInput", "type InferOutput"]);
+    w.n();
+    for (const endpoint of contract.endpoints) {
+      this.generateEndpointTypes(endpoint, w);
+    }
+    return w.toString();
+  }
+  generateEndpointTypes(endpoint, w) {
+    const inputSchemaName = this.getSchemaName(endpoint, "input");
+    const outputSchemaName = this.getSchemaName(endpoint, "output");
+    const inputTypeName = this.getTypeName(endpoint, "Input");
+    const outputTypeName = this.getTypeName(endpoint, "Output");
+    const [groupName, endpointName] = endpoint.fullName.split(".");
+    const routerPath = `router.${groupName}.${endpointName}`;
+    w.const(inputSchemaName, `${routerPath}.input`, true);
+    w.const(outputSchemaName, `${routerPath}.output`, true);
+    w.type(inputTypeName, `InferInput<typeof ${routerPath}>`);
+    w.type(outputTypeName, `InferOutput<typeof ${routerPath}>`);
+    w.n();
+  }
+  getSchemaName(endpoint, suffix) {
+    const parts = endpoint.fullName.split(".");
+    const groupName = this.toCamelCase(parts[0]);
+    const endpointName = this.toCamelCase(parts[1]);
+    return `${groupName}${this.toPascalCase(endpointName)}${this.toPascalCase(suffix)}Schema`;
+  }
+  getTypeName(endpoint, suffix) {
+    const parts = endpoint.fullName.split(".");
+    const groupName = this.toPascalCase(parts[0]);
+    const endpointName = this.toPascalCase(parts[1]);
+    return `${groupName}${endpointName}${suffix}`;
+  }
+  calculateRelativePath(contractPath, outputDir) {
+    const contractPathWithoutExt = contractPath.replace(/\.ts$/, "");
+    const contractDir = dirname(contractPathWithoutExt);
+    const contractFile = contractPathWithoutExt.split("/").pop() || "api";
+    const relativePath = relative(outputDir, contractDir);
+    if (relativePath === "" || relativePath === ".") {
+      return `./${contractFile}`;
+    }
+    const normalizedPath = relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
+    return `${normalizedPath}/${contractFile}`;
+  }
+  toPascalCase(str) {
+    return str.split(/[-_]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+  }
+  toCamelCase(str) {
+    const pascal = this.toPascalCase(str);
+    return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+  }
+};
+
+// src/client-generator.ts
+var ReactClientGenerator = class {
+  w;
+  constructor() {
+    this.w = new ReactBuilder();
+  }
+  generateClient(contract) {
+    const w = this.w.reset();
+    w.import("react", ["useState", "useEffect", "useRef"]);
+    const schemaImports = /* @__PURE__ */ new Set();
+    const typeImports = /* @__PURE__ */ new Set();
+    for (const ep of contract.endpoints) {
+      schemaImports.add(this.getSchemaName(ep, "input"));
+      schemaImports.add(this.getSchemaName(ep, "output"));
+      typeImports.add(this.getTypeName(ep, "Input"));
+      typeImports.add(this.getTypeName(ep, "Output"));
+    }
+    const allImports = [
+      ...Array.from(schemaImports),
+      ...Array.from(typeImports).map((t) => `type ${t}`)
+    ];
+    w.import("./types", allImports);
+    w.import("zod", ["z"]);
+    w.n();
+    this.generateClientConfig(w);
+    w.n();
+    this.generateCallRpcFunction(w);
+    for (const endpoint of contract.endpoints) {
+      w.n();
+      this.generateEndpointFunction(endpoint, w);
+    }
+    w.n();
+    w.comment("React Hooks");
+    w.n();
+    for (const endpoint of contract.endpoints) {
+      if (endpoint.type === "query") {
+        this.generateQueryHook(endpoint, w);
+      } else {
+        this.generateMutationHook(endpoint, w);
+      }
+    }
+    return w.toString();
+  }
+  generateClientConfig(w) {
+    w.interface("XRpcClientConfig", (b) => {
+      b.l("baseUrl: string;").l("validateInputs?: boolean;").l("validateOutputs?: boolean;").l("headers?: Record<string, string>;");
+    });
+  }
+  generateCallRpcFunction(w) {
+    w.comment("Base RPC call function (pure, no React dependencies)");
+    w.n();
+    w.asyncFunction(
+      "callRpc<T>(config: XRpcClientConfig, method: string, params: unknown, options?: { inputSchema?: z.ZodType; outputSchema?: z.ZodType; signal?: AbortSignal })",
+      (b) => {
+        b.comment("Validate input if enabled");
+        b.l("let validatedParams = params;");
+        b.l("if (config.validateInputs && options?.inputSchema) {");
+        b.i().l("validatedParams = options.inputSchema.parse(params);");
+        b.u().l("}").n();
+        b.comment("Make HTTP request");
+        b.l("const response = await fetch(config.baseUrl, {");
+        b.i().l("method: 'POST',").l("headers: {");
+        b.i().l("'Content-Type': 'application/json',").l("...config.headers,");
+        b.u().l("},").l("body: JSON.stringify({ method, params: validatedParams }),").l("signal: options?.signal,");
+        b.u().l("});").n();
+        b.comment("Handle errors");
+        b.l("if (!response.ok) {");
+        b.i().l("const error = await response.json().catch(() => ({ error: { message: response.statusText } }));").l("throw new Error(error.error?.message || `RPC call failed: ${response.statusText}`);");
+        b.u().l("}").n();
+        b.comment("Parse response");
+        b.l("const result = await response.json();");
+        b.comment("Handle JSON-RPC response format");
+        b.l("if (result.error) {");
+        b.i().l("throw new Error(result.error.message || result.error);");
+        b.u().l("}");
+        b.l("const data = result.result;").n();
+        b.comment("Validate output if enabled");
+        b.l("if (config.validateOutputs && options?.outputSchema) {");
+        b.i().l("return options.outputSchema.parse(data);");
+        b.u().l("}").n();
+        b.l("return data;");
+      }
+    );
+  }
+  generateEndpointFunction(endpoint, w) {
+    const functionName = this.getFunctionName(endpoint);
+    const inputType = this.getTypeName(endpoint, "Input");
+    const outputType = this.getTypeName(endpoint, "Output");
+    const inputSchema = this.getSchemaName(endpoint, "input");
+    const outputSchema = this.getSchemaName(endpoint, "output");
+    w.comment(`Type-safe wrapper for ${endpoint.fullName}`);
+    w.n();
+    w.asyncFunction(
+      `${functionName}(config: XRpcClientConfig, input: ${inputType}, options?: { signal?: AbortSignal })`,
+      (b) => {
+        b.l(`return callRpc<${outputType}>(`);
+        b.i().l("config,").l(`'${endpoint.fullName}',`).l("input,").l("{").i().l(`inputSchema: ${inputSchema},`).l(`outputSchema: ${outputSchema},`).l("signal: options?.signal,").u().l("}").u().l(");");
+      }
+    );
+  }
+  generateQueryHook(endpoint, w) {
+    const parts = endpoint.fullName.split(".");
+    const groupName = this.toPascalCase(parts[0]);
+    const endpointName = this.toPascalCase(parts[1]);
+    const hookName = `use${groupName}${endpointName}`;
+    const inputType = this.getTypeName(endpoint, "Input");
+    const outputType = this.getTypeName(endpoint, "Output");
+    const functionName = this.getFunctionName(endpoint);
+    w.comment(`React hook for ${endpoint.fullName} query`);
+    w.n();
+    w.hook(
+      `${hookName}(config: XRpcClientConfig, input: ${inputType}, options?: { enabled?: boolean })`,
+      (b) => {
+        b.l(`const [data, setData] = useState<${outputType} | null>(null);`);
+        b.l("const [loading, setLoading] = useState(false);");
+        b.l("const [error, setError] = useState<Error | null>(null);");
+        b.l("const abortControllerRef = useRef<AbortController | null>(null);").n();
+        b.l("useEffect(() => {");
+        b.i();
+        b.comment("Skip if disabled");
+        b.l("if (options?.enabled === false) return;").n();
+        b.comment("Cancel previous request");
+        b.l("if (abortControllerRef.current) {");
+        b.i().l("abortControllerRef.current.abort();");
+        b.u().l("}").n();
+        b.comment("Create new AbortController");
+        b.l("const abortController = new AbortController();");
+        b.l("abortControllerRef.current = abortController;").n();
+        b.l("setLoading(true);");
+        b.l("setError(null);").n();
+        b.l(`${functionName}(config, input, { signal: abortController.signal })`);
+        b.i().l(".then(setData)").l(".catch((err) => {");
+        b.i().l("if (err.name !== 'AbortError') {");
+        b.i().l("setError(err);");
+        b.u().l("}");
+        b.u().l("})").l(".finally(() => {");
+        b.i().l("if (!abortController.signal.aborted) {");
+        b.i().l("setLoading(false);");
+        b.u().l("}");
+        b.u().l("});").n();
+        b.comment("Cleanup on unmount or input change");
+        b.l("return () => {");
+        b.i().l("abortController.abort();");
+        b.u().l("};");
+        b.u();
+        b.comment("Note: input is serialized for stable dependency comparison");
+        b.l("}, [config.baseUrl, JSON.stringify(input), options?.enabled]);").n();
+        b.l("return { data, loading, error };");
+      }
+    );
+  }
+  generateMutationHook(endpoint, w) {
+    const parts = endpoint.fullName.split(".");
+    const groupName = this.toPascalCase(parts[0]);
+    const endpointName = this.toPascalCase(parts[1]);
+    const hookName = `use${groupName}${endpointName}`;
+    const inputType = this.getTypeName(endpoint, "Input");
+    const outputType = this.getTypeName(endpoint, "Output");
+    const functionName = this.getFunctionName(endpoint);
+    w.comment(`React hook for ${endpoint.fullName} mutation`);
+    w.n();
+    w.hook(`${hookName}(config: XRpcClientConfig)`, (b) => {
+      b.l("const [loading, setLoading] = useState(false);");
+      b.l("const [error, setError] = useState<Error | null>(null);").n();
+      b.l(`const mutate = async (input: ${inputType}): Promise<${outputType}> => {`);
+      b.i().l("setLoading(true);").l("setError(null);").n().l("try {").i().l(`const result = await ${functionName}(config, input);`).l("return result;").u().l("} catch (err) {").i().l("setError(err as Error);").l("throw err;").u().l("} finally {").i().l("setLoading(false);").u().l("}");
+      b.u().l("};").n();
+      b.l("return { mutate, loading, error };");
+    });
+  }
+  getFunctionName(endpoint) {
+    const parts = endpoint.fullName.split(".");
+    const groupName = this.toCamelCase(parts[0]);
+    const endpointName = this.toCamelCase(parts[1]);
+    return `${groupName}${this.toPascalCase(endpointName)}`;
+  }
+  getSchemaName(endpoint, suffix) {
+    const parts = endpoint.fullName.split(".");
+    const groupName = this.toCamelCase(parts[0]);
+    const endpointName = this.toCamelCase(parts[1]);
+    return `${groupName}${this.toPascalCase(endpointName)}${this.toPascalCase(suffix)}Schema`;
+  }
+  getTypeName(endpoint, suffix) {
+    const parts = endpoint.fullName.split(".");
+    const groupName = this.toPascalCase(parts[0]);
+    const endpointName = this.toPascalCase(parts[1]);
+    return `${groupName}${endpointName}${suffix}`;
+  }
+  toPascalCase(str) {
+    return str.split(/[-_]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+  }
+  toCamelCase(str) {
+    const pascal = this.toPascalCase(str);
+    return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+  }
+};
+
+// src/generator.ts
+var ReactCodeGenerator = class extends BaseCodeGenerator {
+  typeGenerator;
+  clientGenerator;
+  contractPath;
+  constructor(config) {
+    super(config);
+    const contractPath = config.options?.contractPath || config.outputDir;
+    if (!contractPath) {
+      throw new Error("contractPath is required for React target. Pass it via GeneratorConfig.options.contractPath");
+    }
+    this.contractPath = contractPath;
+    this.typeGenerator = new ReactTypeGenerator(contractPath, config.outputDir);
+    this.clientGenerator = new ReactClientGenerator();
+  }
+  generate(contract) {
+    return {
+      types: this.typeGenerator.generateTypes(contract),
+      client: this.clientGenerator.generateClient(contract)
+    };
+  }
+};
+export {
+  ReactBuilder,
+  ReactClientGenerator,
+  ReactCodeGenerator,
+  ReactTypeGenerator
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@xrpckit/target-react-client",
+  "version": "0.0.1",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mwesox/xrpc.git",
+    "directory": "packages/target-react-client"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean"
+  },
+  "dependencies": {
+    "@xrpckit/codegen": "^0.0.1",
+    "@xrpckit/parser": "^0.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}