fix(demo): provide Link URL resolvers for demo stacks

.changeset/demo-link-resolver.md

@@ -0,0 +1,2 @@
+---
+---

demo/esbuild.config.js

@@ -12,7 +12,7 @@ const external = Object.keys({
 Promise.all([
   context({
     ...config({
-      entryPoints: ["./src/stackflow/stackflow.docs.ts"],
+      entryPoints: ["./src/stackflow/stackflow.docs.tsx"],
       outdir: "./dist/stackflow",
       vanillaExtractExternal: ["@seed-design"],
     }),
@@ -23,7 +23,7 @@ Promise.all([
   ),
   context({
     ...config({
-      entryPoints: ["./src/stackflow/stackflow.docs.ts"],
+      entryPoints: ["./src/stackflow/stackflow.docs.tsx"],
       outdir: "./dist/stackflow",
       vanillaExtractExternal: ["@seed-design"],
     }),

demo/package.json

@@ -37,10 +37,11 @@
     "@stackflow/link": "^3.0.0",
     "@stackflow/plugin-basic-ui": "^1.18.3",
     "@stackflow/plugin-devtools": "^0.1.13",
-    "@stackflow/plugin-history-sync": "^1.12.0",
+    "@stackflow/plugin-history-sync": "^2.1.0",
     "@stackflow/plugin-renderer-basic": "^1.1.15",
     "@stackflow/plugin-stack-depth-change": "^1.1.7",
     "@stackflow/react": "^2.1.2",
+    "history": "^5.3.0",
     "lorem-ipsum": "^2.0.8",
     "lz-string": "^1.5.0",
     "normalize.css": "^8.0.1",

demo/src/App.tsx

@@ -1,11 +1,14 @@
+import { LinkUrlResolverProvider } from "@stackflow/link";
 import { StrictMode, Suspense } from "react";
 
-import { Stack } from "./stackflow";
+import { historySync, Stack } from "./stackflow";
 
 const App: React.FC = () => (
   <StrictMode>
     <Suspense>
-      <Stack />
+      <LinkUrlResolverProvider resolver={historySync.urlResolver}>
+        <Stack />
+      </LinkUrlResolverProvider>
     </Suspense>
   </StrictMode>
 );

demo/src/stackflow/Stack.tsx

@@ -7,6 +7,11 @@ import { Article } from "../activities/Article/Article";
 import Main from "../activities/Main/Main";
 import { config } from "./stackflow.config";
 
+export const historySync = historySyncPlugin({
+  config,
+  fallbackActivity: () => "Main",
+});
+
 export const { Stack, actions } = stackflow({
   config,
   components: {
@@ -30,10 +35,7 @@ export const { Stack, actions } = stackflow({
         },
       },
     }),
-    historySyncPlugin({
-      config,
-      fallbackActivity: () => "Main",
-    }),
+    historySync,
   ],
 });
 

demo/src/stackflow/stackflow.docs.ts → demo/src/stackflow/stackflow.docs.tsx

@@ -1,12 +1,22 @@
 import { vars } from "@seed-design/design-token";
+import { LinkUrlResolverProvider } from "@stackflow/link";
 import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
+import { historySyncPlugin } from "@stackflow/plugin-history-sync";
 import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
 import { stackflow } from "@stackflow/react";
+import { createMemoryHistory } from "history";
 import { Article } from "../activities/Article/Article";
 import Main from "../activities/Main/Main";
 import { config } from "./stackflow.config";
 
-export const { Stack } = stackflow({
+// The docs router owns the browser URL, so the embedded demo needs its own history.
+const historySync = historySyncPlugin({
+  config,
+  fallbackActivity: () => "Main",
+  history: createMemoryHistory(),
+});
+
+const { Stack: DemoStack } = stackflow({
   config,
   components: {
     Main,
@@ -29,5 +39,12 @@ export const { Stack } = stackflow({
         },
       },
     }),
+    historySync,
   ],
 });
+
+export const Stack: typeof DemoStack = (props) => (
+  <LinkUrlResolverProvider resolver={historySync.urlResolver}>
+    <DemoStack {...props} />
+  </LinkUrlResolverProvider>
+);

yarn.lock

@@ -5642,7 +5642,7 @@ __metadata:
     "@stackflow/link": "npm:^3.0.0"
     "@stackflow/plugin-basic-ui": "npm:^1.18.3"
     "@stackflow/plugin-devtools": "npm:^0.1.13"
-    "@stackflow/plugin-history-sync": "npm:^1.12.0"
+    "@stackflow/plugin-history-sync": "npm:^2.1.0"
     "@stackflow/plugin-renderer-basic": "npm:^1.1.15"
     "@stackflow/plugin-stack-depth-change": "npm:^1.1.7"
     "@stackflow/react": "npm:^2.1.2"
@@ -5653,6 +5653,7 @@ __metadata:
     "@vanilla-extract/vite-plugin": "npm:^4.0.12"
     "@vitejs/plugin-react": "npm:^4.3.1"
     esbuild: "npm:^0.23.0"
+    history: "npm:^5.3.0"
     lorem-ipsum: "npm:^2.0.8"
     lz-string: "npm:^1.5.0"
     normalize.css: "npm:^8.0.1"
@@ -5888,7 +5889,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@stackflow/plugin-history-sync@workspace:extensions/plugin-history-sync":
+"@stackflow/plugin-history-sync@npm:^2.1.0, @stackflow/plugin-history-sync@workspace:extensions/plugin-history-sync":
   version: 0.0.0-use.local
   resolution: "@stackflow/plugin-history-sync@workspace:extensions/plugin-history-sync"
   dependencies: