diff options
| author | netop://ウィビ <paul@webb.page> | 2026-04-24 14:17:38 -0700 |
|---|---|---|
| committer | netop://ウィビ <paul@webb.page> | 2026-04-24 14:17:38 -0700 |
| commit | 261f3bdb77799009344aab4a60686b7186ebd3b0 (patch) | |
| tree | 8e87c6610a307f15f0c4b32f68b19424273fc6ad /source/library/components/ResultViewer.svelte | |
| parent | 8a59f92d031963e23ecc84b75feecf43eb4dd146 (diff) | |
| download | graphiql-261f3bdb77799009344aab4a60686b7186ebd3b0.tar.gz graphiql-261f3bdb77799009344aab4a60686b7186ebd3b0.zip | |
Implement v0.4 subscriptions + v0.5 theming and plugin slots
- SSE and WebSocket fetchers via graphql-sse and graphql-ws,
returning AsyncIterable results
- SessionStore.run consumes AsyncIterable streams with
subscriptionMode "append" (timestamped) or "replace" and
honors an AbortSignal for cancellation
- Chrome CSS variables documented in styles/theme.scss with
prefers-color-scheme light/dark gating and .graphiql-light override
- Svelte 5 snippet slots on GraphiQL: toolbarExtras, tabExtras,
resultFooter
Diffstat (limited to 'source/library/components/ResultViewer.svelte')
| -rw-r--r-- | source/library/components/ResultViewer.svelte | 16 |
1 files changed, 14 insertions, 2 deletions
diff --git a/source/library/components/ResultViewer.svelte b/source/library/components/ResultViewer.svelte index e2c74fe..083828d 100644 --- a/source/library/components/ResultViewer.svelte +++ b/source/library/components/ResultViewer.svelte @@ -1,13 +1,15 @@ <script lang="ts"> import Editor from "./Editor.svelte"; import type { Extension } from "@codemirror/state"; + import type { Snippet } from "svelte"; type Props = { + footer?: Snippet<[{ result: string }]>; theme?: Extension; value: string; }; - let { theme, value }: Props = $props(); + let { footer, theme, value }: Props = $props(); function noop(_v: string) {} </script> @@ -15,7 +17,7 @@ <style lang="scss"> .result { display: grid; - grid-template-rows: auto 1fr; + grid-template-rows: auto 1fr auto; height: 100%; min-height: 0; } @@ -27,9 +29,19 @@ padding: 0.25rem 0.75rem; text-transform: uppercase; } + + .footer { + background: var(--graphiql-panel, #252526); + border-top: 1px solid var(--graphiql-border, #333); + font-size: 0.75rem; + padding: 0.25rem 0.75rem; + } </style> <div class="result"> <div class="label">Response</div> <Editor language="json" onChange={noop} readOnly {theme} {value}/> + {#if footer} + <div class="footer">{@render footer({ result: value })}</div> + {/if} </div> |