diff options
| author | netop://ウィビ <paul@webb.page> | 2026-04-24 16:50:12 -0700 |
|---|---|---|
| committer | netop://ウィビ <paul@webb.page> | 2026-04-24 16:50:12 -0700 |
| commit | 216441d3564e00aabfac7e8acf346e34a5db9598 (patch) | |
| tree | 67cfc8ccac0df117f098d8fa0569000ed8274a20 /playground | |
| parent | 85c05927989c712015ee82cea9b2917485a3f0e8 (diff) | |
| download | graphiql-216441d3564e00aabfac7e8acf346e34a5db9598.tar.gz graphiql-216441d3564e00aabfac7e8acf346e34a5db9598.zip | |
Add Vite playground for local development
npm run dev boots a Vite + Svelte 5 server at localhost:5173, importing
GraphiQL.svelte directly from source/library. HMR reflects changes
without a package rebuild. Points at the public Countries API by default
— swap playground/src/App.svelte for your own endpoint.
Diffstat (limited to 'playground')
| -rw-r--r-- | playground/index.html | 16 | ||||
| -rw-r--r-- | playground/src/App.svelte | 23 | ||||
| -rw-r--r-- | playground/src/main.ts | 9 |
3 files changed, 48 insertions, 0 deletions
diff --git a/playground/index.html b/playground/index.html new file mode 100644 index 0000000..7487569 --- /dev/null +++ b/playground/index.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <title>@eeeooolll/graphiql · playground</title> + <style> + html, body, #app { height: 100%; margin: 0; } + body { background: #1e1e1e; color: #d4d4d4; font-family: ui-monospace, SFMono-Regular, monospace; } + </style> + </head> + <body> + <div id="app"></div> + <script type="module" src="./src/main.ts"></script> + </body> +</html> diff --git a/playground/src/App.svelte b/playground/src/App.svelte new file mode 100644 index 0000000..82a8c9d --- /dev/null +++ b/playground/src/App.svelte @@ -0,0 +1,23 @@ +<script lang="ts"> + /*** IMPORT ------------------------------------------- ***/ + + import { createHttpFetcher } from "../../source/library/index.ts"; + import GraphiQL from "../../source/library/GraphiQL.svelte"; + + /*** UTILITY ------------------------------------------ ***/ + + const fetcher = createHttpFetcher({ + url: "https://countries.trevorblades.com/" + }); + + const initialQuery = `query Countries { + countries { + code + name + emoji + } +} +`; +</script> + +<GraphiQL {fetcher} {initialQuery}/> diff --git a/playground/src/main.ts b/playground/src/main.ts new file mode 100644 index 0000000..bf39df9 --- /dev/null +++ b/playground/src/main.ts @@ -0,0 +1,9 @@ +import { mount } from "svelte"; +import App from "./App.svelte"; + +const target = document.getElementById("app"); + +if (!target) + throw new Error("missing #app target"); + +mount(App, { target }); |