houdini-react 2.0.0-next.41 → 2.0.0-next.45

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.
+	const mockClient = new HoudiniClient({
+		url: 'http://localhost/graphql',
+		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/vite/index.js

@@ -146,7 +146,7 @@ function index_default(ctx) {
     hotUpdate() {
       cfCache = null;
     },
-    async transform(code, filepath) {
+    async transform(code, filepath, options) {
       filepath = path.posixify(filepath);
       if (filepath.startsWith("/src/")) {
         filepath = path.join(process.cwd(), filepath);
@@ -154,6 +154,7 @@ function index_default(ctx) {
       if (!ctx.config.includeFile(filepath)) {
         return;
       }
+      const stripHeaders = !options?.ssr && /(?:^|\/)\+(?:page|layout)\.[jt]sx?$/.test(filepath);
       if (cfCache === null) {
         try {
           cfCache = ctx.db.all(
@@ -170,7 +171,8 @@ function index_default(ctx) {
           filepath: path.posixify(filepath),
           watch_file: this.addWatchFile.bind(this)
         },
-        cfCache
+        cfCache,
+        { stripHeaders }
       );
     },
     async closeBundle() {
@@ -284,9 +286,15 @@ mount_static_app(App, manifest)
           next();
           return;
         }
-        const { default: router_manifest } = await server.ssrLoadModule(
+        const manifest_module = await server.ssrLoadModule(
           path.join(plugin_dir(ctx.config, "houdini-react"), "runtime", "manifest.ts")
         );
+        const router_manifest = manifest_module.default;
+        for (const id of Object.keys(manifest_module.route_headers ?? {})) {
+          if (router_manifest.pages[id]) {
+            router_manifest.pages[id].headers = manifest_module.route_headers[id];
+          }
+        }
         const { createServerAdapter } = await server.ssrLoadModule(
           adapter_config_path(ctx.config)
         );

package/vite/strip-headers.d.ts

@@ -0,0 +1 @@
+export declare function strip_named_export(script: any, name: string): void;

package/vite/strip-headers.js

@@ -0,0 +1,35 @@
+function strip_named_export(script, name) {
+  const body = script.body;
+  for (let i = body.length - 1; i >= 0; i--) {
+    const node = body[i];
+    if (node.type !== "ExportNamedDeclaration") {
+      continue;
+    }
+    if (node.declaration) {
+      const decl = node.declaration;
+      if (decl.type === "FunctionDeclaration" && decl.id?.name === name) {
+        body.splice(i, 1);
+        continue;
+      }
+      if (decl.type === "VariableDeclaration") {
+        decl.declarations = decl.declarations.filter(
+          (d) => !(d.id?.type === "Identifier" && d.id.name === name)
+        );
+        if (decl.declarations.length === 0) {
+          body.splice(i, 1);
+        }
+        continue;
+      }
+      continue;
+    }
+    if (node.specifiers?.length) {
+      node.specifiers = node.specifiers.filter((s) => s.exported?.name !== name);
+      if (node.specifiers.length === 0) {
+        body.splice(i, 1);
+      }
+    }
+  }
+}
+export {
+  strip_named_export
+};

package/vite/transform.d.ts

@@ -5,7 +5,9 @@ export type ComponentFieldRow = {
     field: string;
     fragment: string;
 };
-export declare function transform_file(page: TransformPage, cfRows: ComponentFieldRow[]): Promise<{
+export declare function transform_file(page: TransformPage, cfRows: ComponentFieldRow[], opts?: {
+    stripHeaders?: boolean;
+}): Promise<{
     code: string;
     map?: SourceMapInput;
 }>;

package/vite/transform.js

@@ -10,13 +10,17 @@ import {
 } from "houdini";
 import { componentField_unit_path, houdini_root } from "houdini/router/conventions";
 import * as recast from "recast";
+import { strip_named_export } from "./strip-headers.js";
 const AST = recast.types.builders;
-async function transform_file(page, cfRows) {
+async function transform_file(page, cfRows, opts = {}) {
   const isJSX = page.filepath.endsWith(".tsx") || page.filepath.endsWith(".jsx");
   if (!isJSX && !page.filepath.endsWith(".ts") && !page.filepath.endsWith(".js")) {
     return { code: page.content, map: page.map };
   }
   const script = parseJS(page.content, isJSX ? { plugins: ["jsx"] } : {});
+  if (opts.stripHeaders) {
+    strip_named_export(script, "headers");
+  }
   const cfMap = {};
   for (const row of cfRows) {
     if (row.type && row.field && row.fragment) {
@@ -29,9 +33,9 @@ async function transform_file(page, cfRows) {
     tag({ node, artifact, parsedDocument }) {
       const { id: artifactRef } = artifact_import({ page, script, artifact });
       const properties = [AST.objectProperty(AST.stringLiteral("artifact"), artifactRef)];
-      if (is_paginated(parsedDocument)) {
+      if (is_paginated(parsedDocument) || is_refetchable(parsedDocument)) {
         if (artifact.kind !== ArtifactKind.Query) {
-          const refetchName = artifact.name + "_Pagination_Query";
+          const refetchName = artifact.name + (is_paginated(parsedDocument) ? "_Pagination_Query" : "_Refetch_Query");
           const { id: refetchRef } = artifact_import({
             page,
             script,
@@ -85,6 +89,17 @@ function is_paginated(doc) {
   });
   return paginated;
 }
+function is_refetchable(doc) {
+  let refetchable = false;
+  graphql.visit(doc, {
+    Directive(node) {
+      if (node.name.value === "refetchable") {
+        refetchable = true;
+      }
+    }
+  });
+  return refetchable;
+}
 export {
   transform_file
 };