feat(react): Make structured activities defined by other than the standard constructor can be preloaded and cached (#674)

Author: ENvironmentSet

.changeset/yellow-geckos-warn.md

@@ -0,0 +1,5 @@
+---
+"@stackflow/react": patch
+---
+
+Make structured activities defined by other than the standard constructor can be preloaded and cached

integrations/react/src/__internal__/PluginRenderer.tsx

@@ -87,7 +87,9 @@ function renderStructuredActivityComponent(
   params: {},
 ): ReactNode {
   const { layout, loading, errorHandler } = structuredActivityComponent;
-  const ContentComponent = getContentComponent(structuredActivityComponent);
+  const { Component: ContentComponent } = getContentComponent(
+    structuredActivityComponent,
+  );
 
   const wrappers: Array<(node: ReactNode) => ReactNode> = [
     (node) =>

integrations/react/src/__internal__/StructuredActivityComponentType.tsx

@@ -34,26 +34,8 @@ export function structuredActivityComponent<
   loading?: Loading<InferActivityParams<ActivityName>>;
   errorHandler?: ErrorHandler<InferActivityParams<ActivityName>>;
 }): StructuredActivityComponentType<InferActivityParams<ActivityName>> {
-  const content = options.content;
-  let cachedContent: SyncInspectablePromise<{
-    default: Content<InferActivityParams<ActivityName>>;
-  }> | null = null;
-
   return {
     ...options,
-    content:
-      typeof content !== "function"
-        ? content
-        : () => {
-            if (
-              !cachedContent ||
-              inspect(cachedContent).status === PromiseStatus.REJECTED
-            ) {
-              cachedContent = resolve(content());
-            }
-
-            return cachedContent;
-          },
     [STRUCTURED_ACTIVITY_COMPONENT_TYPE]: true,
   };
 }
@@ -80,17 +62,17 @@ export function content<ActivityName extends RegisteredActivityName>(
 
 const ContentComponentMap = new WeakMap<
   StructuredActivityComponentType<{}>,
-  Content<{}>["component"]
+  { Component: Content<{}>["component"]; preload: () => Promise<void> }
 >();
 
 export function getContentComponent(
   structuredActivityComponent: StructuredActivityComponentType<{}>,
-): Content<{}>["component"] {
+): { Component: Content<{}>["component"]; preload: () => Promise<void> } {
   if (ContentComponentMap.has(structuredActivityComponent)) {
     return ContentComponentMap.get(structuredActivityComponent)!;
   }
 
-  const { Component: ContentComponent } = preloadableLazyComponent(() => {
+  const { Component, preload } = preloadableLazyComponent(() => {
     const content = structuredActivityComponent.content;
     const contentPromise = resolve(
       typeof content === "function" ? content() : { default: content },
@@ -112,9 +94,9 @@ export function getContentComponent(
     );
   });
 
-  ContentComponentMap.set(structuredActivityComponent, ContentComponent);
+  ContentComponentMap.set(structuredActivityComponent, { Component, preload });
 
-  return ContentComponent;
+  return { Component, preload };
 }
 
 export interface Layout<P extends {}> {

integrations/react/src/__internal__/utils/PreloadableLazyComponent.tsx

@@ -2,6 +2,7 @@ import type { ComponentType } from "react";
 import {
   inspect,
   PromiseStatus,
+  resolve,
   type SyncInspectablePromise,
 } from "./SyncInspectablePromise";
 import { useThenable } from "./useThenable";
@@ -30,6 +31,14 @@ export function preloadableLazyComponent<P extends {}>(
 
   return {
     Component,
-    preload: async () => void (await cachedLoad()),
+    preload: () => {
+      const componentPromise = cachedLoad();
+
+      if (inspect(componentPromise).status === PromiseStatus.FULFILLED) {
+        return resolve(undefined);
+      }
+
+      return componentPromise.then(() => undefined);
+    },
   };
 }

integrations/react/src/future/loader/loaderPlugin.tsx

@@ -4,7 +4,10 @@ import type {
 } from "@stackflow/config";
 import type { ActivityComponentType } from "../../__internal__/ActivityComponentType";
 import type { StackflowReactPlugin } from "../../__internal__/StackflowReactPlugin";
-import { isStructuredActivityComponent } from "../../__internal__/StructuredActivityComponentType";
+import {
+  getContentComponent,
+  isStructuredActivityComponent,
+} from "../../__internal__/StructuredActivityComponentType";
 import { isPromiseLike } from "../../__internal__/utils/isPromiseLike";
 import {
   inspect,
@@ -114,7 +117,7 @@ function createBeforeRouteHandler<
     const lazyComponentPromise = resolve(
       isStructuredActivityComponent(matchActivityComponent) &&
         typeof matchActivityComponent.content === "function"
-        ? matchActivityComponent.content()
+        ? getContentComponent(matchActivityComponent).preload()
         : "_load" in matchActivityComponent &&
             typeof matchActivityComponent._load === "function"
           ? matchActivityComponent._load()

integrations/react/src/future/usePrepare.ts

@@ -4,7 +4,10 @@ import type {
 } from "@stackflow/config";
 import { useCallback } from "react";
 import { useActivityComponentMap } from "../__internal__/ActivityComponentMapProvider";
-import { isStructuredActivityComponent } from "../__internal__/StructuredActivityComponentType";
+import {
+  getContentComponent,
+  isStructuredActivityComponent,
+} from "../__internal__/StructuredActivityComponentType";
 import { useDataLoader } from "./loader";
 import { useConfig } from "./useConfig";
 
@@ -47,7 +50,9 @@ export function usePrepare(): Prepare {
         isStructuredActivityComponent(activityComponentMap[activityName]) &&
         typeof activityComponentMap[activityName].content === "function"
       ) {
-        prefetchTasks.push(activityComponentMap[activityName].content());
+        prefetchTasks.push(
+          getContentComponent(activityComponentMap[activityName]).preload(),
+        );
       }
 
       await Promise.all(prefetchTasks);