houdini-react 0.0.0-20231008055552

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

@@ -0,0 +1,95 @@
+import { createLRUCache } from "$houdini/runtime/lib/lru";
+import React from "react";
+import { useClient } from "../routing";
+import { useDocumentHandle } from "./useDocumentHandle";
+import { useIsMountedRef } from "./useIsMounted";
+const promiseCache = createLRUCache();
+function useQueryHandle({ artifact }, variables = null, config = {}) {
+  const identifier = queryIdentifier({ artifact, variables, config });
+  const suspenseValue = promiseCache.get(identifier);
+  const client = useClient();
+  const isMountedRef = useIsMountedRef();
+  let [observer] = React.useState(
+    client.observe({
+      artifact,
+      initialValue: suspenseValue?.resolved?.data ?? {}
+    })
+  );
+  const suspenseTracker = React.useRef(false);
+  const box = React.useRef(observer.state);
+  const subscribe = React.useCallback(
+    (fn) => {
+      return observer.subscribe((val) => {
+        box.current = val;
+        if (isMountedRef.current && !suspenseTracker.current) {
+          fn();
+        }
+      });
+    },
+    [observer]
+  );
+  const storeValue = React.useSyncExternalStore(subscribe, () => box.current);
+  const handle = useDocumentHandle({
+    artifact,
+    observer,
+    storeValue
+  });
+  React.useEffect(() => {
+    return () => {
+      promiseCache.delete(identifier);
+    };
+  }, [identifier]);
+  React.useEffect(() => {
+    return () => {
+      observer.cleanup();
+    };
+  }, [observer]);
+  let result = storeValue.data;
+  if (!suspenseValue) {
+    let resolve = () => {
+    };
+    const loadPromise = new Promise((r) => resolve = r);
+    const suspenseUnit = {
+      then: loadPromise.then.bind(loadPromise),
+      resolve,
+      variables
+    };
+    promiseCache.set(identifier, suspenseUnit);
+    handle.fetch({
+      variables,
+      stuff: {
+        silenceLoading: true
+      }
+    }).then((value) => {
+      suspenseUnit.resolved = {
+        ...handle,
+        data: value.data,
+        partia: value.partial,
+        artifact
+      };
+      suspenseUnit.resolve();
+    });
+    suspenseTracker.current = true;
+    throw suspenseUnit;
+  }
+  if (!result && suspenseValue && !suspenseValue.resolved) {
+    suspenseTracker.current = true;
+    throw suspenseValue;
+  }
+  if (!result && suspenseValue?.resolved) {
+    return suspenseValue.resolved;
+  }
+  return {
+    ...handle,
+    variables: storeValue.variables,
+    data: result
+  };
+}
+function queryIdentifier(args) {
+  args.fetchKey ??= 0;
+  const { artifact, variables, fetchKey } = args;
+  return [artifact.name, JSON.stringify(variables), fetchKey].join("@@");
+}
+export {
+  useQueryHandle
+};

package/build/runtime-esm/hooks/useSubscription.d.ts

@@ -0,0 +1,4 @@
+import type { SubscriptionArtifact, GraphQLObject, GraphQLVariables } from '$houdini/runtime/lib/types';
+export declare function useSubscription<_Result extends GraphQLObject, _Input extends GraphQLVariables>(document: {
+    artifact: SubscriptionArtifact;
+}, variables: _Input): import("houdini").GraphQLObject | null;

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

@@ -0,0 +1,8 @@
+import { useSubscriptionHandle } from "./useSubscriptionHandle";
+function useSubscription(document, variables) {
+  const { data } = useSubscriptionHandle(document, variables);
+  return data;
+}
+export {
+  useSubscription
+};

package/build/runtime-esm/hooks/useSubscriptionHandle.d.ts

@@ -0,0 +1,25 @@
+import type { SubscriptionArtifact, GraphQLObject, GraphQLVariables } from '$houdini/runtime/lib/types';
+export type SubscriptionHandle<_Result extends GraphQLObject, _Input extends GraphQLVariables> = {
+    data: _Result | null;
+    errors: {
+        message: string;
+    }[] | null;
+    variables: _Input;
+    listen: (args: {
+        variables?: _Input;
+    }) => void;
+    unlisten: () => void;
+    fetching: boolean;
+};
+export declare function useSubscriptionHandle<_Result extends GraphQLObject, _Input extends GraphQLVariables>({ artifact }: {
+    artifact: SubscriptionArtifact;
+}, variables: _Input): {
+    data: import("houdini").GraphQLObject | null;
+    errors: {
+        message: string;
+    }[] | null;
+    fetching: boolean;
+    variables: _Input;
+    unlisten: () => Promise<void>;
+    listen: ({ metadata, session, fetch, variables, policy, stuff, cacheParams, setup, silenceEcho, }?: import("$houdini/lib").SendParams) => Promise<import("$houdini/runtime/lib/types").QueryResult<import("houdini").GraphQLObject, _Input>>;
+};

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

