houdini-react 2.0.0-next.4 → 2.0.0-next.40

package/runtime/hydration.tsx

@@ -0,0 +1,155 @@
+import React from 'react'
+import { hydrateRoot, createRoot } from 'react-dom/client'
+import type { QueryArtifact, GraphQLVariables } from '$houdini/runtime'
+import type { Cache } from '$houdini/runtime/cache'
+import type { HoudiniClient } from '$houdini/runtime/client'
+import cacheRef from '$houdini/runtime/cache'
+
+import { injectComponents } from './componentFields.js'
+import { router_cache, type RouterCache } from './routing/index.js'
+import clientFactory from './client.js'
+
+declare global {
+	interface Window {
+		__houdini__client__?: HoudiniClient
+		__houdini__pending_components__?: Record<string, any>
+		__houdini__cache__?: Cache
+		__houdini__hydration__layer__?: any
+		__houdini__initial__cache__?: any
+		__houdini__initial__session__?: any
+		__houdini__pending_artifacts__?: Record<string, QueryArtifact>
+		__houdini__pending_data__?: Record<string, any>
+		__houdini__pending_variables__?: Record<string, GraphQLVariables>
+		__houdini__nav_caches__?: RouterCache
+	}
+}
+
+export function hydrate_page(
+	App: React.ComponentType<any>,
+	Component: React.ComponentType<any>,
+	pageName: string,
+	pendingQueries: string[]
+) {
+	// set up the client using its internally-managed singleton cache (cacheRef).
+	// the client's cachePolicy and queryPlugin are closure-bound to cacheRef at
+	// construction time, so we must use that same instance as window.__houdini__cache__
+	// rather than creating a second cache and trying to wire them together afterward.
+	window.__houdini__client__ ??= clientFactory()
+	window.__houdini__cache__ ??= cacheRef
+
+	// configure the singleton for React component field support
+	if (window.__houdini__pending_components__) {
+		window.__houdini__client__.componentCache = window.__houdini__pending_components__
+	}
+	window.__houdini__cache__._internal_unstable.componentCache =
+		window.__houdini__client__.componentCache
+	window.__houdini__cache__._internal_unstable.createComponent = (
+		fn: React.ComponentType<any>,
+		props: any
+	) => React.createElement(fn, props)
+
+	window.__houdini__hydration__layer__ ??=
+		window.__houdini__cache__._internal_unstable.storage.createLayer()
+
+	// rehydrate the cache from the server-serialized snapshot
+	window.__houdini__cache__?.hydrate(
+		window.__houdini__initial__cache__,
+		window.__houdini__hydration__layer__
+	)
+
+	// prime the data/artifact caches from anything the server streamed
+	const initialData: Record<string, any> = {}
+	const initialArtifacts: Record<string, QueryArtifact> = {}
+
+	for (const [artifactName, artifact] of Object.entries(
+		window.__houdini__pending_artifacts__ ?? {}
+	)) {
+		initialArtifacts[artifactName] = artifact
+
+		if (window.__houdini__pending_data__?.[artifactName]) {
+			const variables = window.__houdini__pending_variables__![artifactName]
+
+			if ((artifact as any).hasComponents) {
+				injectComponents({
+					cache: window.__houdini__cache__!,
+					selection: (artifact as any).selection,
+					data: window.__houdini__pending_data__[artifactName],
+					variables,
+				})
+			}
+
+			const observer = window.__houdini__client__!.observe({
+				artifact,
+				cache: window.__houdini__cache__,
+				initialValue: window.__houdini__cache__!.read({
+					selection: (artifact as any).selection,
+					variables,
+				}).data,
+				initialVariables: variables,
+			})
+
+			observer.send({
+				setup: true,
+				variables,
+				session: window.__houdini__initial__session__,
+			})
+
+			initialData[artifactName] = observer
+		}
+	}
+
+	if (!window.__houdini__nav_caches__) {
+		window.__houdini__nav_caches__ = router_cache({
+			pending_queries: pendingQueries,
+			initialData,
+			initialVariables: window.__houdini__pending_variables__,
+			initialArtifacts,
+			components: { [pageName]: Component },
+		})
+		_flush_pending_artifacts()
+	}
+
+	hydrateRoot(
+		document,
+		<App
+			initialURL={window.location.pathname}
+			cache={window.__houdini__cache__}
+			session={window.__houdini__initial__session__}
+			{...window.__houdini__nav_caches__}
+		/>
+	)
+}
+
+const _pendingArtifacts: Array<[string, QueryArtifact]> = []
+
+export function register_artifact(name: string, artifact: QueryArtifact) {
+	const caches = window.__houdini__nav_caches__
+	if (!caches?.artifact_cache) {
+		_pendingArtifacts.push([name, artifact])
+		return
+	}
+	if (!caches.artifact_cache.has(name)) {
+		caches.artifact_cache.set(name, artifact)
+	}
+}
+
+function _flush_pending_artifacts() {
+	while (_pendingArtifacts.length > 0) {
+		const [name, artifact] = _pendingArtifacts.shift()!
+		register_artifact(name, artifact)
+	}
+}
+
+export function mount_static_app(App: React.ComponentType<any>, manifest: any) {
+	const root = createRoot(document.getElementById('app')!)
+
+	root.render(
+		React.createElement(App, {
+			initialURL: window.location.pathname,
+			cache: cacheRef,
+			session: null,
+			manifest,
+			...router_cache(),
+		})
+	)
+}

package/runtime/index.tsx

@@ -0,0 +1,66 @@
+import type { GraphQLObject } from 'houdini/runtime'
+import type { Cache } from 'houdini/runtime/cache'
+
+import client from './client.js'
+import manifest from './manifest.js'
+import { Router as RouterImpl, type RouterCache, RouterContextProvider } from './routing/index.js'
+
+export * from './hooks/index.js'
+export {
+	router_cache,
+	useCache,
+	useSession,
+	useLocation,
+	useRoute,
+	useCurrentVariables,
+	notFound,
+	unauthorized,
+	forbidden,
+	httpError,
+	redirect,
+	isRoutingError,
+	isApiError,
+	RoutingError,
+	RedirectError,
+} from './routing/index.js'
+export * from './Link.js'
+
+export function Router({
+	cache,
+	initialURL,
+	artifact_cache,
+	component_cache,
+	data_cache,
+	ssr_signals,
+	last_variables,
+	session,
+	assetPrefix,
+	injectToStream,
+}: {
+	initialURL: string
+	initialVariables: GraphQLObject
+	cache: Cache
+	session?: App.Session
+	assetPrefix: string
+	injectToStream?: (chunk: string) => void
+} & RouterCache) {
+	return (
+		<RouterContextProvider
+			client={client()}
+			cache={cache}
+			artifact_cache={artifact_cache}
+			component_cache={component_cache}
+			data_cache={data_cache}
+			ssr_signals={ssr_signals}
+			last_variables={last_variables}
+			session={session}
+		>
+			<RouterImpl
+				initialURL={initialURL}
+				manifest={manifest}
+				assetPrefix={assetPrefix}
+				injectToStream={injectToStream}
+			/>
+		</RouterContextProvider>
+	)
+}

package/runtime/manifest.ts

@@ -0,0 +1,6 @@
+import type { RouterManifest } from 'houdini/runtime'
+
+// @ts-expect-error: this file will get replaced by the build system
+const manifest: RouterManifest = {}
+
+export default manifest

package/runtime/package.json

@@ -0,0 +1 @@
+{"type":"module","main":"./index.tsx"}

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))
+}