houdini-react 2.0.0-next.35 → 2.0.0-next.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "houdini-react",
-  "version": "2.0.0-next.35",
+  "version": "2.0.0-next.37",
   "description": "The React plugin for houdini",
   "keywords": [
     "typescript",
@@ -81,13 +81,13 @@
     }
   },
   "optionalDependencies": {
-    "houdini-react-darwin-x64": "2.0.0-next.35",
-    "houdini-react-darwin-arm64": "2.0.0-next.35",
-    "houdini-react-linux-x64": "2.0.0-next.35",
-    "houdini-react-linux-arm64": "2.0.0-next.35",
-    "houdini-react-win32-x64": "2.0.0-next.35",
-    "houdini-react-win32-arm64": "2.0.0-next.35",
-    "houdini-react-wasm": "2.0.0-next.35"
+    "houdini-react-darwin-x64": "2.0.0-next.37",
+    "houdini-react-darwin-arm64": "2.0.0-next.37",
+    "houdini-react-linux-x64": "2.0.0-next.37",
+    "houdini-react-linux-arm64": "2.0.0-next.37",
+    "houdini-react-win32-x64": "2.0.0-next.37",
+    "houdini-react-win32-arm64": "2.0.0-next.37",
+    "houdini-react-wasm": "2.0.0-next.37"
   },
   "scripts": {
     "compile": "scripts build-go",

package/postInstall.js

@@ -5,7 +5,7 @@ const https = require('https')
 const child_process = require('child_process')
 
 // Adjust the version you want to install. You can also make this dynamic.
-const BINARY_DISTRIBUTION_VERSION = '2.0.0-next.35'
+const BINARY_DISTRIBUTION_VERSION = '2.0.0-next.37'
 
 // Windows binaries end with .exe so we need to special case them.
 const binaryName = process.platform === 'win32' ? 'houdini-react.exe' : 'houdini-react'

package/runtime/Link.tsx

@@ -0,0 +1,75 @@
+// this file is generated by houdini — do not edit
+// @refresh reset
+import type { AnchorHTMLAttributes, DetailedHTMLProps } from 'react'
+import React from 'react'
+
+// @ts-ignore
+import type rawManifest from './manifest.js'
+// @ts-ignore
+import type { RouteScalars } from './manifest.js'
+
+import { resolveHref } from './resolve-href.js'
+
+type _Pages = (typeof rawManifest)['pages']
+type _TSType<T extends string> = T extends keyof RouteScalars
+	? RouteScalars[T]
+	: T extends 'Int' | 'Float'
+		? number
+		: T extends 'ID'
+			? string | number
+			: T extends 'Boolean'
+				? boolean
+				: string
+type _Param = { readonly name: string; readonly type: string; readonly optional: boolean }
+type _ParamObj<Ps extends readonly _Param[]> = {
+	[P in Ps[number] as P['optional'] extends true ? P['name'] : never]?: _TSType<P['type']>
+} & {
+	[P in Ps[number] as P['optional'] extends true ? never : P['name']]: _TSType<P['type']>
+}
+
+type _ExternalHref =
+	| `http://${string}`
+	| `https://${string}`
+	| `mailto:${string}`
+	| `tel:${string}`
+	| `blob:${string}`
+	| `data:${string}`
+	| `//${string}`
+	| `#${string}`
+	| `./${string}`
+	| `../${string}`
+
+// All known app route URL strings — useful as a constraint for custom link wrappers.
+export type RouteHrefs = _Pages[keyof _Pages] extends { readonly url: infer U extends string }
+	? U
+	: never
+
+// Separate 'to' from 'params' so TypeScript evaluates them independently:
+// - 'to' completions show all routes (including parameterized) because 'to' itself is always valid
+// - 'params' is a separate intersection that errors when required but absent
+type _PageForRoute<H extends string> = Extract<_Pages[keyof _Pages], { readonly url: H }>
+type _ParamsForRoute<H extends string> = [_PageForRoute<H>] extends [never]
+	? { params?: never }
+	: _PageForRoute<H> extends { readonly params: readonly [] }
+		? { params?: never }
+		: _PageForRoute<H> extends { readonly params: infer Ps extends readonly _Param[] }
+			? { params: _ParamObj<Ps> }
+			: { params?: never }
+
+export type LinkProps<H extends RouteHrefs | _ExternalHref = RouteHrefs | _ExternalHref> = Omit<
+	DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>,
+	'href'
+> & { to: H; preload?: boolean | 'data' | 'component' | 'page' } & _ParamsForRoute<H>
+
+export function Link<H extends RouteHrefs | _ExternalHref>({
+	to,
+	params,
+	preload,
+	...rest
+}: LinkProps<H>): React.ReactElement {
+	const href =
+		params != null
+			? resolveHref(to as string, params as Record<string, string | number | boolean>)
+			: (to as string)
+	return React.createElement('a', { ...rest, href, 'data-houdini-preload': preload })
+}

package/runtime/hooks/recycleNodesInto.ts

@@ -33,6 +33,13 @@ export function recycleNodesInto<T>(prev: T | null | undefined, next: T): T {
 		}
 
 		if (!changed && prevLen === nextLen) return prev as T
+
+		// Copy non-index own properties from next (e.g. __id from @includeListID)
+		for (const key of Object.keys(next as any)) {
+			if (isNaN(Number(key))) {
+				;(result as any)[key] = (next as any)[key]
+			}
+		}
 		return result as unknown as T
 	}
 

