@graphql-hive/render-laboratory

Version:
87 lines (82 loc) • 2.62 kB
JavaScript
import { editorWorkerService, favicon, faviconDark, graphqlWorker, js, jsonWorker, typescriptWorker, } from './laboratory.js';
const mapGraphiQLOptionsToLaboratoryProps = (opts) => {
    var _a, _b;
    if (!opts) {
        return { enableDocs: true };
    }
    return {
        enableDocs: true,
        defaultSettings: {
            fetch: {
                credentials: (_a = opts.credentials) !== null && _a !== void 0 ? _a : 'same-origin',
                timeout: opts.timeout,
                useGETForQueries: opts.useGETForQueries,
            },
            subscriptions: {
                protocol: (_b = opts.subscriptionsProtocol) !== null && _b !== void 0 ? _b : 'WS',
            },
            introspection: {
                method: opts.method,
            },
        },
        defaultCollections: opts.defaultCollections,
    };
};
export const renderLaboratory = (opts) => /* HTML */ `
  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>${(opts === null || opts === void 0 ? void 0 : opts.title) || 'Hive Laboratory'}</title>
      <link
        rel="icon"
        type="image/svg+xml"
        media="(prefers-color-scheme: light)"
        href="${favicon}"
      />
      <link
        rel="icon"
        type="image/svg+xml"
        media="(prefers-color-scheme: dark)"
        href="${faviconDark}"
      />
      <style>
        html,
        body,
        #root {
          height: 100%;
        }

        body {
          margin: 0;
        }
      </style>
    </head>
    <body id="body" class="no-focus-outline">
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>

      <script>
        function prepareBlob(workerContent) {
          const blob = new Blob([workerContent], { type: 'application/javascript' });
          return URL.createObjectURL(blob);
        }
        const workers = {
          editorWorkerService: prepareBlob(${JSON.stringify(editorWorkerService)}),
          typescript: prepareBlob(${JSON.stringify(typescriptWorker)}),
          json: prepareBlob(${JSON.stringify(jsonWorker)}),
          graphql: prepareBlob(${JSON.stringify(graphqlWorker)}),
        };
        self['MonacoEnvironment'] = {
          globalAPI: false,
          getWorkerUrl: function (moduleId, label) {
            return workers[label];
          },
        };

        ${js};

        HiveLaboratory.renderLaboratory(
          window.document.querySelector('#root'),
          ${JSON.stringify(mapGraphiQLOptionsToLaboratoryProps(opts))},
        );
      </script>
    </body>
  </html>
`;