houdini-react 2.0.0-next.8 → 2.0.0

package/runtime/routing/cache.ts

@@ -0,0 +1,57 @@
+// a suspense cache is an object that maintains a key-value store of
+// objects. If a value is missing when get() is called, a promise
+// is thrown that resolves when a value is passed to set()
+import { LRUCache } from 'houdini/runtime'
+
+export function suspense_cache<T>(initialData?: Record<string, T>): SuspenseCache<T> {
+	const cache = new SuspenseCache<T>()
+
+	for (const [key, value] of Object.entries(initialData ?? {})) {
+		cache.set(key, value)
+	}
+
+	return cache
+}
+
+export class SuspenseCache<_Data> extends LRUCache<_Data> {
+	// if get is called before set, we need to invoke a callback.
+	// that means we need a place to put our callbacks
+	#callbacks: Map<string, { resolve: () => void; reject: () => void }[]> = new Map()
+
+	get(key: string): _Data {
+		// if there is a value, use that
+		if (super.has(key)) {
+			return super.get(key)!
+		}
+
+		// we don't have a value, so we need to throw a promise
+		// that resolves when a value is passed to set()
+		throw new Promise<void>((resolve, reject) => {
+			this.#subscribe(key, resolve, reject)
+		})
+	}
+
+	override clear() {
+		super.clear()
+		this.#callbacks.clear()
+	}
+
+	set(key: string, value: _Data) {
+		// perform the set like normal
+		super.set(key, value)
+
+		// if there are subscribers, resolve them
+		if (this.#callbacks.has(key)) {
+			// resolve all of the callbacks
+			this.#callbacks.get(key)?.forEach(({ resolve }) => {
+				resolve()
+			})
+			// delete the key
+			this.#callbacks.delete(key)
+		}
+	}
+
+	#subscribe(key: string, resolve: () => void, reject: () => void) {
+		this.#callbacks.set(key, [...(this.#callbacks.get(key) || []), { resolve, reject }])
+	}
+}

package/runtime/routing/errors.tsx

@@ -0,0 +1,145 @@
+import type { GraphQLError } from 'houdini/runtime'
+import React from 'react'
+
+export class GraphQLErrors extends Error {
+	graphqlErrors: GraphQLError[]
+
+	constructor(errors: GraphQLError[]) {
+		super(errors.map((e) => e.message).join('\n'))
+		this.name = 'GraphQLErrors'
+		this.graphqlErrors = errors
+	}
+}
+
+let _currentSegment: string | undefined
+
+export function setCurrentSegment(id: string | undefined): void {
+	_currentSegment = id
+}
+
+function getCurrentSegment(): string | undefined {
+	return _currentSegment
+}
+
+export class RoutingError extends Error {
+	status: number
+	segment: string | undefined
+
+	constructor(status: number) {
+		super(`Routing error: ${status}`)
+		this.name = 'RoutingError'
+		this.status = status
+		this.segment = getCurrentSegment()
+	}
+}
+
+export class RedirectError extends Error {
+	status: number
+	location: string
+
+	constructor(status: number, location: string) {
+		super(`Redirect: ${status} ${location}`)
+		this.name = 'RedirectError'
+		this.status = status
+		this.location = location
+	}
+}
+
+export function isRoutingError(error: unknown): error is RoutingError {
+	return error instanceof RoutingError
+}
+
+export function isApiError(error: unknown): error is GraphQLErrors {
+	return error instanceof GraphQLErrors
+}
+
+export function notFound(): never {
+	throw new RoutingError(404)
+}
+
+export function unauthorized(): never {
+	throw new RoutingError(401)
+}
+
+export function forbidden(): never {
+	throw new RoutingError(403)
+}
+
+export function httpError(status: number): never {
+	throw new RoutingError(status)
+}
+
+export function redirect(status: 300 | 301 | 302 | 303 | 307 | 308, location: string): never {
+	throw new RedirectError(status, location)
+}
+
+// Mutable ref passed from the server renderer so that a synchronous RoutingError
+// or redirect() can propagate the correct HTTP status/location before streaming.
+export const StatusContext = React.createContext<{ status: number; location?: string } | null>(null)
+
+type HoudiniErrorBoundaryProps = {
+	errorView: React.ComponentType<{
+		errors: Array<Error | GraphQLError>
+		children: React.ReactNode
+	}>
+	children: React.ReactNode
+}
+
+type HoudiniErrorBoundaryState = {
+	hasError: boolean
+	errors: Array<Error | GraphQLError>
+}
+
+export class HoudiniErrorBoundary extends React.Component<
+	HoudiniErrorBoundaryProps,
+	HoudiniErrorBoundaryState
+> {
+	static contextType = StatusContext
+	declare context: React.ContextType<typeof StatusContext>
+
+	constructor(
+		props: HoudiniErrorBoundaryProps,
+		context: React.ContextType<typeof StatusContext>
+	) {
+		super(props, context)
+		// Second-pass SSR: statusRef is pre-set to an error status by on_render after the first
+		// render threw. Start in error state immediately so children never render (and never throw).
+		if (typeof window === 'undefined' && context && context.status >= 400) {
+			this.state = {
+				hasError: true,
+				errors: [new RoutingError(context.status)],
+			}
+		} else {
+			this.state = { hasError: false, errors: [] }
+		}
+	}
+
+	static getDerivedStateFromError(error: unknown): HoudiniErrorBoundaryState {
+		if (error instanceof GraphQLErrors) {
+			return { hasError: true, errors: error.graphqlErrors }
+		}
+		return {
+			hasError: true,
+			errors: [error instanceof Error ? error : new Error(String(error))],
+		}
+	}
+
+	componentDidCatch(error: Error): void {
+		if (this.context) {
+			if (error instanceof RoutingError) {
+				this.context.status = error.status
+			} else if (error instanceof RedirectError) {
+				this.context.status = error.status
+				this.context.location = error.location
+			}
+		}
+	}
+
+	render() {
+		if (this.state.hasError) {
+			const ErrorView = this.props.errorView
+			return <ErrorView errors={this.state.errors}>{this.props.children}</ErrorView>
+		}
+		return this.props.children
+	}
+}

