feat: port future APIs to the Solid integration

daangn · Aug 21, 2024 · 170a3e1 · 170a3e1
1 parent 6ca2912
commit 170a3e1
Show file tree

Hide file tree

Showing 62 changed files with 867 additions and 306 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/demo-solid/esbuild.config.js b/demo-solid/esbuild.config.js
@@ -13,7 +13,8 @@ const external = Object.keys({
 Promise.all([
   context({
     ...config({
-      entryPoints: ["./src/stackflow-docs.tsx"],
+      entryPoints: ["./src/stackflow/stackflow.docs.tsx"],
+      outdir: "./dist/stackflow",
       vanillaExtractExternal: ["@seed-design"],
       plugins: [solidPlugin({ solid: { generate: "dom" } })],
     }),
@@ -24,7 +25,8 @@ Promise.all([
   ),
   context({
     ...config({
-      entryPoints: ["./src/stackflow-docs.tsx"],
+      entryPoints: ["./src/stackflow/stackflow.docs.tsx"],
+      outdir: "./dist/stackflow",
       vanillaExtractExternal: ["@seed-design"],
       plugins: [solidPlugin({ solid: { generate: "dom" } })],
     }),

diff --git a/demo-solid/package.json b/demo-solid/package.json
@@ -6,15 +6,15 @@
 	"type": "module",
 	"exports": {
 		".": {
-			"types": "./dist/stackflow-docs.d.ts",
-			"require": "./dist/stackflow-docs.js",
-			"import": "./dist/stackflow-docs.mjs"
+			"types": "./dist/stackflow/stackflow.docs.d.ts",
+			"require": "./dist/stackflow/stackflow.docs.js",
+			"import": "./dist/stackflow/stackflow.docs.mjs"
 		},
-		"./style.css": "./dist/stackflow-docs.css"
+		"./style.css": "./dist/stackflow/stackflow.docs.css"
 	},
-	"main": "./dist/stackflow-docs.js",
-	"module": "./dist/stackflow-docs.mjs",
-	"types": "./dist/stackflow-docs.d.ts",
+	"main": "./dist/stackflow/stackflow.docs.js",
+	"module": "./dist/stackflow/stackflow.docs.mjs",
+	"types": "./dist/stackflow/stackflow.docs.d.ts",
 	"files": [
 		"dist",
 		"src"
@@ -33,6 +33,7 @@
 		"@seed-design/design-token": "^1.0.3",
 		"@seed-design/stylesheet": "^1.0.4",
 		"@stackflow/compat-await-push": "^1.1.12",
+		"@stackflow/config": "^1.1.0",
 		"@stackflow/core": "^1.1.0",
 		"@stackflow/link": "^1.4.4",
 		"@stackflow/plugin-basic-ui": "^1.9.1",
@@ -58,7 +59,8 @@
 		"esbuild-plugin-solid": "^0.6.0",
 		"rimraf": "^3.0.2",
 		"typescript": "^5.5.3",
-		"vite-plugin-solid": "^2.10.2"
+		"vite-plugin-solid": "^2.10.2",
+		"zod": "^3.23.8"
 	},
 	"ultra": {
 		"concurrent": [

diff --git a/demo-solid/src/activities/Article.loader.ts b/demo-solid/src/activities/Article.loader.ts
@@ -0,0 +1,63 @@
+import type { ActivityLoaderArgs } from "@stackflow/config";
+
+export function articleLoader({ params }: ActivityLoaderArgs<"Article">) {
+  const imageUrl = `https://picsum.photos/800/800/?id=${params.articleId}`;
+
+  const recommenderCards = [
+    {
+      articleId: "25140667",
+      price: 41,
+      title: "Ran",
+    },
+    {
+      articleId: "60547101",
+      price: 24,
+      title: "Rest",
+    },
+    {
+      articleId: "34751776",
+      price: 42,
+      title: "Those",
+    },
+    {
+      articleId: "04114554",
+      price: 12,
+      title: "Beauty",
+    },
+    {
+      articleId: "81339443",
+      price: 3,
+      title: "Mighty",
+    },
+    {
+      articleId: "44738871",
+      price: 1,
+      title: "Afternoon",
+    },
+    {
+      articleId: "57388513",
+      price: 31,
+      title: "Brown",
+    },
+    {
+      articleId: "60883443",
+      price: 49,
+      title: "Musical",
+    },
+    {
+      articleId: "00932094",
+      price: 26,
+      title: "Occasionally",
+    },
+    {
+      articleId: "10749683",
+      price: 35,
+      title: "Having",
+    },
+  ];
+
+  return {
+    imageUrl,
+    recommenderCards,
+  };
+}
diff --git a/demo-solid/src/activities/Article.tsx b/demo-solid/src/activities/Article.tsx
@@ -1,86 +1,36 @@
-import type { ActivityComponentType } from "@stackflow/solid";
-import { useActivityParams } from "@stackflow/solid";
-import { For, createMemo } from "solid-js";
+import {
+  type ActivityComponentType,
+  useActivityParams,
+  useLoaderData,
+} from "@stackflow/solid/future";
+import { For } from "solid-js";
 
 import ArticleCard from "../components/ArticleCard";
 import ArticleProfile from "../components/ArticleProfile";
 import Layout from "../components/Layout";
 import * as css from "./Article.css";
+import type { articleLoader } from "./Article.loader";
 
-const recommenderCard = [
-  {
-    articleId: "25140667",
-    price: 41,
-    title: "Ran",
-  },
-  {
-    articleId: "60547101",
-    price: 24,
-    title: "Rest",
-  },
-  {
-    articleId: "34751776",
-    price: 42,
-    title: "Those",
-  },
-  {
-    articleId: "04114554",
-    price: 12,
-    title: "Beauty",
-  },
-  {
-    articleId: "81339443",
-    price: 3,
-    title: "Mighty",
-  },
-  {
-    articleId: "44738871",
-    price: 1,
-    title: "Afternoon",
-  },
-  {
-    articleId: "57388513",
-    price: 31,
-    title: "Brown",
-  },
-  {
-    articleId: "60883443",
-    price: 49,
-    title: "Musical",
-  },
-  {
-    articleId: "00932094",
-    price: 26,
-    title: "Occasionally",
-  },
-  {
-    articleId: "10749683",
-    price: 35,
-    title: "Having",
-  },
-];
-
-export interface ArticleParams {
-  articleId: string;
-  title: string;
+declare module "@stackflow/config" {
+  interface Register {
+    Article: {
+      articleId: string;
+      title?: string;
+    };
+  }
 }
 
-const Article: ActivityComponentType<ArticleParams> = () => {
-  const activityParams = useActivityParams<{
-    articleId: string;
-    title: string;
-  }>();
-  const imageUrl = createMemo(
-    () => `https://picsum.photos/800/800/?id=${activityParams()?.articleId}`,
-  );
+const Article: ActivityComponentType<"Article"> = () => {
+  const activityParams = useActivityParams<"Article">();
+  const data = useLoaderData<typeof articleLoader>();
 
   return (
     <Layout appBar={{}}>
       <div class={css.container}>
         <div class={css.image}>
           <div class={css.imageInner}>
             <img
-              src={imageUrl()}
+              src={data().imageUrl}
               alt={activityParams()?.title}
               width="100%"
               height="100%"
@@ -101,7 +51,7 @@ const Article: ActivityComponentType<ArticleParams> = () => {
         <div class={css.section}>
           <div class={css.sectionTitle}>Other Items by Emila </div>
           <div class={css.recommenderGrid}>
-            <For each={recommenderCard}>
+            <For each={data().recommenderCards}>
               {(card) => <ArticleCard {...card} />}
             </For>
           </div>

diff --git a/demo-solid/src/activities/Main.loader.ts b/demo-solid/src/activities/Main.loader.ts
@@ -0,0 +1,76 @@
+export function mainLoader() {
+  return {
+    cards: [
+      {
+        articleId: "02542470",
+        price: 41,
+        title: "Master",
+        region: "Nagevan",
+        daysAgo: 4,
+      },
+      {
+        articleId: "11257089",
+        price: 24,
+        title: "Wild",
+        region: "Inguima",
+        daysAgo: 4,
+      },
+      {
+        articleId: "08407137",
+        price: 42,
+        title: "Universe",
+        region: "Litenego",
+        daysAgo: 4,
+      },
+      {
+        articleId: "32979422",
+        price: 12,
+        title: "Private",
+        region: "Umumtaw",
+        daysAgo: 6,
+      },
+      {
+        articleId: "37998208",
+        price: 3,
+        title: "Harbor",
+        region: "Gubdidgi",
+        daysAgo: 3,
+      },
+      {
+        articleId: "01695878",
+        price: 1,
+        title: "Valuable",
+        region: "Jumjelewu",
+        daysAgo: 1,
+      },
+      {
+        articleId: "09792471",
+        price: 31,
+        title: "Also",
+        region: "Salhega",
+        daysAgo: 1,
+      },
+      {
+        articleId: "23939055",
+        price: 49,
+        title: "Ever",
+        region: "Jaifuup",
+        daysAgo: 9,
+      },
+      {
+        articleId: "94689745",
+        price: 26,
+        title: "Production",
+        region: "Idcipwel",
+        daysAgo: 3,
+      },
+      {
+        articleId: "49322156",
+        price: 35,
+        title: "Chest",
+        region: "Ajapaktar",
+        daysAgo: 7,
+      },
+    ],
+  };
+}