houdini-react 2.0.0-next.8 → 2.0.0

package/runtime/hooks/useMutation.ts

@@ -0,0 +1,80 @@
+import type {
+	MutationArtifact,
+	GraphQLObject,
+	QueryResult,
+	GraphQLVariables,
+} from 'houdini/runtime'
+
+import { useSession } from '../routing/Router.js'
+import { useDocumentStore } from './useDocumentStore.js'
+
+type MutationConfig<_Optimistic extends GraphQLObject> = {
+	metadata?: App.Metadata
+	fetch?: typeof globalThis.fetch
+	optimisticResponse?: _Optimistic
+	abortController?: AbortController
+}
+
+// When the mutation has no variables its $input is `null | undefined`, so requiring a
+// `variables` key would force callers to write `{ variables: undefined }`. In that case the
+// whole argument is optional and the handler can be invoked as `mutate()`; otherwise
+// `variables` is required.
+export type MutationHandler<_Result, _Input, _Optimistic extends GraphQLObject> = [
+	undefined,
+] extends [_Input]
+	? (args?: { variables?: _Input } & MutationConfig<_Optimistic>) => Promise<_Result>
+	: (args: { variables: _Input } & MutationConfig<_Optimistic>) => Promise<_Result>
+
+export function useMutation<
+	_Result extends GraphQLObject,
+	_Input extends GraphQLVariables,
+	_Optimistic extends GraphQLObject,
+>({
+	artifact,
+}: {
+	artifact: MutationArtifact
+}): [MutationHandler<_Result, _Input, _Optimistic>, boolean] {
+	// build the live document we'll use to send values
+	const [storeValue, observer] = useDocumentStore<_Result, _Input>({ artifact })
+
+	// grab the pending state from the document store
+	const pending = storeValue.fetching
+
+	// grab the current session value
+	const [session] = useSession()
+
+	//  sending the mutation just means invoking the observer's send method
+	const mutate = async (
+		args: { variables?: _Input } & MutationConfig<_Optimistic> = {}
+	): Promise<_Result> => {
+		const { metadata, fetch, variables, abortController, ...mutationConfig } = args
+		const result = await observer.send({
+			variables,
+			metadata,
+			session,
+			abortController,
+			stuff: {
+				...mutationConfig,
+			},
+		})
+
+		if (result.errors && result.errors.length > 0) {
+			const err = new RuntimeGraphQLError(
+				result.errors.map((error) => error.message).join('. ')
+			)
+			err.raw = result.errors
+			throw err
+		}
+
+		// hand the data back so callers can use the mutation's result (e.g. `const data =
+		// await mutate(...)`), not just its side effects. Errors already threw above, so data is
+		// present on a successful mutation.
+		return result.data as _Result
+	}
+
+	return [mutate as MutationHandler<_Result, _Input, _Optimistic>, pending]
+}
+
+export class RuntimeGraphQLError extends Error {
+	raw: QueryResult['errors'] = []
+}

package/runtime/hooks/useMutationForm.tsx

