@stackflow/plugin-preload

/**
 * stackflow.ts
 */
import { stackflow } from "@stackflow/react";
import { preloadPlugin } from "@stackflow/plugin-preload";
import { MyHome } from "./MyHome";
import { MyArticle } from "./MyArticle";
import { NotFoundPage } from "./NotFoundPage";
 
const { Stack, useFlow, activities } = stackflow({
  activities: {
    MyHome,
    MyArticle,
    NotFoundPage,
  },
  plugins: [
    // ...
    preloadPlugin({
      loaders: {
        MyHome({ activityParams }) {
          // implement your own preload function using activity information
          // when activity pushed, loader is automatically triggered before rendering
        },
        MyArticle() {
          // ...
        },
        NotFoundPage() {
          // ...
        },
      },
    }),
  ],
});
 
export type TypeActivities = typeof activities;

/**
 * usePreloader.ts
 */
import { createPreloader } from "@stackflow/plugin-preload";
import type { TypeActivities } from "./stackflow";
 
export const { usePreloader } = createPreloader<TypeActivities>();

/**
 * MyComponent.tsx
 */
import { usePreloader } from "./usePreloader";
 
const MyComponent = () => {
  const { preload } = usePreloader();
 
  useEffect(() => {
    // imperatively preload
    preload("MyArticle", {
      /* ... */
    });
  }, []);
 
  return <div>{/* ... */}</div>;
};