TEST IMPLEMENATION OF CROSS-CLIENTLOADER-REQUEST DEDUPE

Author: Oksamies

apps/cyberstorm-remix/app/c/community.tsx

@@ -23,12 +23,10 @@ import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
 import { DapperTs } from "@thunderstore/dapper-ts";
 import { type OutletContextShape } from "../root";
-import {
-  getPublicEnvVariables,
-  getSessionTools,
-} from "cyberstorm/security/publicEnvVariables";
+import { getPublicEnvVariables } from "cyberstorm/security/publicEnvVariables";
 import { Suspense } from "react";
 import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
+import { getRequestScopedDapper } from "cyberstorm/utils/dapperSingleton";
 
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.communityId) {
@@ -47,15 +45,9 @@ export async function loader({ params }: LoaderFunctionArgs) {
   throw new Response("Community not found", { status: 404 });
 }
 
-export async function clientLoader({ params }: LoaderFunctionArgs) {
+export async function clientLoader({ params, request }: LoaderFunctionArgs) {
   if (params.communityId) {
-    const tools = getSessionTools();
-    const dapper = new DapperTs(() => {
-      return {
-        apiHost: tools?.getConfig().apiHost,
-        sessionId: tools?.getConfig().sessionId,
-      };
-    });
+    const dapper = getRequestScopedDapper(request);
     const community = dapper.getCommunity(params.communityId);
     return {
       community: community,

apps/cyberstorm-remix/app/entry.client.tsx

@@ -4,8 +4,12 @@ import { hydrateRoot } from "react-dom/client";
 import { useLocation, useMatches } from "react-router";
 import { HydratedRouter } from "react-router/dom";
 
-import { getPublicEnvVariables } from "cyberstorm/security/publicEnvVariables";
+import {
+  getPublicEnvVariables,
+  getSessionTools,
+} from "cyberstorm/security/publicEnvVariables";
 import { denyUrls } from "cyberstorm/utils/sentry";
+import { primeClientDapper } from "cyberstorm/utils/dapperSingleton";
 
 const publicEnvVariables = getPublicEnvVariables([
   "VITE_SITE_URL",
@@ -15,6 +19,11 @@ const publicEnvVariables = getPublicEnvVariables([
   "VITE_CLIENT_SENTRY_DSN",
 ]);
 
+const sessionTools = getSessionTools();
+primeClientDapper(() =>
+  sessionTools.getConfig(publicEnvVariables.VITE_API_URL)
+);
+
 Sentry.init({
   dsn: publicEnvVariables.VITE_CLIENT_SENTRY_DSN,
   integrations: [

apps/cyberstorm-remix/app/p/tabs/Readme/Readme.tsx

@@ -1,25 +1,25 @@
 import { Await, type LoaderFunctionArgs } from "react-router";
 import { useLoaderData } from "react-router";
 import { DapperTs } from "@thunderstore/dapper-ts";
-import {
-  getPublicEnvVariables,
-  getSessionTools,
-} from "cyberstorm/security/publicEnvVariables";
+import { getPublicEnvVariables } from "cyberstorm/security/publicEnvVariables";
 import { Suspense } from "react";
 import { SkeletonBox } from "@thunderstore/cyberstorm";
 import "./Readme.css";
+import { getRequestScopedDapper } from "cyberstorm/utils/dapperSingleton";
 
 export async function loader({ params }: LoaderFunctionArgs) {
-  if (params.namespaceId && params.packageId) {
+  if (params.communityId && params.namespaceId && params.packageId) {
     const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
     const dapper = new DapperTs(() => {
       return {
         apiHost: publicEnvVariables.VITE_API_URL,
         sessionId: undefined,
       };
     });
+    const community = await dapper.getCommunity(params.communityId);
     return {
       readme: dapper.getPackageReadme(params.namespaceId, params.packageId),
+      community: community,
     };
   }
   return {
@@ -29,17 +29,13 @@ export async function loader({ params }: LoaderFunctionArgs) {
   };
 }
 
-export async function clientLoader({ params }: LoaderFunctionArgs) {
-  if (params.namespaceId && params.packageId) {
-    const tools = getSessionTools();
-    const dapper = new DapperTs(() => {
-      return {
-        apiHost: tools?.getConfig().apiHost,
-        sessionId: tools?.getConfig().sessionId,
-      };
-    });
+export async function clientLoader({ params, request }: LoaderFunctionArgs) {
+  if (params.communityId && params.namespaceId && params.packageId) {
+    const dapper = getRequestScopedDapper(request);
+    const community = dapper.getCommunity(params.communityId);
     return {
       readme: dapper.getPackageReadme(params.namespaceId, params.packageId),
+      community,
     };
   }
   return {
@@ -50,9 +46,10 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
 }
 
 export default function Readme() {
-  const { status, message, readme } = useLoaderData<
+  const { status, message, readme, community } = useLoaderData<
     typeof loader | typeof clientLoader
   >();
+  console.log(community);
 
   if (status === "error") return <div>{message}</div>;
   return (

apps/cyberstorm-remix/cyberstorm/utils/dapperRequestCache.ts

@@ -0,0 +1,75 @@
+import isEqual from "lodash/isEqual";
+
+const restrictedNames = new Set(["", "anonymous", "default"]);
+
+type CacheEntry = {
+  funcName: string;
+  inputs: unknown[];
+  promise: Promise<unknown>;
+};
+
+const requestScopedCaches = new WeakMap<Request, CacheEntry[]>();
+const globalFallbackCache: CacheEntry[] = [];
+
+function getCache(request?: Request) {
+  if (!request) {
+    return globalFallbackCache;
+  }
+
+  let cache = requestScopedCaches.get(request);
+  if (!cache) {
+    cache = [];
+    requestScopedCaches.set(request, cache);
+
+    const signal = request.signal;
+    if (signal && !signal.aborted) {
+      signal.addEventListener(
+        "abort",
+        () => {
+          cache?.splice(0, cache.length);
+        },
+        { once: true }
+      );
+    }
+  }
+
+  return cache;
+}
+
+export function getCachedDapperPromise<Args extends unknown[], Result>(
+  method: (...inputs: Args) => Promise<Result>,
+  inputs: Args,
+  request?: Request,
+  label?: string
+): Promise<Result> {
+  const methodLabel = label ?? method.name;
+
+  if (restrictedNames.has(methodLabel)) {
+    throw new Error(
+      "Dapper methods must be named functions to support caching."
+    );
+  }
+
+  const cache = getCache(request);
+  for (const cacheEntry of cache) {
+    if (
+      cacheEntry.funcName === methodLabel &&
+      isEqual(cacheEntry.inputs, inputs)
+    ) {
+      return cacheEntry.promise as Promise<Result>;
+    }
+  }
+
+  const promise = method(...inputs) as Promise<Result>;
+  cache.push({
+    funcName: methodLabel,
+    inputs,
+    promise,
+  });
+
+  return promise;
+}
+
+export function clearGlobalDapperCache() {
+  globalFallbackCache.splice(0, globalFallbackCache.length);
+}

apps/cyberstorm-remix/cyberstorm/utils/dapperSingleton.ts

@@ -0,0 +1,96 @@
+import { DapperTs } from "@thunderstore/dapper-ts";
+import { type RequestConfig } from "@thunderstore/thunderstore-api";
+import { getSessionTools } from "cyberstorm/security/publicEnvVariables";
+import { getCachedDapperPromise } from "./dapperRequestCache";
+
+type ConfigFactory = () => RequestConfig;
+
+let currentConfigFactory: ConfigFactory | undefined;
+const requestScopedProxies = new WeakMap<Request, DapperTs>();
+
+function resolveConfigFactory(): ConfigFactory {
+  if (currentConfigFactory) {
+    return currentConfigFactory;
+  }
+
+  const tools = getSessionTools();
+  currentConfigFactory = () => tools.getConfig();
+  return currentConfigFactory;
+}
+
+function updateDapperConfig(factory: ConfigFactory) {
+  currentConfigFactory = factory;
+  if (typeof window !== "undefined" && window.Dapper) {
+    window.Dapper.config = () => factory();
+  }
+}
+
+export function primeClientDapper(factory?: ConfigFactory) {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  if (factory) {
+    updateDapperConfig(factory);
+  } else if (!currentConfigFactory) {
+    resolveConfigFactory();
+  }
+
+  if (!window.Dapper) {
+    const resolvedFactory = resolveConfigFactory();
+    window.Dapper = new DapperTs(() => resolvedFactory());
+  }
+}
+
+export function getClientDapper(): DapperTs {
+  if (typeof window === "undefined") {
+    throw new Error("getClientDapper can only run in the browser");
+  }
+
+  if (!window.Dapper) {
+    primeClientDapper();
+  }
+
+  return window.Dapper;
+}
+
+export function getRequestScopedDapper(request?: Request): DapperTs {
+  if (!request) {
+    return getClientDapper();
+  }
+
+  let proxy = requestScopedProxies.get(request);
+  if (proxy) {
+    return proxy;
+  }
+
+  const baseDapper = getClientDapper();
+  const handler: ProxyHandler<DapperTs> = {
+    get(target, prop, receiver) {
+      const value = Reflect.get(target, prop, receiver);
+      if (typeof value !== "function") {
+        return value;
+      }
+
+      if (typeof prop !== "string" || !prop.startsWith("get")) {
+        return value.bind(target);
+      }
+
+      return (...args: unknown[]) =>
+        getCachedDapperPromise(
+          (...innerArgs: unknown[]) =>
+            (value as (...i: unknown[]) => Promise<unknown>).apply(
+              target,
+              innerArgs
+            ),
+          args as unknown[],
+          request,
+          prop
+        );
+    },
+  };
+
+  proxy = new Proxy(baseDapper, handler) as DapperTs;
+  requestScopedProxies.set(request, proxy);
+  return proxy;
+}