@@ -0,0 +1,163 @@
+import { getCurrentConfig } from '$houdini/runtime'
+import type { MutationArtifact, GraphQLObject, GraphQLVariables } from 'houdini/runtime'
+import { coerceFormData, interpolateRedirect } from 'houdini/runtime'
+import React from 'react'
+
+import { useSession, useRoute, useFormResult, useFormToken } from '../routing/Router.js'
+import { useDocumentStore } from './useDocumentStore.js'
+
+// a document with no variables still needs an InputObject shape for the coercer
+const EMPTY_INPUT = { fields: {}, types: {}, defaults: {}, runtimeScalars: {} }
+
+// data is null on the error path (and before any submission), populated on success
+export type MutationFormState<_Result = any> = { data: _Result | null; errors: any } | null
+
+export type UseMutationFormOptions<_Result = any> = {
+	// disambiguates multiple forms for the same mutation on one page, and is the key the
+	// server uses for the injected result. Defaults to the @endpoint(id:) or mutation name.
+	id?: string
+	// enhanced-path-only side effects (no-ops without JS, which is the correct degradation)
+	onSuccess?: (data: _Result) => void
+	onError?: (errors: any) => void
+}
+
+export type MutationForm<_Result = any> = {
+	// spread onto a <form>: a real string action (native POST before hydration) that the
+	// onSubmit intercepts after. Identical on server and client → clean hydration.
+	form: {
+		action: string
+		method: 'post'
+		onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
+		encType?: 'multipart/form-data'
+	}
+	// the hidden marker fields the no-JS POST needs; render inside the <form>
+	hidden: React.ReactNode
+	// an ergonomic alternative to `{...form}` + `hidden`: a <Form> that renders the form,
+	// injects the markers, and publishes `pending` to useMutationFormStatus() for any child.
+	Form: React.FC<React.PropsWithChildren<React.FormHTMLAttributes<HTMLFormElement>>>
+	// { data, errors } | null — seeded from the server's no-JS result, then the enhanced result
+	state: MutationFormState<_Result>
+	pending: boolean
+}
+
+// FormStatusContext carries the nearest <Form>'s pending state to useMutationFormStatus(),
+// the no-prop-drilling ergonomic of React's useFormStatus (which only tracks function-action
+// submissions, so it can't see our forms).
+const FormStatusContext = React.createContext<{ pending: boolean }>({ pending: false })
+
+/** useMutationFormStatus reads the pending state of the nearest <Form> from a child. */
+export function useMutationFormStatus(): { pending: boolean } {
+	return React.useContext(FormStatusContext)
+}
+
+/**
+ * useMutationForm turns a mutation marked with @endpoint into a progressively-enhanced
+ * form. The returned `form`/`hidden` render a real string-action `<form>` that submits
+ * natively before/without JS; after hydration `onSubmit` runs the mutation client-side
+ * (optimistic + cache via the normal send) and navigates on success. `state` converges on
+ * the same `{ data, errors }` shape on both paths.
+ */
+export function useMutationForm<
+	_Result extends GraphQLObject = GraphQLObject,
+	_Input extends GraphQLVariables = GraphQLVariables,
+>(
+	document: { artifact: MutationArtifact },
+	opts: UseMutationFormOptions<_Result> = {}
+): MutationForm<_Result> {
+	const { artifact } = document
+	const [storeValue, observer] = useDocumentStore<_Result, _Input>({ artifact })
+	const [session] = useSession()
+	const { pathname, goto } = useRoute()
+
+	const formId = opts.id ?? artifact.endpoint?.id ?? artifact.name
+
+	// the session-bound CSRF token the server minted for this render
+	const csrfToken = useFormToken()
+
+	// seed from the server-injected result so the no-JS re-render and the enhanced path
+	// converge; null on a fresh form or once enhanced
+	const injected = useFormResult(formId)
+	const [state, setState] = React.useState<MutationFormState<_Result>>(injected)
+	const [submitting, setSubmitting] = React.useState(false)
+
+	const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+		// only reached after hydration — before that the browser submits natively
+		event.preventDefault()
+		setSubmitting(true)
+		try {
+			const variables = coerceFormData(
+				new FormData(event.currentTarget),
+				artifact.input ?? EMPTY_INPUT,
+				getCurrentConfig(),
+				artifact.endpoint?.fields
+			) as _Input
+			const result = await observer.send({ variables, session })
+			const errors = result.errors ?? null
+			setState({ data: result.data, errors })
+			if (errors && errors.length > 0) {
+				opts.onError?.(errors)
+			} else {
+				// @session writes are handled entirely by the sessionRelay client plugin during
+				// the send above: it relays the minted token to the auth endpoint (sets the
+				// cookie) and mirrors the result into local state, so useSession() updates without
+				// a reload. Nothing session-specific to do here.
+				opts.onSuccess?.(result.data as _Result)
+				// navigate to the same target the server would 303 to
+				const redirect = artifact.endpoint?.redirect
+				if (redirect) {
+					const target = interpolateRedirect(redirect, result.data)
+					if (target) {
+						goto(target)
+					}
+				}
+			}
+		} catch (error: any) {
+			const errors = error?.raw ?? [{ message: error?.message ?? String(error) }]
+			setState({ data: null, errors })
+			opts.onError?.(errors)
+		} finally {
+			setSubmitting(false)
+		}
+	}
+
+	const form: MutationForm<_Result>['form'] = {
+		action: pathname,
+		method: 'post',
+		onSubmit,
+		...(artifact.endpoint?.multipart ? { encType: 'multipart/form-data' as const } : {}),
+	}
+
+	const hidden = (
+		<>
+			<input type="hidden" name="__houdini_form" value={artifact.name} />
+			<input type="hidden" name="__houdini_form_id" value={formId} />
+			{csrfToken && <input type="hidden" name="__houdini_csrf" value={csrfToken} />}
+		</>
+	)
+
+	const pending = submitting || storeValue.fetching
+
+	// the <Form> wrapper reads the latest props/pending from a ref so its component identity
+	// stays stable across renders — otherwise React would remount the form (and lose input
+	// focus) every time pending flips.
+	const live = React.useRef<{ form: typeof form; hidden: React.ReactNode; pending: boolean }>(
+		null as any
+	)
+	live.current = { form, hidden, pending }
+	const FormRef = React.useRef<MutationForm<_Result>['Form']>(null as any)
+	if (!FormRef.current) {
+		FormRef.current = ({ children, ...rest }) => {
+			const current = live.current
+			return (
+				<FormStatusContext.Provider value={{ pending: current.pending }}>
+					<form {...current.form} {...rest}>
+						{current.hidden}
+						{children}
+					</form>
+				</FormStatusContext.Provider>
+			)
+		}
+	}
+
+	return { form, hidden, Form: FormRef.current, state, pending }
+}

package/runtime/hooks/useQuery.ts

@@ -0,0 +1,12 @@
+import type { GraphQLObject, GraphQLVariables, QueryArtifact } from 'houdini/runtime'
+
+import type { UseQueryConfig } from './useQueryHandle.js'
+import { useQueryHandle } from './useQueryHandle.js'
+
+export function useQuery<
+	_Artifact extends QueryArtifact,
+	_Data extends GraphQLObject = GraphQLObject,
+>(document: { artifact: _Artifact }, variables: any = null, config: UseQueryConfig = {}): _Data {
+	const { data } = useQueryHandle<_Artifact, _Data>(document, variables, config)
+	return data as unknown as _Data
+}

package/runtime/hooks/useQueryHandle.ts

@@ -0,0 +1,194 @@
+import { createLRUCache } from 'houdini/runtime'
+import type { GraphQLObject, CachePolicies, QueryArtifact, GraphQLVariables } from 'houdini/runtime'
+import React from 'react'
+
+import { useClient } from '../routing/index.js'
+import type { DocumentHandle } from './useDocumentHandle.js'
+import { useDocumentHandle } from './useDocumentHandle.js'
+import { useIsMountedRef } from './useIsMounted.js'
+
+// Suspense requires a way to throw a promise that resolves to a place
+// we can put when we go back on a susequent render. This means that we have to have
+// a stable way to identify _this_ useQueryHandle called.
+// For now, we're going to compute an identifier based on the name of the artifact
+// and the variables that we were given.
+//
+// - If we have a cached promise that's pending, we should just throw that promise
+// - If we have a cached promise that's been resolved, we should return that value
+//
+// When the Component unmounts, we need to remove the entry from the cache (so we can load again)
+
+const promiseCache = createLRUCache<QuerySuspenseUnit>()
+type QuerySuspenseUnit<
+	_Data extends GraphQLObject = GraphQLObject,
+	_Input extends GraphQLVariables = GraphQLVariables,
+> = {
+	resolve: () => void
+	resolved?: DocumentHandle<QueryArtifact, _Data, _Input>
+	then: (val: any) => any
+}
+
+export function useQueryHandle<
+	_Artifact extends QueryArtifact,
+	_Data extends GraphQLObject = GraphQLObject,
+	_Input extends GraphQLVariables = GraphQLVariables,
+>(
+	{ artifact }: { artifact: QueryArtifact },
+	variables: any = null,
+	config: UseQueryConfig = {}
+): any {
+	// figure out the identifier so we know what to look for
+	const identifier = queryIdentifier({ artifact, variables, config })
+
+	// see if we have an entry in the cache for the identifier
+	const suspenseValue = promiseCache.get(identifier)
+
+	const client = useClient()
+
+	const isMountedRef = useIsMountedRef()
+
+	// hold onto an observer we'll use
+	const [observer] = React.useState(
+		client.observe<_Data, _Input>({
+			artifact,
+			initialValue: (suspenseValue?.resolved?.data ?? {}) as _Data,
+		})
+	)
+
+	// a ref flag we'll enable before throwing so that we don't update while suspend
+	const suspenseTracker = React.useRef(false)
+
+	// a stable box to put the store's value
+	const box = React.useRef(observer.state)
+
+	// a stable subscribe function for the document store
+	const subscribe: any = React.useCallback(
+		(fn: () => void) => {
+			return observer.subscribe((val) => {
+				box.current = val
+				if (isMountedRef.current && !suspenseTracker.current) {
+					fn()
+				}
+			})
+		},
+		[observer, isMountedRef.current]
+	)
+
+	// get a safe reference to the cache
+	const storeValue = React.useSyncExternalStore(subscribe, () => box.current)
+
+	// compute the imperative handle for this artifact
+	const handle = useDocumentHandle<_Artifact, _Data, _Input>({
+		artifact,
+		observer,
+		storeValue,
+	})
+
+	// if the identifier changes, we need to remove the old identifier from the
+	// suspense cache
+	React.useEffect(() => {
+		return () => {
+			promiseCache.delete(identifier)
+		}
+	}, [identifier])
+
+	// when we unmount, we need to clean up
+	React.useEffect(() => {
+		return () => {
+			observer.cleanup()
+		}
+	}, [observer])
+
+	// if the promise has resolved, let's use that for our first render
+	const result = storeValue.data
+
+	if (!suspenseValue) {
+		// we are going to cache the promise and then throw it
+		// when it resolves the cached value will be updated
+		// and it will be picked up in the next render
+		let resolve: () => void = () => {}
+		let reject: (reason?: any) => void = () => {}
+		const loadPromise = new Promise<void>((res, rej) => {
+			resolve = res
+			reject = rej
+		})
+
+		const suspenseUnit: QuerySuspenseUnit<_Data, _Input> = {
+			// biome-ignore lint/suspicious/noThenProperty: suspense protocol requires a thenable
+			then: loadPromise.then.bind(loadPromise),
+			resolve,
+			// @ts-expect-error
+			variables,
+		}
+
+		promiseCache.set(identifier, suspenseUnit as QuerySuspenseUnit)
+
+		// the suspense unit gives react something to hold onto
+		// and it acts as a place for us to register a callback on
+		// send to update the cache before resolving the suspense
+		handle
+			.fetch({
+				variables,
+				// @ts-expect-error: this is actually allowed... 🤫
+				stuff: {
+					silenceLoading: true,
+				},
+			})
+			.then((value) => {
+				// the final value
+				suspenseUnit.resolved = {
+					...handle,
+					data: value.data,
+					partial: value.partial,
+					artifact,
+				} as unknown as DocumentHandle<QueryArtifact, _Data, _Input>
+
+				suspenseUnit.resolve()
+			})
+			.catch((err) => {
+				promiseCache.delete(identifier)
+				reject(err)
+			})
+		suspenseTracker.current = true
+		throw suspenseUnit
+	}
+
+	// if the promise is still pending, we're still waiting
+	if (!result && suspenseValue && !suspenseValue.resolved) {
+		suspenseTracker.current = true
+		throw suspenseValue
+	}
+
+	// make sure we prefer the latest store value instead of the initial version we loaded on mount
+	if (!result && suspenseValue?.resolved) {
+		return suspenseValue.resolved as unknown as DocumentHandle<_Artifact, _Data, _Input>
+	}
+
+	return {
+		...handle,
+		variables: storeValue.variables,
+		data: result,
+	}
+}
+
+export type UseQueryConfig = {
+	policy?: CachePolicies
+	metadata?: App.Metadata
+	fetchKey?: any
+}
+
+function queryIdentifier(args: {
+	artifact: QueryArtifact
+	fetchKey?: number
+	variables: {}
+	config: UseQueryConfig
+}): string {
+	// make sure there is always a fetchKey
+	args.fetchKey ??= 0
+
+	// pull the common stuff out
+	const { artifact, variables, fetchKey } = args
+
+	// a query identifier is a mix of its name, arguments, and the fetch key
+	return [artifact.name, JSON.stringify(variables), fetchKey].join('@@')
+}

