🔧 fix: resizee handler

index.html

@@ -6,27 +6,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Svelte + TS + Vite App</title>
     <style>
-      html, body, #splashscreen {
+      html, body {
         width: 100%;
         height: 100vh;
         background-color: #fff;
         overflow: hidden
       }
-
-      #splashscreen {
-        z-index: 9999;
-        top: 0;
-        left: 0;
-        position: fixed;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100vh;
-      }
 
       @media (prefers-color-scheme: dark) {
-        html, body, #splashscreen {
+        html, body {
           background-color: rgb(31 41 55);
         }
       }

package.json

@@ -29,6 +29,7 @@
     "graphql": "^16.2.0",
     "monaco-editor": "^0.31.1",
     "monaco-graphql": "^1.0.9",
+    "nanoid": "^3.1.30",
     "prettier": "^2.5.1",
     "svelte-feather-icons": "^3.5.0"
   }

src/App.svelte

@@ -42,7 +42,7 @@
         : 'hidden'}
 />
 
-<main class="content-app flex">
+<main class="app-shell flex">
     <SplitPane class={hideIfInvalid} minWidth={50}>
         <main class="flex flex-col" slot="left">
             <SubTab class={hideIfInvalid} />

src/components/editor.svelte

@@ -8,13 +8,22 @@
     import type { EditorConfig } from '../lib/editor'
     import { detectLanguage } from '../lib/language'
 
+    import { buildClientSchema, printSchema } from 'graphql'
+    import type { IntrospectionQuery } from 'graphql'
+
     import { initializeMode } from 'monaco-graphql/esm/initializeMode'
 
+    import { FileIcon, XIcon } from 'svelte-feather-icons'
+    import HeightResize from './height-resize.svelte'
+
     let editorDebounce: number
     let requestEditorChange = false
 
     let prevIndex: number
     let prevUrl: string
+    let schema: IntrospectionQuery | null
+
+    let viewSchema = false
 
     const gqlLanguageService = initializeMode()
 
