Skip to content

Commit 2fc968e

Browse files
XiNiHaXiNiHa
committed
docs: embed solid demo
1 parent 98d1750 commit 2fc968e

File tree

11 files changed

+146
-57
lines changed

11 files changed

+146
-57
lines changed

‎.pnp.cjs‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo-solid/esbuild.config.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import config from "@stackflow/esbuild-config";
22
import { context } from "esbuild";
3+
import { solidPlugin } from "esbuild-plugin-solid";
34

45
import pkg from "./package.json" assert { type: "json" };
56

@@ -12,8 +13,9 @@ const external = Object.keys({
1213
Promise.all([
1314
context({
1415
...config({
15-
entryPoints: ["./src/stackflow-docs.ts"],
16+
entryPoints: ["./src/stackflow-docs.tsx"],
1617
vanillaExtractExternal: ["@seed-design"],
18+
plugins: [solidPlugin({ solid: { generate: "dom" } })],
1719
}),
1820
format: "cjs",
1921
external,
@@ -22,8 +24,9 @@ Promise.all([
2224
),
2325
context({
2426
...config({
25-
entryPoints: ["./src/stackflow-docs.ts"],
27+
entryPoints: ["./src/stackflow-docs.tsx"],
2628
vanillaExtractExternal: ["@seed-design"],
29+
plugins: [solidPlugin({ solid: { generate: "dom" } })],
2730
}),
2831
format: "esm",
2932
outExtension: {

‎demo-solid/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
"@vanilla-extract/css": "^1.15.3",
5656
"@vanilla-extract/vite-plugin": "^4.0.12",
5757
"esbuild": "^0.23.0",
58+
"esbuild-plugin-solid": "^0.6.0",
5859
"rimraf": "^3.0.2",
5960
"typescript": "^5.5.3",
6061
"vite-plugin-solid": "^2.10.2"

demo-solid/src/stackflow-docs.ts renamed to demo-solid/src/stackflow-docs.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import { vars } from "@seed-design/design-token";
22
import { basicUIPlugin } from "@stackflow/plugin-basic-ui/solid";
33
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic/solid";
44
import { stackflow } from "@stackflow/solid";
5+
import { render } from "solid-js/web";
56

67
import { activities } from "./stackflow";
78

8-
export const { Stack } = stackflow({
9+
const { Stack } = stackflow({
910
transitionDuration: 350,
1011
activities,
1112
initialActivity: () => "Main",
@@ -22,3 +23,7 @@ export const { Stack } = stackflow({
2223
}),
2324
],
2425
});
26+
27+
export const renderApp = (el: HTMLElement, initialContext?: any) => {
28+
render(() => <Stack initialContext={initialContext} />, el);
29+
};

‎docs/components/Demo.tsx‎

Lines changed: 68 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,29 @@
1-
import { Stack } from "@stackflow/demo";
1+
import type { StackComponentType } from "@stackflow/react";
2+
import dynamic from "next/dynamic";
3+
import { useEffect, useState } from "react";
24
import { useSimpleReveal } from "simple-reveal";
35

4-
const Demo: React.FC = () => {
6+
// @ts-ignore
7+
const SolidDemoRenderer = dynamic(() => import("#solid-demo-renderer"), {
8+
ssr: false,
9+
});
10+
11+
const Demo: React.FC<{ variants: ("react" | "solid")[] }> = ({
12+
variants = ["react"],
13+
}) => {
14+
const [Stack, setStack] = useState<StackComponentType | null>(null);
515
const { cn, ref, style } = useSimpleReveal({
616
delay: 200,
717
initialTransform: "scale(0.95)",
818
});
19+
20+
useEffect(() => {
21+
if (variants.includes("react") && !Stack) {
22+
import("@stackflow/demo").then(({ Stack }) => {
23+
setStack(Stack);
24+
});
25+
}
26+
}, [variants]);
927
return (
1028
<div
1129
ref={ref}
@@ -14,30 +32,58 @@ const Demo: React.FC = () => {
1432
position: "relative",
1533
width: "100%",
1634
display: "flex",
17-
justifyContent: "center",
18-
margin: "3rem 0",
35+
flexWrap: "wrap",
36+
justifyContent: "space-evenly",
37+
margin: "2rem 0",
1938
...style,
2039
}}
2140
>
22-
<div
23-
style={{
24-
width: "100%",
25-
maxWidth: "360px",
26-
height: "640px",
27-
position: "relative",
28-
borderRadius: ".5rem",
29-
overflow: "hidden",
30-
transform: "translate3d(0, 0, 0)",
31-
maskImage: "-webkit-radial-gradient(white, black)",
32-
boxShadow: "0 .25rem 1rem 0 rgba(0, 0, 0, .1)",
33-
}}
34-
>
35-
<Stack
36-
initialContext={{
37-
theme: "cupertino",
41+
{variants.map((variant) => (
42+
<div
43+
key={variant}
44+
style={{
45+
width: "100%",
46+
maxWidth: "360px",
47+
margin: "1rem 0",
48+
display: "flex",
49+
flexDirection: "column",
50+
alignItems: "center",
51+
gap: "1rem",
52+
color: "#777",
3853
}}
39-
/>
40-
</div>
54+
>
55+
<div
56+
style={{
57+
width: "100%",
58+
height: "640px",
59+
position: "relative",
60+
borderRadius: ".5rem",
61+
overflow: "hidden",
62+
transform: "translate3d(0, 0, 0)",
63+
maskImage: "-webkit-radial-gradient(white, black)",
64+
boxShadow: "0 .25rem 1rem 0 rgba(0, 0, 0, .1)",
65+
}}
66+
>
67+
{variant === "react" ? (
68+
Stack && (
69+
<Stack
70+
initialContext={{
71+
theme: "cupertino",
72+
}}
73+
/>
74+
)
75+
) : (
76+
<SolidDemoRenderer />
77+
)}
78+
</div>
79+
{
80+
{
81+
react: "React",
82+
solid: "Solid",
83+
}[variant]
84+
}
85+
</div>
86+
))}
4187
</div>
4288
);
4389
};

‎docs/components/SolidDemoRenderer.server.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const SolidDemoRenderer: React.FC = () => <div />;
2+
3+
export default SolidDemoRenderer;

‎docs/components/SolidDemoRenderer.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { renderApp } from "@stackflow/demo-solid";
2+
import { useEffect, useRef } from "react";
3+
4+
const SolidDemoRenderer: React.FC = () => {
5+
const ref = useRef<HTMLDivElement>(null);
6+
useEffect(() => {
7+
const el = ref.current;
8+
if (!el) {
9+
return () => {};
10+
}
11+
renderApp(el, { theme: "cupertino" });
12+
return () => {
13+
el.innerHTML = "";
14+
};
15+
}, []);
16+
return <div ref={ref} />;
17+
};
18+
19+
export default SolidDemoRenderer;

‎docs/package.json‎

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,39 @@
11
{
2-
"name": "@stackflow/docs",
3-
"version": "1.2.26",
4-
"private": true,
5-
"description": "Mobile-first stack navigator framework with Composable Plugin System",
6-
"license": "MIT",
7-
"scripts": {
8-
"build": "yarn generate:plugins-docs && next build",
9-
"dev": "yarn generate:plugins-docs && next -p 6006",
10-
"generate:plugins-docs": "rm -rf ./pages/plugins && node scripts/generate-plugins-docs.js"
11-
},
12-
"dependencies": {
13-
"@mdx-js/react": "^3.0.1",
14-
"@stackflow/core": "^1.1.0",
15-
"@stackflow/demo": "^1.3.1",
16-
"@stackflow/plugin-basic-ui": "^1.9.1",
17-
"@stackflow/plugin-history-sync": "^1.6.2",
18-
"@stackflow/plugin-renderer-basic": "^1.1.12",
19-
"@stackflow/react": "^1.3.0",
20-
"@types/react": "^18.3.3",
21-
"next": "^14.2.4",
22-
"nextra": "^2.13.4",
23-
"nextra-theme-docs": "^2.13.4",
24-
"react": "^18.3.1",
25-
"react-dom": "^18.3.1",
26-
"simple-reveal": "^0.8.0"
27-
},
28-
"devDependencies": {
29-
"@seed-design/stylesheet": "^1.0.4",
30-
"react-lazy-load-image-component": "^1.6.2"
31-
}
2+
"name": "@stackflow/docs",
3+
"version": "1.2.26",
4+
"private": true,
5+
"description": "Mobile-first stack navigator framework with Composable Plugin System",
6+
"license": "MIT",
7+
"imports": {
8+
"#solid-demo-renderer": {
9+
"browser": "./components/SolidDemoRenderer.tsx",
10+
"default": "./components/SolidDemoRenderer.server.tsx"
11+
}
12+
},
13+
"scripts": {
14+
"build": "yarn generate:plugins-docs && next build",
15+
"dev": "yarn generate:plugins-docs && next -p 6006",
16+
"generate:plugins-docs": "rm -rf ./pages/plugins && node scripts/generate-plugins-docs.js"
17+
},
18+
"dependencies": {
19+
"@mdx-js/react": "^3.0.1",
20+
"@stackflow/core": "^1.1.0",
21+
"@stackflow/demo": "^1.3.1",
22+
"@stackflow/demo-solid": "^1.3.1",
23+
"@stackflow/plugin-basic-ui": "^1.9.1",
24+
"@stackflow/plugin-history-sync": "^1.6.2",
25+
"@stackflow/plugin-renderer-basic": "^1.1.12",
26+
"@stackflow/react": "^1.3.0",
27+
"@types/react": "^18.3.3",
28+
"next": "^14.2.4",
29+
"nextra": "^2.13.4",
30+
"nextra-theme-docs": "^2.13.4",
31+
"react": "^18.3.1",
32+
"react-dom": "^18.3.1",
33+
"simple-reveal": "^0.8.0"
34+
},
35+
"devDependencies": {
36+
"@seed-design/stylesheet": "^1.0.4",
37+
"react-lazy-load-image-component": "^1.6.2"
38+
}
3239
}

‎docs/pages/_app.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import "nextra-theme-docs/style.css";
22
import "@stackflow/demo/style.css";
3+
import "@stackflow/demo-solid/style.css";
34
import "@stackflow/plugin-basic-ui/index.css";
45
import "@seed-design/stylesheet/global.css";
56
import "react-lazy-load-image-component/src/effects/opacity.css";

‎docs/pages/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Demo from "../components/Demo.tsx";
33

44
# Stackflow 시작하기
55

6-
<Demo />
6+
<Demo variants={["react", "solid"]} />
77

88
**Stackflow**는 모바일 디바이스(iOS/Android 등)에서 주로 활용되는 Stack Navigation UX를 JavaScript 환경에서 구현하고, 이를 통해 하이브리드 앱과 웹뷰 개발을 쉽게 할 수 있도록 돕는 프로젝트에요.
99

0 commit comments

Comments
 (0)