Better build flow for GraphiQL (#60)

contra · Sep 23, 2021 · 9d6adb7 · 9d6adb7
1 parent 2a3848f
commit 9d6adb7
Show file tree

Hide file tree

Showing 12 changed files with 1,773 additions and 721 deletions.
diff --git a/.changeset/many-colts-pull.md b/.changeset/many-colts-pull.md
@@ -0,0 +1,5 @@
+---
+"graphql-helix": patch
+---
+
+Improve build flow for GraphiQL
diff --git a/.gitignore b/.gitignore
@@ -7,4 +7,5 @@ node_modules
 !.prettierignore
 !.prettierrc
 !.eslintrc.json
-!.eslintignore
+!.eslintignore
+yarn-error.log
diff --git a/examples/context/schema.ts b/examples/context/schema.ts
@@ -19,7 +19,7 @@ export const schema = new GraphQLSchema({
       logout: {
         type: GraphQLString,
         resolve: async (_root, _args, ctx) => {
-          await new Promise((resolve) => ctx.session.destroy(() => resolve()));
+          await new Promise<void>((resolve) => ctx.session.destroy(() => resolve()));
           return "Logged out!";
         },
       },

diff --git a/package.json b/package.json
@@ -14,7 +14,6 @@
   ],
   "scripts": {
     "lint": "eslint --ext .ts,.tsx .",
-    "publish": "node scripts/publish",
     "update-examples": "node scripts/update-examples",
     "loadtest:start-server": "node ./benchmark/server.js"
   },

diff --git a/...ges/core/scripts/build-render-graphiql.js → ...ages/core/lib/render-graphiql.template.ts b/...ges/core/scripts/build-render-graphiql.js → ...ages/core/lib/render-graphiql.template.ts
@@ -1,27 +1,7 @@
-const { execSync } = require("child_process");
-const { readFileSync, writeFileSync } = require("fs");
-const { resolve } = require("path");
-
-execSync("yarn workspace @graphql-helix/graphiql build", {
-  cwd: resolve(__dirname, "../../.."),
-  stdio: "inherit",
-});
-
-const javascript = readFileSync(
-  resolve(__dirname, "../../graphiql/dist/graphiql.min.js"),
-  "utf8"
-);
-const css = readFileSync(
-  resolve(__dirname, "../../graphiql/dist/graphiql.min.css"),
-  "utf8"
-);
-
-const contents = `import { RenderGraphiQLOptions } from "./types";
+import { RenderGraphiQLOptions } from "./types";
 
 const safeSerialize = (value: any) => {
-  return value != null
-    ? JSON.stringify(value).replace(/\\//g, "\\\\/")
-    : "undefined";
+  return value != null ? JSON.stringify(value).replace(/\//g, "\\/") : "undefined";
 };
 
 export const renderGraphiQL = (options: RenderGraphiQLOptions = {}): string => {
@@ -36,14 +16,11 @@ export const renderGraphiQL = (options: RenderGraphiQLOptions = {}): string => {
     useWebSocketLegacyProtocol,
     hybridSubscriptionTransportConfig,
   } = options;
-  const nonceAttribute = nonce ? \`nonce="\${nonce}"\` : "";
-  const css = ${JSON.stringify(css)};
-  const javascript = ${JSON.stringify(javascript).replace(
-    "</script>",
-    "<\\/script>"
-  )};
+  const nonceAttribute = nonce ? `nonce="${nonce}"` : "";
+  const js = "{JS}"; // Will be replaced by esbuild during build
+  const css = "{CSS}"; // Will be replaced by esbuild during build
 
-  return \`
+  return `
 <!DOCTYPE html>
 <html>
   <head>
@@ -56,34 +33,35 @@ export const renderGraphiQL = (options: RenderGraphiQLOptions = {}): string => {
       rel="icon"
       type="image/svg+xml"
       href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath fill='%23E535AB' d='M57.468 302.66l-14.376-8.3 160.15-277.38 14.376 8.3z'/%3E%3Cpath fill='%23E535AB' d='M39.8 272.2h320.3v16.6H39.8z'/%3E%3Cpath fill='%23E535AB' d='M206.348 374.026l-160.21-92.5 8.3-14.376 160.21 92.5zM345.522 132.947l-160.21-92.5 8.3-14.376 160.21 92.5z'/%3E%3Cpath fill='%23E535AB' d='M54.482 132.883l-8.3-14.375 160.21-92.5 8.3 14.376z'/%3E%3Cpath fill='%23E535AB' d='M342.568 302.663l-160.15-277.38 14.376-8.3 160.15 277.38zM52.5 107.5h16.6v185H52.5z'/%3E%3Cpath fill='%23E535AB' d='M330.9 107.5h16.6v185h-16.6z'/%3E%3Cpath fill='%23E535AB' d='M203.522 367l-7.25-12.558 139.34-80.45 7.25 12.557z'/%3E%3Cpath fill='%23E535AB' d='M369.5 297.9c-9.6 16.7-31 22.4-47.7 12.8-16.7-9.6-22.4-31-12.8-47.7 9.6-16.7 31-22.4 47.7-12.8 16.8 9.7 22.5 31 12.8 47.7M90.9 137c-9.6 16.7-31 22.4-47.7 12.8-16.7-9.6-22.4-31-12.8-47.7 9.6-16.7 31-22.4 47.7-12.8 16.7 9.7 22.4 31 12.8 47.7M30.5 297.9c-9.6-16.7-3.9-38 12.8-47.7 16.7-9.6 38-3.9 47.7 12.8 9.6 16.7 3.9 38-12.8 47.7-16.8 9.6-38.1 3.9-47.7-12.8M309.1 137c-9.6-16.7-3.9-38 12.8-47.7 16.7-9.6 38-3.9 47.7 12.8 9.6 16.7 3.9 38-12.8 47.7-16.7 9.6-38.1 3.9-47.7-12.8M200 395.8c-19.3 0-34.9-15.6-34.9-34.9 0-19.3 15.6-34.9 34.9-34.9 19.3 0 34.9 15.6 34.9 34.9 0 19.2-15.6 34.9-34.9 34.9M200 74c-19.3 0-34.9-15.6-34.9-34.9 0-19.3 15.6-34.9 34.9-34.9 19.3 0 34.9 15.6 34.9 34.9 0 19.3-15.6 34.9-34.9 34.9'/%3E%3C/svg%3E"
-      \${nonceAttribute}
+      ${nonceAttribute}
     />
-    <style \${nonceAttribute}>
+    <style ${nonceAttribute}>
       body {
         height: 100vh;
         margin: 0;
       }
     </style>
-    <style \${nonceAttribute}>\${css}</style>
+    <style ${nonceAttribute}>
+    ${css}
+    </style>
   </head>
   <body>
-    <script \${nonceAttribute}>\${javascript}</script>
-    <script \${nonceAttribute}>
+    <script ${nonceAttribute}>
+      ${js}
+    </script>
+    <script ${nonceAttribute}>
       GraphQLHelixGraphiQL.init({
-        defaultQuery: \${safeSerialize(defaultQuery)},
-        defaultVariableEditorOpen: \${safeSerialize(defaultVariableEditorOpen)},
-        endpoint: \${safeSerialize(endpoint)},
-        headers: \${safeSerialize(headers)},
-        headerEditorEnabled: \${safeSerialize(headerEditorEnabled)},
-        subscriptionsEndpoint: \${safeSerialize(subscriptionsEndpoint)},
-        useWebSocketLegacyProtocol: \${safeSerialize(useWebSocketLegacyProtocol)},
-        hybridSubscriptionTransportConfig: \${safeSerialize(hybridSubscriptionTransportConfig)},
+        defaultQuery: ${safeSerialize(defaultQuery)},
+        defaultVariableEditorOpen: ${safeSerialize(defaultVariableEditorOpen)},
+        endpoint: ${safeSerialize(endpoint)},
+        headers: ${safeSerialize(headers)},
+        headerEditorEnabled: ${safeSerialize(headerEditorEnabled)},
+        subscriptionsEndpoint: ${safeSerialize(subscriptionsEndpoint)},
+        useWebSocketLegacyProtocol: ${safeSerialize(useWebSocketLegacyProtocol)},
+        hybridSubscriptionTransportConfig: ${safeSerialize(hybridSubscriptionTransportConfig)},
       });
     </script>
   </body>
 </html>
-\`;
-};
 `;
-
-writeFileSync(resolve(__dirname, "../lib/render-graphiql.ts"), contents);
+};
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -31,7 +31,7 @@
     "build": "yarn build-render-graphiql && yarn build-deno && yarn run build-node",
     "build-deno": "denoify && del-cli ../deno --force && move-file deno_dist ../deno && cpy ../../README.md ../deno",
     "build-node": "del-cli dist && tsc",
-    "build-render-graphiql": "node scripts/build-render-graphiql",
+    "build-render-graphiql": "cd ../graphiql && yarn run build",
     "test": "jest test/integration.test.ts"
   },
   "devDependencies": {

diff --git a/packages/graphiql/build.js b/packages/graphiql/build.js
@@ -0,0 +1,50 @@
+/* eslint-disable no-console */
+const { build } = require("esbuild");
+const { readFileSync, writeFileSync } = require("fs");
+
+const templateFile = "../core/lib/render-graphiql.template.ts";
+const outputFile = "../core/lib/render-graphiql.ts";
+
+function escapeString(str) {
+  return JSON.stringify(str);
+}
+
+(async function main() {
+  console.info(`Compiling GraphiQL TypeScript...`);
+  const jsBuild = await build({
+    entryPoints: ["src/index.tsx"],
+    bundle: true,
+    globalName: "GraphQLHelixGraphiQL",
+    write: false,
+    target: ["es2018"],
+    minify: true,
+    minifyWhitespace: true,
+    legalComments: "none",
+    define: {
+      "process.env.NODE_ENV": JSON.stringify("production"),
+      "process.env.NODE_DEBUG": "undefined",
+      setImmediate: "setTimeout",
+      global: "window",
+    },
+  });
+
+  console.info(`Compiling GraphiQL CSS...`);
+  const cssBuild = await build({
+    entryPoints: ["src/css/graphiql.css"],
+    bundle: true,
+    write: false,
+    minify: true,
+    legalComments: "none",
+  });
+
+  console.info(`Loading GraphiQL template from ${templateFile}`);
+  const tempalteFile = readFileSync(templateFile, "utf8");
+
+  console.info(`Building GraphiQL static files...`);
+  const output = tempalteFile
+    .replace(`"{CSS}"`, () => escapeString(cssBuild.outputFiles[0].text))
+    .replace(`"{JS}"`, () => escapeString(jsBuild.outputFiles[0].text));
+
+  console.info(`Writing GraphiQL render file to ${templateFile}`);
+  writeFileSync(outputFile, output);
+})();
diff --git a/packages/graphiql/package.json b/packages/graphiql/package.json
@@ -10,29 +10,24 @@
     "dist"
   ],
   "scripts": {
-    "build": "webpack && cpy src/css/graphiql.min.css dist/",
+    "build": "node build.js",
     "lint": "prettier --check ."
   },
   "dependencies": {
     "@graphql-tools/url-loader": "6.10.1",
     "@graphql-tools/utils": "7.10.0",
     "@n1ru4l/graphql-live-query": "0.7.1",
-    "copy-to-clipboard": "^3.3.1",
-    "graphiql": "^1.1.0",
-    "graphql": "15.4.0",
-    "graphql-language-service-interface": "^2.4.3",
-    "prop-types": "15.7.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "copy-to-clipboard": "3.3.1",
+    "graphiql": "1.4.2",
+    "graphql": "15.6.0",
+    "graphql-language-service-interface": "2.8.4",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "@types/react": "16.8.0",
-    "@types/react-dom": "16.8.0",
-    "cpy-cli": "^3.1.1",
-    "terser-webpack-plugin": "5.0.3",
-    "ts-loader": "8.0.11",
-    "typescript": "4.1.2",
-    "webpack": "5.6.0",
-    "webpack-cli": "4.2.0"
+    "esbuild": "0.13.1",
+    "@types/react": "17.0.24",
+    "@types/react-dom": "17.0.9",
+    "typescript": "4.4.3"
   }
 }