@@ -36,11 +45,13 @@
         fetchStorage.subscribe(async ({ url }) => {
             if (url === prevUrl) return
 
+            schema = null
+            viewSchema = false
             prevUrl = url
 
             try {
-
-                let schema = await fetchSchema(url)
+                let _schema = await fetchSchema(url)
+                schema = _schema
 
                 gqlLanguageService.setSchemaConfig([
                     {
@@ -49,6 +60,11 @@
                         introspectionJSON: schema
                     }
                 ])
+
+                updateGqlDocEditor(
+                    printSchema(buildClientSchema(schema)),
+                    'graphql'
+                )
             } catch (err) {
                 gqlLanguageService.setSchemaConfig([])
             }
@@ -90,8 +106,49 @@
     const onEditorDestroy = () => {
         saveFetchStorage()
     }
+
+    let updateGqlDocEditor: EditorConfig['updateEditor']
+
+    const onSchemaViewerReady: EditorConfig['handleCustomEvent'] = ({
+        detail: { updateEditor }
+    }) => {
+        updateGqlDocEditor = updateEditor
+    }
+
+    const toggleSchema = () => {
+        viewSchema = !viewSchema
+    }
 </script>
 
+<HeightResize
+    class={`absolute z-20 bottom-0 flex flex-col w-full h-1/2 bg-white dark:bg-gray-800 ${
+        viewSchema ? '' : 'hidden'
+    }`}
+>
+    <div
+        class="w-full h-full"
+        use:editor={{
+            readOnly: true
+        }}
+        on:editorReady={onSchemaViewerReady}
+    />
+</HeightResize>
+
+{#if schema}
+    <button
+        class="z-20 absolute bottom-3 right-6 flex justify-center items-center text-gray-500 dark:text-gray-300 bg-white dark:bg-gray-700 w-8 h-8 p-1.5 rounded-lg shadow-lg border dark:border-gray-700"
+        title="View GraphQL Schema"
+        aria-label="View GraphQL Schema"
+        on:click={toggleSchema}
+    >
+        {#if viewSchema}
+            <XIcon strokeWidth={1.5} />
+        {:else}
+            <FileIcon strokeWidth={1.5} />
+        {/if}
+    </button>
+{/if}
+
 <section
     use:editor
     on:editorReady={onEditorReady}

src/components/height-resize.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+
+    let dragging = false
+    let height
+
+    onMount(() => {
+        height = window.innerHeight / 2
+    })
+
+    const onMouseDown = () => {
+        dragging = true
+    }
+
+    const onMouseMove = (e) => {
+        if (!dragging) return
+
+        const newHeight = Math.abs(window.innerHeight - e.clientY)
+
+        if (newHeight > window.innerHeight - 123 || newHeight < 100) return
+
+        height = Math.abs(window.innerHeight - e.clientY)
+    }
+
+    const onMouseUp = () => {
+        dragging = false
+    }
+</script>
+
+<svelte:window on:mousemove={onMouseMove} on:mouseup={onMouseUp} />
+<section class={$$props.class} style="height:{height}px">
+    <div class="z-20 flex items-center w-full h-[6px] bg-transparent cursor-row-resize " on:mousedown={onMouseDown}>
+        <div class="w-full h-[1px] bg-gray-200 dark:bg-gray-700" />
+    </div>
+
+    <slot />
+</section>

src/components/split-pane.svelte

@@ -1,62 +1,39 @@
 <script>
-    // @see https://svelte.dev/repl/b467a4787de3487fbe5c4508e8221268?version=3.42.1
     import { onMount } from 'svelte'
-    export let minWidth = 30
+
     export let splitterWidth = 10
-    let mousePos
-    let delta = 0
     let isMouseDown = false
-    let containerW
-    let initialL
     let leftW
     let rightW
 
     onMount(() => {
         requestAnimationFrame(() => {
-            leftW = ((containerW || window.innerWidth) - splitterWidth) / 2
-            rightW = ((containerW || window.innerWidth) - splitterWidth) / 2
+            leftW = (window.innerWidth - splitterWidth) / 2
+            rightW = (window.innerWidth - splitterWidth) / 2
         })
     })
 
-    function handleMouseMove(e) {
-        if (isMouseDown) {
-            delta = mousePos - e.clientX
-            leftW =
-                initialL - delta <= minWidth
-                    ? minWidth
-                    : initialL - delta >= containerW - splitterWidth - minWidth
-                    ? containerW - splitterWidth - minWidth
-                    : initialL - delta
+    const handleMouseMove = (e) => {
+        if (!isMouseDown) return
 
-            rightW = containerW - leftW - splitterWidth
-        }
+        leftW = e.clientX
+        rightW = Math.abs(window.innerWidth - leftW - splitterWidth)
     }
 
-    function handleMouseDown(e) {
-        mousePos = e.clientX
-        initialL = leftW
+    const handleMouseDown = () => {
         isMouseDown = true
     }
 
-    function handleMouseUp() {
+    const handleMouseUp = () => {
         isMouseDown = false
     }
-
-    $: if (
-        leftW &&
-        rightW & containerW &&
-        leftW + rightW !== containerW - splitterWidth
-    ) {
-        const leftRatio = leftW / (leftW + rightW - splitterWidth / 2)
-        leftW = containerW * leftRatio - splitterWidth / 2
-        rightW = containerW - leftW - splitterWidth / 2
-    }
 </script>
 
 <svelte:window on:mousemove={handleMouseMove} on:mouseup={handleMouseUp} />
 <section
-    bind:clientWidth={containerW}
-    class={`flex w-full h-full ${$$props.class || ''} ${isMouseDown ? 'disable-select' : ''}`}
+    class={`flex w-full h-full ${$$props.class || ''} ${
+        isMouseDown ? 'disable-select' : ''
+    }`}
 >
     <div class="relative" style="width:{leftW}px">
         <slot name="left" />

src/lib/editor.ts

@@ -8,16 +8,17 @@ export interface EditorConfig {
     config: {
         Monaco: typeof MonacoEditor
         editor: monaco.editor.IStandaloneCodeEditor
-        updateEditor: (
-            body: string,
-            langage?: string,
-            config?: {
-                overwrite: boolean
-            }
-        ) => void
+        updateEditor: EditorConfig['updateEditor']
     }
     onEvent: (config: EditorConfig['config']) => void
     handleCustomEvent: (event: { detail: EditorConfig['config'] }) => void
+    updateEditor: (
+        body: string,
+        langage?: string,
+        config?: {
+            overwrite: boolean
+        }
+    ) => void
 }
 
 const editor = (
@@ -81,6 +82,7 @@ const editor = (
             // @ts-ignore
             'bracketPairColorization.enabled': true,
             tabSize: 2,
+            useShadowDOM: true,
             ...config
         })
 

src/store/deriveSave.ts

@@ -15,7 +15,7 @@ import type { Controller } from './controller'
 export const saveFetchStorage = async (
     index: number = get(controller).index
 ) => {
-    console.log("Save", index, get(fetchStorage))
+    // console.log("Save", index, get(fetchStorage))
 
     await writeFile(
         {

src/styles/tailwind.css

@@ -22,6 +22,10 @@ input, textarea, .editor-scrollable *, #splitter * {
     height: calc(100vh - 44px);
 }
 
+.app-shell {
+    height: calc(100vh - 88px);
+}
+
 .content-app {
     height: calc(100vh - 124px);
 }

vite.config.js

@@ -5,7 +5,11 @@ import monacoEditorPlugin from 'vite-plugin-monaco-editor'
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
-        svelte(),
+        svelte({
+            compilerOptions: {
+                generate: 'dom'
+            }
+        }),
         monacoEditorPlugin.default({
             languageWorkers: ['html', 'json', 'editorWorkerService'],
             customWorkers: [