diff --git a/.pnp.cjs b/.pnp.cjs index 26c39692..1984e434 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -3433,6 +3433,7 @@ const RAW_RUNTIME_STATE = ["@vanilla-extract/css", "npm:1.15.3"],\ ["@vanilla-extract/vite-plugin", "virtual:413bca98ff76262f6f1f73762ccc4b7edee04a5da42f3d6b9ed2cb2d6dbc397b2094da59b50f6e828091c88e7b5f86990feff596c43f0eb50a58fc42aae64a20#npm:4.0.12"],\ ["esbuild", "npm:0.23.0"],\ + ["esbuild-plugin-solid", "virtual:669046a185e83900af978519e5adddf8e8f1f8fed824849248ba56cf8fcd4e4208872f27e14c3c844d3b769f42be1ba6e0aa90f12df9fa6c38a55aedee211f53#patch:esbuild-plugin-solid@npm%3A0.6.0#~/.yarn/patches/esbuild-plugin-solid-npm-0.6.0-49835b85dc.patch::version=0.6.0&hash=bf8c52"],\ ["eslint", "npm:8.57.0"],\ ["eslint-config-airbnb-base", "virtual:b327d7e228fba669b88a8bb23bcf526374e46fa67e617b1e6848e8a205357fee5ce94b47c49b5a570fd9e8a44fa218a13cd00e2eca327c99114cbd21d72ecf9c#npm:15.0.0"],\ ["eslint-config-prettier", "virtual:5d222998b86cceed4c8d843e557f0e3b94c8ccb1e8952571a8d45c8a6806e6624abcd819a5fa16c66371a9250ca177cd0fc04f42e577bbbc49771098023bb79e#npm:9.1.0"],\ @@ -3461,6 +3462,7 @@ const RAW_RUNTIME_STATE = ["@seed-design/stylesheet", "npm:1.0.4"],\ ["@stackflow/core", "workspace:core"],\ ["@stackflow/demo", "workspace:demo"],\ + ["@stackflow/demo-solid", "workspace:demo-solid"],\ ["@stackflow/eslint-config", "workspace:packages/eslint-config"],\ ["@stackflow/plugin-basic-ui", "virtual:413bca98ff76262f6f1f73762ccc4b7edee04a5da42f3d6b9ed2cb2d6dbc397b2094da59b50f6e828091c88e7b5f86990feff596c43f0eb50a58fc42aae64a20#workspace:extensions/plugin-basic-ui"],\ ["@stackflow/plugin-history-sync", "virtual:413bca98ff76262f6f1f73762ccc4b7edee04a5da42f3d6b9ed2cb2d6dbc397b2094da59b50f6e828091c88e7b5f86990feff596c43f0eb50a58fc42aae64a20#workspace:extensions/plugin-history-sync"],\ diff --git a/demo-solid/esbuild.config.js b/demo-solid/esbuild.config.js index 42d82d73..3c905772 100644 --- a/demo-solid/esbuild.config.js +++ b/demo-solid/esbuild.config.js @@ -1,5 +1,6 @@ import { context } from "esbuild"; import config from "@stackflow/esbuild-config"; +import { solidPlugin } from "esbuild-plugin-solid"; import pkg from "./package.json" assert { type: "json" }; const watch = process.argv.includes("--watch"); @@ -11,8 +12,9 @@ const external = Object.keys({ Promise.all([ context({ ...config({ - entryPoints: ["./src/stackflow-docs.ts"], + entryPoints: ["./src/stackflow-docs.tsx"], vanillaExtractExternal: ["@seed-design"], + plugins: [solidPlugin({ solid: { generate: "dom" } })], }), format: "cjs", external, @@ -21,8 +23,9 @@ Promise.all([ ), context({ ...config({ - entryPoints: ["./src/stackflow-docs.ts"], + entryPoints: ["./src/stackflow-docs.tsx"], vanillaExtractExternal: ["@seed-design"], + plugins: [solidPlugin({ solid: { generate: "dom" } })], }), format: "esm", outExtension: { diff --git a/demo-solid/package.json b/demo-solid/package.json index 7d007af3..b88ab57b 100644 --- a/demo-solid/package.json +++ b/demo-solid/package.json @@ -64,6 +64,7 @@ "@vanilla-extract/css": "^1.15.3", "@vanilla-extract/vite-plugin": "^4.0.12", "esbuild": "^0.23.0", + "esbuild-plugin-solid": "^0.6.0", "rimraf": "^3.0.2", "typescript": "^5.5.3", "vite-plugin-solid": "^2.10.2" diff --git a/demo-solid/src/stackflow-docs.ts b/demo-solid/src/stackflow-docs.tsx similarity index 76% rename from demo-solid/src/stackflow-docs.ts rename to demo-solid/src/stackflow-docs.tsx index 62f3cdc8..6715e838 100644 --- a/demo-solid/src/stackflow-docs.ts +++ b/demo-solid/src/stackflow-docs.tsx @@ -2,10 +2,11 @@ import { vars } from "@seed-design/design-token"; import { basicUIPlugin } from "@stackflow/plugin-basic-ui/solid"; import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic/solid"; import { stackflow } from "@stackflow/solid"; +import { render } from "solid-js/web"; import { activities } from "./stackflow"; -export const { Stack } = stackflow({ +const { Stack } = stackflow({ transitionDuration: 350, activities, initialActivity: () => "Main", @@ -22,3 +23,7 @@ export const { Stack } = stackflow({ }), ], }); + +export const renderApp = (el: HTMLElement, initialContext?: any) => { + render(() => , el); +}; diff --git a/docs/components/Demo.tsx b/docs/components/Demo.tsx index c4ac485c..c497675d 100644 --- a/docs/components/Demo.tsx +++ b/docs/components/Demo.tsx @@ -1,11 +1,29 @@ -import { Stack } from "@stackflow/demo"; +import type { StackComponentType } from "@stackflow/react"; +import dynamic from "next/dynamic"; +import { useEffect, useState } from "react"; import { useSimpleReveal } from "simple-reveal"; -const Demo: React.FC = () => { +// @ts-ignore +const SolidDemoRenderer = dynamic(() => import("#solid-demo-renderer"), { + ssr: false, +}); + +const Demo: React.FC<{ variants: ("react" | "solid")[] }> = ({ + variants = ["react"], +}) => { + const [Stack, setStack] = useState(null); const { cn, ref, style } = useSimpleReveal({ delay: 200, initialTransform: "scale(0.95)", }); + + useEffect(() => { + if (variants.includes("react") && !Stack) { + import("@stackflow/demo").then(({ Stack }) => { + setStack(Stack); + }); + } + }, [variants]); return (
{ position: "relative", width: "100%", display: "flex", - justifyContent: "center", - margin: "3rem 0", + flexWrap: "wrap", + justifyContent: "space-evenly", + margin: "2rem 0", ...style, }} > -
- ( +
-
+ > +
+ {variant === "react" ? ( + Stack && ( + + ) + ) : ( + + )} +
+ { + { + react: "React", + solid: "Solid", + }[variant] + } +
+ ))}
); }; diff --git a/docs/components/SolidDemoRenderer.server.tsx b/docs/components/SolidDemoRenderer.server.tsx new file mode 100644 index 00000000..ac6c97f9 --- /dev/null +++ b/docs/components/SolidDemoRenderer.server.tsx @@ -0,0 +1,3 @@ +const SolidDemoRenderer: React.FC = () =>
; + +export default SolidDemoRenderer; diff --git a/docs/components/SolidDemoRenderer.tsx b/docs/components/SolidDemoRenderer.tsx new file mode 100644 index 00000000..a338ef92 --- /dev/null +++ b/docs/components/SolidDemoRenderer.tsx @@ -0,0 +1,19 @@ +import { renderApp } from "@stackflow/demo-solid"; +import { useEffect, useRef } from "react"; + +const SolidDemoRenderer: React.FC = () => { + const ref = useRef(null); + useEffect(() => { + const el = ref.current; + if (!el) { + return () => {}; + } + renderApp(el, { theme: "cupertino" }); + return () => { + el.innerHTML = ""; + }; + }, []); + return
; +}; + +export default SolidDemoRenderer; diff --git a/docs/package.json b/docs/package.json index 7d93c427..1686ec71 100644 --- a/docs/package.json +++ b/docs/package.json @@ -4,6 +4,12 @@ "private": true, "description": "Mobile-first stack navigator framework with Composable Plugin System", "license": "MIT", + "imports": { + "#solid-demo-renderer": { + "browser": "./components/SolidDemoRenderer.tsx", + "default": "./components/SolidDemoRenderer.server.tsx" + } + }, "scripts": { "build": "yarn generate:plugins-docs && next build", "dev": "yarn generate:plugins-docs && next -p 6006", @@ -13,6 +19,7 @@ "@mdx-js/react": "^3.0.1", "@stackflow/core": "^1.0.10", "@stackflow/demo": "^1.2.21", + "@stackflow/demo-solid": "^1.2.21", "@stackflow/eslint-config": "^1.0.2", "@stackflow/plugin-basic-ui": "^1.7.0", "@stackflow/plugin-history-sync": "^1.5.0", diff --git a/docs/pages/_app.mdx b/docs/pages/_app.mdx index 55c37a09..23aaff27 100644 --- a/docs/pages/_app.mdx +++ b/docs/pages/_app.mdx @@ -1,5 +1,6 @@ import "nextra-theme-docs/style.css"; import "@stackflow/demo/style.css"; +import "@stackflow/demo-solid/style.css"; import "@stackflow/plugin-basic-ui/index.css"; import "@seed-design/stylesheet/global.css"; import "react-lazy-load-image-component/src/effects/opacity.css"; diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 5455095f..9130bbaf 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -3,7 +3,7 @@ import Demo from "../components/Demo.tsx"; # Stackflow 시작하기 - + **Stackflow**는 모바일 디바이스(iOS/Android 등)에서 주로 활용되는 Stack Navigation UX를 JavaScript 환경에서 구현하고, 이를 통해 하이브리드 앱과 웹뷰 개발을 쉽게 할 수 있도록 돕는 프로젝트에요. diff --git a/yarn.lock b/yarn.lock index e5898677..529e1793 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2427,7 +2427,7 @@ __metadata: languageName: unknown linkType: soft -"@stackflow/demo-solid@workspace:demo-solid": +"@stackflow/demo-solid@npm:^1.2.21, @stackflow/demo-solid@workspace:demo-solid": version: 0.0.0-use.local resolution: "@stackflow/demo-solid@workspace:demo-solid" dependencies: @@ -2451,6 +2451,7 @@ __metadata: "@vanilla-extract/css": "npm:^1.15.3" "@vanilla-extract/vite-plugin": "npm:^4.0.12" esbuild: "npm:^0.23.0" + esbuild-plugin-solid: "npm:^0.6.0" eslint: "npm:^8.57.0" eslint-config-airbnb-base: "npm:^15.0.0" eslint-config-prettier: "npm:^9.1.0" @@ -2527,6 +2528,7 @@ __metadata: "@seed-design/stylesheet": "npm:^1.0.4" "@stackflow/core": "npm:^1.0.10" "@stackflow/demo": "npm:^1.2.21" + "@stackflow/demo-solid": "npm:^1.2.21" "@stackflow/eslint-config": "npm:^1.0.2" "@stackflow/plugin-basic-ui": "npm:^1.7.0" "@stackflow/plugin-history-sync": "npm:^1.5.0"