houdini-react 2.0.0-go.4 → 2.0.0-go.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "houdini-react",
-  "version": "2.0.0-go.4",
+  "version": "2.0.0-go.6",
   "description": "The React plugin for houdini",
   "keywords": [
     "typescript",
@@ -35,7 +35,7 @@
     "express": "^4.18.2",
     "graphql": "^15.8.0",
     "graphql-yoga": "^4.0.4",
-    "houdini": "^2.0.0-go.4",
+    "houdini": "^2.0.0-go.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-streaming-compat": "^0.3.18",
@@ -44,7 +44,11 @@
     "use-deep-compare-effect": "^1.8.1"
   },
   "files": [
-    "build"
+    "postInstall.js",
+    "runtime",
+    "server",
+    "shim.cjs",
+    "vite"
   ],
   "exports": {
     "./package.json": "./package.json",
@@ -76,12 +80,12 @@
     }
   },
   "optionalDependencies": {
-    "houdini-react-darwin-x64": "2.0.0-go.4",
-    "houdini-react-darwin-arm64": "2.0.0-go.4",
-    "houdini-react-linux-x64": "2.0.0-go.4",
-    "houdini-react-linux-arm64": "2.0.0-go.4",
-    "houdini-react-win32-x64": "2.0.0-go.4",
-    "houdini-react-win32-arm64": "2.0.0-go.4"
+    "houdini-react-darwin-x64": "2.0.0-go.6",
+    "houdini-react-darwin-arm64": "2.0.0-go.6",
+    "houdini-react-linux-x64": "2.0.0-go.6",
+    "houdini-react-linux-arm64": "2.0.0-go.6",
+    "houdini-react-win32-x64": "2.0.0-go.6",
+    "houdini-react-win32-arm64": "2.0.0-go.6"
   },
   "bin": "./shim.cjs",
   "scripts": {

package/postInstall.js

@@ -0,0 +1,147 @@
+const fs = require('fs')
+const path = require('path')
+const zlib = require('zlib')
+const https = require('https')
+
+// Adjust the version you want to install. You can also make this dynamic.
+const BINARY_DISTRIBUTION_VERSION = '2.0.0-go.6'
+
+// Windows binaries end with .exe so we need to special case them.
+const binaryName = process.platform === 'win32' ? 'houdini-react.exe' : 'houdini-react'
+
+// Determine package name for this platform
+const platformSpecificPackageName = `houdini-react-${process.platform}-${process.arch}`
+
+// Compute the path we want to emit the fallback binary to
+const fallbackBinaryPath = path.join(__dirname, binaryName)
+
+function makeRequest(url) {
+	return new Promise((resolve, reject) => {
+		https
+			.get(url, (response) => {
+				if (response.statusCode >= 200 && response.statusCode < 300) {
+					const chunks = []
+					response.on('data', (chunk) => chunks.push(chunk))
+					response.on('end', () => {
+						resolve(Buffer.concat(chunks))
+					})
+				} else if (
+					response.statusCode >= 300 &&
+					response.statusCode < 400 &&
+					response.headers.location
+				) {
+					// Follow redirects
+					makeRequest(response.headers.location).then(resolve, reject)
+				} else {
+					reject(
+						new Error(
+							`npm responded with status code ${response.statusCode} when downloading the package!`
+						)
+					)
+				}
+			})
+			.on('error', (error) => {
+				reject(error)
+			})
+	})
+}
+
+function extractFileFromTarball(tarballBuffer, filepath) {
+	// Tar archives are organized in 512 byte blocks.
+	// Blocks can either be header blocks or data blocks.
+	// Header blocks contain file names of the archive in the first 100 bytes, terminated by a null byte.
+	// The size of a file is contained in bytes 124-135 of a header block and in octal format.
+	// The following blocks will be data blocks containing the file.
+	let offset = 0
+	while (offset < tarballBuffer.length) {
+		const header = tarballBuffer.subarray(offset, offset + 512)
+		offset += 512
+
+		const fileName = header.toString('utf-8', 0, 100).replace(/\0.*/g, '')
+		const fileSize = parseInt(header.toString('utf-8', 124, 136).replace(/\0.*/g, ''), 8)
+
+		if (fileName === filepath) {
+			return tarballBuffer.subarray(offset, offset + fileSize)
+		}
+
+		// Clamp offset to the uppoer multiple of 512
+		offset = (offset + fileSize + 511) & ~511
+	}
+}
+
+async function downloadBinaryFromNpm() {
+	// Download the tarball of the right binary distribution package
+	const tarballDownloadBuffer = await makeRequest(
+		`https://registry.npmjs.org/${platformSpecificPackageName}/-/${platformSpecificPackageName}-${BINARY_DISTRIBUTION_VERSION}.tgz`
+	)
+
+	const tarballBuffer = zlib.unzipSync(tarballDownloadBuffer)
+
+	// Extract binary from package and write to disk
+	fs.writeFileSync(
+		fallbackBinaryPath,
+		extractFileFromTarball(tarballBuffer, `package/bin/${binaryName}`),
+		{ mode: 0o755 } // Make binary file executable
+	)
+}
+
+function isPlatformSpecificPackageInstalled() {
+	try {
+		// Try to resolve the platform package itself
+		require.resolve(`${platformSpecificPackageName}/package.json`)
+		return true
+	} catch (e) {
+		// Also check if it exists as a sibling directory
+		const siblingPath = path.join(__dirname, '..', platformSpecificPackageName)
+		const siblingBinaryPath = path.join(siblingPath, 'bin', binaryName)
+		return fs.existsSync(siblingBinaryPath)
+	}
+}
+
+if (!platformSpecificPackageName) {
+	throw new Error('Platform not supported!')
+}
+
+// once we've confirmed the required package is installed we want to overwrite the bin entry of our package.json
+// to point to the correct binary for optimal performance (skip Node.js overhead)
+function overwriteBinary() {
+	const packageJsonPath = path.join(__dirname, 'package.json')
+	const packageJson = require(packageJsonPath)
+
+	let binaryPath = null
+
+	try {
+		// Method 1: Use require.resolve to find the actual path to the platform-specific package
+		// This works with pnpm and other package managers that use symlinks
+		const platformPackagePath = require.resolve(`${platformSpecificPackageName}/package.json`)
+		const platformPackageDir = path.dirname(platformPackagePath)
+		binaryPath = path.join(platformPackageDir, 'bin', binaryName)
+	} catch (error) {
+		// Method 2: Check if platform package is installed as a sibling directory
+		// This works with npm and local installs
+		const siblingPath = path.join(__dirname, '..', platformSpecificPackageName)
+		const siblingBinaryPath = path.join(siblingPath, 'bin', binaryName)
+
+		if (fs.existsSync(siblingBinaryPath)) {
+			binaryPath = siblingBinaryPath
+		} else {
+			// Use shim as fallback
+			return
+		}
+	}
+
+	if (binaryPath) {
+		// Make the path relative to the main package directory
+		const relativeBinaryPath = path.relative(__dirname, binaryPath)
+		packageJson.bin = relativeBinaryPath
+
+		fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
+	}
+}
+
+// Skip downloading the binary if it was already installed via optionalDependencies
+if (!isPlatformSpecificPackageInstalled()) {
+	downloadBinaryFromNpm().then(overwriteBinary)
+} else {
+	overwriteBinary()
+}

package/runtime/client.ts

@@ -0,0 +1,5 @@
+import type { HoudiniClient } from 'houdini/runtime/client'
+
+// this file will be replaced by the code generation process
+
+export default (() => {}) as () => HoudiniClient

package/runtime/clientPlugin.ts

@@ -0,0 +1,17 @@
+import type { ClientPlugin } from 'houdini/runtime/client'
+
+const plugin: () => ClientPlugin = () => () => {
+	return {
+		start(ctx, { next }) {
+			next({
+				...ctx,
+				cacheParams: {
+					...ctx.cacheParams,
+					serverSideFallback: false,
+				},
+			})
+		},
+	}
+}
+
+export default plugin

package/runtime/componentFields.ts

@@ -0,0 +1,79 @@
+import { getFieldsForType } from 'houdini/runtime'
+import type { DocumentArtifact, GraphQLObject, GraphQLValue } from 'houdini/runtime'
+import { defaultComponentField, type Cache } from 'houdini/runtime/cache'
+
+export function injectComponents({
+	cache,
+	selection,
+	data,
+	variables,
+	parentType = 'Query',
+}: {
+	cache: Cache
+	selection: DocumentArtifact['selection']
+	data: GraphQLValue | null
+	variables: Record<string, GraphQLValue> | undefined | null
+	parentType?: string
+}) {
+	// if the value is null, we're done
+	if (data === null) {
+		return
+	}
+
+	// if the value is not an object (ie its a scalar) we're done
+	if (typeof data !== 'object') {
+		return
+	}
+	data = data as GraphQLObject
+
+	// if the value is an array we need to instantiate each item
+	if (Array.isArray(data)) {
+		data.forEach((item) =>
+			injectComponents({
+				cache,
+				selection,
+				data: item,
+				variables,
+				parentType,
+			})
+		)
+		return
+	}
+
+	// if the object has a subselection we need to walk down
+	const typename = '__typename' in data ? (data['__typename'] as string) : ''
+	const fields = getFieldsForType(selection, typename, false)
+	if (!fields) {
+		return
+	}
+
+	// walk down each field
+	for (const [field, subSelection] of Object.entries(fields)) {
+		// if the field is a component then we need to assign the value to the target
+		if (subSelection.component) {
+			// if the component is already in the cache, we're done
+			if (!cache._internal_unstable.componentCache[subSelection.component.key]) {
+				continue
+			}
+
+			data[field] = defaultComponentField({
+				variables,
+				parent: cache._internal_unstable.id(parentType, data) ?? '',
+				cache,
+				component: subSelection.component,
+			}) as any as GraphQLValue
+		}
+
+		// if there is a selection, we need to walk down
+		const dataValue = data[field]
+		if (subSelection.selection) {
+			injectComponents({
+				cache,
+				selection: subSelection.selection,
+				data: dataValue,
+				variables,
+				parentType: subSelection.type,
+			})
+		}
+	}
+}

package/runtime/hooks/index.ts

@@ -0,0 +1,9 @@
+export { useQuery } from './useQuery'
+export { useQueryHandle } from './useQueryHandle'
+export { useFragment } from './useFragment'
+export { useFragmentHandle } from './useFragmentHandle'
+export { useMutation } from './useMutation'
+export { useSubscription } from './useSubscription'
+
+export { type DocumentHandle } from './useDocumentHandle'
+export { type UseQueryConfig } from './useQueryHandle'

package/runtime/hooks/useDeepCompareEffect.ts

@@ -0,0 +1,89 @@
+import { deepEquals } from 'houdini/runtime'
+import * as React from 'react'
+
+// This file is largely a copy and paste from Kent C. Dodd's use-deep-compare-effect (appropriate license at the bottom).
+// It has been copied locally in order to avoid any awkward third party peer dependencies
+// on generated files (which would make the install annoying). The deep equals library has
+// also been changed to use one that was already included in the runtime (avoiding the extra bundle size)
+
+type UseEffectParams = Parameters<typeof React.useEffect>
+type EffectCallback = UseEffectParams[0]
+type DependencyList = UseEffectParams[1]
+// yes, I know it's void, but I like what this communicates about
+// the intent of these functions: It's just like useEffect
+type UseEffectReturn = ReturnType<typeof React.useEffect>
+
+function checkDeps(deps: DependencyList) {
+	if (!deps || !deps.length) {
+		throw new Error(
+			'useDeepCompareEffect should not be used with no dependencies. Use React.useEffect instead.'
+		)
+	}
+	if (deps.every(isPrimitive)) {
+		throw new Error(
+			'useDeepCompareEffect should not be used with dependencies that are all primitive values. Use React.useEffect instead.'
+		)
+	}
+}
+
+function isPrimitive(val: unknown) {
+	return val == null || /^[sbn]/.test(typeof val)
+}
+
+/**
+ * @param value the value to be memoized (usually a dependency list)
+ * @returns a memoized version of the value as long as it remains deeply equal
+ */
+export function useDeepCompareMemoize<T>(value: T) {
+	const ref = React.useRef<T>(value)
+	const signalRef = React.useRef<number>(0)
+
+	if (!deepEquals(value, ref.current)) {
+		ref.current = value
+		signalRef.current += 1
+	}
+
+	return React.useMemo(() => ref.current, [signalRef.current])
+}
+
+function useDeepCompareEffect(
+	callback: EffectCallback,
+	dependencies: DependencyList
+): UseEffectReturn {
+	if (process.env.NODE_ENV !== 'production') {
+		checkDeps(dependencies)
+	}
+	return React.useEffect(callback, useDeepCompareMemoize(dependencies))
+}
+
+export function useDeepCompareEffectNoCheck(
+	callback: EffectCallback,
+	dependencies: DependencyList
+): UseEffectReturn {
+	return React.useEffect(callback, useDeepCompareMemoize(dependencies))
+}
+
+export default useDeepCompareEffect
+
+/**
+The MIT License (MIT)
+Copyright (c) 2020 Kent C. Dodds
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/

package/runtime/hooks/useDocumentHandle.ts

@@ -0,0 +1,224 @@
+import { extractPageInfo } from 'houdini/runtime'
+import { cursorHandlers, offsetHandlers } from 'houdini/runtime'
+import { ArtifactKind } from 'houdini/runtime'
+import type {
+	GraphQLObject,
+	GraphQLVariables,
+	CursorHandlers,
+	OffsetHandlers,
+	PageInfo,
+	FetchFn,
+	QueryResult,
+	DocumentArtifact,
+	QueryArtifact,
+} from 'houdini/runtime'
+import type { DocumentStore } from 'houdini/runtime/client'
+import React from 'react'
+
+import { useClient, useLocation, useSession } from '../routing/Router'
+
+export function useDocumentHandle<
+	_Artifact extends QueryArtifact,
+	_Data extends GraphQLObject,
+	_Input extends GraphQLVariables
+>({
+	artifact,
+	observer,
+	storeValue,
+}: {
+	artifact: DocumentArtifact
+	observer: DocumentStore<_Data, _Input>
+	storeValue: QueryResult<_Data, _Input>
+}): DocumentHandle<_Artifact, _Data, _Input> & { fetch: FetchFn<_Data, _Input> } {
+	const [forwardPending, setForwardPending] = React.useState(false)
+	const [backwardPending, setBackwardPending] = React.useState(false)
+	const location = useLocation()
+
+	// grab the current session value
+	const [session] = useSession()
+
+	// we want to use a separate observer for pagination queries
+	const client = useClient()
+	const paginationObserver = React.useMemo(() => {
+		// if the artifact doesn't support pagination, don't do anything
+		if (!artifact.refetch?.paginated) {
+			return null
+		}
+
+		return client.observe<_Data, _Input>({ artifact })
+	}, [artifact.name])
+
+	// @ts-expect-error: avoiding an as DocumentHandle<_Artifact, _Data, _Input>
+	return React.useMemo<DocumentHandle<_Artifact, _Data, _Input>>(() => {
+		const wrapLoad = <_Result>(
+			setLoading: (val: boolean) => void,
+			fn: (value: any) => Promise<_Result>
+		) => {
+			return async (value: any) => {
+				setLoading(true)
+				let result: _Result | null = null
+				let err: Error | null = null
+				try {
+					result = await fn(value)
+				} catch (e) {
+					err = e as Error
+				}
+				setLoading(false)
+				// ignore abort errors when loading pages
+				if (err && err.name !== 'AbortError') {
+					throw err
+				}
+
+				// we're done
+				return result || observer.state
+			}
+		}
+
+		// add the session value to the
+		const fetchQuery: FetchFn<_Data, _Input> = (args) => {
+			// before we send the query, we need to figure out which variables are
+			// actually useful for this document
+			const usedVariables = Object.fromEntries(
+				Object.keys(observer.artifact.input?.fields ?? {}).reduce<[string, any][]>(
+					(entries, fieldName) => {
+						// if the field is not a url parameter, skip it
+						if (!(fieldName in location.params)) {
+							return entries
+						}
+
+						return [...entries, [fieldName, location.params[fieldName]]]
+					},
+					[]
+				)
+			)
+
+			return observer.send({
+				...args,
+				variables: {
+					...usedVariables,
+					...args?.variables,
+				},
+				session,
+			})
+		}
+
+		// only consider paginated queries
+		if (artifact.kind !== ArtifactKind.Query || !artifact.refetch?.paginated) {
+			return {
+				artifact,
+				data: storeValue.data,
+				variables: storeValue.variables,
+				fetch: fetchQuery,
+				partial: storeValue.partial,
+			}
+		}
+
+		// if the artifact supports cursor pagination, then add the cursor handlers
+		if (artifact.refetch.method === 'cursor') {
+			const handlers = cursorHandlers<_Data, _Input>({
+				artifact,
+				getState: () => storeValue.data,
+				getVariables: () => storeValue.variables!,
+				fetch: fetchQuery,
+				fetchUpdate: (args, updates) => {
+					return paginationObserver!.send({
+						...args,
+						cacheParams: {
+							...args?.cacheParams,
+							disableSubscriptions: true,
+							applyUpdates: updates,
+						},
+						session,
+					})
+				},
+				getSession: async () => session,
+			})
+
+			return {
+				artifact,
+				data: storeValue.data,
+				variables: storeValue.variables,
+				fetch: handlers.fetch,
+				partial: storeValue.partial,
+				loadNext: wrapLoad(setForwardPending, handlers.loadNextPage),
+				loadNextPending: forwardPending,
+				loadPrevious: wrapLoad(setBackwardPending, handlers.loadPreviousPage),
+				loadPreviousPending: backwardPending,
+				pageInfo: extractPageInfo(storeValue.data, artifact.refetch!.path),
+			}
+		}
+
+		if (artifact.refetch.method === 'offset') {
+			const handlers = offsetHandlers({
+				artifact,
+				getState: () => storeValue.data,
+				getVariables: () => storeValue.variables!,
+				storeName: artifact.name,
+				fetch: fetchQuery,
+				fetchUpdate: async (args, updates = ['append']) => {
+					return paginationObserver!.send({
+						...args,
+						cacheParams: {
+							disableSubscriptions: true,
+							applyUpdates: updates,
+							...args?.cacheParams,
+						},
+					})
+				},
+				getSession: async () => session,
+			})
+
+			return {
+				artifact,
+				data: storeValue.data,
+				variables: storeValue.variables,
+				fetch: handlers.fetch,
+				partial: storeValue.partial,
+				loadNext: wrapLoad(setForwardPending, handlers.loadNextPage),
+				loadNextPending: forwardPending,
+			}
+		}
+
+		// we don't want to add anything
+		return {
+			artifact,
+			data: storeValue.data,
+			variables: storeValue.variables,
+			fetch: fetchQuery,
+			refetch: fetchQuery,
+			partial: storeValue.partial,
+		}
+	}, [artifact, observer, session, storeValue])
+}
+
+export type DocumentHandle<
+	_Artifact extends QueryArtifact,
+	_Data extends GraphQLObject = GraphQLObject,
+	_Input extends GraphQLVariables = GraphQLVariables
+> = {
+	data: _Data
+	partial: boolean
+	fetch: FetchFn<_Data, Partial<_Input>>
+	variables: _Input
+} & RefetchHandlers<_Artifact, _Data, _Input>
+
+type RefetchHandlers<_Artifact extends QueryArtifact, _Data extends GraphQLObject, _Input> =
+	// we need to add different methods if the artifact supports cursor pagination
+	_Artifact extends {
+		refetch: { paginated: true; method: 'cursor' }
+	}
+		? {
+				loadNext: CursorHandlers<_Data, _Input>['loadNextPage']
+				loadNextPending: boolean
+				loadPrevious: CursorHandlers<_Data, _Input>['loadPreviousPage']
+				loadPreviousPending: boolean
+				pageInfo: PageInfo
+		  }
+		: // offset pagination
+		_Artifact extends { refetch: { paginated: true; method: 'offset' } }
+		? {
+				loadNext: OffsetHandlers<_Data, _Input>['loadNextPage']
+				loadNextPending: boolean
+		  }
+		: // the artifact does not support a known pagination method, don't add anything
+		  {}

package/runtime/hooks/useDocumentStore.ts

@@ -0,0 +1,76 @@
+import type {
+	DocumentArtifact,
+	GraphQLVariables,
+	QueryResult,
+	GraphQLObject,
+} from 'houdini/runtime'
+import type { DocumentStore, ObserveParams } from 'houdini/runtime/client'
+import * as React from 'react'
+
+import { useClient } from '../routing'
+import { useIsMountedRef } from './useIsMounted'
+
+export type UseDocumentStoreParams<
+	_Artifact extends DocumentArtifact,
+	_Data extends GraphQLObject,
+	_Input extends GraphQLVariables
+> = {
+	artifact: _Artifact
+	observer?: DocumentStore<_Data, _Input>
+} & Partial<ObserveParams<_Data, DocumentArtifact, _Input>>
+
+export function useDocumentStore<
+	_Data extends GraphQLObject = GraphQLObject,
+	_Input extends GraphQLVariables = GraphQLVariables,
+	_Artifact extends DocumentArtifact = DocumentArtifact
+>({
+	artifact,
+	observer: obs,
+	...observeParams
+}: UseDocumentStoreParams<_Artifact, _Data, _Input>): [
+	QueryResult<_Data, _Input>,
+	DocumentStore<_Data, _Input>
+] {
+	const client = useClient()
+	const isMountedRef = useIsMountedRef()
+
+	// hold onto an observer we'll use
+	let [observer, setObserver] = React.useState(
+		() =>
+			obs ??
+			client.observe<_Data, _Input>({
+				artifact,
+				...observeParams,
+			})
+	)
+
+	const box = React.useRef(observer.state)
+
+	// if the observer changes, we need to track the new one
+	if (obs && obs !== observer) {
+		box.current = obs.state
+		setObserver(obs)
+	}
+
+	// the function that registers a new subscription for the observer
+	const subscribe: any = React.useCallback(
+		(fn: () => void) => {
+			return observer.subscribe((val) => {
+				box.current = val
+				if (isMountedRef.current) {
+					fn()
+				}
+			})
+		},
+		[observer]
+	)
+
+	// get a safe reference to the cache
+	const storeValue = React.useSyncExternalStore(
+		subscribe,
+		() => box.current,
+		() => box.current
+	)
+
+	return [storeValue!, observer]
+}