houdini-react 1.2.9 → 1.2.11

package/build/runtime-esm/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx } from "react/jsx-runtime";
 import client from "./client";
 import manifest from "./manifest";
 import { Router as RouterImpl, RouterContextProvider } from "./routing";
@@ -7,7 +7,7 @@ export * from "./hooks";
 export * from "./routing";
 function Router({
   cache,
-  intialURL,
+  initialURL,
   artifact_cache,
   component_cache,
   data_cache,
@@ -15,9 +15,10 @@ function Router({
   last_variables,
   loaded_queries,
   loaded_artifacts,
-  session
+  session,
+  assetPrefix
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     RouterContextProvider,
     {
       client,
@@ -27,28 +28,31 @@ function Router({
       data_cache,
       pending_cache,
       last_variables,
-      session
-    },
-    /* @__PURE__ */ React.createElement(
-      RouterImpl,
-      {
-        intialURL,
-        manifest,
-        loaded_queries,
-        loaded_artifacts
-      }
-    )
+      session,
+      children: /* @__PURE__ */ jsx(
+        RouterImpl,
+        {
+          initialURL,
+          manifest,
+          loaded_queries,
+          loaded_artifacts,
+          assetPrefix
+        }
+      )
+    }
   );
 }
 function router_cache({
   pending_queries = [],
   artifacts = {},
-  components = {}
+  components = {},
+  initialData = {},
+  initialArtifacts = {}
 } = {}) {
   const result = {
-    artifact_cache: suspense_cache(),
+    artifact_cache: suspense_cache(initialArtifacts),
     component_cache: suspense_cache(),
-    data_cache: suspense_cache(),
+    data_cache: suspense_cache(initialData),
     pending_cache: suspense_cache(),
     last_variables: suspense_cache()
   };

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

@@ -5,22 +5,22 @@ import { GraphQLObject, GraphQLVariables } from '$houdini/runtime/lib/types';
 import { QueryArtifact } from '$houdini/runtime/lib/types';
 import React from 'react';
 import { SuspenseCache } from '../lib/cache';
-import type { NavigationContext, RouterManifest } from '../lib/types';
+import type { RouterManifest } from '../lib/types';
 /**
  * Router is the top level entry point for the filesystem-based router.
  * It is responsible for loading various page sources (including API fetches) and
  * then rendering when appropriate.
  */
-export declare function Router({ manifest, intialURL, loaded_queries, loaded_artifacts, }: {
+export declare function Router({ manifest, initialURL, loaded_queries, loaded_artifacts, assetPrefix, }: {
     manifest: RouterManifest;
-    intialURL?: string;
+    initialURL?: string;
     loaded_queries?: Record<string, {
         data: GraphQLObject;
         variables: GraphQLVariables;
     }>;
     loaded_artifacts?: Record<string, QueryArtifact>;
+    assetPrefix: string;
 }): JSX.Element;
-export declare function useNavigationContext(): NavigationContext;
 export declare function RouterContextProvider({ children, client, cache, artifact_cache, component_cache, data_cache, pending_cache, last_variables, session: ssrSession, }: {
     children: React.ReactElement;
     client: HoudiniClient;

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

@@ -1,33 +1,43 @@
+import { jsx } from "react/jsx-runtime";
 import { deepEquals } from "$houdini/runtime/lib/deepEquals";
 import React from "react";
 import { useStream } from "react-streaming";
 import { useDocumentStore } from "../../hooks/useDocumentStore";
 import { find_match } from "../lib/match";
-const NavContext = React.createContext({
-  currentRoute: "/",
-  goto: () => {
-    throw new Error("NOT FOUND");
-  }
-});
+const PreloadWhich = {
+  component: "component",
+  data: "data",
+  page: "page"
+};
 function Router({
   manifest,
-  intialURL,
+  initialURL,
   loaded_queries,
-  loaded_artifacts
+  loaded_artifacts,
+  assetPrefix
 }) {
   const [current, setCurrent] = React.useState(() => {
-    return intialURL || window.location.pathname;
+    return initialURL || window.location.pathname;
   });
   const [page, variables] = find_match(manifest, current);
-  useLoadPage({ page, variables, loaded_queries, loaded_artifacts });
+  const { loadData, loadComponent } = usePageData({
+    page,
+    variables,
+    loaded_queries,
+    loaded_artifacts,
+    assetPrefix
+  });
   const { component_cache } = useRouterContext();
   const PageComponent = component_cache.get(page.id);
   React.useEffect(() => {
-    if (window.location.pathname !== current) {
+    if (globalThis.window && window.location.pathname !== current) {
       window.history.pushState({}, "", current);
     }
   }, [current]);
   React.useEffect(() => {
+    if (!globalThis.window) {
+      return;
+    }
     const onChange = (evt) => {
       setCurrent(window.location.pathname);
     };
@@ -36,22 +46,26 @@ function Router({
       window.removeEventListener("popstate", onChange);
     };
   }, []);
-  return /* @__PURE__ */ React.createElement(
-    NavContext.Provider,
-    {
-      value: {
-        currentRoute: current,
-        goto: setCurrent
+  useLinkBehavior({
+    goto: setCurrent,
+    preload(url, which) {
+      const [page2, variables2] = find_match(manifest, url);
+      if (["both", "component"].includes(which)) {
+        loadComponent(page2);
       }
-    },
-    /* @__PURE__ */ React.createElement(VariableContext.Provider, { value: variables }, /* @__PURE__ */ React.createElement(PageComponent, { url: current }))
-  );
+      if (["both", "data"].includes(which)) {
+        loadData(page2, variables2);
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx(VariableContext.Provider, { value: variables, children: /* @__PURE__ */ jsx(PageComponent, { url: current }) });
 }
-function useLoadPage({
+function usePageData({
   page,
   variables,
   loaded_queries,
-  loaded_artifacts
+  loaded_artifacts,
+  assetPrefix
 }) {
   const {
     client,
@@ -93,17 +107,38 @@ function useLoadPage({
 						<script>
 							window.__houdini__cache__?.hydrate(${cache.serialize()}, window.__houdini__hydration__layer)
 
-							if (window.__houdini__nav_caches__?.pending_cache.has("${artifact.name}")) {
+							const artifactName = "${artifact.name}"
+							const value = ${JSON.stringify(observer.state.data)}
+
+							// if the data is pending, we need to resolve it
+							if (window.__houdini__nav_caches__?.data_cache.has(artifactName)) {
 								// before we resolve the pending signals,
 								// fill the data cache with values we got on the server
 								const new_store = window.__houdini__client__.observe({
-									artifact: window.__houdini__nav_caches__.artifact_cache.get("${artifact.name}"),
+									artifact: window.__houdini__nav_caches__.artifact_cache.get(artifactName),
 									cache: window.__houdini__cache__,
-									initialValue: ${JSON.stringify(observer.state.data)}
+									initialValue: value
 								})
 
-								window.__houdini__nav_caches__.data_cache.set("${artifact.name}", new_store)
+								window.__houdini__nav_caches__?.data_cache.set(artifactName, new_store)
+							}
+
+
+							// if there are no data caches available we need to populate the pending one instead
+							if (!window.__houdini__nav_caches__) {
+								if (!window.__houdini__pending_data__) {
+									window.__houdini__pending_data__ = {}
+								}
 
+								if (!window.__houdini__pending_artifacts__) {
+									window.__houdini__pending_artifacts__ = {}
+								}
+
+								window.__houdini__pending_data__[artifactName] = value
+								window.__houdini__pending_artifacts__[artifactName] = ${JSON.stringify(artifact)}
+							}
+
+							if (window.__houdini__nav_caches__?.pending_cache.has(artifactName)) {
 								// we're pushing this store onto the client, it should be initialized
 								new_store.send({
 									setup: true,
@@ -111,8 +146,8 @@ function useLoadPage({
 								})
 
 								// notify anyone waiting on the pending cache
-								window.__houdini__nav_caches__.pending_cache.get("${artifact.name}").resolve()
-								window.__houdini__nav_caches__.pending_cache.delete("${artifact.name}")
+								window.__houdini__nav_caches__.pending_cache.get(artifactName).resolve()
+								window.__houdini__nav_caches__.pending_cache.delete(artifactName)
 							}
 						<\/script>
 					`);
@@ -124,49 +159,55 @@ function useLoadPage({
     pending_cache.set(id, { ...promise, resolve, reject });
     return pending_cache.get(id);
   }
-  if (last_variables.has(page.id) && !deepEquals(last_variables.get(page.id), variables)) {
-    data_cache.clear();
-  }
-  const missing_artifacts = [];
-  const found_artifacts = {};
-  for (const key of Object.keys(page.documents)) {
-    if (artifact_cache.has(key)) {
-      found_artifacts[key] = artifact_cache.get(key);
-    } else {
-      missing_artifacts.push(key);
+  function loadData(targetPage, variables2) {
+    if (last_variables.has(targetPage.id) && !deepEquals(last_variables.get(targetPage.id), variables2)) {
+      data_cache.clear();
     }
-  }
-  for (const artifact_id of missing_artifacts) {
-    page.documents[artifact_id].artifact().then((mod) => {
-      const artifact = mod.default;
-      artifact_cache.set(artifact_id, artifact);
-      if (loaded_artifacts) {
-        loaded_artifacts[artifact.name] = artifact;
+    const missing_artifacts = [];
+    const found_artifacts = {};
+    for (const key of Object.keys(targetPage.documents)) {
+      if (artifact_cache.has(key)) {
+        found_artifacts[key] = artifact_cache.get(key);
+      } else {
+        missing_artifacts.push(key);
       }
-      stream?.injectToStream(`
-					<script type="module" src="@@houdini/artifact/${artifact.name}.js" async=""><\/script>
-				`);
-      load_query({ id: artifact.name, artifact });
-    }).catch((err) => {
-      console.log(err);
-    });
+    }
+    for (const artifact_id of missing_artifacts) {
+      targetPage.documents[artifact_id].artifact().then((mod) => {
+        const artifact = mod.default;
+        artifact_cache.set(artifact_id, artifact);
+        if (loaded_artifacts) {
+          loaded_artifacts[artifact.name] = artifact;
+        }
+        stream?.injectToStream(`
+						<script type="module" src="${assetPrefix}/artifacts/${artifact.name}.js" async=""><\/script>
+					`);
+        load_query({ id: artifact.name, artifact });
+      }).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 });
+      }
+    }
   }
-  for (const artifact of Object.values(found_artifacts)) {
-    if (!data_cache.has(artifact.name)) {
-      load_query({ id: artifact.name, artifact });
+  async function loadComponent(targetPage) {
+    if (component_cache.has(targetPage.id)) {
+      return;
     }
+    const mod = await targetPage.component();
+    component_cache.set(targetPage.id, mod.default);
   }
+  loadData(page, variables);
   if (!component_cache.has(page.id)) {
-    throw new Promise((resolve, reject) => {
-      page.component().then((mod) => {
-        component_cache.set(page.id, mod.default);
-        resolve();
-      }).catch(reject);
-    });
+    throw loadComponent(page);
   }
-}
-function useNavigationContext() {
-  return React.useContext(NavContext);
+  return {
+    loadData,
+    loadComponent
+  };
 }
 function RouterContextProvider({
   children,
@@ -189,7 +230,7 @@ function RouterContextProvider({
       window.removeEventListener("_houdini_session_", handleNewSession);
     };
   }, []);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Context.Provider,
     {
       value: {
@@ -201,9 +242,9 @@ function RouterContextProvider({
         pending_cache,
         last_variables,
         session
-      }
-    },
-    children
+      },
+      children
+    }
   );
 }
 const Context = React.createContext(null);
@@ -243,6 +284,70 @@ function useQueryResult(name) {
   });
   return [data, observer];
 }
+function useLinkBehavior({
+  goto,
+  preload
+}) {
+  useLinkNavigation({ goto });
+  if (!globalThis.navigator?.connection?.saveData) {
+    usePreload({ preload });
+  }
+}
+function useLinkNavigation({ goto }) {
+  const [pending, startTransition] = React.useTransition();
+  React.useEffect(() => {
+    const onClick = (e) => {
+      const link = e.target?.closest("a");
+      if (link && link instanceof HTMLAnchorElement && link.href && (!link.target || link.target === "_self") && link.origin === location.origin && !link.hasAttribute("download") && e.button === 0 && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.defaultPrevented) {
+        const target = link.attributes.getNamedItem("href")?.value;
+        if (!target || !target.startsWith("/")) {
+          return;
+        }
+        e.preventDefault();
+        startTransition(() => {
+          goto(target);
+        });
+      }
+    };
+    document.addEventListener("click", onClick);
+    return () => {
+      document.removeEventListener("click", onClick);
+    };
+  }, []);
+}
+function usePreload({ preload }) {
+  const timeoutRef = React.useRef(null);
+  React.useEffect(() => {
+    const mouseMove = (e) => {
+      const target = e.target;
+      if (!(target instanceof HTMLAnchorElement)) {
+        return;
+      }
+      let preloadWhichRaw = target.attributes.getNamedItem("data-houdini-preload")?.value;
+      let preloadWhich = !preloadWhichRaw || preloadWhichRaw === "true" ? "page" : preloadWhichRaw;
+      if (!PreloadWhich[preloadWhich]) {
+        console.log(
+          `invalid preload value "${preloadWhich}" must be "${PreloadWhich.component}", "${PreloadWhich.data}", or "${PreloadWhich.page}"`
+        );
+        return;
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        const url = target.attributes.getNamedItem("href")?.value;
+        if (!url) {
+          return;
+        }
+        preload(url, preloadWhich);
+      }, 20);
+    };
+    document.addEventListener("mousemove", mouseMove);
+    return () => {
+      document.removeEventListener("mousemove", mouseMove);
+    };
+  }, []);
+}
 export {
   Router,
   RouterContextProvider,
@@ -250,7 +355,6 @@ export {
   useCache,
   useClient,
   useCurrentVariables,
-  useNavigationContext,
   useQueryResult,
   useRouterContext,
   useSession

package/build/runtime-esm/routing/components/index.d.ts

@@ -1,2 +1 @@
-export { Link } from './Link';
 export { Router, RouterContextProvider, useClient, updateLocalSession } from './Router';

package/build/runtime-esm/routing/components/index.js

@@ -1,7 +1,5 @@
-import { Link } from "./Link";
 import { Router, RouterContextProvider, useClient, updateLocalSession } from "./Router";
 export {
-  Link,
   Router,
   RouterContextProvider,
   updateLocalSession,

package/build/runtime-esm/routing/lib/cache.d.ts

@@ -1,5 +1,5 @@
 import { LRUCache } from '$houdini/runtime/lib/lru';
-export declare function suspense_cache<T>(): SuspenseCache<T>;
+export declare function suspense_cache<T>(initialData?: Record<string, T>): SuspenseCache<T>;
 export declare class SuspenseCache<_Data> extends LRUCache<_Data> {
     #private;
     get(key: string): _Data;

package/build/runtime-esm/routing/lib/cache.js

@@ -1,6 +1,10 @@
 import { LRUCache } from "$houdini/runtime/lib/lru";
-function suspense_cache() {
-  return new SuspenseCache();
+function suspense_cache(initialData) {
+  const cache = new SuspenseCache();
+  for (const [key, value] of Object.entries(initialData ?? {})) {
+    cache.set(key, value);
+  }
+  return cache;
 }
 class SuspenseCache extends LRUCache {
   #callbacks = /* @__PURE__ */ new Map();

package/build/runtime-esm/routing/lib/types.d.ts

@@ -17,7 +17,3 @@ export type RouterPageManifest = {
         default: (props: any) => React.ReactElement;
     }>;
 };
-export type NavigationContext = {
-    currentRoute: string;
-    goto: (route: string) => void;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "houdini-react",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "description": "The React plugin for houdini",
   "keywords": [
     "typescript",
@@ -40,7 +40,7 @@
     "recast": "^0.23.1",
     "rollup": "^3.7.4",
     "use-deep-compare-effect": "^1.8.1",
-    "houdini": "^1.2.9"
+    "houdini": "^1.2.11"
   },
   "files": [
     "build"
@@ -51,19 +51,10 @@
       "types": "./build/plugin/index.d.ts",
       "import": "./build/plugin-esm/index.js",
       "require": "./build/plugin-cjs/index.js"
-    },
-    "./server": {
-      "types": "./build/server/index.d.ts",
-      "import": "./build/server-esm/index.js",
-      "require": "./build/server-cjs/index.js"
     }
   },
   "typesVersions": {
-    "*": {
-      "server": [
-        "build/server/index.d.ts"
-      ]
-    }
+    "*": {}
   },
   "main": "./build/plugin-cjs/index.js",
   "types": "./build/plugin/index.d.ts",

package/build/plugin/conventions.d.ts

@@ -1,24 +0,0 @@
-import { type Config } from 'houdini';
-/** The location of the project's router */
-export declare function router_path(config: Config): string;
-/** The location of the page component */
-export declare function page_entry_path(config: Config, id: string, base?: string): string;
-export declare function render_client_path(config: Config, base?: string): string;
-export declare function render_server_path(config: Config, base?: string): string;
-export declare function render_app_path(config: Config, base?: string): string;
-export declare function page_unit_path(config: Config, id: string, base?: string): string;
-export declare function layout_unit_path(config: Config, id: string, base?: string): string;
-export declare function fallback_unit_path(config: Config, which: 'page' | 'layout', id: string, base?: string): string;
-/** Load the page query for the given route from disk */
-export declare function read_pageQuery(base: string): Promise<(string | null)[]>;
-/** Load the page view for the given route from disk */
-export declare function read_pageView(base: string): Promise<string[] | null[]>;
-/** Load the layout query for the given route from disk */
-export declare function read_layoutQuery(base: string): Promise<(string | null)[]>;
-/** Load the layout view for the given route from disk */
-export declare function read_layoutView(base: string): Promise<string[] | null[]>;
-export declare function router_index_path(config: Config): string;
-export declare function is_layout(path: string): boolean;
-/** Transforms paths to ids */
-export declare function normalize_path(path: string): string;
-export declare function page_entries_dir(config: Config, base?: string): string;

package/build/runtime/routing/components/Link.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare function Link({ href, children, style, ...props }: {
-    href: string;
-    children: React.ReactNode;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>): JSX.Element;

package/build/runtime-cjs/routing/components/Link.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare function Link({ href, children, style, ...props }: {
-    href: string;
-    children: React.ReactNode;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>): JSX.Element;

package/build/runtime-cjs/routing/components/Link.js

@@ -1,51 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Link_exports = {};
-__export(Link_exports, {
-  Link: () => Link
-});
-module.exports = __toCommonJS(Link_exports);
-var import_react = __toESM(require("react"));
-var import_Router = require("./Router");
-function Link({
-  href,
-  children,
-  style,
-  ...props
-}) {
-  const { goto } = (0, import_Router.useNavigationContext)();
-  const [pending, startTransition] = (0, import_react.useTransition)();
-  const click = (e) => {
-    e.preventDefault();
-    startTransition(() => {
-      goto(href);
-    });
-  };
-  return /* @__PURE__ */ import_react.default.createElement("a", { href, onClick: click, style, ...props }, children);
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Link
-});

package/build/runtime-esm/routing/components/Link.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare function Link({ href, children, style, ...props }: {
-    href: string;
-    children: React.ReactNode;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>): JSX.Element;

package/build/runtime-esm/routing/components/Link.js

@@ -1,21 +0,0 @@
-import React, { useTransition } from "react";
-import { useNavigationContext } from "./Router";
-function Link({
-  href,
-  children,
-  style,
-  ...props
-}) {
-  const { goto } = useNavigationContext();
-  const [pending, startTransition] = useTransition();
-  const click = (e) => {
-    e.preventDefault();
-    startTransition(() => {
-      goto(href);
-    });
-  };
-  return /* @__PURE__ */ React.createElement("a", { href, onClick: click, style, ...props }, children);
-}
-export {
-  Link
-};

package/build/server/compat.d.ts

@@ -1,7 +0,0 @@
-import type { Config } from 'houdini';
-import type { Connect } from 'vite';
-import type { Server } from '.';
-export declare function dev_server({ server, config }: {
-    server: Connect.Server;
-    config: Config;
-}): Server;

package/build/server/index.d.ts

@@ -1,17 +0,0 @@
-import type { Config } from 'houdini';
-export declare function configure_server({ server, config }: {
-    server: Server;
-    config: Config;
-}): void;
-export type Server = {
-    use(fn: ServerMiddleware): void;
-};
-export type ServerMiddleware = (req: IncomingRequest, res: ServerResponse, next: () => void) => void;
-export type IncomingRequest = {
-    url?: string;
-    headers: Headers;
-};
-export type ServerResponse = {
-    redirect(url: string, status?: number): void;
-    set_header(name: string, value: string): void;
-};

package/build/server/session.d.ts

@@ -1,3 +0,0 @@
-import type { ServerResponse } from '.';
-export declare function set_session(res: ServerResponse, value: App.Session): void;
-export declare function get_session(req: Headers, secrets: string[]): App.Session;