bonescript-compiler 0.7.0 → 0.8.0

package/src/emit_react.ts

@@ -0,0 +1,236 @@
+/**
+ * BoneScript React Hooks Emitter
+ *
+ * Generates a typed React hooks file (sdk/react.ts) on top of the existing
+ * fetch SDK. Hooks are zero-dep — they use React's built-in useState +
+ * useEffect rather than pulling in @tanstack/react-query so consumers can
+ * decide their own data layer.
+ *
+ * For each entity:
+ *   useList<Entity>()      → { data, loading, error, refetch }
+ *   use<Entity>(id)        → { data, loading, error, refetch }
+ *   useCreate<Entity>()    → mutate(input) → Promise<Entity>
+ *   useUpdate<Entity>()    → mutate(id, patch) → Promise<Entity>
+ *   useDelete<Entity>()    → mutate(id) → Promise<void>
+ *
+ * For each capability:
+ *   useCapability<Name>()  → mutate(input) → Promise<unknown>
+ *
+ * Hooks are framework-agnostic in shape (no react-query, no SWR) so they work
+ * with Next.js, Vite, CRA, or any plain React app.
+ */
+
+import * as IR from "./ir";
+import { EmittedFile } from "./emitter";
+
+function toSnakeCase(s: string): string {
+  return s.replace(/([a-z])([A-Z])/g, "$1_$2").toLowerCase();
+}
+
+function toPascalCase(s: string): string {
+  return s.replace(/(^|[-_\s])(\w)/g, (_, __, c: string) => c.toUpperCase());
+}
+
+const TS_TYPE_MAP: Record<string, string> = {
+  string: "string", uint: "number", int: "number", float: "number",
+  bool: "boolean", timestamp: "string", uuid: "string", bytes: "string", json: "unknown",
+};
+
+function toTsType(irType: string): string {
+  if (TS_TYPE_MAP[irType]) return TS_TYPE_MAP[irType];
+  const m = irType.match(/^(list|set)<(.+)>$/);
+  if (m) return `${toTsType(m[2])}[]`;
+  const om = irType.match(/^optional<(.+)>$/);
+  if (om) return `${toTsType(om[1])} | null`;
+  return irType;
+}
+
+export function emitReactHooks(system: IR.IRSystem): EmittedFile {
+  const lines: string[] = [];
+
+  lines.push(`// Generated by BoneScript compiler. DO NOT EDIT.`);
+  lines.push(`// React hooks for the ${system.name} API.`);
+  lines.push(`//`);
+  lines.push(`// Pair with sdk/client.ts. Pass an instance of <System>Client to <ApiProvider>.`);
+  lines.push(``);
+  lines.push(`import { useCallback, useEffect, useState, createContext, useContext, ReactNode, createElement } from "react";`);
+  lines.push(``);
+
+  // Entity types (forward-declared so the hooks compile without importing the SDK)
+  // We re-declare them here to keep this file independent — the consumer can
+  // also import these types from sdk/client.ts if they prefer.
+  const apiModules = system.modules.filter(m => m.kind === "api_service" && m.models.length > 0);
+  for (const mod of apiModules) {
+    const model = mod.models[0];
+    lines.push(`export interface ${toPascalCase(model.name)} {`);
+    for (const field of model.fields) {
+      const optional = field.nullable ? "?" : "";
+      lines.push(`  ${field.name}${optional}: ${toTsType(field.type)};`);
+    }
+    lines.push(`}`);
+    lines.push(``);
+  }
+
+  lines.push(`export interface ApiClient {`);
+  lines.push(`  baseUrl: string;`);
+  lines.push(`  getToken: () => string | null;`);
+  lines.push(`}`);
+  lines.push(``);
+  lines.push(`async function apiFetch<T>(client: ApiClient, method: string, path: string, body?: unknown): Promise<T> {`);
+  lines.push(`  const headers: Record<string, string> = { "Content-Type": "application/json" };`);
+  lines.push(`  const token = client.getToken();`);
+  lines.push(`  if (token) headers["Authorization"] = "Bearer " + token;`);
+  lines.push(`  const res = await fetch(client.baseUrl + path, {`);
+  lines.push(`    method,`);
+  lines.push(`    headers,`);
+  lines.push(`    body: body !== undefined ? JSON.stringify(body) : undefined,`);
+  lines.push(`  });`);
+  lines.push(`  if (!res.ok) {`);
+  lines.push(`    let errMsg = "Request failed: " + res.status;`);
+  lines.push(`    try { const j = await res.json() as { error?: { message?: string } }; if (j.error?.message) errMsg = j.error.message; } catch {}`);
+  lines.push(`    throw new Error(errMsg);`);
+  lines.push(`  }`);
+  lines.push(`  if (res.status === 204) return undefined as unknown as T;`);
+  lines.push(`  return await res.json() as T;`);
+  lines.push(`}`);
+  lines.push(``);
+
+  // Provider + context. createElement avoids needing JSX in this generated file.
+  lines.push(`const ApiContext = createContext<ApiClient | null>(null);`);
+  lines.push(``);
+  lines.push(`export interface ApiProviderProps {`);
+  lines.push(`  client: ApiClient;`);
+  lines.push(`  children: ReactNode;`);
+  lines.push(`}`);
+  lines.push(``);
+  lines.push(`export function ApiProvider(props: ApiProviderProps) {`);
+  lines.push(`  return createElement(ApiContext.Provider, { value: props.client }, props.children);`);
+  lines.push(`}`);
+  lines.push(``);
+  lines.push(`function useApi(): ApiClient {`);
+  lines.push(`  const ctx = useContext(ApiContext);`);
+  lines.push(`  if (!ctx) throw new Error("useApi must be used inside <ApiProvider>");`);
+  lines.push(`  return ctx;`);
+  lines.push(`}`);
+  lines.push(``);
+
+  // Generic shape helpers
+  lines.push(`export interface QueryState<T> {`);
+  lines.push(`  data: T | null;`);
+  lines.push(`  loading: boolean;`);
+  lines.push(`  error: Error | null;`);
+  lines.push(`  refetch: () => Promise<void>;`);
+  lines.push(`}`);
+  lines.push(``);
+  lines.push(`export interface MutationState<TInput, TOutput> {`);
+  lines.push(`  mutate: (input: TInput) => Promise<TOutput>;`);
+  lines.push(`  loading: boolean;`);
+  lines.push(`  error: Error | null;`);
+  lines.push(`  reset: () => void;`);
+  lines.push(`}`);
+  lines.push(``);
+  lines.push(`export interface PaginatedResponse<T> {`);
+  lines.push(`  items: T[];`);
+  lines.push(`  total: number;`);
+  lines.push(`  page: number;`);
+  lines.push(`  page_size: number;`);
+  lines.push(`}`);
+  lines.push(``);
+
+  // Generic primitive hooks. Specific entity / capability hooks below wrap these.
+  lines.push(`function useQueryGeneric<T>(method: string, path: string, deps: unknown[]): QueryState<T> {`);
+  lines.push(`  const client = useApi();`);
+  lines.push(`  const [data, setData] = useState<T | null>(null);`);
+  lines.push(`  const [loading, setLoading] = useState(true);`);
+  lines.push(`  const [error, setError] = useState<Error | null>(null);`);
+  lines.push(`  const fetchOnce = useCallback(async () => {`);
+  lines.push(`    setLoading(true); setError(null);`);
+  lines.push(`    try { const result = await apiFetch<T>(client, method, path); setData(result); }`);
+  lines.push(`    catch (e: unknown) { setError(e instanceof Error ? e : new Error(String(e))); }`);
+  lines.push(`    finally { setLoading(false); }`);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  lines.push(`  }, [client, method, path]);`);
+  lines.push(`  useEffect(() => { void fetchOnce(); /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, deps);`);
+  lines.push(`  return { data, loading, error, refetch: fetchOnce };`);
+  lines.push(`}`);
+  lines.push(``);
+  lines.push(`function useMutationGeneric<TInput, TOutput>(builder: (input: TInput) => { method: string; path: string; body?: unknown }): MutationState<TInput, TOutput> {`);
+  lines.push(`  const client = useApi();`);
+  lines.push(`  const [loading, setLoading] = useState(false);`);
+  lines.push(`  const [error, setError] = useState<Error | null>(null);`);
+  lines.push(`  const mutate = useCallback(async (input: TInput): Promise<TOutput> => {`);
+  lines.push(`    setLoading(true); setError(null);`);
+  lines.push(`    try { const req = builder(input); return await apiFetch<TOutput>(client, req.method, req.path, req.body); }`);
+  lines.push(`    catch (e: unknown) { const err = e instanceof Error ? e : new Error(String(e)); setError(err); throw err; }`);
+  lines.push(`    finally { setLoading(false); }`);
+  lines.push(`  }, [client, builder]);`);
+  lines.push(`  const reset = useCallback(() => setError(null), []);`);
+  lines.push(`  return { mutate, loading, error, reset };`);
+  lines.push(`}`);
+  lines.push(``);
+
+  // Per-entity hooks
+  for (const mod of apiModules) {
+    const model = mod.models[0];
+    const entity = toPascalCase(model.name);
+    const tableName = toSnakeCase(model.name) + "s";
+    const route = `/${tableName}`;
+
+    lines.push(`// ─── ${entity} ───────────────────────────────────────────────────────────`);
+    lines.push(``);
+
+    // List
+    lines.push(`export function useList${entity}(): QueryState<PaginatedResponse<${entity}>> {`);
+    lines.push(`  return useQueryGeneric<PaginatedResponse<${entity}>>("GET", "${route}", []);`);
+    lines.push(`}`);
+    lines.push(``);
+
+    // Read
+    lines.push(`export function use${entity}(id: string | null): QueryState<${entity}> {`);
+    lines.push(`  return useQueryGeneric<${entity}>("GET", id ? \`${route}/\${id}\` : "${route}", [id]);`);
+    lines.push(`}`);
+    lines.push(``);
+
+    // Create
+    const createInputType = `Partial<${entity}>`;
+    lines.push(`export function useCreate${entity}(): MutationState<${createInputType}, ${entity}> {`);
+    lines.push(`  return useMutationGeneric<${createInputType}, ${entity}>((input) => ({ method: "POST", path: "${route}", body: input }));`);
+    lines.push(`}`);
+    lines.push(``);
+
+    // Update
+    lines.push(`export function useUpdate${entity}(): MutationState<{ id: string; patch: Partial<${entity}> }, ${entity}> {`);
+    lines.push(`  return useMutationGeneric<{ id: string; patch: Partial<${entity}> }, ${entity}>(({ id, patch }) => ({ method: "PUT", path: \`${route}/\${id}\`, body: patch }));`);
+    lines.push(`}`);
+    lines.push(``);
+
+    // Delete
+    lines.push(`export function useDelete${entity}(): MutationState<string, void> {`);
+    lines.push(`  return useMutationGeneric<string, void>((id) => ({ method: "DELETE", path: \`${route}/\${id}\` }));`);
+    lines.push(`}`);
+    lines.push(``);
+
+    // Capability hooks
+    for (const iface of mod.interfaces) {
+      for (const method of iface.methods) {
+        if (["create", "read", "update", "delete", "list"].includes(method.name)) continue;
+        const capName = toPascalCase(method.name);
+        const inputType = method.input.length > 0
+          ? `{ ${method.input.map(p => `${p.name}${p.nullable ? "?" : ""}: ${toTsType(p.type)}`).join("; ")} }`
+          : "Record<string, never>";
+        const endpoint = `${route}/${method.name.replace(/_/g, "-")}`;
+        lines.push(`export function useCapability${capName}(): MutationState<${inputType}, unknown> {`);
+        lines.push(`  return useMutationGeneric<${inputType}, unknown>((input) => ({ method: "POST", path: "${endpoint}", body: input }));`);
+        lines.push(`}`);
+        lines.push(``);
+      }
+    }
+  }
+
+  return {
+    path: "sdk/react.ts",
+    content: lines.join("\n"),
+    language: "typescript",
+    source_module: "sdk",
+  };
+}