A few more examples in docs

Author: aarne

packages/docs-site/src/content/docs/reference/30-wiring-routing.mdx

@@ -39,39 +39,34 @@ o.country = "Germany"
 version 1.5
 
 const lorem = {
-"ipsum": "dolor sit amet",
-"consetetur": 8.9
+  "ipsum":"dolor sit amet",
+  "consetetur":8.9
 }
 
 bridge Query.greet {
+  # witnout alias
+  with const
+  # with alias
+  with input as inp
+  with output as o
 
-# witnout alias
-
-with const
-
-# with alias
-
-with input as inp
-with output as o
-
-# Pull value from input node
-
-o.nameFromInput <- inp.name
-
-# Constants
-
-o.constNumer = 7.7
-o.constString = "just a string"
+  # Pull value from input node
+  o.nameFromInput <- inp.name
 
-# Bridge variables also need pulling
+  # Constants
+  o.constNumer = 7.7
+  o.constString = "just a string"
 
-o.constFromConst <- const.lorem
+  # Bridge variables also need pulling
+  o.constFromConst <- const.lorem
 }
 `}
 
-inputJson={`{
+inputJson={`
+{
   "name": "Hello Bridge"
-}`}
+}
+`}
 
 autoRun={true}
 />
@@ -106,6 +101,47 @@ api.body.user {
 
 ```
 
+<MiniPlaygroundModal
+  client:load
+  bridge={`
+version 1.5
+
+bridge Query.createPayload {
+  with std.audit
+  with input as i
+  with output as o
+
+  audit.v1.value = 1
+  audit.v1.deep.isTrue = false
+  audit.v1.deep.input.first <- i.first
+  audit.v1.deep.input.last <- i.last
+
+  # Equal to the above
+  audit.v2 {
+    .value = 1
+    .deep {
+      .isTrue = false
+      .input {
+        .first <- i.first
+        .last <- i.last
+      }
+    }
+  }
+
+  o <- audit
+}
+`}
+
+inputJson={`
+{
+  "first": "Bob",
+  "last": "Bobik"
+}
+`}
+
+autoRun={true}
+/>
+
 ## 3. Spreading Objects (`...`)
 
 If you want to map an entire object into a specific target without writing out every single field, you can use the spread operator (`...`) inside a Path Scoping Block.
@@ -128,6 +164,37 @@ bridge Query.getUser {
 }
 
 ```
+<MiniPlaygroundModal
+  client:load
+  bridge={`
+version 1.5
+
+bridge Query.createPayload {
+  with std.audit
+  with input as i
+  with output as o
+
+  audit.v2 {
+    ...i
+    .last = "Overridden Last Name"
+    .deep {
+      .isTrue = false
+    }
+  }
+
+  o <- audit
+}
+`}
+
+inputJson={`
+{
+  "first": "Bob",
+  "last": "Bobik"
+}
+`}
+
+autoRun={true}
+/>
 
 ## 4. The Universal `alias`
 
@@ -170,6 +237,8 @@ o.pass <- isPassing
 o.total <- total
 
 ```
+<MiniPlaygroundModal client:load exampleId="alias" autoRun={true} />
+
 
 ## 5. Forcing Execution (`force`)
 

packages/docs-site/worker-configuration.d.ts

@@ -1,10 +1,7 @@
 /* eslint-disable */
