@nkzw/fate 1.0.3 → 1.2.0

package/lib/vite.mjs

@@ -68,7 +68,23 @@ const formatTypes = (types) => {
 	return lines.join("\n");
 };
 const indentBlock = (value, spaces) => value.split("\n").map((line) => line.length ? `${" ".repeat(spaces)}${line}` : line).join("\n");
+const compareStrings = (left, right) => left < right ? -1 : left > right ? 1 : 0;
+const canonicalizeHydrationScopeValue = (value) => {
+	if (Array.isArray(value)) return value.map(canonicalizeHydrationScopeValue);
+	if (!value || typeof value !== "object") return value;
+	return Object.fromEntries(Object.entries(value).sort(([left], [right]) => compareStrings(left, right)).map(([key, entry]) => [key, canonicalizeHydrationScopeValue(entry)]));
+};
+const getHydrationScope = (moduleName, roots, types) => JSON.stringify(canonicalizeHydrationScopeValue({
+	moduleName,
+	roots,
+	types: [...types].sort((left, right) => compareStrings(left.type, right.type))
+}));
 const createClientSource = ({ clientModule = "react-fate", moduleExports, moduleName, runtimeModuleName = moduleName, transport = "trpc" }) => {
+	if (transport === "graphql") return createGraphQLClientSource({
+		clientModule,
+		moduleExports,
+		moduleName
+	});
 	if (transport === "native" || transport === "void") return createNativeClientSource({
 		clientModule,
 		moduleExports,
@@ -232,6 +248,7 @@ ${rootsBlock}
 
 export type GeneratedClientMutations = typeof mutations;
 export type GeneratedClientRoots = typeof roots;
+const hydrationScope = ${JSON.stringify(getHydrationScope(moduleName, roots, types))} as const;
 
 export const createFateClient = (options: {
   links: Parameters<typeof createTRPCProxyClient>[0]['links'];
@@ -254,7 +271,8 @@ ${queriesBlock}${listsBlock}    mutations: trpcMutations,
   });
 ${liveTransportAssignment}
 
-  return createClient<[GeneratedClientRoots, GeneratedClientMutations]>({
+  return createClient<[GeneratedClientRoots, GeneratedClientMutations], typeof hydrationScope>({
+    hydrationScope,
     mutations,
     onLiveError: options.onLiveError,
     roots,
@@ -268,6 +286,132 @@ ${generatedClientTypes}
 `;
 };
 const lowerTypeName = (type) => type[0]?.toLowerCase() + type.slice(1);
+const graphQLConfigExportName = "fateGraphQL";
+const formatGraphQLObject = (value, depth = 0) => {
+	const indent = "  ".repeat(depth);
+	const nextIndent = "  ".repeat(depth + 1);
+	if (value === null || typeof value !== "object") return JSON.stringify(value);
+	if (Array.isArray(value)) return `[${value.map((entry) => formatGraphQLObject(entry, depth)).join(", ")}]`;
+	const entries = Object.entries(value).filter(([, entry]) => entry !== void 0);
+	if (entries.length === 0) return "{}";
+	return `{\n${entries.map(([key, entry]) => `${nextIndent}${JSON.stringify(key)}: ${formatGraphQLObject(entry, depth + 1)},`).join("\n")}\n${indent}}`;
+};
+const createGraphQLClientSource = ({ clientModule, moduleExports, moduleName }) => {
+	const { Root } = moduleExports;
+	const { roots, types } = createSchema(Object.values(moduleExports).filter(isDataView), Root ?? {});
+	const graphQLConfig = moduleExports[graphQLConfigExportName] ?? {};
+	const byIdEntries = types.map((entry) => ({
+		name: lowerTypeName(entry.type),
+		type: entry.type
+	}));
+	const mutationEntries = Object.entries(graphQLConfig.mutations ?? {}).map(([name, config]) => ({
+		entity: config.entity,
+		field: config.field,
+		inputArg: config.inputArg,
+		name
+	}));
+	const rootEntries = [...byIdEntries.map(({ name, type }) => ({
+		name,
+		type,
+		value: `'${name}': clientRoot<Array<${type}>, '${type}'>('${type}'),`
+	})), ...Object.entries(roots).map(([name, root]) => ({
+		name,
+		type: root.type,
+		value: `'${name}': clientRoot<${root.kind === "list" ? `{
+  items: Array<{ cursor?: string; node: ${root.type} }>;
+  pagination: import('${clientModule}').Pagination;
+}` : `${root.type} | null`}, '${root.type}'>('${root.type}'),`
+	}))].sort((a, b) => a.name.localeCompare(b.name));
+	const importedTypes = Array.from(new Set([
+		...types.map((type) => type.type),
+		...mutationEntries.map((entry) => entry.entity),
+		...graphQLConfig.mutations ? [graphQLConfigExportName] : []
+	])).sort((a, b) => a.localeCompare(b));
+	const mutationConfigLines = mutationEntries.map(({ entity, name }) => `'${name}': mutation<
+  ${entity},
+  GraphQLMutationInput<typeof ${graphQLConfigExportName}.mutations['${name}']>,
+  GraphQLMutationOutput<typeof ${graphQLConfigExportName}.mutations['${name}']>
+>('${entity}'),`);
+	const graphQLRoots = Object.fromEntries(Object.entries(roots).map(([name, root]) => [name, {
+		connection: root.kind === "list" ? "relay" : void 0,
+		field: graphQLConfig.roots?.[name]?.field,
+		type: root.type
+	}]));
+	const graphQLRuntimeConfig = {
+		mutations: Object.fromEntries(mutationEntries.map(({ entity, field, inputArg, name }) => [name, {
+			entity,
+			field,
+			...inputArg !== void 0 ? { inputArg } : null
+		}])),
+		roots: graphQLRoots
+	};
+	const typesBlock = indentBlock(formatTypes(types), 6);
+	const rootBlock = indentBlock(rootEntries.map((entry) => entry.value).join("\n"), 2);
+	const mutationConfigBlock = indentBlock(mutationConfigLines.join("\n"), 2);
+	const generatedClientTypes = `
+declare module '${`${clientModule}/client`}' {
+  interface ClientMutations extends GeneratedClientMutations {}
+  interface ClientRoots extends GeneratedClientRoots {}
+
+  export function createFateClient(
+    ...args: Parameters<GeneratedCreateFateClient>
+  ): ReturnType<GeneratedCreateFateClient>;
+}
+`;
+	const mutationMapType = graphQLConfig.mutations ? `GraphQLMutationMap<typeof ${graphQLConfigExportName}.mutations>` : "Record<never, never>";
+	return `// @generated by @nkzw/fate/vite
+${importedTypes.length ? `import type { ${importedTypes.join(", ")} } from '${moduleName}';\n` : ""}import { clientRoot, createClient, createGraphQLTransport, mutation, type GraphQLMutationInput, type GraphQLMutationMap, type GraphQLMutationOutput } from '${clientModule}';
+
+type GraphQLTransportMutations = ${mutationMapType};
+
+const graphQL = ${formatGraphQLObject(graphQLRuntimeConfig)} as const;
+
+const mutations = {
+${mutationConfigBlock}
+} as const;
+
+const roots = {
+${rootBlock}
+} as const;
+
+export type GeneratedClientMutations = typeof mutations;
+export type GeneratedClientRoots = typeof roots;
+const hydrationScope = ${JSON.stringify(getHydrationScope(moduleName, roots, types))} as const;
+
+export const createFateClient = (options: {
+  decodeNodeId?: (type: string, id: string | number) => string | number;
+  encodeNodeId?: (type: string, id: string | number) => string | number;
+  eventSource?: Parameters<typeof createGraphQLTransport>[0]['eventSource'];
+  fetch?: typeof fetch;
+  headers?: HeadersInit | (() => HeadersInit | Promise<HeadersInit>);
+  live?: Parameters<typeof createGraphQLTransport>[0]['live'];
+  onLiveError?: (error: unknown) => void;
+  url: string | URL;
+}) =>
+  createClient<[GeneratedClientRoots, GeneratedClientMutations], typeof hydrationScope>({
+    hydrationScope,
+    mutations,
+    onLiveError: options.onLiveError,
+    roots,
+    transport: createGraphQLTransport<GraphQLTransportMutations>({
+      decodeNodeId: options.decodeNodeId,
+      encodeNodeId: options.encodeNodeId,
+      eventSource: options.eventSource,
+      fetch: options.fetch,
+      headers: options.headers,
+      live: options.live,
+      mutations: graphQL.mutations,
+      roots: graphQL.roots,
+      types: ${typesBlock.trimStart()},
+      url: options.url,
+    }),
+    types: ${typesBlock.trimStart()},
+  });
+
+type GeneratedCreateFateClient = typeof createFateClient;
+${generatedClientTypes}
+`;
+};
 const createNativeClientSource = ({ clientModule, moduleExports, moduleName, runtimeModuleName, voidTransport }) => {
 	const { Root } = moduleExports;
 	const fateExportName = moduleExports.fate?.manifest ? "fate" : moduleExports.fateServer?.manifest ? "fateServer" : null;
@@ -388,7 +532,8 @@ const createVoidFetch = (options: {
 	const clientSetup = voidTransport ? ` => {
   const origin = options.origin ?? getDefaultOrigin();
 
-  return createClient<[GeneratedClientRoots, GeneratedClientMutations]>({
+  return createClient<[GeneratedClientRoots, GeneratedClientMutations], typeof hydrationScope>({
+    hydrationScope,
     mutations,
     onLiveError: options.onLiveError,
     roots,
@@ -407,7 +552,8 @@ const createVoidFetch = (options: {
     types: ${typesBlock.trimStart()},
   });
 }` : ` =>
-  createClient<[GeneratedClientRoots, GeneratedClientMutations]>({
+  createClient<[GeneratedClientRoots, GeneratedClientMutations], typeof hydrationScope>({
+    hydrationScope,
     mutations,
     onLiveError: options.onLiveError,
     roots,
@@ -448,6 +594,7 @@ ${rootBlock}
 
 export type GeneratedClientMutations = typeof mutations;
 export type GeneratedClientRoots = typeof roots;
+const hydrationScope = ${JSON.stringify(getHydrationScope(moduleName, roots, types))} as const;
 
 export const createFateClient = (${createClientOptions})${clientSetup};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nkzw/fate",
-  "version": "1.0.3",
+  "version": "1.2.0",
   "description": "fate is a modern data client for React.",
   "homepage": "https://github.com/nkzw-tech/fate",
   "license": "MIT",
@@ -72,22 +72,30 @@
     "@trpc/client": "^11.17.0",
     "@trpc/server": "^11.17.0",
     "drizzle-orm": "^0.45.2",
-    "vite": "^8.0.13"
+    "vite": "^8.0.16"
   },
   "peerDependencies": {
     "@trpc/client": "^11.6.0",
     "drizzle-orm": "^0.45.0",
+    "graphql": "^16.0.0",
+    "graphql-sse": "^2.6.0",
     "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "peerDependenciesMeta": {
     "drizzle-orm": {
       "optional": true
     },
+    "graphql": {
+      "optional": true
+    },
+    "graphql-sse": {
+      "optional": true
+    },
     "vite": {
       "optional": true
     }
   },
   "scripts": {
-    "build": "vp pack -d lib --target=node24 src/index.ts src/clientStub.ts src/list.ts src/cli.ts src/server.ts src/server/drizzle.ts src/server/prisma.ts src/vite.ts"
+    "build": "vp pack -d lib --target=node24 src/index.ts src/clientStub.ts src/list.ts src/cli.ts src/server.ts src/server/drizzle.ts src/server/prisma.ts src/graphqlTransport.ts src/vite.ts"
   }
 }