package/runtime/hooks/useDocumentHandle.ts

@@ -4,6 +4,7 @@ import { ArtifactKind } from 'houdini/runtime'
 import type {
 	GraphQLObject,
 	GraphQLVariables,
+	GraphQLError,
 	CursorHandlers,
 	OffsetHandlers,
 	PageInfo,
@@ -205,7 +206,7 @@ export type DocumentHandle<
 	data: _Data
 	partial: boolean
 	fetching: boolean
-	errors: { message: string }[] | null
+	errors: GraphQLError[] | null
 	fetch: FetchFn<_Data, Partial<_Input>>
 	variables: _Input
 } & RefetchHandlers<_Artifact, _Data, _Input>

package/runtime/hooks/useMutation.ts

@@ -25,7 +25,7 @@ export function useMutation<
 	artifact,
 }: {
 	artifact: MutationArtifact
-}): [boolean, MutationHandler<_Result, _Input, _Optimistic>] {
+}): [MutationHandler<_Result, _Input, _Optimistic>, boolean] {
 	// build the live document we'll use to send values
 	const [storeValue, observer] = useDocumentStore<_Result, _Input>({ artifact })
 
@@ -62,7 +62,7 @@ export function useMutation<
 		}
 	}
 
-	return [pending, mutate]
+	return [mutate, pending]
 }
 
 export class RuntimeGraphQLError extends Error {

package/runtime/hooks/useQuery.ts

@@ -1,4 +1,4 @@
-import type { GraphQLObject, QueryArtifact } from 'houdini/runtime'
+import type { GraphQLObject, GraphQLVariables, QueryArtifact } from 'houdini/runtime'
 
 import type { UseQueryConfig } from './useQueryHandle.js'
 import { useQueryHandle } from './useQueryHandle.js'

package/runtime/hooks/useSubscriptionHandle.ts

@@ -1,10 +1,15 @@
-import type { SubscriptionArtifact, GraphQLObject, GraphQLVariables } from 'houdini/runtime'
+import type {
+	SubscriptionArtifact,
+	GraphQLObject,
+	GraphQLVariables,
+	GraphQLError,
+} from 'houdini/runtime'
 
 import { useDocumentSubscription } from './useDocumentSubscription.js'
 
 export type SubscriptionHandle<_Result extends GraphQLObject, _Input extends GraphQLVariables> = {
 	data: _Result | null
-	errors: { message: string }[] | null
+	errors: GraphQLError[] | null
 	variables: _Input
 	listen: (args: { variables?: _Input }) => void
 	unlisten: () => void

package/runtime/index.tsx

@@ -6,7 +6,8 @@ import manifest from './manifest.js'
 import { Router as RouterImpl, type RouterCache, RouterContextProvider } from './routing/index.js'
 
 export * from './hooks/index.js'
-export { router_cache, useSession, useLocation, useRoute } from './routing/index.js'
+export { router_cache, useCache, useSession, useLocation, useRoute } from './routing/index.js'
+export * from './Link.js'
 
 export function Router({
 	cache,

package/runtime/resolve-href.ts

@@ -0,0 +1,14 @@
+export function resolveHref(
+	href: string,
+	params: Record<string, string | number | boolean>
+): string {
+	// optional [[param]] — strip the whole /[[param]] segment when the value is absent
+	href = href.replace(/\/\[\[([^\]]+)\]\]/g, (_, key: string) => {
+		const val = params[key]
+		return val !== undefined ? '/' + String(val) : ''
+	})
+	// rest [...slug] — substitute [..slug] with the value (or empty string when absent)
+	href = href.replace(/\[\.\.\.([^\]]+)\]/g, (_, key: string) => String(params[key] ?? ''))
+	// regular [param]
+	return href.replace(/\[([^\]]+)\]/g, (_, key: string) => String(params[key] ?? key))
+}

package/runtime/tsconfig.json

@@ -0,0 +1,39 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "$houdini": ["."],
+            "$houdini/*": ["./*"],
+            "~": ["../src"],
+            "~/*": ["../src/*"]
+        },
+        "rootDirs": ["..", "./types"],
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "esModuleInterop": false,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx"
+    },
+    "include": [
+        "ambient.d.ts",
+        "./types/**/$types.d.ts",
+        "../vite.config.ts",
+        "../src/**/*.js",
+        "../src/**/*.ts",
+        "../src/**/*.jsx",
+        "../src/**/*.tsx",
+        "../src/+app.d.ts"
+    ],
+    "exclude": ["../node_modules/**", "./[!ambient.d.ts]**"]
+}

