Skip to content

Commit a0419d4

Browse files
XiNiHaXiNiHa
committed
feat: port future APIs to the Solid integration
1 parent b159d9a commit a0419d4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+911
-318
lines changed

‎.pnp.cjs‎

Lines changed: 10 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎config/src/InferActivityParams.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import type { ActivityBaseParams } from "./ActivityBaseParams";
22
import type { RegisteredActivityName } from "./RegisteredActivityName";
3-
import type { RegisteredActivityParamTypes } from "./RegisteredActivityParamTypes";
3+
import type { RegisteredActivityName } from "./RegisteredActivityParamTypes";
44

55
export type InferActivityParams<ActivityName extends RegisteredActivityName> =
6-
RegisteredActivityParamTypes[ActivityName] extends never
6+
RegisteredActivityName[ActivityName] extends never
77
? ActivityBaseParams
8-
: RegisteredActivityParamTypes[ActivityName];
8+
: RegisteredActivityName[ActivityName];

‎config/src/RegisteredActivityName.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import type { RegisteredActivityParamTypes } from "./RegisteredActivityParamTypes";
1+
import type { RegisteredActivityName } from "./RegisteredActivityParamTypes";
22

33
export type RegisteredActivityName = Extract<
4-
keyof RegisteredActivityParamTypes,
4+
keyof RegisteredActivityName,
55
string
66
>;

‎config/src/RegisteredActivityParamTypes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { ActivityBaseParams } from "./ActivityBaseParams";
22
import type { Register } from "./Register";
33

4-
export type RegisteredActivityParamTypes = keyof Register extends never
4+
export type RegisteredActivityName = keyof Register extends never
55
? {
66
[key: string]: ActivityBaseParams;
77
}