package/runtime/hooks/useSubscription.ts

@@ -0,0 +1,12 @@
+import type { SubscriptionArtifact, GraphQLObject, GraphQLVariables } from 'houdini/runtime'
+
+import { useSubscriptionHandle } from './useSubscriptionHandle.js'
+
+// a hook to subscribe to a subscription artifact
+export function useSubscription<_Result extends GraphQLObject, _Input extends GraphQLVariables>(
+	document: { artifact: SubscriptionArtifact },
+	variables?: _Input
+) {
+	const { data } = useSubscriptionHandle(document, variables)
+	return data
+}

package/runtime/hooks/useSubscriptionHandle.ts

@@ -0,0 +1,42 @@
+import type {
+	SubscriptionArtifact,
+	DocumentArtifact,
+	GraphQLObject,
+	GraphQLVariables,
+	GraphQLError,
+} from 'houdini/runtime'
+
+import { useDocumentSubscription } from './useDocumentSubscription.js'
+
+export type SubscriptionHandle<_Result extends GraphQLObject, _Input extends GraphQLVariables> = {
+	data: _Result | null
+	errors: GraphQLError[] | null
+	variables: _Input
+	listen: (args: { variables?: _Input }) => void
+	unlisten: () => void
+	fetching: boolean
+}
+
+// a hook to subscribe to a subscription artifact
+export function useSubscriptionHandle<
+	_Result extends GraphQLObject = GraphQLObject,
+	_Input extends GraphQLVariables = GraphQLVariables,
+>(
+	{ artifact }: { artifact: SubscriptionArtifact },
+	variables?: _Input
+): SubscriptionHandle<_Result, _Input> {
+	// a subscription is basically just a live document
+	const [storeValue, observer] = useDocumentSubscription<DocumentArtifact, _Result, _Input>({
+		artifact,
+		variables: variables as _Input,
+	})
+
+	return {
+		data: storeValue.data,
+		errors: storeValue.errors,
+		fetching: storeValue.fetching,
+		variables: variables as _Input,
+		unlisten: observer.cleanup,
+		listen: observer.send,
+	}
+}

