diff options
| -rw-r--r-- | .npmignore | 3 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | playground/index.html | 16 | ||||
| -rw-r--r-- | playground/src/App.svelte | 23 | ||||
| -rw-r--r-- | playground/src/main.ts | 9 | ||||
| -rw-r--r-- | vite.config.ts | 10 |
6 files changed, 64 insertions, 0 deletions
@@ -1,6 +1,9 @@ source/ tests/ +playground/ PLAN.md .gitignore svelte.config.js tsconfig.json +vite.config.ts +vitest.config.ts diff --git a/package.json b/package.json index 8621132..fe4a49e 100644 --- a/package.json +++ b/package.json @@ -51,9 +51,12 @@ "access": "public" }, "scripts": { + "build": "vite build", "check": "svelte-check --tsconfig tsconfig.json", + "dev": "vite", "package": "svelte-package -i source/library -o dist", "prepublishOnly": "bun run package", + "preview": "vite preview", "publish": "bun run package && bun publish", "test": "vitest run" }, 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 }); diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..be9ad40 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,10 @@ +import { svelte } from "@sveltejs/vite-plugin-svelte"; +import { defineConfig } from "vite"; + +export default defineConfig({ + plugins: [svelte()], + root: "playground", + server: { + port: 5173 + } +}); |