feat(react, plugin-history-sync): Default history setup option for rich deep link experiences

.changeset/chubby-pianos-heal.md

@@ -0,0 +1,8 @@
+---
+"@stackflow/react": minor
+---
+
+`StructuredActivityComponentType` is added.
+
+Structured activity components are components modeling activity view while exposing major features of an activity.
+Allowing developers easily customize user experience of an activity view, it even allow stackflow to perform various kinds of optimizations.

.changeset/gold-groups-own.md

@@ -0,0 +1,5 @@
+---
+"@stackflow/plugin-preload": patch
+---
+
+Sync with type constraint changes in stackflow/react

.changeset/new-pandas-return.md

@@ -0,0 +1,5 @@
+---
+"@stackflow/plugin-history-sync": minor
+---
+
+Add `defaultHistory` route option to pre-seed stack for better deep link experiences

demo/src/activities/Article.css.ts → demo/src/activities/Article/Article.content.css.ts

@@ -1,7 +1,7 @@
 import { vars } from "@seed-design/design-token";
 import { style } from "@vanilla-extract/css";
 
-import { f } from "../styles";
+import { f } from "../../styles";
 
 export const container = style([
   f.posAbsFull,

demo/src/activities/Article/Article.content.tsx

@@ -0,0 +1,51 @@
+import {
+  content,
+  useActivityParams,
+  useLoaderData,
+} from "@stackflow/react/future";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import ArticleCard from "../../components/ArticleCard";
+import ArticleProfile from "../../components/ArticleProfile";
+import * as css from "./Article.content.css";
+import type { articleLoader } from "./Article.loader";
+
+const ArticleContent = content<"Article">(() => {
+  const { title } = useActivityParams<"Article">();
+  const { imageUrl, recommenderCards } = useLoaderData<typeof articleLoader>();
+
+  return (
+    <div className={css.container}>
+      <div className={css.image}>
+        <div className={css.imageInner}>
+          <LazyLoadImage
+            src={imageUrl}
+            effect="opacity"
+            width="100%"
+            height="100%"
+          />
+        </div>
+      </div>
+      <ArticleProfile />
+      <div className={css.content}>
+        <div className={css.title}>{title}</div>
+        <div className={css.subtitle}>Baby & Kids ∙ 3 days ago</div>
+        <div className={css.body}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+          elementum sit sem ullamcorper urna, lacinia eu tortor, mattis.
+          Venenatis ut cursus amet in.
+        </div>
+        <div className={css.subtitle}>1 chats ∙ 2 favorites ∙ 212 views</div>
+      </div>
+      <div className={css.section}>
+        <div className={css.sectionTitle}>Other Items by Emila </div>
+        <div className={css.recommenderGrid}>
+          {recommenderCards.map((card) => (
+            <ArticleCard key={card.articleId} {...card} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default ArticleContent;

demo/src/activities/Article/Article.layout.tsx

@@ -0,0 +1,8 @@
+import { layout } from "@stackflow/react/future";
+import Layout from "../../components/Layout";
+
+const ArticleLayout = layout<"Article">(({ params: { title }, children }) => {
+  return <Layout appBar={{ title }}>{children}</Layout>;
+});
+
+export default ArticleLayout;

demo/src/activities/Article/Article.loading.css.ts

@@ -0,0 +1,9 @@
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+  width: "100%",
+});

demo/src/activities/Article/Article.loading.tsx

@@ -0,0 +1,14 @@
+import { loading } from "@stackflow/react/future";
+import LoadingSpinner from "../../components/LoadingSpinner";
+
+import * as css from "./Article.loading.css";
+
+const ArticleLoading = loading<"Article">(() => {
+  return (
+    <div className={css.container}>
+      <LoadingSpinner />
+    </div>
+  );
+});
+
+export default ArticleLoading;

demo/src/activities/Article/Article.tsx

@@ -0,0 +1,18 @@
+import { structuredActivityComponent } from "@stackflow/react/future";
+import ArticleLayout from "./Article.layout";
+import ArticleLoading from "./Article.loading";
+
+declare module "@stackflow/config" {
+  interface Register {
+    Article: {
+      articleId: number;
+      title?: string;
+    };
+  }
+}
+
+export const Article = structuredActivityComponent<"Article">({
+  content: () => import("./Article.content"),
+  layout: ArticleLayout,
+  loading: ArticleLoading,
+});

demo/src/activities/Main.css.ts → demo/src/activities/Main/Main.css.ts

@@ -1,6 +1,6 @@
 import { style } from "@vanilla-extract/css";
 
-import { f } from "../styles";
+import { f } from "../../styles";
 
 export const wrapper = style([f.posAbsFull, f.flexColumn, f.rootLineHeight]);
 

demo/src/activities/Main.tsx → demo/src/activities/Main/Main.tsx

@@ -1,12 +1,12 @@
 import type { ActivityComponentType } from "@stackflow/react/future";
 import { useLoaderData } from "@stackflow/react/future";
 
-import IconBell from "../assets/IconBell";
-import IconExpandMore from "../assets/IconExpandMore";
-import IconSearch from "../assets/IconSearch";
-import BottomTab from "../components/BottomTab";
-import FeedCard from "../components/FeedCard";
-import Layout from "../components/Layout";
+import IconBell from "../../assets/IconBell";
+import IconExpandMore from "../../assets/IconExpandMore";
+import IconSearch from "../../assets/IconSearch";
+import BottomTab from "../../components/BottomTab";
+import FeedCard from "../../components/FeedCard";
+import Layout from "../../components/Layout";
 import * as css from "./Main.css";
 import type { mainLoader } from "./Main.loader";
 

demo/src/components/LoadingSpinner.css.ts

@@ -0,0 +1,16 @@
+import { vars } from "@seed-design/design-token";
+import { keyframes, style } from "@vanilla-extract/css";
+
+const spin = keyframes({
+  "0%": { transform: "rotate(0deg)" },
+  "100%": { transform: "rotate(360deg)" },
+});
+
+export const spinner = style({
+  width: 48,
+  height: 48,
+  border: `4px solid ${vars.$scale.color.gray600}`,
+  borderTop: `4px solid ${vars.$scale.color.gray900}`,
+  borderRadius: "50%",
+  animation: `${spin} 1s linear infinite`,
+});

demo/src/components/LoadingSpinner.tsx

@@ -0,0 +1,9 @@
+import type { FC } from "react";
+
+import * as css from "./LoadingSpinner.css";
+
+const LoadingSpinner: FC = () => {
+  return <div className={css.spinner} />;
+};
+
+export default LoadingSpinner;

demo/src/stackflow/Stack.ts → demo/src/stackflow/Stack.tsx

@@ -2,15 +2,16 @@ import { vars } from "@seed-design/design-token";
 import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
 import { historySyncPlugin } from "@stackflow/plugin-history-sync";
 import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
-import { lazy, stackflow } from "@stackflow/react/future";
-import Main from "../activities/Main";
+import { stackflow } from "@stackflow/react/future";
+import { Article } from "../activities/Article/Article";
+import Main from "../activities/Main/Main";
 import { config } from "./stackflow.config";
 
 export const { Stack, actions } = stackflow({
   config,
   components: {
     Main,
-    Article: lazy(() => import("../activities/Article")),
+    Article,
   },
   plugins: [
     basicRendererPlugin(),

demo/src/stackflow/stackflow.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from "@stackflow/config";
-import { articleLoader } from "../activities/Article.loader";
-import { mainLoader } from "../activities/Main.loader";
+import { articleLoader } from "../activities/Article/Article.loader";
+import { mainLoader } from "../activities/Main/Main.loader";
 
 export const config = defineConfig({
   activities: [
@@ -17,6 +17,12 @@ export const config = defineConfig({
           articleId: Number(params.articleId),
           title: params.title,
         }),
+        defaultHistory: () => [
+          {
+            activityName: "Main",
+            activityParams: {},
+          },
+        ],
       },
       loader: articleLoader,
     },

demo/src/stackflow/stackflow.docs.ts

@@ -2,8 +2,8 @@ import { vars } from "@seed-design/design-token";
 import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
 import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
 import { stackflow } from "@stackflow/react/future";
-import Article from "../activities/Article";
-import Main from "../activities/Main";
+import { Article } from "../activities/Article/Article";
+import Main from "../activities/Main/Main";
 import { config } from "./stackflow.config";
 
 export const { Stack } = stackflow({

extensions/plugin-history-sync/src/RouteLike.ts

@@ -1,12 +1,28 @@
+import type {
+  RegisteredActivityName,
+  RegisteredActivityParamTypes,
+} from "@stackflow/config";
 import type { ActivityComponentType } from "@stackflow/react";
 
 export type Route<ComponentType> = {
   path: string;
   decode?: (
     params: Record<string, string>,
   ) => ComponentType extends ActivityComponentType<infer U> ? U : {};
+  defaultHistory?: (params: Record<string, string>) => HistoryEntry[];
 };
 
+export type HistoryEntry = {
+  [K in RegisteredActivityName]: {
+    activityName: K;
+    activityParams: RegisteredActivityParamTypes[K];
+    additionalSteps?: {
+      stepParams: RegisteredActivityParamTypes[K];
+      hasZIndex?: boolean;
+    }[];
+  };
+}[RegisteredActivityName];
+
 export type RouteLike<ComponentType> =
   | string
   | string[]