@graphql-yoga/render-graphiql

Version:
46 lines (43 loc) • 1.49 kB
JavaScript
const require_graphiql = require('./graphiql.cjs');

//#region src/index.ts
const renderGraphiQL = (opts) => `
  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>${opts?.title || "Yoga GraphiQL"}</title>
      <link rel="icon" href="${opts?.favicon || require_graphiql.favicon}" />
      <style>
        ${require_graphiql.css}
      </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(require_graphiql.editorWorkerService)}),
          json: prepareBlob(${JSON.stringify(require_graphiql.jsonWorker)}),
          graphql: prepareBlob(${JSON.stringify(require_graphiql.graphqlWorker)}),
        };
        self['MonacoEnvironment'] = {
          globalAPI: false,
          getWorkerUrl: function (moduleId, label) {
            return workers[label];
          },
        };
        ${require_graphiql.js};
        YogaGraphiQL.renderYogaGraphiQL(
          window.document.querySelector('#root'),
          ${JSON.stringify(opts ?? {})},
        );
      <\/script>
    </body>
  </html>
`;

//#endregion
exports.renderGraphiQL = renderGraphiQL;