houdini-react 0.0.0-20240422193548 → 0.0.0-20240429154814

package/build/plugin/vite.d.ts

@@ -6,7 +6,7 @@ declare const _default: {
     }) => void | Promise<void>) | undefined;
     buildEnd?: ((this: import("rollup").PluginContext, error?: Error | undefined, houdiniConfig?: import("houdini").Config | undefined) => void | Promise<void>) | undefined;
     closeBundle?: ((this: import("rollup").PluginContext, config: import("houdini").Config) => void | Promise<void>) | undefined;
-    configResolved?: import("rollup").ObjectHook<(this: void, config: Readonly<Omit<import("vite").UserConfig, "plugins" | "assetsInclude" | "optimizeDeps" | "worker"> & {
+    configResolved?: import("rollup").ObjectHook<(this: void, config: Readonly<Omit<import("vite").UserConfig, "plugins" | "css" | "assetsInclude" | "build" | "optimizeDeps" | "worker"> & {
         configFile: string | undefined;
         configFileDependencies: string[];
         inlineConfig: import("vite").InlineConfig;
@@ -18,11 +18,14 @@ declare const _default: {
         mode: string;
         isWorker: boolean;
         isProduction: boolean;
+        envDir: string;
         env: Record<string, any>;
         resolve: Required<import("vite").ResolveOptions> & {
             alias: import("vite").Alias[];
         };
-        plugins: readonly import("vite").Plugin[];
+        plugins: readonly import("vite").Plugin<any>[];
+        css: import("vite").ResolvedCSSOptions;
+        esbuild: false | import("vite").ESBuildOptions;
         server: import("vite").ResolvedServerOptions;
         build: import("vite").ResolvedBuildOptions;
         preview: import("vite").ResolvedPreviewOptions;
@@ -31,7 +34,7 @@ declare const _default: {
         logger: import("vite").Logger;
         createResolver: (options?: Partial<import("vite").InternalResolveOptions> | undefined) => import("vite").ResolveFn;
         optimizeDeps: import("vite").DepOptimizationOptions;
-        worker: import("vite").ResolveWorkerOptions;
+        worker: import("vite").ResolvedWorkerOptions;
         appType: import("vite").AppType;
         experimental: import("vite").ExperimentalOptions;
     } & import("vite").PluginHookUtils>) => void | Promise<void>, {}> | undefined;

package/build/plugin-cjs/index.js

@@ -78271,7 +78271,7 @@ async function asyncWalk(ast, { enter, leave }) {
 async function find_graphql(config, parsedScript, walker) {
   await asyncWalk(parsedScript, {
     async enter(node, parent) {
-      if (node.type !== "TaggedTemplateExpression" && node.type !== "CallExpression" && node.type !== "TSPropertySignature") {
+      if (node.type !== "TaggedTemplateExpression" && node.type !== "CallExpression" && node.type !== "TSPropertySignature" && node.type !== "VariableDeclaration") {
         return;
       }
       let documentString = "";
@@ -79891,6 +79891,7 @@ var vite_default = {
 						observer.send({
 							setup: true,
 							variables,
+							session: window.__houdini__initial__session__,
 						})
 
 						// save it in the cache

package/build/plugin-esm/index.js

@@ -78261,7 +78261,7 @@ async function asyncWalk(ast, { enter, leave }) {
 async function find_graphql(config, parsedScript, walker) {
   await asyncWalk(parsedScript, {
     async enter(node, parent) {
-      if (node.type !== "TaggedTemplateExpression" && node.type !== "CallExpression" && node.type !== "TSPropertySignature") {
+      if (node.type !== "TaggedTemplateExpression" && node.type !== "CallExpression" && node.type !== "TSPropertySignature" && node.type !== "VariableDeclaration") {
         return;
       }
       let documentString = "";
@@ -79881,6 +79881,7 @@ var vite_default = {
 						observer.send({
 							setup: true,
 							variables,
+							session: window.__houdini__initial__session__,
 						})
 
 						// save it in the cache

package/build/runtime/routing/Router.d.ts

@@ -22,6 +22,7 @@ export declare function Router({ manifest, initialURL, assetPrefix, injectToStre
 export declare const useLocation: () => {
     pathname: string;
     params: Record<string, any>;
+    goto: (url: string) => void;
 };
 export declare function RouterContextProvider({ children, client, cache, artifact_cache, component_cache, data_cache, ssr_signals, last_variables, session: ssrSession, }: {
     children: React.ReactElement;

package/build/runtime-cjs/clientPlugin.js

@@ -23,7 +23,7 @@ __export(clientPlugin_exports, {
 module.exports = __toCommonJS(clientPlugin_exports);
 const plugin = () => () => {
   return {
-    beforeNetwork(ctx, { next }) {
+    start(ctx, { next }) {
       next({
         ...ctx,
         cacheParams: {

package/build/runtime-cjs/hooks/useDocumentHandle.js

@@ -39,6 +39,7 @@ function useDocumentHandle({
 }) {
   const [forwardPending, setForwardPending] = import_react.default.useState(false);
   const [backwardPending, setBackwardPending] = import_react.default.useState(false);
+  const location = (0, import_Router.useLocation)();
   const [session] = (0, import_Router.useSession)();
   const client = (0, import_Router.useClient)();
   const paginationObserver = import_react.default.useMemo(() => {
@@ -56,10 +57,22 @@ function useDocumentHandle({
         return result;
       };
     };
-    const fetchQuery = (args) => observer.send({
-      ...args,
-      session
-    });
+    const fetchQuery = (args) => {
+      const usedVariables = Object.fromEntries(
+        Object.keys(observer.artifact.input?.fields ?? {}).map((fieldName) => [
+          fieldName,
+          location.params[fieldName]
+        ])
+      );
+      return observer.send({
+        ...args,
+        variables: {
+          ...usedVariables,
+          ...args?.variables
+        },
+        session
+      });
+    };
     if (artifact.kind !== import_types.ArtifactKind.Query || !artifact.refetch?.paginated) {
       return {
         artifact,

package/build/runtime-cjs/routing/Router.d.ts

@@ -22,6 +22,7 @@ export declare function Router({ manifest, initialURL, assetPrefix, injectToStre
 export declare const useLocation: () => {
     pathname: string;
     params: Record<string, any>;
+    goto: (url: string) => void;
 };
 export declare function RouterContextProvider({ children, client, cache, artifact_cache, component_cache, data_cache, ssr_signals, last_variables, session: ssrSession, }: {
     children: React.ReactElement;

package/build/runtime-cjs/routing/Router.js

@@ -73,7 +73,7 @@ function Router({
     assetPrefix,
     injectToStream
   });
-  const { component_cache } = useRouterContext();
+  const { component_cache, data_cache } = useRouterContext();
   const PageComponent = component_cache.get(page.id);
   import_react.default.useEffect(() => {
     if (globalThis.window && window.location.pathname !== currentURL) {
@@ -92,21 +92,36 @@ function Router({
       window.removeEventListener("popstate", onChange);
     };
   }, []);
+  const goto = (url) => {
+    data_cache.clear();
+    setCurrentURL(url);
+  };
   useLinkBehavior({
-    goto: (val) => {
-      setCurrentURL(val);
-    },
+    goto,
     preload(url, which) {
       const [page2, variables2] = (0, import_match.find_match)(import_config.default, manifest, url);
-      if (["both", "component"].includes(which)) {
+      if (!page2) {
+        return;
+      }
+      if (["page", "component"].includes(which)) {
         loadComponent(page2);
       }
-      if (["both", "data"].includes(which)) {
+      if (["page", "data"].includes(which)) {
         loadData(page2, variables2);
       }
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VariableContext.Provider, { value: variables, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LocationContext.Provider, { value: { pathname: currentURL, params: variables ?? {} }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageComponent, { url: currentURL }, page.id) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VariableContext.Provider, { value: variables, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    LocationContext.Provider,
+    {
+      value: {
+        pathname: currentURL,
+        goto,
+        params: variables ?? {}
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageComponent, { url: currentURL }, page.id)
+    }
+  ) });
 }
 const useLocation = () => (0, import_react2.useContext)(LocationContext);
 function usePageData({
@@ -125,9 +140,13 @@ function usePageData({
     last_variables
   } = useRouterContext();
   const [session] = useSession();
-  function load_query({ id, artifact }) {
+  function load_query({
+    id,
+    artifact,
+    variables: variables2
+  }) {
     for (const artifact2 of Object.keys(page.documents)) {
-      last_variables.set(artifact2, variables);
+      last_variables.set(artifact2, variables2);
     }
     if (ssr_signals.has(id)) {
       return ssr_signals.get(id);
@@ -141,7 +160,7 @@ function usePageData({
       resolve = res;
       reject = rej;
       observer.send({
-        variables,
+        variables: variables2,
         session
       }).then(async () => {
         data_cache.set(id, observer);
@@ -177,7 +196,7 @@ function usePageData({
 										variables: ${JSON.stringify(
           (0, import_scalars.marshalInputs)({
             artifact: observer.artifact,
-            input: variables,
+            input: variables2,
             config: import_config.default
           })
         )}
@@ -218,7 +237,7 @@ function usePageData({
 											variables: ${JSON.stringify(
           (0, import_scalars.marshalInputs)({
             artifact: observer.artifact,
-            input: variables,
+            input: variables2,
             config: import_config.default
           })
         )}
@@ -243,6 +262,9 @@ function usePageData({
     return resolvable;
   }
   function loadData(targetPage, variables2) {
+    if (!targetPage) {
+      return;
+    }
     for (const [artifact, { variables: pageVariables }] of Object.entries(
       targetPage.documents
     )) {
@@ -275,14 +297,14 @@ function usePageData({
         injectToStream?.(`
 						<script type="module" src="${assetPrefix}/artifacts/${artifact.name}.js" async=""><\/script>
 					`);
-        load_query({ id: artifact.name, artifact });
+        load_query({ id: artifact.name, artifact, variables: variables2 });
       }).catch((err) => {
         console.log(err);
       });
     }
     for (const artifact of Object.values(found_artifacts)) {
       if (!data_cache.has(artifact.name)) {
-        load_query({ id: artifact.name, artifact });
+        load_query({ id: artifact.name, artifact, variables: variables2 });
       }
     }
   }
@@ -390,7 +412,9 @@ function useCurrentVariables() {
 const VariableContext = import_react.default.createContext(null);
 const LocationContext = import_react.default.createContext({
   pathname: "",
-  params: {}
+  params: {},
+  goto: () => {
+  }
 });
 function useQueryResult(name) {
   const { data_cache, artifact_cache } = useRouterContext();
@@ -451,10 +475,14 @@ function usePreload({ preload }) {
   import_react.default.useEffect(() => {
     const mouseMove = (e) => {
       const target = e.target;
-      if (!(target instanceof HTMLAnchorElement)) {
+      if (!(target instanceof HTMLElement)) {
+        return;
+      }
+      const anchor = target.closest("a");
+      if (!anchor) {
         return;
       }
-      let preloadWhichRaw = target.attributes.getNamedItem("data-houdini-preload")?.value;
+      let preloadWhichRaw = anchor.attributes.getNamedItem("data-houdini-preload")?.value;
       let preloadWhich = !preloadWhichRaw || preloadWhichRaw === "true" ? "page" : preloadWhichRaw;
       if (!PreloadWhich[preloadWhich]) {
         console.log(
@@ -466,7 +494,7 @@ function usePreload({ preload }) {
         clearTimeout(timeoutRef.current);
       }
       timeoutRef.current = setTimeout(() => {
-        const url = target.attributes.getNamedItem("href")?.value;
+        const url = anchor.attributes.getNamedItem("href")?.value;
         if (!url) {
           return;
         }

package/build/runtime-esm/clientPlugin.js

@@ -1,6 +1,6 @@
 const plugin = () => () => {
   return {
-    beforeNetwork(ctx, { next }) {
+    start(ctx, { next }) {
       next({
         ...ctx,
         cacheParams: {

package/build/runtime-esm/hooks/useDocumentHandle.js

@@ -2,7 +2,7 @@ import { extractPageInfo } from "$houdini/runtime/lib/pageInfo";
 import { cursorHandlers, offsetHandlers } from "$houdini/runtime/lib/pagination";
 import { ArtifactKind } from "$houdini/runtime/lib/types";
 import React from "react";
-import { useClient, useSession } from "../routing/Router";
+import { useClient, useLocation, useSession } from "../routing/Router";
 function useDocumentHandle({
   artifact,
   observer,
@@ -10,6 +10,7 @@ function useDocumentHandle({
 }) {
   const [forwardPending, setForwardPending] = React.useState(false);
   const [backwardPending, setBackwardPending] = React.useState(false);
+  const location = useLocation();
   const [session] = useSession();
   const client = useClient();
   const paginationObserver = React.useMemo(() => {
@@ -27,10 +28,22 @@ function useDocumentHandle({
         return result;
       };
     };
-    const fetchQuery = (args) => observer.send({
-      ...args,
-      session
-    });
+    const fetchQuery = (args) => {
+      const usedVariables = Object.fromEntries(
+        Object.keys(observer.artifact.input?.fields ?? {}).map((fieldName) => [
+          fieldName,
+          location.params[fieldName]
+        ])
+      );
+      return observer.send({
+        ...args,
+        variables: {
+          ...usedVariables,
+          ...args?.variables
+        },
+        session
+      });
+    };
     if (artifact.kind !== ArtifactKind.Query || !artifact.refetch?.paginated) {
       return {
         artifact,

package/build/runtime-esm/routing/Router.d.ts

@@ -22,6 +22,7 @@ export declare function Router({ manifest, initialURL, assetPrefix, injectToStre
 export declare const useLocation: () => {
     pathname: string;
     params: Record<string, any>;
+    goto: (url: string) => void;
 };
 export declare function RouterContextProvider({ children, client, cache, artifact_cache, component_cache, data_cache, ssr_signals, last_variables, session: ssrSession, }: {
     children: React.ReactElement;

package/build/runtime-esm/routing/Router.js

@@ -32,7 +32,7 @@ function Router({
     assetPrefix,
     injectToStream
   });
-  const { component_cache } = useRouterContext();
+  const { component_cache, data_cache } = useRouterContext();
   const PageComponent = component_cache.get(page.id);
   React.useEffect(() => {
     if (globalThis.window && window.location.pathname !== currentURL) {
@@ -51,21 +51,36 @@ function Router({
       window.removeEventListener("popstate", onChange);
     };
   }, []);
+  const goto = (url) => {
+    data_cache.clear();
+    setCurrentURL(url);
+  };
   useLinkBehavior({
-    goto: (val) => {
-      setCurrentURL(val);
-    },
+    goto,
     preload(url, which) {
       const [page2, variables2] = find_match(configFile, manifest, url);
-      if (["both", "component"].includes(which)) {
+      if (!page2) {
+        return;
+      }
+      if (["page", "component"].includes(which)) {
         loadComponent(page2);
       }
-      if (["both", "data"].includes(which)) {
+      if (["page", "data"].includes(which)) {
         loadData(page2, variables2);
       }
     }
   });
-  return /* @__PURE__ */ jsx(VariableContext.Provider, { value: variables, children: /* @__PURE__ */ jsx(LocationContext.Provider, { value: { pathname: currentURL, params: variables ?? {} }, children: /* @__PURE__ */ jsx(PageComponent, { url: currentURL }, page.id) }) });
+  return /* @__PURE__ */ jsx(VariableContext.Provider, { value: variables, children: /* @__PURE__ */ jsx(
+    LocationContext.Provider,
+    {
+      value: {
+        pathname: currentURL,
+        goto,
+        params: variables ?? {}
+      },
+      children: /* @__PURE__ */ jsx(PageComponent, { url: currentURL }, page.id)
+    }
+  ) });
 }
 const useLocation = () => useContext(LocationContext);
 function usePageData({
@@ -84,9 +99,13 @@ function usePageData({
     last_variables
   } = useRouterContext();
   const [session] = useSession();
-  function load_query({ id, artifact }) {
+  function load_query({
+    id,
+    artifact,
+    variables: variables2
+  }) {
     for (const artifact2 of Object.keys(page.documents)) {
-      last_variables.set(artifact2, variables);
+      last_variables.set(artifact2, variables2);
     }
     if (ssr_signals.has(id)) {
       return ssr_signals.get(id);
@@ -100,7 +119,7 @@ function usePageData({
       resolve = res;
       reject = rej;
       observer.send({
-        variables,
+        variables: variables2,
         session
       }).then(async () => {
         data_cache.set(id, observer);
@@ -136,7 +155,7 @@ function usePageData({
 										variables: ${JSON.stringify(
           marshalInputs({
             artifact: observer.artifact,
-            input: variables,
+            input: variables2,
             config: configFile
           })
         )}
@@ -177,7 +196,7 @@ function usePageData({
 											variables: ${JSON.stringify(
           marshalInputs({
             artifact: observer.artifact,
-            input: variables,
+            input: variables2,
             config: configFile
           })
         )}
@@ -202,6 +221,9 @@ function usePageData({
     return resolvable;
   }
   function loadData(targetPage, variables2) {
+    if (!targetPage) {
+      return;
+    }
     for (const [artifact, { variables: pageVariables }] of Object.entries(
       targetPage.documents
     )) {
@@ -234,14 +256,14 @@ function usePageData({
         injectToStream?.(`
 						<script type="module" src="${assetPrefix}/artifacts/${artifact.name}.js" async=""><\/script>
 					`);
-        load_query({ id: artifact.name, artifact });
+        load_query({ id: artifact.name, artifact, variables: variables2 });
       }).catch((err) => {
         console.log(err);
       });
     }
     for (const artifact of Object.values(found_artifacts)) {
       if (!data_cache.has(artifact.name)) {
-        load_query({ id: artifact.name, artifact });
+        load_query({ id: artifact.name, artifact, variables: variables2 });
       }
     }
   }
@@ -349,7 +371,9 @@ function useCurrentVariables() {
 const VariableContext = React.createContext(null);
 const LocationContext = React.createContext({
   pathname: "",
-  params: {}
+  params: {},
+  goto: () => {
+  }
 });
 function useQueryResult(name) {
   const { data_cache, artifact_cache } = useRouterContext();
@@ -410,10 +434,14 @@ function usePreload({ preload }) {
   React.useEffect(() => {
     const mouseMove = (e) => {
       const target = e.target;
-      if (!(target instanceof HTMLAnchorElement)) {
+      if (!(target instanceof HTMLElement)) {
+        return;
+      }
+      const anchor = target.closest("a");
+      if (!anchor) {
         return;
       }
-      let preloadWhichRaw = target.attributes.getNamedItem("data-houdini-preload")?.value;
+      let preloadWhichRaw = anchor.attributes.getNamedItem("data-houdini-preload")?.value;
       let preloadWhich = !preloadWhichRaw || preloadWhichRaw === "true" ? "page" : preloadWhichRaw;
       if (!PreloadWhich[preloadWhich]) {
         console.log(
@@ -425,7 +453,7 @@ function usePreload({ preload }) {
         clearTimeout(timeoutRef.current);
       }
       timeoutRef.current = setTimeout(() => {
-        const url = target.attributes.getNamedItem("href")?.value;
+        const url = anchor.attributes.getNamedItem("href")?.value;
         if (!url) {
           return;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "houdini-react",
-  "version": "0.0.0-20240422193548",
+  "version": "0.0.0-20240429154814",
   "description": "The React plugin for houdini",
   "keywords": [
     "typescript",
@@ -43,7 +43,7 @@
     "recast": "^0.23.1",
     "rollup": "^3.7.4",
     "use-deep-compare-effect": "^1.8.1",
-    "houdini": "^0.0.0-20240422193548"
+    "houdini": "^0.0.0-20240429154814"
   },
   "files": [
     "build"