-// Generated by Wrangler by running `wrangler types` (hash: e41227086db6ad8bb19b68d77b165868)
+// Generated by Wrangler by running `wrangler types` (hash: 3687270ff097b92829087e49bb8b5282)
 // Runtime types generated with workerd@1.20260301.1 2026-02-24 global_fetch_strictly_public,nodejs_compat
 declare namespace Cloudflare {
-	interface GlobalProps {
-		mainModule: typeof import("./dist/_worker.js/index");
-	}
 	interface Env {
 		SHARES: KVNamespace;
 		ASSETS: Fetcher;

packages/playground/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useCallback } from "react";
 import { Playground } from "./Playground";
 import { examples } from "./examples";
 import { usePlaygroundState } from "./usePlaygroundState";
@@ -26,18 +26,43 @@ export function App() {
     context,
   } = state;
 
-  // Load shared playground state from ?s=<id> on first mount
+  // Load shared playground state from ?s=<id> on first mount,
+  // or select built-in example from #example-id hash.
   useEffect(() => {
     const id = getShareIdFromUrl();
-    if (!id) return;
-    clearShareIdFromUrl();
-    loadShare(id)
-      .then((payload) => state.loadSharePayload(payload))
-      .catch(() => {
-        // silently ignore — invalid/expired share id
-      });
+    if (id) {
+      clearShareIdFromUrl();
+      // Clear the hash too — a custom share supersedes any example reference
+      window.history.replaceState(
+        null,
+        "",
+        window.location.pathname + window.location.search,
+      );
+      loadShare(id)
+        .then((payload) => state.loadSharePayload(payload))
+        .catch(() => {
+          // silently ignore — invalid/expired share id
+        });
+      return;
+    }
+    const hash = window.location.hash.slice(1);
+    if (hash) {
+      const idx = examples.findIndex((e) => e.id === hash);
+      if (idx !== -1) selectExample(idx);
+    }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const handleSelectExample = useCallback(
+    (index: number) => {
+      selectExample(index);
+      const ex = examples[index];
+      if (ex) {
+        window.history.replaceState(null, "", "#" + ex.id);
+      }
+    },
+    [selectExample],
+  );
+
   const isStandalone = mode === "standalone";
 
   return (
@@ -57,7 +82,7 @@ export function App() {
             <span className="text-xs text-slate-600">Example:</span>
             <Select
               value={String(exampleIndex)}
-              onValueChange={(v) => selectExample(Number(v))}
+              onValueChange={(v) => handleSelectExample(Number(v))}
             >
               <SelectTrigger className="w-44">
                 <SelectValue />
@@ -100,7 +125,7 @@ export function App() {
           <span className="text-xs text-slate-600">Example:</span>
           <Select
             value={String(exampleIndex)}
-            onValueChange={(v) => selectExample(Number(v))}
+            onValueChange={(v) => handleSelectExample(Number(v))}
           >
             <SelectTrigger className="w-full">
               <SelectValue />

packages/playground/src/DialogPlayground.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import { Playground } from "./Playground";
 import { usePlaygroundState } from "./usePlaygroundState";
+import { examples } from "./examples";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 
@@ -9,10 +10,12 @@ export type DialogPlaygroundProps = {
   label?: string;
   /** Index of the built-in example to load initially (default: 0). */
   initialExample?: number;
+  /** ID of a built-in example to load initially. Takes precedence over `initialExample`. */
+  exampleId?: string;
   /** Disables switching to GraphQL mode. */
   hideGqlSwitch?: boolean;
 
-  /** Optional custom bridge DSL. If provided, overrides `initialExample`. */
+  /** Optional custom bridge DSL. If provided, overrides `initialExample`/`exampleId`. */
   bridge?: string;
   /** Optional custom context JSON string. */
   contextStr?: string;
@@ -82,6 +85,7 @@ function PlaygroundInner({
 export function DialogPlayground({
   label = "Open Playground",
   initialExample = 0,
+  exampleId,
   hideGqlSwitch = true,
   bridge,
   contextStr,
@@ -90,6 +94,11 @@ export function DialogPlayground({
   outputFields,
   autoRun,
 }: DialogPlaygroundProps) {
+  const resolvedExample =
+    exampleId !== undefined
+      ? (examples.findIndex((e) => e.id === exampleId) ?? 0)
+      : initialExample;
+
   const [open, setOpen] = useState(false);
 
   return (
@@ -110,7 +119,7 @@ export function DialogPlayground({
       >
         {open && (
           <PlaygroundInner
-            initialExample={initialExample}
+            initialExample={resolvedExample}
             hideGqlSwitch={hideGqlSwitch}
             bridge={bridge}
             contextStr={contextStr}