houdini-react 2.0.0-go.19 → 2.0.0-go.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "houdini-react",
-  "version": "2.0.0-go.19",
+  "version": "2.0.0-go.20",
   "description": "The React plugin for houdini",
   "keywords": [
     "typescript",
@@ -36,7 +36,7 @@
     "graphql-yoga": "^4.0.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-streaming-compat": "^0.3.18",
+    "react-streaming": "^0.4.17",
     "recast": "^0.23.1",
     "rollup": "^4.28.1",
     "use-deep-compare-effect": "^1.8.1"
@@ -81,12 +81,12 @@
     }
   },
   "optionalDependencies": {
-    "houdini-react-darwin-x64": "2.0.0-go.19",
-    "houdini-react-darwin-arm64": "2.0.0-go.19",
-    "houdini-react-linux-x64": "2.0.0-go.19",
-    "houdini-react-linux-arm64": "2.0.0-go.19",
-    "houdini-react-win32-x64": "2.0.0-go.19",
-    "houdini-react-win32-arm64": "2.0.0-go.19"
+    "houdini-react-darwin-x64": "2.0.0-go.20",
+    "houdini-react-darwin-arm64": "2.0.0-go.20",
+    "houdini-react-linux-x64": "2.0.0-go.20",
+    "houdini-react-linux-arm64": "2.0.0-go.20",
+    "houdini-react-win32-x64": "2.0.0-go.20",
+    "houdini-react-win32-arm64": "2.0.0-go.20"
   },
   "bin": "bin/houdini-react",
   "scripts": {

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-go.19'
+const BINARY_DISTRIBUTION_VERSION = '2.0.0-go.20'
 
 // Windows binaries end with .exe so we need to special case them.
 const binaryName = process.platform === 'win32' ? 'houdini-react.exe' : 'houdini-react'

package/runtime/client.ts

@@ -1,4 +1,4 @@
-import type { HoudiniClient } from 'houdini/runtime/client'
+import type { HoudiniClient } from '$houdini/runtime/client'
 
 // this file will be replaced by the code generation process
 

package/runtime/hooks/useFragment.ts

@@ -12,9 +12,9 @@ export function useFragment<
 	_ReferenceType extends {},
 	_Input extends GraphQLVariables = GraphQLVariables
 >(
-	reference: _Data | { [fragmentKey]: _ReferenceType } | null,
+	reference: _Data | { ' $fragments': _ReferenceType } | null,
 	document: { artifact: FragmentArtifact }
-) {
+): _Data | null {
 	const { cache } = useRouterContext()
 
 	// get the fragment reference info
@@ -82,7 +82,7 @@ export function useFragment<
 }
 
 export function fragmentReference<_Data extends GraphQLObject, _Input, _ReferenceType extends {}>(
-	reference: _Data | { [fragmentKey]: _ReferenceType } | null,
+	reference: _Data | { ' $fragments': _ReferenceType } | null,
 	document: { artifact: FragmentArtifact }
 ): { variables: _Input; parent: string; loading: boolean } {
 	// @ts-expect-error: typescript can't guarantee that the fragment key is defined

package/runtime/hooks/useFragmentHandle.ts

@@ -19,9 +19,9 @@ export function useFragmentHandle<
 	_PaginationArtifact extends QueryArtifact,
 	_Input extends GraphQLVariables = GraphQLVariables
 >(
-	reference: _Data | { [fragmentKey]: _ReferenceType } | null,
+	reference: _Data | { ' $fragments': _ReferenceType } | null,
 	document: { artifact: FragmentArtifact; refetchArtifact?: QueryArtifact }
-): DocumentHandle<_PaginationArtifact, _Data, _Input> {
+): any {
 	// get the fragment values
 	const data = useFragment<_Data, _ReferenceType, _Input>(reference, document)
 

package/runtime/hooks/useQuery.ts

@@ -5,13 +5,8 @@ import { useQueryHandle } from './useQueryHandle'
 
 export function useQuery<
 	_Artifact extends QueryArtifact,
-	_Data extends GraphQLObject = GraphQLObject,
-	_Input extends GraphQLVariables = GraphQLVariables
->(
-	document: { artifact: QueryArtifact },
-	variables: any = null,
-	config: UseQueryConfig = {}
-): _Data {
-	const { data } = useQueryHandle<_Artifact, _Data, _Input>(document, variables, config)
-	return data
+	_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

@@ -33,7 +33,7 @@ export function useQueryHandle<
 	{ artifact }: { artifact: QueryArtifact },
 	variables: any = null,
 	config: UseQueryConfig = {}
-): DocumentHandle<_Artifact, _Data, _Input> {
+): any {
 	// figure out the identifier so we know what to look for
 	const identifier = queryIdentifier({ artifact, variables, config })
 

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'
+import { router_cache, type RouterCache } from './routing'
+import clientFactory from './client'
+
+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/routing/Router.tsx

@@ -246,7 +246,7 @@ function usePageData({
 					injectToStream?.(`
 						<script>
 						{
-								window.__houdini__cache__?.hydrate(${cache.serialize()}, window.__houdini__hydration__layer)
+								window.__houdini__cache__?.hydrate(${cache.serialize()}, window.__houdini__hydration__layer__)
 
 								const artifactName = "${artifact.name}"
 								const value = ${JSON.stringify(
@@ -403,11 +403,6 @@ function usePageData({
 					// save the artifact in the cache
 					artifact_cache.set(artifact_id, artifact)
 
-					// add a script to load the artifact
-					injectToStream?.(`
-						<script type="module" src="${assetPrefix}/artifacts/${artifact.name}.js" async=""></script>
-					`)
-
 					// now that we have the artifact, we can load the query too
 					load_query({ id: artifact.name, artifact, variables })
 				})

package/server/index.d.ts

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

package/server/index.js

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

package/vite/index.d.ts

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

package/vite/index.js

@@ -1,11 +1,284 @@
+import { fs, path } from "houdini";
+import {
+  app_component_path,
+  adapter_config_path,
+  plugin_dir,
+  client_build_directory
+} from "houdini/router/conventions";
+import { load_manifest } from "houdini/router/manifest";
+import { createRequire } from "node:module";
+import { build } from "vite";
+import { transform_file } from "./transform.js";
+const _require = createRequire(import.meta.url);
+let reactStreamingServerPath = "";
+try {
+  const main = _require.resolve("react-streaming");
+  const pkgDir = main.replace(/\/dist\/.*$/, "");
+  reactStreamingServerPath = path.join(pkgDir, "dist/server/index.node-and-web.js");
+} catch {
+}
 function vite_default(ctx) {
+  let manifest;
+  let viteEnv;
+  let devServer = false;
+  let isSSRBuild = false;
+  let cfCache = null;
   return {
     name: "houdini-react",
-    configureServer(server) {
-      console.log("greetings from react vite plugin");
+    configResolved(config) {
+      isSSRBuild = !!config.build.ssr;
+    },
+    async config(userConfig, env) {
+      viteEnv = env;
+      if (userConfig.build?.ssr) {
+        return reactStreamingServerPath ? { resolve: { alias: { "react-streaming/server": reactStreamingServerPath } } } : {};
+      }
+      try {
+        manifest = await load_manifest({ config: ctx.config });
+      } catch (e) {
+        console.log(
+          "something went wrong. please try again. \n error: " + e.message
+        );
+        manifest = {
+          pages: {},
+          layouts: {},
+          page_queries: {},
+          layout_queries: {},
+          artifacts: [],
+          local_schema: false,
+          local_yoga: false,
+          component_fields: {}
+        };
+      }
+      let conf = {
+        build: { rollupOptions: {} }
+      };
+      if (env.command === "build") {
+        conf.base = "/assets";
+      }
+      const compiledAssetsDir = client_build_directory(ctx.config);
+      await fs.mkdirp(compiledAssetsDir);
+      conf.build = {
+        outDir: compiledAssetsDir,
+        rollupOptions: {
+          output: {
+            assetFileNames: "assets/[name].js",
+            entryFileNames: "[name].js"
+          },
+          input: {
+            "entries/app": app_component_path(ctx.config),
+            ...ctx.adapter ? { "entries/adapter": adapter_config_path(ctx.config) } : {}
+          }
+        }
+      };
+      if (env.command === "build" && ctx.adapter && ctx.adapter.includePaths) {
+        const extra = typeof ctx.adapter.includePaths === "function" ? ctx.adapter.includePaths({ config: ctx.config }) : ctx.adapter.includePaths;
+        Object.assign(conf.build.rollupOptions.input, extra);
+      }
+      for (const [id, page] of Object.entries(manifest.pages)) {
+        ;
+        conf.build.rollupOptions.input[`pages/${id}`] = `virtual:houdini/pages/${page.id}.jsx`;
+      }
+      return reactStreamingServerPath ? {
+        ...conf,
+        resolve: { alias: { "react-streaming/server": reactStreamingServerPath } }
+      } : conf;
+    },
+    resolveId(id) {
+      if (!id.includes("virtual:houdini")) {
+        return;
+      }
+      return id.substring(id.indexOf("virtual:houdini"));
+    },
+    async transform(code, filepath) {
+      filepath = path.posixify(filepath);
+      if (filepath.startsWith("/src/")) {
+        filepath = path.join(process.cwd(), filepath);
+      }
+      if (!ctx.config.includeFile(filepath)) {
+        return;
+      }
+      if (cfCache === null) {
+        try {
+          cfCache = ctx.db.prepare("SELECT type, field, fragment FROM component_fields").all();
+        } catch {
+          cfCache = [];
+        }
+      }
+      return transform_file(
+        {
+          config: ctx.config,
+          content: code,
+          filepath: path.posixify(filepath),
+          watch_file: this.addWatchFile.bind(this)
+        },
+        cfCache
+      );
+    },
+    async closeBundle() {
+      if (viteEnv.mode !== "production" || devServer || isSSRBuild) {
+        return;
+      }
+      if (!ctx.adapter || ctx.adapter?.disableServer) {
+        return;
+      }
+      const compiledAssetsDir = client_build_directory(ctx.config);
+      await build({
+        build: {
+          ssr: true,
+          outDir: path.join(compiledAssetsDir, "ssr"),
+          rollupOptions: {
+            output: {
+              assetFileNames: "assets/[name].js",
+              entryFileNames: "[name].js"
+            },
+            input: {
+              "entries/adapter": adapter_config_path(ctx.config)
+            }
+          }
+        }
+      });
+    },
+    async load(id) {
+      if (!id.startsWith("virtual:houdini")) {
+        return;
+      }
+      if (!manifest) {
+        return;
+      }
+      let [, which, arg] = id.split("/");
+      const parsedPath = arg ? path.parse(arg) : "";
+      const pageName = parsedPath ? parsedPath.name : "";
+      if (which === "pages") {
+        const page = manifest.pages[pageName];
+        if (!page) {
+          throw new Error("unknown page" + pageName);
+        }
+        const pendingQueries = page.queries.filter((query) => {
+          const pg = Object.values(manifest.page_queries).find((q) => q.name === query);
+          if (pg) {
+            return pg.loading;
+          }
+          const layout = Object.values(manifest.layout_queries).find(
+            (q) => q.name === query
+          );
+          return layout?.loading;
+        });
+        return `
+import App from '$houdini/plugins/houdini-react/units/render/App'
+import Component from '$houdini/plugins/houdini-react/units/entries/${pageName}.jsx'
+import { hydrate_page } from '$houdini/plugins/houdini-react/runtime/hydration'
+hydrate_page(App, Component, '${pageName}', ${JSON.stringify(pendingQueries)})
+`;
+      }
+      if (which === "artifacts") {
+        return `
+import artifact from '$houdini/artifacts/${pageName}'
+import { register_artifact } from '$houdini/plugins/houdini-react/runtime/hydration'
+register_artifact('${pageName}', artifact)
+`;
+      }
+      if (which === "static-entry") {
+        return `
+import App from '$houdini/plugins/houdini-react/units/render/App'
+import manifest from '$houdini/plugins/houdini-react/runtime/manifest'
+import { mount_static_app } from '$houdini/plugins/houdini-react/runtime/hydration'
+mount_static_app(App, manifest)
+`;
+      }
+    },
+    async configureServer(server) {
+      devServer = true;
+      server.middlewares.use(async (req, res, next) => {
+        if (!req.url) {
+          next();
+          return;
+        }
+        const { default: router_manifest } = await server.ssrLoadModule(
+          path.join(plugin_dir(ctx.config, "houdini-react"), "runtime", "manifest.ts")
+        );
+        const { createServerAdapter } = await server.ssrLoadModule(
+          adapter_config_path(ctx.config)
+        );
+        const requestHeaders = new Headers();
+        for (const header of Object.entries(req.headers ?? {})) {
+          requestHeaders.set(header[0], header[1]);
+        }
+        const port = server.config.server.port ?? 5173;
+        const request = new Request(
+          `http://localhost:${port}` + req.url,
+          req.method === "POST" ? {
+            method: req.method,
+            headers: requestHeaders,
+            body: await getBody(req)
+          } : void 0
+        );
+        let documentPremable = `<script type="module" src="/@vite/client" async=""><\/script>`;
+        try {
+          const transformed = await server.transformIndexHtml(
+            req.url,
+            "<!DOCTYPE html><html><head></head><body></body></html>"
+          );
+          const headMatch = transformed.match(/<head>([\s\S]*?)<\/head>/);
+          if (headMatch?.[1]?.trim()) {
+            documentPremable = headMatch[1].trim();
+          }
+        } catch {
+        }
+        try {
+          const result = await createServerAdapter({
+            production: false,
+            manifest: router_manifest,
+            assetPrefix: "/virtual:houdini",
+            pipe: res,
+            documentPremable
+          })(request);
+          if (result && result.status === 404) {
+            return next();
+          }
+          if (result && typeof result !== "boolean") {
+            if (res.closed) {
+              return;
+            }
+            for (const header of result.headers ?? []) {
+              res.setHeader(header[0], header[1]);
+            }
+            if (result.status >= 300 && result.status < 400) {
+              res.writeHead(result.status, {
+                Location: result.headers.get("Location") ?? "",
+                ...[...result.headers].reduce(
+                  (headers, [key, value]) => ({
+                    ...headers,
+                    [key]: value
+                  }),
+                  {}
+                )
+              });
+            } else {
+              res.write(await result.text());
+            }
+            res.end();
+          }
+        } catch (e) {
+          console.error(e);
+          res.end();
+        }
+      });
     }
   };
 }
+function getBody(request) {
+  return new Promise((resolve) => {
+    const bodyParts = [];
+    let body;
+    request.on("data", (chunk) => {
+      bodyParts.push(chunk);
+    }).on("end", () => {
+      body = Buffer.concat(bodyParts).toString();
+      resolve(body);
+    });
+  });
+}
 export {
   vite_default as default
 };

package/vite/transform.d.ts

@@ -0,0 +1,11 @@
+import type { TransformPage } from 'houdini';
+import type { SourceMapInput } from 'rollup';
+export type ComponentFieldRow = {
+    type: string;
+    field: string;
+    fragment: string;
+};
+export declare function transform_file(page: TransformPage, cfRows: ComponentFieldRow[]): Promise<{
+    code: string;
+    map?: SourceMapInput;
+}>;

package/vite/transform.js

@@ -0,0 +1,92 @@
+import * as graphql from "graphql";
+import {
+  ArtifactKind,
+  artifact_import,
+  ensure_imports,
+  find_graphql,
+  parseJS,
+  path,
+  printJS
+} from "houdini";
+import { componentField_unit_path, houdini_root } from "houdini/router/conventions";
+import * as recast from "recast";
+const AST = recast.types.builders;
+async function transform_file(page, cfRows) {
+  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"] } : {});
+  const cfMap = {};
+  for (const row of cfRows) {
+    if (row.type && row.field && row.fragment) {
+      cfMap[row.type] ??= {};
+      cfMap[row.type][row.field] = row.fragment;
+    }
+  }
+  await find_graphql(page.config, script, {
+    skipGraphqlType: true,
+    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 (artifact.kind !== ArtifactKind.Query) {
+          const refetchName = artifact.name + "_Pagination_Query";
+          const { id: refetchRef } = artifact_import({
+            page,
+            script,
+            artifact: { name: refetchName }
+          });
+          properties.push(
+            AST.objectProperty(AST.stringLiteral("refetchArtifact"), refetchRef)
+          );
+        } else {
+          properties.push(
+            AST.objectProperty(AST.stringLiteral("refetchArtifact"), artifactRef)
+          );
+        }
+      }
+      if (Object.keys(cfMap).length > 0) {
+        const typeInfo = new graphql.TypeInfo(page.config.schema);
+        graphql.visit(
+          parsedDocument,
+          graphql.visitWithTypeInfo(typeInfo, {
+            Field(fieldNode) {
+              const parentType = typeInfo.getParentType();
+              const typeName = parentType?.name;
+              if (!typeName)
+                return;
+              const fragmentName = cfMap[typeName]?.[fieldNode.name.value];
+              if (!fragmentName)
+                return;
+              const entryPointPath = componentField_unit_path(
+                page.config,
+                fragmentName
+              );
+              ensure_imports({
+                script,
+                sourceModule: "$houdini/" + path.relative(houdini_root(page.config), entryPointPath)
+              });
+            }
+          })
+        );
+      }
+      node.replaceWith(AST.objectExpression(properties));
+    }
+  });
+  return printJS(script);
+}
+function is_paginated(doc) {
+  let paginated = false;
+  graphql.visit(doc, {
+    Directive(node) {
+      if (node.name.value === "paginate") {
+        paginated = true;
+      }
+    }
+  });
+  return paginated;
+}
+export {
+  transform_file
+};