package/runtime/hydration.tsx

@@ -0,0 +1,186 @@
+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 { setAuthUrl } from 'houdini/runtime'
+
+import { injectComponents } from './componentFields.js'
+import { router_cache, type RouterCache, type FormResult } 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__form_result__?: FormResult | null
+		__houdini__form_token__?: string | null
+		// the session endpoint, injected at render (see generate.go) — the relay POSTs here and
+		// useSession reads it. The GraphQL endpoint + @session proxy path are derived client-side
+		// from the public config, so they aren't injected.
+		__houdini__auth_url__?: string | null
+		__houdini__pending_artifacts__?: Record<string, QueryArtifact>
+		__houdini__pending_data__?: Record<string, any>
+		__houdini__pending_variables__?: Record<string, GraphQLVariables>
+		__houdini__pending_cache__?: any[]
+		__houdini__nav_caches__?: RouterCache
+	}
+}
+
+export function hydrate_page(
+	App: React.ComponentType<any>,
+	Component: React.ComponentType<any>,
+	pageName: string,
+	pendingQueries: string[]
+) {
+	// publish the server-injected session endpoint BEFORE the client is constructed — the @session
+	// relay reads getAuthUrl(). It's server-only config so it's injected at render; the GraphQL
+	// endpoint and proxy path the client derives from the public config it already bundles.
+	setAuthUrl(window.__houdini__auth_url__)
+
+	// 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__
+	)
+
+	// apply any cache snapshots that streamed in before this module ran. an @loading query
+	// resolves while the document is still open, so its resolution script runs before this
+	// (deferred) module and couldn't hydrate the cache directly — it queued its snapshot here
+	// instead. drain the queue now that the cache exists so the observers below read the
+	// resolved data rather than the loading-state placeholder. each snapshot goes into its own
+	// layer (hydrate() replaces a layer's contents wholesale, so reusing one would keep only
+	// the last snapshot) and is then merged down so we end up with a single hydration layer.
+	const storage = window.__houdini__cache__?._internal_unstable.storage
+	for (const snapshot of window.__houdini__pending_cache__ ?? []) {
+		const layer = window.__houdini__cache__?.hydrate(snapshot)
+		if (layer && storage) {
+			storage.resolveLayer(layer.id)
+		}
+	}
+	window.__houdini__pending_cache__ = []
+
+	// 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 + window.location.search}
+			cache={window.__houdini__cache__}
+			session={window.__houdini__initial__session__}
+			formResult={window.__houdini__form_result__}
+			formToken={window.__houdini__form_token__}
+			{...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 + window.location.search,
+			cache: cacheRef,
+			session: null,
+			manifest,
+			...router_cache(),
+		})
+	)
+}