‎demo-solid/esbuild.config.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ const external = Object.keys({
1313
Promise.all([
1414
context({
1515
...config({
16-
entryPoints: ["./src/stackflow-docs.tsx"],
16+
entryPoints: ["./src/stackflow/stackflow.docs.tsx"],
17+
outdir: "./dist/stackflow",
1718
vanillaExtractExternal: ["@seed-design"],
1819
plugins: [solidPlugin({ solid: { generate: "dom" } })],
1920
}),
@@ -24,7 +25,8 @@ Promise.all([
2425
),
2526
context({
2627
...config({
27-
entryPoints: ["./src/stackflow-docs.tsx"],
28+
entryPoints: ["./src/stackflow/stackflow.docs.tsx"],
29+
outdir: "./dist/stackflow",
2830
vanillaExtractExternal: ["@seed-design"],
2931
plugins: [solidPlugin({ solid: { generate: "dom" } })],
3032
}),

‎demo-solid/package.json‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@
66
"type": "module",
77
"exports": {
88
".": {
9-
"types": "./dist/stackflow-docs.d.ts",
10-
"require": "./dist/stackflow-docs.js",
11-
"import": "./dist/stackflow-docs.mjs"
9+
"types": "./dist/stackflow/stackflow.docs.d.ts",
10+
"require": "./dist/stackflow/stackflow.docs.js",
11+
"import": "./dist/stackflow/stackflow.docs.mjs"
1212
},
13-
"./style.css": "./dist/stackflow-docs.css"
13+
"./style.css": "./dist/stackflow/stackflow.docs.css"
1414
},
15-
"main": "./dist/stackflow-docs.js",
16-
"module": "./dist/stackflow-docs.mjs",
17-
"types": "./dist/stackflow-docs.d.ts",
15+
"main": "./dist/stackflow/stackflow.docs.js",
16+
"module": "./dist/stackflow/stackflow.docs.mjs",
17+
"types": "./dist/stackflow/stackflow.docs.d.ts",
1818
"files": [
1919
"dist",
2020
"src"
@@ -33,6 +33,7 @@
3333
"@seed-design/design-token": "^1.0.3",
3434
"@seed-design/stylesheet": "^1.0.4",
3535
"@stackflow/compat-await-push": "^1.1.12",
36+
"@stackflow/config": "^1.1.0",
3637
"@stackflow/core": "^1.1.0",
3738
"@stackflow/link": "^1.4.4",
3839
"@stackflow/plugin-basic-ui": "^1.9.1",
@@ -58,7 +59,8 @@
5859
"esbuild-plugin-solid": "^0.6.0",
5960
"rimraf": "^3.0.2",
6061
"typescript": "^5.5.3",
61-
"vite-plugin-solid": "^2.10.2"
62+
"vite-plugin-solid": "^2.10.2",
63+
"zod": "^3.23.8"
6264
},
6365
"ultra": {
6466
"concurrent": [

‎demo-solid/src/activities/Article.loader.ts‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import type { ActivityLoaderArgs } from "@stackflow/config";
2+
3+
export function articleLoader({ params }: ActivityLoaderArgs<"Article">) {
4+
const imageUrl = `https://picsum.photos/800/800/?id=${params.articleId}`;
5+
6+
const recommenderCards = [
7+
{
8+
articleId: "25140667",
9+
price: 41,
10+
title: "Ran",
11+
},
12+
{
13+
articleId: "60547101",
14+
price: 24,
15+
title: "Rest",
16+
},
17+
{
18+
articleId: "34751776",
19+
price: 42,
20+
title: "Those",
21+
},
22+
{
23+
articleId: "04114554",
24+
price: 12,
25+
title: "Beauty",
26+
},
27+
{
28+
articleId: "81339443",
29+
price: 3,
30+
title: "Mighty",
31+
},
32+
{
33+
articleId: "44738871",
34+
price: 1,
35+
title: "Afternoon",
36+
},
37+
{
38+
articleId: "57388513",
39+
price: 31,
40+
title: "Brown",
41+
},
42+
{
43+
articleId: "60883443",
44+
price: 49,
45+
title: "Musical",
46+
},
47+
{
48+
articleId: "00932094",
49+
price: 26,
50+
title: "Occasionally",
51+
},
52+
{
53+
articleId: "10749683",
54+
price: 35,
55+
title: "Having",
56+
},
57+
];
58+
59+
return {
60+
imageUrl,
61+
recommenderCards,
62+
};
63+
}

‎demo-solid/src/activities/Article.tsx‎

Lines changed: 19 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,36 @@
1-
import type { ActivityComponentType } from "@stackflow/solid";
2-
import { useActivityParams } from "@stackflow/solid";
3-
import { For, createMemo } from "solid-js";
1+
import {
2+
type ActivityComponentType,
3+
useActivityParams,
4+
useLoaderData,
5+
} from "@stackflow/solid/future";
6+
import { For } from "solid-js";
47

58
import ArticleCard from "../components/ArticleCard";
69
import ArticleProfile from "../components/ArticleProfile";
710
import Layout from "../components/Layout";
811
import * as css from "./Article.css";
12+
import type { articleLoader } from "./Article.loader";
913

10-
const recommenderCard = [
11-
{
12-
articleId: "25140667",
13-
price: 41,
14-
title: "Ran",
15-
},
16-
{
17-
articleId: "60547101",
18-
price: 24,
19-
title: "Rest",
20-
},
21-
{
22-
articleId: "34751776",
23-
price: 42,
24-
title: "Those",
25-
},
26-
{
27-
articleId: "04114554",
28-
price: 12,
29-
title: "Beauty",
30-
},
31-
{
32-
articleId: "81339443",
33-
price: 3,
34-
title: "Mighty",
35-
},
36-
{
37-
articleId: "44738871",
38-
price: 1,
39-
title: "Afternoon",
40-
},
41-
{
42-
articleId: "57388513",
43-
price: 31,
44-
title: "Brown",
45-
},
46-
{
47-
articleId: "60883443",
48-
price: 49,
49-
title: "Musical",
50-
},
51-
{
52-
articleId: "00932094",
53-
price: 26,
54-
title: "Occasionally",
55-
},
56-
{
57-
articleId: "10749683",
58-
price: 35,
59-
title: "Having",
60-
},
61-
];
62-
63-
export interface ArticleParams {
64-
articleId: string;
65-
title: string;
14+
declare module "@stackflow/config" {
15+
interface Register {
16+
Article: {
17+
articleId: string;
18+
title?: string;
19+
};
20+
}
6621
}
6722

68-
const Article: ActivityComponentType<ArticleParams> = () => {
69-
const activityParams = useActivityParams<{
70-
articleId: string;
71-
title: string;
72-
}>();
73-
const imageUrl = createMemo(
74-
() => `https://picsum.photos/800/800/?id=${activityParams()?.articleId}`,
75-
);
23+
const Article: ActivityComponentType<"Article"> = () => {
24+
const activityParams = useActivityParams<"Article">();
25+
const data = useLoaderData<typeof articleLoader>();
7626

7727
return (
7828
<Layout appBar={{}}>
7929
<div class={css.container}>
8030
<div class={css.image}>
8131
<div class={css.imageInner}>
8232
<img
83-
src={imageUrl()}
33+
src={data().imageUrl}
8434
alt={activityParams()?.title}
8535
width="100%"
8636
height="100%"
@@ -101,7 +51,7 @@ const Article: ActivityComponentType<ArticleParams> = () => {
10151
<div class={css.section}>
10252
<div class={css.sectionTitle}>Other Items by Emila </div>
10353
<div class={css.recommenderGrid}>
104-
<For each={recommenderCard}>
54+
<For each={data().recommenderCards}>
10555
{(card) => <ArticleCard {...card} />}
10656
</For>
10757
</div>

0 commit comments

Comments
 (0)