docs: embed solid demo

XiNiHa · XiNiHa · commit abab2fdb67b3 · 2024-10-11T18:52:02.000+09:00
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git 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
@@ -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<StackComponentType | null>(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 (
     <div
       ref={ref}
@@ -14,40 +32,68 @@ const Demo: React.FC = () => {
         position: "relative",
         width: "100%",
         display: "flex",
-        justifyContent: "center",
-        margin: "3rem 0",
+        flexWrap: "wrap",
+        justifyContent: "space-evenly",
+        margin: "2rem 0",
         ...style,
       }}
     >
-      <div
-        style={{
-          width: "100%",
-          maxWidth: "360px",
-          height: "640px",
-          position: "relative",
-          borderRadius: ".5rem",
-          boxShadow: "0 .25rem 1rem 0 rgba(0, 0, 0, .1)",
-        }}
-      >
+      {variants.map((variant) => (
         <div
+          key={variant}
           style={{
             width: "100%",
             maxWidth: "360px",
-            height: "640px",
-            position: "relative",
-            borderRadius: ".5rem",
-            overflow: "hidden",
-            transform: "translate3d(0, 0, 0)",
-            maskImage: "-webkit-radial-gradient(white, black)",
+            margin: "1rem 0",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "1rem",
+            color: "#777",
           }}
         >
-          <Stack
-            initialContext={{
-              theme: "cupertino",
+          <div
+            style={{
+              width: "100%",
+              height: "640px",
+              position: "relative",
+              borderRadius: ".5rem",
+              boxShadow: "0 .25rem 1rem 0 rgba(0, 0, 0, .1)",
             }}
-          />
+          >
+            <div
+              style={{
+                width: "100%",
+                maxWidth: "360px",
+                height: "640px",
+                position: "relative",
+                borderRadius: ".5rem",
+                overflow: "hidden",
+                transform: "translate3d(0, 0, 0)",
+                maskImage: "-webkit-radial-gradient(white, black)",
+              }}
+            >
+              {variant === "react" ? (
+                Stack && (
+                  <Stack
+                    initialContext={{
+                      theme: "cupertino",
+                    }}
+                  />
+                )
+              ) : (
+                <SolidDemoRenderer />
+              )}
+            </div>
+          </div>
+          {
+            {
+              react: "React",
+              solid: "Solid",
+            }[variant]
+          }
         </div>
-      </div>
+      ))}
     </div>
   );
 };
diff --git a/docs/components/SolidDemoRenderer.server.tsx b/docs/components/SolidDemoRenderer.server.tsx
@@ -0,0 +1,3 @@
+const SolidDemoRenderer: React.FC = () => <div />;
+
+export default SolidDemoRenderer;
diff --git a/docs/components/SolidDemoRenderer.tsx 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<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return () => {};
+    }
+    renderApp(el, { theme: "cupertino" });
+    return () => {
+      el.innerHTML = "";
+    };
+  }, []);
+  return <div ref={ref} />;
+};
+
+export default SolidDemoRenderer;
diff --git 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
@@ -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
@@ -3,7 +3,7 @@ import Demo from "../components/Demo.tsx";
 
 # Stackflow 시작하기
 
-<Demo />
+<Demo variants={["react", "solid"]} />
 
 **Stackflow**는 모바일 디바이스(iOS/Android 등)에서 주로 활용되는 Stack Navigation UX를 JavaScript 환경에서 구현하고, 이를 통해 하이브리드 앱과 웹뷰 개발을 쉽게 할 수 있도록 돕는 프로젝트에요.
 
diff --git a/yarn.lock b/yarn.lock
@@ -2326,7 +2326,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@stackflow/config@npm:^1.2.0, @stackflow/config@workspace:config":
+"@stackflow/config@npm:^1.1.0, @stackflow/config@npm:^1.2.0, @stackflow/config@workspace:config":
   version: 0.0.0-use.local
   resolution: "@stackflow/config@workspace:config"
   dependencies:
@@ -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"

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+const SolidDemoRenderer: React.FC = () => <div />;`
	`2`	`+`
	`3`	`+export default SolidDemoRenderer;`