houdini-react 1.2.10 → 1.2.11

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

@@ -41,6 +41,11 @@ var import_react = __toESM(require("react"));
 var import_react_streaming = require("react-streaming");
 var import_useDocumentStore = require("../../hooks/useDocumentStore");
 var import_match = require("../lib/match");
+const PreloadWhich = {
+  component: "component",
+  data: "data",
+  page: "page"
+};
 function Router({
   manifest,
   initialURL,
@@ -52,7 +57,13 @@ function Router({
     return initialURL || window.location.pathname;
   });
   const [page, variables] = (0, import_match.find_match)(manifest, current);
-  usePageData({ page, variables, loaded_queries, loaded_artifacts, assetPrefix });
+  const { loadData, loadComponent } = usePageData({
+    page,
+    variables,
+    loaded_queries,
+    loaded_artifacts,
+    assetPrefix
+  });
   const { component_cache } = useRouterContext();
   const PageComponent = component_cache.get(page.id);
   import_react.default.useEffect(() => {
@@ -72,7 +83,18 @@ function Router({
       window.removeEventListener("popstate", onChange);
     };
   }, []);
-  useAnchorIntercept({ goto: setCurrent });
+  useLinkBehavior({
+    goto: setCurrent,
+    preload(url, which) {
+      const [page2, variables2] = (0, import_match.find_match)(manifest, url);
+      if (["both", "component"].includes(which)) {
+        loadComponent(page2);
+      }
+      if (["both", "data"].includes(which)) {
+        loadData(page2, variables2);
+      }
+    }
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VariableContext.Provider, { value: variables, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageComponent, { url: current }) });
 }
 function usePageData({
@@ -174,46 +196,55 @@ function usePageData({
     pending_cache.set(id, { ...promise, resolve, reject });
     return pending_cache.get(id);
   }
-  if (last_variables.has(page.id) && !(0, import_deepEquals.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) && !(0, import_deepEquals.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="${assetPrefix}/artifacts/${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);
   }
+  return {
+    loadData,
+    loadComponent
+  };
 }
 function RouterContextProvider({
   children,
@@ -290,11 +321,20 @@ function useQueryResult(name) {
   });
   return [data, observer];
 }
-function useAnchorIntercept({ goto }) {
+function useLinkBehavior({
+  goto,
+  preload
+}) {
+  useLinkNavigation({ goto });
+  if (!globalThis.navigator?.connection?.saveData) {
+    usePreload({ preload });
+  }
+}
+function useLinkNavigation({ goto }) {
   const [pending, startTransition] = import_react.default.useTransition();
   import_react.default.useEffect(() => {
-    let onClick = (e) => {
-      let link = e.target?.closest("a");
+    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("/")) {
@@ -312,6 +352,39 @@ function useAnchorIntercept({ goto }) {
     };
   }, []);
 }
+function usePreload({ preload }) {
+  const timeoutRef = import_react.default.useRef(null);
+  import_react.default.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);
+    };
+  }, []);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Router,

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

@@ -4,6 +4,11 @@ import React from "react";
 import { useStream } from "react-streaming";
 import { useDocumentStore } from "../../hooks/useDocumentStore";
 import { find_match } from "../lib/match";
+const PreloadWhich = {
+  component: "component",
+  data: "data",
+  page: "page"
+};
 function Router({
   manifest,
   initialURL,
@@ -15,7 +20,13 @@ function Router({
     return initialURL || window.location.pathname;
   });
   const [page, variables] = find_match(manifest, current);
-  usePageData({ page, variables, loaded_queries, loaded_artifacts, assetPrefix });
+  const { loadData, loadComponent } = usePageData({
+    page,
+    variables,
+    loaded_queries,
+    loaded_artifacts,
+    assetPrefix
+  });
   const { component_cache } = useRouterContext();
   const PageComponent = component_cache.get(page.id);
   React.useEffect(() => {
@@ -35,7 +46,18 @@ function Router({
       window.removeEventListener("popstate", onChange);
     };
   }, []);
-  useAnchorIntercept({ goto: setCurrent });
+  useLinkBehavior({
+    goto: setCurrent,
+    preload(url, which) {
+      const [page2, variables2] = find_match(manifest, url);
+      if (["both", "component"].includes(which)) {
+        loadComponent(page2);
+      }
+      if (["both", "data"].includes(which)) {
+        loadData(page2, variables2);
+      }
+    }
+  });
   return /* @__PURE__ */ jsx(VariableContext.Provider, { value: variables, children: /* @__PURE__ */ jsx(PageComponent, { url: current }) });
 }
 function usePageData({
@@ -137,46 +159,55 @@ function usePageData({
     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="${assetPrefix}/artifacts/${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);
   }
+  return {
+    loadData,
+    loadComponent
+  };
 }
 function RouterContextProvider({
   children,
@@ -253,11 +284,20 @@ function useQueryResult(name) {
   });
   return [data, observer];
 }
-function useAnchorIntercept({ goto }) {
+function useLinkBehavior({
+  goto,
+  preload
+}) {
+  useLinkNavigation({ goto });
+  if (!globalThis.navigator?.connection?.saveData) {
+    usePreload({ preload });
+  }
+}
+function useLinkNavigation({ goto }) {
   const [pending, startTransition] = React.useTransition();
   React.useEffect(() => {
-    let onClick = (e) => {
-      let link = e.target?.closest("a");
+    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("/")) {
@@ -275,6 +315,39 @@ function useAnchorIntercept({ goto }) {
     };
   }, []);
 }
+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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "houdini-react",
-  "version": "1.2.10",
+  "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.10"
+    "houdini": "^1.2.11"
   },
   "files": [
     "build"

package/build/runtime/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/runtime/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/runtime/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;

package/build/runtime-cjs/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/runtime-cjs/server/compat.js

@@ -1,52 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var compat_exports = {};
-__export(compat_exports, {
-  dev_server: () => dev_server
-});
-module.exports = __toCommonJS(compat_exports);
-function dev_server({ server, config }) {
-  return {
-    use(fn) {
-      server.use((req, res, next) => {
-        fn(
-          {
-            url: req.url,
-            headers: new Headers(req.headers)
-          },
-          {
-            ...res,
-            redirect(url, status = 307) {
-              res.statusCode = status;
-              res.setHeader("location", url);
-              res.setHeader("content-length", "0");
-              return res.end();
-            },
-            set_header: res.setHeader.bind(res)
-          },
-          next
-        );
-      });
-    }
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  dev_server
-});

package/build/runtime-cjs/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/runtime-cjs/server/index.js

@@ -1,54 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var server_exports = {};
-__export(server_exports, {
-  configure_server: () => configure_server
-});
-module.exports = __toCommonJS(server_exports);
-var import_config = require("../../plugin/config");
-var import_session = require("./session");
-function configure_server({ server, config }) {
-  server.use(server_handler({ config }));
-}
-function server_handler({ config }) {
-  const plugin_config = (0, import_config.plugin_config)(config);
-  return (req, res, next) => {
-    if (!req.url) {
-      next();
-      return;
-    }
-    if (plugin_config.auth && "redirect" in plugin_config.auth && req.url.startsWith(plugin_config.auth.redirect)) {
-      return redirect_auth(req, res, next);
-    }
-    next();
-  };
-}
-const redirect_auth = (req, res, next) => {
-  const { searchParams } = new URL(req.url, `http://${req.headers.get("host")}`);
-  const { redirectTo, ...session } = Object.fromEntries(searchParams.entries());
-  (0, import_session.set_session)(res, session);
-  if (redirectTo) {
-    return res.redirect(redirectTo);
-  }
-  next();
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  configure_server
-});

package/build/runtime-cjs/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;

package/build/runtime-cjs/server/session.js

@@ -1,61 +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 session_exports = {};
-__export(session_exports, {
-  get_session: () => get_session,
-  set_session: () => set_session
-});
-module.exports = __toCommonJS(session_exports);
-var import_cookie_parser = __toESM(require("cookie-parser"));
-const session_cookie_name = "__houdini__";
-function set_session(res, value) {
-  const today = new Date();
-  const expires = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1e3);
-  const serialized = JSON.stringify(value);
-  res.set_header(
-    "Set-Cookie",
-    `${session_cookie_name}=${serialized}; Path=/; HttpOnly; Secure; SameSite=Lax; Expires=${expires.toUTCString()} `
-  );
-}
-function get_session(req, secrets) {
-  const cookie = req.get("cookie");
-  if (!cookie) {
-    return {};
-  }
-  const parsed = import_cookie_parser.default.signedCookie(cookie, secrets);
-  if (!parsed) {
-    return {};
-  }
-  const houdini_session_cookie = parsed.split(";").map((s) => s.trim().split("=")).filter((s) => s[0] === session_cookie_name);
-  if (houdini_session_cookie.length === 1) {
-    return JSON.parse(houdini_session_cookie[0][1]);
-  }
-  return {};
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  get_session,
-  set_session
-});

package/build/runtime-esm/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;