@@ -0,0 +1,18 @@
+import { useDocumentSubscription } from "./useDocumentSubscription";
+function useSubscriptionHandle({ artifact }, variables) {
+  const [storeValue, observer] = useDocumentSubscription({
+    artifact,
+    variables
+  });
+  return {
+    data: storeValue.data,
+    errors: storeValue.errors,
+    fetching: storeValue.fetching,
+    variables,
+    unlisten: observer.cleanup,
+    listen: observer.send
+  };
+}
+export {
+  useSubscriptionHandle
+};

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

@@ -0,0 +1,11 @@
+import type { Cache } from '$houdini/runtime/cache/cache';
+import { RouterCache } from './routing';
+export * from './hooks';
+export { router_cache } from './routing';
+export declare function Router({ cache, initialURL, artifact_cache, component_cache, data_cache, pending_cache, last_variables, session, assetPrefix, injectToStream, }: {
+    initialURL: string;
+    cache: Cache;
+    session?: App.Session;
+    assetPrefix: string;
+    injectToStream?: (chunk: string) => void;
+} & RouterCache): JSX.Element;

package/build/runtime-esm/index.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import client from "./client";
+import manifest from "./manifest";
+import { Router as RouterImpl, RouterContextProvider } from "./routing";
+export * from "./hooks";
+import { router_cache } from "./routing";
+function Router({
+  cache,
+  initialURL,
+  artifact_cache,
+  component_cache,
+  data_cache,
+  pending_cache,
+  last_variables,
+  session,
+  assetPrefix,
+  injectToStream
+}) {
+  return /* @__PURE__ */ jsx(
+    RouterContextProvider,
+    {
+      client: client(),
+      cache,
+      artifact_cache,
+      component_cache,
+      data_cache,
+      pending_cache,
+      last_variables,
+      session,
+      children: /* @__PURE__ */ jsx(
+        RouterImpl,
+        {
+          initialURL,
+          manifest,
+          assetPrefix,
+          injectToStream
+        }
+      )
+    }
+  );
+}
+export {
+  Router,
+  router_cache
+};

package/build/runtime-esm/manifest.d.ts

@@ -0,0 +1,3 @@
+import type { RouterManifest } from '$houdini/runtime/lib/types';
+declare const manifest: RouterManifest;
+export default manifest;

package/build/runtime-esm/manifest.js

@@ -0,0 +1,5 @@
+const manifest = {};
+var manifest_default = manifest;
+export {
+  manifest_default as default
+};

package/build/runtime-esm/package.json

@@ -0,0 +1 @@
+{"type":"module"}

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

