adds standalone version for CDN ease

4 files changed, 85 insertions, 4 deletions

diff --git a/package.json b/package.json
index 44edf12..604ed72 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,9 @@
       "types": "./dist/components/Splitter.svelte.d.ts",
       "svelte": "./dist/components/Splitter.svelte",
       "default": "./dist/components/Splitter.svelte"
-    }
+    },
+    "./standalone": "./dist/standalone.js",
+    "./standalone.css": "./dist/standalone.css"
   },
   "files": ["dist"],
   "license": "MIT",
@@ -55,9 +57,10 @@
   },
   "scripts": {
     "build": "vite build",
+    "build:standalone": "vite build --config vite.standalone.config.ts",
     "check": "svelte-check --tsconfig tsconfig.json",
     "dev": "vite",
-    "package": "svelte-package --input source/library --output dist",
+    "package": "svelte-package --input source/library --output dist && bun run build:standalone",
     "prepublishOnly": "bun run package",
     "preview": "vite preview",
     "publish": "bun run package && bun publish",
@@ -65,5 +68,5 @@
     "update": "updates --update"
   },
   "type": "module",
-  "version": "0.2.0"
+  "version": "0.3.0"
 }
diff --git a/source/standalone/index.ts b/source/standalone/index.ts
new file mode 100644
index 0000000..f6defca
--- /dev/null
+++ b/source/standalone/index.ts
@@ -0,0 +1,41 @@
+
+
+
+/*** IMPORT ------------------------------------------- ***/
+
+import {
+  mount as svelteMount,
+  unmount as svelteUnmount,
+  type ComponentProps
+} from "svelte";
+
+/*** UTILITY ------------------------------------------ ***/
+
+import GraphiQL from "../library/GraphiQL.svelte";
+
+import { createApqFetcher } from "../library/fetcher/apq.ts";
+import { createHttpFetcher } from "../library/fetcher/http.ts";
+import { createSseFetcher } from "../library/fetcher/sse.ts";
+import { createWsFetcher } from "../library/fetcher/websocket.ts";
+import { lightTheme } from "../library/themes/light.ts";
+
+type Props = ComponentProps<typeof GraphiQL>;
+type Instance = Record<string, unknown>;
+
+/*** EXPORT ------------------------------------------- ***/
+
+export function mount(target: HTMLElement, props: Props): Instance {
+  return svelteMount(GraphiQL, { props, target });
+}
+
+export function unmount(instance: Instance): void {
+  svelteUnmount(instance);
+}
+
+export {
+  createApqFetcher,
+  createHttpFetcher,
+  createSseFetcher,
+  createWsFetcher,
+  lightTheme
+};
diff --git a/tsconfig.json b/tsconfig.json
index a2271d0..f4fcfd0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,7 @@
   },
   "include": [
     "source/library/**/*.ts",
-    "source/library/**/*.svelte"
+    "source/library/**/*.svelte",
+    "source/standalone/**/*.ts"
   ]
 }
diff --git a/vite.standalone.config.ts b/vite.standalone.config.ts
new file mode 100644
index 0000000..3abaed3
--- /dev/null
+++ b/vite.standalone.config.ts
@@ -0,0 +1,36 @@
+
+
+
+/*** IMPORT ------------------------------------------- ***/
+
+import { defineConfig } from "vite";
+import { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+/*** EXPORT ------------------------------------------- ***/
+
+export default defineConfig({
+  build: {
+    cssCodeSplit: false,
+    emptyOutDir: false,
+    lib: {
+      cssFileName: "standalone",
+      entry: "source/standalone/index.ts",
+      fileName: () => "standalone.js",
+      formats: ["iife"],
+      name: "EolGraphiQL"
+    },
+    outDir: "dist",
+    sourcemap: true
+  },
+  plugins: [
+    svelte({
+      preprocess: vitePreprocess({
+        style: {
+          scss: {
+            loadPaths: ["node_modules"]
+          }
+        }
+      })
+    })
+  ]
+});