From 18f04b097a906c937b0d9db51f9cdb2aa51eac73 Mon Sep 17 00:00:00 2001 From: XiNiHa Date: Sat, 6 Jul 2024 17:08:35 +0900 Subject: [PATCH] docs: embed solid demo --- .pnp.cjs | 2 + demo-solid/package.json | 1 + docs/components/Demo.tsx | 96 +++++++++++++++----- docs/components/SolidDemoRenderer.server.tsx | 3 + docs/components/SolidDemoRenderer.tsx | 19 ++++ docs/package.json | 7 ++ docs/pages/_app.mdx | 1 + docs/pages/index.mdx | 2 +- yarn.lock | 4 +- 9 files changed, 108 insertions(+), 27 deletions(-) create mode 100644 docs/components/SolidDemoRenderer.server.tsx create mode 100644 docs/components/SolidDemoRenderer.tsx diff --git a/.pnp.cjs b/.pnp.cjs index d04755c4e..19ffc6d57 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -3344,6 +3344,7 @@ const RAW_RUNTIME_STATE = ["@vanilla-extract/css", "npm:1.15.3"],\ ["@vanilla-extract/vite-plugin", "virtual:413bca98ff76262f6f1f73762ccc4b7edee04a5da42f3d6b9ed2cb2d6dbc397b2094da59b50f6e828091c88e7b5f86990feff596c43f0eb50a58fc42aae64a20#patch:@vanilla-extract/vite-plugin@npm%3A4.0.12#~/.yarn/patches/@vanilla-extract-vite-plugin-npm-4.0.12-ed14a9ba3b.patch::version=4.0.12&hash=d3aa99"],\ ["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"],\ ["lorem-ipsum", "npm:2.0.8"],\ ["lz-string", "npm:1.5.0"],\ ["normalize.css", "npm:8.0.1"],\ @@ -3367,6 +3368,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/plugin-basic-ui", "virtual:413bca98ff76262f6f1f73762ccc4b7edee04a5da42f3d6b9ed2cb2d6dbc397b2094da59b50f6e828091c88e7b5f86990feff596c43f0eb50a58fc42aae64a20#workspace:extensions/plugin-basic-ui"],\ ["@stackflow/plugin-history-sync", "virtual:413bca98ff76262f6f1f73762ccc4b7edee04a5da42f3d6b9ed2cb2d6dbc397b2094da59b50f6e828091c88e7b5f86990feff596c43f0eb50a58fc42aae64a20#workspace:extensions/plugin-history-sync"],\ ["@stackflow/plugin-renderer-basic", "virtual:413bca98ff76262f6f1f73762ccc4b7edee04a5da42f3d6b9ed2cb2d6dbc397b2094da59b50f6e828091c88e7b5f86990feff596c43f0eb50a58fc42aae64a20#workspace:extensions/plugin-renderer-basic"],\ diff --git a/demo-solid/package.json b/demo-solid/package.json index 075f19dac..5119ae1bc 100644 --- a/demo-solid/package.json +++ b/demo-solid/package.json @@ -56,6 +56,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/docs/components/Demo.tsx b/docs/components/Demo.tsx index d652756b4..28ccef5bc 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, }} > -
+ {variants.map((variant) => (
- + > +
+ {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 000000000..ac6c97f93 --- /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 000000000..a338ef920 --- /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 eed70fdf8..7db5a68f3 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.1.0", "@stackflow/demo": "^1.4.0", + "@stackflow/demo-solid": "^1.3.1", "@stackflow/plugin-basic-ui": "^1.9.2", "@stackflow/plugin-history-sync": "^1.7.0", "@stackflow/plugin-renderer-basic": "^1.1.13", diff --git a/docs/pages/_app.mdx b/docs/pages/_app.mdx index 55c37a098..23aaff277 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 5455095f6..9130bbafd 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 c46563e2c..79458038a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2356,7 +2356,7 @@ __metadata: languageName: unknown linkType: soft -"@stackflow/demo-solid@workspace:demo-solid": +"@stackflow/demo-solid@npm:^1.3.1, @stackflow/demo-solid@workspace:demo-solid": version: 0.0.0-use.local resolution: "@stackflow/demo-solid@workspace:demo-solid" dependencies: @@ -2378,6 +2378,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" lorem-ipsum: "npm:^2.0.8" lz-string: "npm:^1.5.0" normalize.css: "npm:^8.0.1" @@ -2439,6 +2440,7 @@ __metadata: "@seed-design/stylesheet": "npm:^1.0.4" "@stackflow/core": "npm:^1.1.0" "@stackflow/demo": "npm:^1.4.0" + "@stackflow/demo-solid": "npm:^1.3.1" "@stackflow/plugin-basic-ui": "npm:^1.9.2" "@stackflow/plugin-history-sync": "npm:^1.7.0" "@stackflow/plugin-renderer-basic": "npm:^1.1.13"