docs: embed solid demo

Author: XiNiHa

.pnp.cjs

@@ -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: {

demo-solid/esbuild.config.js

@@ -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"

demo-solid/package.json

@@ -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(() => <Stack initialContext={initialContext} />, el);
+};

demo-solid/src/stackflow-docs.ts demo-solid/src/stackflow-docs.tsxdemo-solid/src/stackflow-docs.ts renamed to demo-solid/src/stackflow-docs.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,30 +32,58 @@ 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",
-          overflow: "hidden",
-          transform: "translate3d(0, 0, 0)",
-          maskImage: "-webkit-radial-gradient(white, black)",
-          boxShadow: "0 .25rem 1rem 0 rgba(0, 0, 0, .1)",
-        }}
-      >
-        <Stack
-          initialContext={{
-            theme: "cupertino",
+      {variants.map((variant) => (
+        <div
+          key={variant}
+          style={{
+            width: "100%",
+            maxWidth: "360px",
+            margin: "1rem 0",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "1rem",
+            color: "#777",
           }}
-        />
-      </div>
+        >
+          <div
+            style={{
+              width: "100%",
+              height: "640px",
+              position: "relative",
+              borderRadius: ".5rem",
+              overflow: "hidden",
+              transform: "translate3d(0, 0, 0)",
+              maskImage: "-webkit-radial-gradient(white, black)",
+              boxShadow: "0 .25rem 1rem 0 rgba(0, 0, 0, .1)",
+            }}
+          >
+            {variant === "react" ? (
+              Stack && (
+                <Stack
+                  initialContext={{
+                    theme: "cupertino",
+                  }}
+                />
+              )
+            ) : (
+              <SolidDemoRenderer />
+            )}
+          </div>
+          {
+            {
+              react: "React",
+              solid: "Solid",
+            }[variant]
+          }
+        </div>
+      ))}
     </div>
   );
 };

docs/components/Demo.tsx

@@ -0,0 +1,3 @@
+const SolidDemoRenderer: React.FC = () => <div />;
+
+export default SolidDemoRenderer;

docs/components/SolidDemoRenderer.server.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;

docs/components/SolidDemoRenderer.tsx

@@ -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",

docs/package.json

@@ -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";

docs/pages/_app.mdx

@@ -3,7 +3,7 @@ import Demo from "../components/Demo.tsx";
 
 # Stackflow 시작하기
 
-<Demo />
+<Demo variants={["react", "solid"]} />
 
 **Stackflow**는 모바일 디바이스(iOS/Android 등)에서 주로 활용되는 Stack Navigation UX를 JavaScript 환경에서 구현하고, 이를 통해 하이브리드 앱과 웹뷰 개발을 쉽게 할 수 있도록 돕는 프로젝트에요.