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

Author: ENvironmentSet

.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.tsx

@@ -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.css.ts …ctivities/Article/Article.content.css.tsdemo/src/activities/Article.css.ts renamed to demo/src/activities/Article/Article.content.css.ts demo/src/activities/Article.css.ts renamed to demo/src/activities/Article/Article.content.css.ts

@@ -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.content.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.layout.tsx

@@ -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.loader.ts …src/activities/Article/Article.loader.tsdemo/src/activities/Article.loader.ts renamed to demo/src/activities/Article/Article.loader.ts demo/src/activities/Article.loader.ts renamed to demo/src/activities/Article/Article.loader.ts

@@ -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;