@@ -0,0 +1,67 @@
+import type { Cache } from '$houdini/runtime/cache/cache';
+import { DocumentStore, HoudiniClient } from '$houdini/runtime/client';
+import { LRUCache } from '$houdini/runtime/lib/lru';
+import { GraphQLObject, GraphQLVariables } from '$houdini/runtime/lib/types';
+import { QueryArtifact } from '$houdini/runtime/lib/types';
+import type { RouterManifest } from '$houdini/runtime/router/types';
+import React from 'react';
+import { SuspenseCache } from './cache';
+type ComponentType = any;
+/**
+ * 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, initialURL, assetPrefix, injectToStream, }: {
+    manifest: RouterManifest<ComponentType>;
+    initialURL?: string;
+    assetPrefix: string;
+    injectToStream?: undefined | ((chunk: string) => void);
+}): JSX.Element;
+export declare function RouterContextProvider({ children, client, cache, artifact_cache, component_cache, data_cache, pending_cache, last_variables, session: ssrSession, }: {
+    children: React.ReactElement;
+    client: HoudiniClient;
+    cache: Cache;
+    artifact_cache: SuspenseCache<QueryArtifact>;
+    component_cache: SuspenseCache<(props: any) => React.ReactElement>;
+    data_cache: SuspenseCache<DocumentStore<GraphQLObject, GraphQLVariables>>;
+    pending_cache: PendingCache;
+    last_variables: LRUCache<GraphQLVariables>;
+    session?: App.Session;
+}): JSX.Element;
+type RouterContext = {
+    client: HoudiniClient;
+    cache: Cache;
+    artifact_cache: SuspenseCache<QueryArtifact>;
+    component_cache: SuspenseCache<(props: any) => React.ReactElement>;
+    data_cache: SuspenseCache<DocumentStore<GraphQLObject, GraphQLVariables>>;
+    pending_cache: PendingCache;
+    last_variables: LRUCache<GraphQLVariables>;
+    session: App.Session;
+};
+export type PendingCache = SuspenseCache<Promise<void> & {
+    resolve: () => void;
+    reject: () => void;
+}>;
+export declare const useRouterContext: () => RouterContext;
+export declare function useClient(): HoudiniClient;
+export declare function useCache(): Cache;
+export declare function updateLocalSession(session: App.Session): void;
+export declare function useSession(): App.Session;
+export declare function useCurrentVariables(): GraphQLVariables;
+export declare function useQueryResult<_Data extends GraphQLObject, _Input extends GraphQLVariables>(name: string): [_Data | null, DocumentStore<_Data, _Input>];
+export type RouterCache = {
+    artifact_cache: SuspenseCache<QueryArtifact>;
+    component_cache: SuspenseCache<(props: any) => React.ReactElement>;
+    data_cache: SuspenseCache<DocumentStore<GraphQLObject, GraphQLVariables>>;
+    last_variables: LRUCache<GraphQLVariables>;
+    pending_cache: PendingCache;
+};
+export declare function router_cache({ pending_queries, artifacts, components, initialData, initialArtifacts, }?: {
+    pending_queries?: string[];
+    artifacts?: Record<string, QueryArtifact>;
+    components?: Record<string, (props: any) => React.ReactElement>;
+    initialData?: Record<string, DocumentStore<GraphQLObject, GraphQLVariables>>;
+    initialArtifacts?: Record<string, QueryArtifact>;
+}): RouterCache;
+export {};

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

@@ -0,0 +1,390 @@
+import { jsx } from "react/jsx-runtime";
+import { deepEquals } from "$houdini/runtime/lib/deepEquals";
+import { find_match } from "$houdini/runtime/router/match";
+import React from "react";
+import { useDocumentStore } from "../hooks/useDocumentStore";
+import { suspense_cache } from "./cache";
+const PreloadWhich = {
+  component: "component",
+  data: "data",
+  page: "page"
+};
+function Router({
+  manifest,
+  initialURL,
+  assetPrefix,
+  injectToStream
+}) {
+  const [current, setCurrent] = React.useState(() => {
+    return initialURL || window.location.pathname;
+  });
+  const [page, variables] = find_match(manifest, current);
+  const { loadData, loadComponent } = usePageData({
+    page,
+    variables,
+    assetPrefix,
+    injectToStream
+  });
+  const { component_cache } = useRouterContext();
+  const PageComponent = component_cache.get(page.id);
+  React.useEffect(() => {
+    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);
+    };
+    window.addEventListener("popstate", onChange);
+    return () => {
+      window.removeEventListener("popstate", onChange);
+    };
+  }, []);
+  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({
+  page,
+  variables,
+  assetPrefix,
+  injectToStream
+}) {
+  const {
+    client,
+    cache,
+    data_cache,
+    component_cache,
+    artifact_cache,
+    pending_cache,
+    last_variables
+  } = useRouterContext();
+  const session = useSession();
+  function load_query({ id, artifact }) {
+    last_variables.set(page.id, variables);
+    if (pending_cache.has(id)) {
+      return pending_cache.get(id);
+    }
+    const observer = client.observe({ artifact, cache });
+    let resolve = () => {
+    };
+    let reject = () => {
+    };
+    const promise = new Promise((res, rej) => {
+      resolve = res;
+      reject = rej;
+      observer.send({
+        variables,
+        cacheParams: { disableSubscriptions: true },
+        session
+      }).then(() => {
+        data_cache.set(id, observer);
+        injectToStream?.(`
+						<script>
+							window.__houdini__cache__?.hydrate(${cache.serialize()}, window.__houdini__hydration__layer)
+
+							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(artifactName),
+									cache: window.__houdini__cache__,
+									initialValue: value
+								})
+
+								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,
+									variables: ${JSON.stringify(variables)}
+								})
+
+								// notify anyone waiting on the pending cache
+								window.__houdini__nav_caches__.pending_cache.get(artifactName).resolve()
+								window.__houdini__nav_caches__.pending_cache.delete(artifactName)
+							}
+						<\/script>
+					`);
+        resolve();
+      }).catch(reject).finally(() => {
+        pending_cache.delete(id);
+      });
+    });
+    pending_cache.set(id, { ...promise, resolve, reject });
+    return pending_cache.get(id);
+  }
+  function loadData(targetPage, variables2) {
+    if (last_variables.has(targetPage.id) && !deepEquals(last_variables.get(targetPage.id), variables2)) {
+      data_cache.clear();
+    }
+    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);
+      }
+    }
+    for (const artifact_id of missing_artifacts) {
+      targetPage.documents[artifact_id].artifact().then((mod) => {
+        const artifact = mod.default;
+        artifact_cache.set(artifact_id, artifact);
+        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 });
+      }
+    }
+  }
+  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 loadComponent(page);
+  }
+  return {
+    loadData,
+    loadComponent
+  };
+}
+function RouterContextProvider({
+  children,
+  client,
+  cache,
+  artifact_cache,
+  component_cache,
+  data_cache,
+  pending_cache,
+  last_variables,
+  session: ssrSession = {}
+}) {
+  const [session, setSession] = React.useState(ssrSession);
+  const handleNewSession = React.useCallback((event) => {
+    setSession(event.detail);
+  }, []);
+  React.useEffect(() => {
+    window.addEventListener("_houdini_session_", handleNewSession);
+    return () => {
+      window.removeEventListener("_houdini_session_", handleNewSession);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Context.Provider,
+    {
+      value: {
+        client,
+        cache,
+        artifact_cache,
+        component_cache,
+        data_cache,
+        pending_cache,
+        last_variables,
+        session
+      },
+      children
+    }
+  );
+}
+const Context = React.createContext(null);
+const useRouterContext = () => {
+  const ctx = React.useContext(Context);
+  if (!ctx) {
+    console.log(ctx);
+    throw new Error("Could not find router context");
+  }
+  return ctx;
+};
+function useClient() {
+  return useRouterContext().client;
+}
+function useCache() {
+  return useRouterContext().cache;
+}
+function updateLocalSession(session) {
+  window.dispatchEvent(
+    new CustomEvent("_houdini_session_", {
+      bubbles: true,
+      detail: session
+    })
+  );
+}
+function useSession() {
+  return useRouterContext().session;
+}
+function useCurrentVariables() {
+  return React.useContext(VariableContext);
+}
+const VariableContext = React.createContext(null);
+function useQueryResult(name) {
+  const store_ref = useRouterContext().data_cache.get(name);
+  const [{ data }, observer] = useDocumentStore({
+    artifact: store_ref.artifact,
+    observer: store_ref
+  });
+  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);
+    };
+  }, []);
+}
+function router_cache({
+  pending_queries = [],
+  artifacts = {},
+  components = {},
+  initialData = {},
+  initialArtifacts = {}
+} = {}) {
+  const result = {
+    artifact_cache: suspense_cache(initialArtifacts),
+    component_cache: suspense_cache(),
+    data_cache: suspense_cache(initialData),
+    pending_cache: suspense_cache(),
+    last_variables: suspense_cache()
+  };
+  for (const query of pending_queries) {
+    result.pending_cache.set(query, signal_promise());
+  }
+  for (const [name, artifact] of Object.entries(artifacts)) {
+    result.artifact_cache.set(name, artifact);
+  }
+  for (const [name, component] of Object.entries(components)) {
+    result.component_cache.set(name, component);
+  }
+  return result;
+}
+function signal_promise() {
+  let resolve = () => {
+  };
+  let reject = () => {
+  };
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return {
+    ...promise,
+    resolve,
+    reject
+  };
+}
+export {
+  Router,
+  RouterContextProvider,
+  router_cache,
+  updateLocalSession,
+  useCache,
+  useClient,
+  useCurrentVariables,
+  useQueryResult,
+  useRouterContext,
+  useSession
+};

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

@@ -0,0 +1,7 @@
+import { LRUCache } from '$houdini/runtime/lib/lru';
+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;
+    set(key: string, value: _Data): void;
+}