package/runtime/routing/index.ts

@@ -0,0 +1,17 @@
+export * from './Router.js'
+export { type SuspenseCache, suspense_cache } from './cache.js'
+export {
+	HoudiniErrorBoundary,
+	GraphQLErrors,
+	RoutingError,
+	RedirectError,
+	notFound,
+	unauthorized,
+	forbidden,
+	httpError,
+	redirect,
+	isRoutingError,
+	isApiError,
+	StatusContext,
+	setCurrentSegment,
+} from './errors.js'

package/runtime/testing.tsx

@@ -0,0 +1,163 @@
+// @refresh reset
+import { getCurrentConfig } from '$houdini/runtime/config'
+import { Cache } from 'houdini/runtime/cache'
+import { DataSource } from 'houdini/runtime/types'
+import { HoudiniClient } from '$houdini/runtime/client'
+import React from 'react'
+
+import { scalarMarshalers, serializeSearch } from './resolve-href.js'
+import { Router as RouterImpl, RouterContextProvider, router_cache } from './routing/index.js'
+import manifest from './manifest.js'
+
+type MockValue =
+	| Record<string, unknown>
+	| ((vars: any) => Record<string, unknown>)
+	| AsyncIterable<Record<string, unknown>>
+	| ((vars: any) => AsyncIterable<Record<string, unknown>>)
+
+// buildMockPath turns a route pattern, its params, and an optional search object into
+// the concrete path a test wants to render. The typed createMock wrapper calls this so
+// that param substitution (and its missing-param error) and search serialization both
+// happen before the path reaches _createMock.
+export function buildMockPath(
+	pattern: string,
+	params: Record<string, string>,
+	search?: Record<string, unknown>
+): string {
+	if (!search) {
+		return buildURL(pattern, params)
+	}
+	// marshal custom-scalar search values the same way <Link> does, so tests exercise
+	// the real serialization path
+	const m = manifest as any
+	const page = m.pages[m.pagesByUrl[pattern]] as
+		| { searchParams?: ReadonlyArray<{ name: string; type: string }> }
+		| undefined
+	const marshalers = scalarMarshalers(page?.searchParams, getCurrentConfig()?.scalars)
+	return buildURL(pattern, params) + serializeSearch(search, marshalers)
+}
+
+export function _createMock({
+	path,
+	data: mocks,
+}: {
+	path: string
+	data: Record<string, MockValue>
+}): React.ComponentType<{}> {
+	// the route patterns are anchored to the path, so strip any search string
+	// before matching
+	const pathname = path.split('?')[0]
+
+	// Validate required mocks up-front at the call site so the error points
+	// directly to the createMock() call rather than surfacing during rendering.
+	const pages = manifest.pages as Record<
+		string,
+		{ pattern: RegExp; documents: Record<string, unknown> }
+	>
+	const page = Object.values(pages).find((p) => p.pattern.test(pathname))
+	if (page) {
+		const missing = Object.keys(page.documents).filter((name) => !(name in mocks))
+		if (missing.length > 0) {
+			throw new Error(
+				`createMock: missing mock data for ${missing.map((n) => `"${n}"`).join(', ')} on route "${pathname}". Add ${missing.length === 1 ? 'it' : 'them'} to the data object passed to createMock.`
+			)
+		}
+	}
+
+	const cache = new Cache(getCurrentConfig())
+
+	const mockPlugin = () => ({
+		network(ctx: any, { resolve }: any) {
+			const mock = mocks[ctx.artifact.name]
+			if (mock === undefined) {
+				throw new Error(
+					`createMock: "${ctx.artifact.name}" fired but was not in data. Add it to the data object passed to createMock.`
+				)
+			}
+
+			if (ctx.artifact.kind === 'HoudiniSubscription') {
+				const iterable =
+					typeof mock === 'function'
+						? (mock as (v: any) => AsyncIterable<Record<string, unknown>>)(
+								ctx.variables ?? {}
+							)
+						: (mock as AsyncIterable<Record<string, unknown>>)
+				const iterator = iterable[Symbol.asyncIterator]()
+				ctx.abortController.signal.addEventListener(
+					'abort',
+					() => {
+						iterator.return?.()
+					},
+					{ once: true }
+				)
+				;(async () => {
+					for await (const data of { [Symbol.asyncIterator]: () => iterator }) {
+						if (ctx.abortController.signal.aborted) break
+						resolve(ctx, {
+							data,
+							errors: null,
+							fetching: false,
+							variables: null,
+							source: DataSource.Network,
+							partial: false,
+							stale: false,
+						})
+					}
+				})()
+				return
+			}
+
+			const data = typeof mock === 'function' ? mock(ctx.variables ?? {}) : mock
+			resolve(ctx, {
+				data,
+				errors: null,
+				fetching: false,
+				variables: null,
+				source: DataSource.Network,
+				partial: false,
+				stale: false,
+			})
+		},
+	})
+
+	// Pass the same fresh cache to the client so the cache policy plugin doesn't
+	// reach into the global cacheRef singleton and return stale data from previous tests.
+	// the mockPlugin intercepts the network, so no url is needed (and the client no longer takes one)
+	const mockClient = new HoudiniClient({
+		plugins: [mockPlugin as any],
+		cache,
+	})
+
+	return function MockApp() {
+		const cachesRef = React.useRef<ReturnType<typeof router_cache> | null>(null)
+		if (cachesRef.current === null) {
+			cachesRef.current = router_cache()
+		}
+		const caches = cachesRef.current
+		return (
+			<RouterContextProvider
+				client={mockClient}
+				cache={cache}
+				artifact_cache={caches.artifact_cache}
+				component_cache={caches.component_cache}
+				data_cache={caches.data_cache}
+				ssr_signals={caches.ssr_signals}
+				last_variables={caches.last_variables}
+			>
+				<React.Suspense fallback={null}>
+					<RouterImpl manifest={manifest} initialURL={path} assetPrefix="" />
+				</React.Suspense>
+			</RouterContextProvider>
+		)
+	}
+}
+
+function buildURL(pattern: string, params: Record<string, string>): string {
+	return pattern.replace(/\[([^\]]+)\]/g, (_, key) => {
+		const value = params[key]
+		if (value === undefined) {
+			throw new Error(`createMock: missing param "${key}" for pattern "${pattern}"`)
+		}
+		return String(value)
+	})
+}

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/server/index.d.ts

@@ -0,0 +1 @@
+export { renderToStream } from 'react-streaming/server';

package/server/index.js

@@ -0,0 +1,4 @@
+import { renderToStream } from "react-streaming/server";
+export {
+  renderToStream
+};

package/vite/index.d.ts

@@ -0,0 +1,3 @@
+import { VitePluginContext } from 'houdini/vite';
+import { PluginOption } from 'vite';
+export default function (ctx: VitePluginContext): PluginOption;