ui: update graphiql

packages/ui-default/build/config/webpack.ts

@@ -248,7 +248,10 @@ export default function (env: { watch?: boolean, production?: boolean, measure?:
         patterns: [
           { from: root('static') },
           { from: root('components/navigation/nav-logo-small_dark.png'), to: 'components/navigation/nav-logo-small_dark.png' },
+          { from: root(`${dirname(require.resolve('streamsaver/package.json'))}/mitm.html`), to: 'streamsaver/mitm.html' },
+          { from: root(`${dirname(require.resolve('streamsaver/package.json'))}/sw.js`), to: 'streamsaver/sw.js' },
           { from: root(`${dirname(require.resolve('vditor/package.json'))}/dist`), to: 'vditor/dist' },
+          { from: root(`${dirname(require.resolve('graphiql/package.json'))}/graphiql.min.css`), to: 'graphiql.min.css' },
           { from: `${dirname(require.resolve('monaco-themes/package.json'))}/themes`, to: 'monaco/themes/' },
         ],
       }),
@@ -268,13 +271,6 @@ export default function (env: { watch?: boolean, production?: boolean, measure?:
             id: 'vs/language/yaml/yamlWorker',
             entry: require.resolve('monaco-yaml/yaml.worker.js'),
           },
-        }, {
-          label: 'graphql',
-          entry: require.resolve('monaco-graphql/esm/monaco.contribution.js'),
-          worker: {
-            id: 'vs/language/graphql/graphqlWorker',
-            entry: require.resolve('monaco-graphql/esm/graphql.worker.js'),
-          },
         }],
       }),
       ...env.measure ? [new BundleAnalyzerPlugin({ analyzerPort: 'auto' })] : [],

packages/ui-default/package.json

@@ -52,7 +52,7 @@
     "fancy-log": "^2.0.0",
     "flatpickr": "^4.6.13",
     "friendly-errors-webpack-plugin": "^1.7.0",
-    "graphiql": "1.8.9",
+    "graphiql": "2.1.0",
     "gulp": "^4.0.2",
     "gulp-iconfont": "^11.0.1",
     "gulp-if": "^3.0.0",
@@ -63,12 +63,11 @@
     "jquery.easing": "^1.4.1",
     "jquery.transit": "^0.9.12",
     "matchmedia-polyfill": "^0.3.2",
-    "mini-css-extract-plugin": "^2.6.1",
+    "mini-css-extract-plugin": "^2.7.0",
     "moment": "^2.29.4",
     "monaco-editor": "0.33.0",
     "monaco-editor-nls": "^2.0.0",
     "monaco-editor-webpack-plugin": "^7.0.1",
-    "monaco-graphql": "^1.1.6",
     "monaco-themes": "^0.4.3",
     "monaco-yaml": "^4.0.2",
     "nanoid": "^4.0.0",

packages/ui-default/pages/api.page.tsx