package/vite/index.js

@@ -6,10 +6,50 @@ import {
   client_build_directory
 } from "houdini/router/conventions";
 import { load_manifest } from "houdini/router/manifest";
-import { existsSync } from "node:fs";
+import { existsSync, mkdirSync, writeFileSync } from "node:fs";
 import { createRequire } from "node:module";
 import { build } from "vite";
 import { transform_file } from "./transform.js";
+const REACT_TSCONFIG_STUB = `{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "$houdini": ["."],
+            "$houdini/*": ["./*"],
+            "~": ["../src"],
+            "~/*": ["../src/*"]
+        },
+        "rootDirs": ["..", "./types"],
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "esModuleInterop": false,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx"
+    },
+    "include": [
+        "ambient.d.ts",
+        "./types/**/$types.d.ts",
+        "../vite.config.ts",
+        "../src/**/*.js",
+        "../src/**/*.ts",
+        "../src/**/*.jsx",
+        "../src/**/*.tsx",
+        "../src/+app.d.ts"
+    ],
+    "exclude": ["../node_modules/**", "./[!ambient.d.ts]**"]
+}
+`;
 const _require = createRequire(import.meta.url);
 let reactStreamingServerPath = "";
 try {
@@ -31,6 +71,18 @@ function index_default(ctx) {
     },
     async config(userConfig, env) {
       viteEnv = env;
+      const runtimeDir = path.join(
+        ctx.config.root_dir,
+        ctx.config.config_file.runtimeDir ?? ".houdini"
+      );
+      try {
+        mkdirSync(runtimeDir, { recursive: true });
+        const tsconfigPath = path.join(runtimeDir, "tsconfig.json");
+        if (!existsSync(tsconfigPath)) {
+          writeFileSync(tsconfigPath, REACT_TSCONFIG_STUB);
+        }
+      } catch {
+      }
       if (userConfig.build?.ssr) {
         return reactStreamingServerPath ? { resolve: { alias: { "react-streaming/server": reactStreamingServerPath } } } : {};
       }
@@ -86,10 +138,10 @@ function index_default(ctx) {
       } : conf;
     },
     resolveId(id) {
-      if (!id.includes("virtual:houdini")) {
-        return;
+      if (id.includes("virtual:houdini")) {
+        return id.substring(id.indexOf("virtual:houdini"));
       }
-      return id.substring(id.indexOf("virtual:houdini"));
+      return null;
     },
     hotUpdate() {
       cfCache = null;