Combine static examples approach with client Svelte component for handling example selection. To keep toggling logic inside OperationExample.astro component and do not spread it between components, for tethering it with controls Svelte component it uses event emitter, which is context specific for the OperationExamples component

Author: psd-coder

package.json

@@ -33,6 +33,7 @@
     "@tailwindcss/vite": "^4.0.3",
     "@vercel/analytics": "^1.4.1",
     "astro": "^5.2.5",
+    "nanoevents": "^9.1.0",
     "sharp": "^0.33.5",
     "shiki": "^2.3.0",
     "starlight-openapi": "^0.12.0",

pnpm-lock.yaml

@@ -9,8 +9,7 @@ import Parameters from "../parameter/Parameters.astro";
 import RequestBody from "../RequestBody.astro";
 import Responses from "../response/Responses.astro";
 import Security from "../security/Security.astro";
-// import OperationExampleSvelte from "./OperationExample.svelte";
-import OperationExamples from "./OperationExamples.astro";
+import OperationExamples from "./OperationExamples/OperationExamples.astro";
 import OperationDescription from "./OperationDescription.astro";
 import { ensureNonNullable } from "~/lib/ensureNonNullable";
 
@@ -25,12 +24,6 @@ const { operation } = pathItemOperation;
 ---
 
 <Deprecated deprecated={operation.deprecated} />
-<!-- <OperationExampleSvelte
-  client:load
-  baseUrl="https://api.mainnet.aptoslabs.com"
-  prefix={document.servers?.[0]?.url ?? ""}
-  operationPath={pathItemOperation.path}
-/> -->
 <OperationExamples
   baseUrl="https://api.mainnet.aptoslabs.com"
   prefix={document.servers?.[0]?.url ?? ""}

src/components/OpenAPI/operation/Operation.astro

@@ -37,21 +37,37 @@ const codeLang = (() => {
 ---
 
 <div
-  class="operation-example"
+  data-operation-example
   data-active={isActive}
   data-target={target}
   data-client={client}
+  aria-hidden={isActive}
   data-theme="github-dark-default"
 >
   <Code code={snippet} lang={codeLang} frame="none" />
 </div>
 
 <style>
-  .operation-example:not([data-active="true"]) {
+  [data-operation-example]:not([data-active="true"]) {
     display: none;
   }
 
-  .operation-example :global(.expressive-code .frame pre) {
+  [data-operation-example] :global(.expressive-code .frame pre) {
     background: var(--code-background);
   }
 </style>
+<script>
+  import type { ClientId, TargetId } from "@scalar/snippetz";
+  import { emitter } from "./events";
+
+  emitter.on("activateExample", activateExample);
+
+  function activateExample<T extends TargetId>(target: T, client: ClientId<T>) {
+    document.querySelectorAll<HTMLDivElement>(`[data-operation-example]`).forEach((el) => {
+      const isActive = el.dataset.target === target && el.dataset.client === client;
+
+      el.setAttribute("data-active", isActive ? "true" : "false");
+      el.setAttribute("aria-hidden", isActive ? "false" : "true");
+    });
+  }
+</script>

src/components/OpenAPI/operation/OperationExample.svelte

@@ -0,0 +1,33 @@
+---
+import { snippetz } from "@scalar/snippetz";
+import OperationExample, { type ExampleData } from "./OperationExample.astro";
+import OperationExamplesControls from "./OperationExamplesControls.svelte";
+import { INITIAL_TARGET, INITIAL_CLIENT } from "./constants";
+
+type Props = ExampleData;
+
+const example: Props = Astro.props;
+const targets = snippetz().clients();
+---
+
+<div class="operation-examples not-content">
+  <OperationExamplesControls
+    client:load
+    targets={targets}
+    initialTarget={INITIAL_TARGET}
+    initialClient={INITIAL_CLIENT}
+  >
+    {
+      targets.flatMap((target) =>
+        target.clients.map((client) => (
+          <OperationExample
+            example={example}
+            target={target.key}
+            client={client.client}
+            isActive={target.key === INITIAL_TARGET && client.client === INITIAL_CLIENT}
+          />
+        )),
+      )
+    }
+  </OperationExamplesControls>
+</div>

src/components/OpenAPI/operation/OperationExamples.astro

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { ClientId, Target, TargetId } from '@scalar/snippetz';
+  import type { Snippet } from 'svelte';
+  import { ensureNonNullable } from '~/lib/ensureNonNullable';
+  import { emitter} from './events'
+
+  interface Props<T extends TargetId> {
+    targets: Target[]
+    initialTarget: T,
+    initialClient: ClientId<T>,
+    children: Snippet
+  }
+
+  let { targets, initialTarget, initialClient, children }: Props<TargetId> = $props();
+  let selectedTargetName = $state(initialTarget);
+  let selectedClientName = $state(initialClient);
+  let target = $derived(ensureNonNullable(targets.find((item) => item.key === selectedTargetName), "Target not found"));
+
+  $effect(() => {
+    const updatedTarget = targets.find((item) => item.key === selectedTargetName);
+
+    if (updatedTarget) {
+      selectedClientName = updatedTarget.default;
+    }
+  })
+
+  $effect(() => {
+    emitter.emit("activateExample", selectedTargetName, selectedClientName);
+  })
+</script>
+<div class:list={["flex items-center gap-2"]}>
+  <select class={["border rounded"]} bind:value={selectedTargetName}>
+    {#each targets as target}
+      <option value={target.key} selected={target.key === selectedTargetName}>{target.title}</option>
+    {/each}
+  </select>
+  <select class={["border rounded"]} bind:value={selectedClientName}>
+    {#each target.clients as client}
+      <option value={client.client} selected={client.client === selectedClientName}>{client.title}</option>
+    {/each}
+  </select>
+</div>
+<div>{@render children()}</div>
+

…OpenAPI/operation/OperationExample.astro …OperationExamples/OperationExample.astrosrc/components/OpenAPI/operation/OperationExample.astro renamed to src/components/OpenAPI/operation/OperationExamples/OperationExample.astro src/components/OpenAPI/operation/OperationExample.astro renamed to src/components/OpenAPI/operation/OperationExamples/OperationExample.astro

@@ -0,0 +1,4 @@
+import type { ClientId } from "@scalar/snippetz";
+
+export const INITIAL_TARGET = "shell";
+export const INITIAL_CLIENT: ClientId<typeof INITIAL_TARGET> = "curl";

src/components/OpenAPI/operation/OperationExamples/OperationExamples.astro

@@ -0,0 +1,8 @@
+import type { ClientId, TargetId } from "@scalar/snippetz";
+import { createNanoEvents } from "nanoevents";
+
+interface ExamplesEvents {
+  activateExample: <T extends TargetId>(target: T, client: ClientId<T>) => void;
+}
+
+export const emitter = createNanoEvents<ExamplesEvents>();