@@ -1,9 +1,4 @@
-import 'graphiql/src/css/doc-explorer.css';
-
-import type { GraphQLSchema } from 'graphql';
-import { load as loadYaml } from 'js-yaml';
-import type * as monaco from 'monaco-editor';
-import type { SchemaConfig } from 'monaco-graphql/src/typings';
+import { pick } from 'lodash';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { NamedPage } from 'vj/misc/Page';
@@ -18,154 +13,17 @@ query Example(
     uname
   }
 }`;
-const variablesString = 'name: Hydro';
-const resultsString = '{}';
-const schemaSdlString = `\
-"""
-Loading schema...
-"""`;
 
-const page = new NamedPage('api', async () => {
-  const [{ DocExplorer }, { buildClientSchema, getIntrospectionQuery, printSchema }, { load }] = await Promise.all([
-    import('graphiql/esm/components/DocExplorer'),
-    import('graphql/utilities'),
-    import('vj/components/monaco/loader'),
-  ]);
-  const { monaco } = await load(['graphql', 'json', 'yaml']);
-  const { initializeMode } = await import('monaco-graphql/esm/initializeMode');
-
-  const variablesModel = monaco.editor.createModel(
-    variablesString,
-    'yaml',
-    monaco.Uri.file('/1/variables.yaml'),
+export default new NamedPage('api', async () => {
+  const { GraphiQL } = await import('graphiql');
+  GraphiQL.Logo = function () {
+    return <p></p>;
+  } as any;
+  createRoot(document.getElementById('main')!).render(
+    <GraphiQL
+      fetcher={(body, opts = {}) => request.post('/api', body, pick(opts, 'headers'))}
+      defaultQuery={defaultQuery}
+      variables='{"name": "Hydro"}'
+    />,
   );
-  const variablesEditor = monaco.editor.create(
-    document.getElementById('variables') as HTMLElement,
-    {
-      model: variablesModel,
-      language: 'yaml',
-      formatOnPaste: true,
-      formatOnType: true,
-      comments: {
-        insertSpace: true,
-        ignoreEmptyLines: true,
-      },
-    },
-  );
-
-  const operationModel = monaco.editor.createModel(
-    defaultQuery,
-    'graphql',
-    monaco.Uri.file('/1/operation.graphql'),
-  );
-  const operationEditor = monaco.editor.create(
-    document.getElementById('operation') as HTMLElement,
-    {
-      model: operationModel,
-      formatOnPaste: true,
-      formatOnType: true,
-      folding: true,
-      language: 'graphql',
-    },
-  );
-
-  const schemaModel = monaco.editor.createModel(
-    schemaSdlString,
-    'graphql',
-    monaco.Uri.file('/1/schema.graphqls'),
-  );
-  const schemaEditor = monaco.editor.create(
-    document.getElementById('schema-sdl') as HTMLElement,
-    {
-      model: schemaModel,
-      formatOnPaste: true,
-      formatOnType: true,
-      folding: true,
-      readOnly: true,
-      language: 'graphql',
-    },
-  );
-
-  const resultsModel = monaco.editor.createModel(
-    resultsString,
-    'json',
-    monaco.Uri.file('/1/results.json'),
-  );
-  const resultsEditor = monaco.editor.create(
-    document.getElementById('results') as HTMLElement,
-    {
-      model: resultsModel,
-      language: 'json',
-      wordWrap: 'on',
-      readOnly: true,
-      showFoldingControls: 'always',
-    },
-  );
-
-  const monacoGraphQLAPI = initializeMode({
-    formattingOptions: {
-      prettierConfig: {
-        printWidth: 120,
-      },
-    },
-  });
-
-  const toolbar = $('#toolbar')!;
-  toolbar.html();
-  const executeOpButton = $('<button id="execute-op">Run Operation ➤</button>');
-  toolbar.append(executeOpButton);
-
-  const operationUri = operationModel.uri.toString();
-  let schema: SchemaConfig;
-  let clientSchema: GraphQLSchema;
-  try {
-    const { data } = await request.post('/api?schema', {
-      query: getIntrospectionQuery(),
-      operationName: 'IntrospectionQuery',
-    });
-    clientSchema = buildClientSchema(data);
-    schema = {
-      introspectionJSON: data,
-      documentString: printSchema(clientSchema),
-      uri: monaco.Uri.parse('/api?schema').toString(),
-    };
-  } catch {
-    schemaModel.setValue('"""\nFailed to load schema.\n"""');
-  }
-  monacoGraphQLAPI.setSchemaConfig([
-    { ...schema, fileMatch: [operationUri, schemaModel.uri.toString()] },
-  ]);
-  schemaEditor.setValue(schema.documentString || '');
-
-  const operationHandler = async () => {
-    try {
-      resultsEditor.setValue(JSON.stringify({ message: 'Executing...' }, null, 2));
-      const result = await request.post('/api?schema', {
-        query: operationEditor.getValue(),
-        variables: loadYaml(variablesEditor.getValue()),
-      });
-      resultsEditor.setValue(JSON.stringify(result, null, 2));
-    } catch (err) {
-      if (err instanceof Error) {
-        resultsEditor.setValue(err.toString());
-      }
-    }
-  };
-  executeOpButton.on('click', operationHandler);
-  executeOpButton.on('touchend', operationHandler);
-  const opAction: monaco.editor.IActionDescriptor = {
-    id: 'graphql-run',
-    label: 'Run Operation',
-    contextMenuOrder: 0,
-    contextMenuGroupId: 'graphql',
-    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
-    run: operationHandler,
-  };
-  operationEditor.addAction(opAction);
-  variablesEditor.addAction(opAction);
-  resultsEditor.addAction(opAction);
-
-  createRoot(document.getElementById('docs')).render(<DocExplorer schema={clientSchema} />);
 });
-
-export default page;

packages/ui-default/static/streamsaver/mitm.html

@@ -1 +0,0 @@
-<script>let keepAlive=()=>{keepAlive=()=>{};var e=location.href.substr(0,location.href.lastIndexOf("/"))+"/ping",a=setInterval((()=>{sw?sw.postMessage("ping"):fetch(e).then((e=>e.text(!e.ok&&clearInterval(a))))}),1e4)},messages=[];window.onmessage=e=>messages.push(e);let sw=null,scope="";function registerWorker(){return navigator.serviceWorker.getRegistration("./").then((e=>e||navigator.serviceWorker.register("sw.js",{scope:"./"}))).then((e=>{const a=e.installing||e.waiting;return scope=e.scope,(sw=e.active)||new Promise((r=>{a.addEventListener("statechange",fn=()=>{"activated"===a.state&&(a.removeEventListener("statechange",fn),sw=e.active,r())})}))}))}function onMessage(e){let{data:a,ports:r,origin:t}=e;if(!r||!r.length)throw new TypeError("[StreamSaver] You didn't send a messageChannel");if("object"!=typeof a)throw new TypeError("[StreamSaver] You didn't send a object");a.origin=t,a.referrer=a.referrer||document.referrer||t,a.streamSaverVersion=new URLSearchParams(location.search).get("version"),"1.2.0"===a.streamSaverVersion&&console.warn("[StreamSaver] please update streamsaver"),a.headers?new Headers(a.headers):console.warn("[StreamSaver] pass `data.headers` that you would like to pass along to the service worker\nit should be a 2D array or a key/val object that fetch's Headers api accepts"),"string"==typeof a.filename&&(console.warn("[StreamSaver] You shouldn't send `data.filename` anymore. It should be included in the Content-Disposition header option"),a.filename=a.filename.replace(/\//g,":")),a.size&&console.warn("[StreamSaver] You shouldn't send `data.size` anymore. It should be included in the content-length header option"),a.readableStream&&console.warn("[StreamSaver] You should send the readableStream in the messageChannel, not throught mitm"),a.pathname||(console.warn("[StreamSaver] Please send `data.pathname` (eg: /pictures/summer.jpg)"),a.pathname=Math.random().toString().slice(-6)+"/"+a.filename),a.pathname=a.pathname.replace(/^\/+/g,"");let n=t.replace(/(^\w+:|^)\/\//,"");if(a.url=new URL(`${scope+n}/${a.pathname}`).toString(),!a.url.startsWith(`${scope+n}/`))throw new TypeError("[StreamSaver] bad `data.pathname`");const s=a.readableStream?[r[0],a.readableStream]:[r[0]];return a.readableStream||a.transferringReadable||keepAlive(),sw.postMessage(a,s)}window.opener&&window.opener.postMessage("StreamSaver::loadedPopup","*"),navigator.serviceWorker?registerWorker().then((()=>{window.onmessage=onMessage,messages.forEach(window.onmessage)})):keepAlive();</script>

packages/ui-default/static/streamsaver/sw.js

@@ -1,81 +0,0 @@
-/* eslint-disable */
-self.addEventListener('install', () => {
-  self.skipWaiting();
-});
-self.addEventListener('activate', (event) => {
-  event.waitUntil(self.clients.claim());
-});
-const map = new Map();
-self.onmessage = (event) => {
-  if (event.data === 'ping') {
-    return;
-  }
-  const { data } = event;
-  const downloadUrl = data.url || `${self.registration.scope + Math.random()}/${typeof data === 'string' ? data : data.filename}`;
-  const port = event.ports[0];
-  const metadata = new Array(3);
-  metadata[1] = data;
-  metadata[2] = port;
-  if (event.data.readableStream) {
-    metadata[0] = event.data.readableStream;
-  } else if (event.data.transferringReadable) {
-    port.onmessage = (evt) => {
-      port.onmessage = null;
-      metadata[0] = evt.data.readableStream;
-    };
-  } else metadata[0] = createStream(port);
-  map.set(downloadUrl, metadata);
-  port.postMessage({ download: downloadUrl });
-};
-function createStream(port) {
-  return new ReadableStream({
-    start(controller) {
-      port.onmessage = ({ data }) => {
-        if (data === 'end') return controller.close();
-        if (data === 'abort') {
-          controller.error('Aborted the download');
-          return;
-        }
-        controller.enqueue(data);
-      };
-    },
-    cancel() {
-      console.log('user aborted');
-    },
-  });
-}
-self.onfetch = (event) => {
-  const { url } = event.request;
-  if (url.endsWith('/ping')) return event.respondWith(new Response('pong'));
-  const hijacke = map.get(url);
-  if (!hijacke) return null;
-  const [stream, data, port] = hijacke;
-  map.delete(url);
-  const responseHeaders = new Headers({
-    'Content-Type': 'application/octet-stream; charset=utf-8',
-    'Content-Security-Policy': "default-src 'none'",
-    'X-Content-Security-Policy': "default-src 'none'",
-    'X-WebKit-CSP': "default-src 'none'",
-    'X-XSS-Protection': '1; mode=block',
-  });
-  const headers = new Headers(data.headers || {});
-  if (headers.has('Content-Length')) {
-    responseHeaders.set('Content-Length', headers.get('Content-Length'));
-  }
-  if (headers.has('Content-Disposition')) {
-    responseHeaders.set('Content-Disposition', headers.get('Content-Disposition'));
-  }
-  if (data.size) {
-    console.warn('Depricated');
-    responseHeaders.set('Content-Length', data.size);
-  }
-  let fileName = typeof data === 'string' ? data : data.filename;
-  if (fileName) {
-    console.warn('Depricated');
-    // Make filename RFC5987 compatible
-    fileName = encodeURIComponent(fileName).replace(/['()]/g, escape).replace(/\*/g, '%2A');
-    responseHeaders.set('Content-Disposition', `attachment; filename*=UTF-8''${fileName}`);
-  }
-  event.respondWith(new Response(stream, { headers: responseHeaders }));
-  port.postMessage({ debug: 'Download started' });
-};

packages/ui-default/templates/api.html

@@ -1,43 +1,10 @@
 {% extends "layout/basic.html" %}
 {% block content %}
-<div style="height: 80vh">
-  <div id="toolbar" style="display: inline-flex"></div>
-  <div style="display: flex;align-items: stretch">
-    <div style="width: 30vw">
-      <div id="operation"></div>
-      <div id="variables"></div>
-    </div>
-    <div style="width: 45vw">
-      <div id="results"></div>
-      <div id="schema-sdl"></div>
-    </div>
-    <div>
-      <div id="docs" class="graphiql-container"></div>
-    </div>
-  </div>
-</div>
+<div style="height: 90vh" id="main"></div>
 <style>
-#operation {
-  height: 60vh;
-  min-height: 260px;
-}
-#variables {
-  height: 30vh;
-  align-items: stretch;
-}
-#results {
-  align-items: stretch;
-  height: 60vh;
-}
-#schema-sdl {
-  align-items: stretch;
-  height: 30vh;
-}
-.graphiql-container .doc-explorer-contents {
-  position: relative !important;
-}
-#docs {
+#main {
   font-family: var(--code-font-family)
 }
 </style>
+<link href="/graphiql.min.css" rel="stylesheet" />
 {% endblock %}