Remove CDN usage (graphql#524)

Better solution planned here: graphql/graphiql#676
junminstorage · Aug 14, 2020 · c7188cc · c7188cc
1 parent 96af8eb
commit c7188cc
Show file tree

Hide file tree

Showing 5 changed files with 277 additions and 13 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: [
+    './resources/load-staticly-from-npm.js',
     '@babel/plugin-transform-flow-strip-types',
     '@babel/plugin-transform-modules-commonjs',
   ],

diff --git a/package.json b/package.json
@@ -68,15 +68,20 @@
     "eslint-plugin-prettier": "3.1.0",
     "express": "4.17.0",
     "flow-bin": "0.102.0",
+    "graphiql": "^0.13.2",
     "graphql": "14.4.1",
     "mocha": "6.1.4",
     "multer": "1.4.1",
     "nyc": "14.1.1",
     "prettier": "1.17.1",
+    "promise-polyfill": "^8.1.3",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "restify": "4.3.2",
     "sane": "4.1.0",
     "sinon": "7.3.2",
-    "supertest": "4.0.2"
+    "supertest": "4.0.2",
+    "unfetch": "^4.1.0"
   },
   "peerDependencies": {
     "graphql": "^14.4.1"

diff --git a/resources/load-staticly-from-npm.js b/resources/load-staticly-from-npm.js
@@ -0,0 +1,37 @@
+// @noflow
+
+'use strict';
+
+const fs = require('fs');
+
+/**
+ * Eliminates function call to `invariant` if the condition is met.
+ *
+ * Transforms:
+ *
+ *  loadStaticlyFromNPM(<npm path>)
+ *
+ * to:
+ *
+ *  "<file content>"
+ */
+module.exports = function inlineInvariant(context) {
+  return {
+    visitor: {
+      CallExpression(path) {
+        const { node } = path;
+
+        if (
+          node.callee.type === 'Identifier' &&
+          node.callee.name === 'loadFileStaticlyFromNPM'
+        ) {
+          const npmPath = node.arguments[0].value;
+          const filePath = require.resolve(npmPath);
+          const content = fs.readFileSync(filePath, 'utf-8');
+
+          path.replaceWith(context.types.stringLiteral(content));
+        }
+      },
+    },
+  };
+};
diff --git a/src/renderGraphiQL.js b/src/renderGraphiQL.js
@@ -17,14 +17,14 @@ export type GraphiQLOptions = {|
   defaultQuery?: ?string,
 |};
 
-// Current latest version of GraphiQL.
-const GRAPHIQL_VERSION = '0.13.0';
-
 // Ensures string values are safe to be used within a <script> tag.
 function safeSerialize(data) {
   return data ? JSON.stringify(data).replace(/\//g, '\\/') : 'undefined';
 }
 
+// Implemented as Babel transformation, see ../resources/load-staticly-from-npm.js
+declare function loadFileStaticlyFromNPM(npmPath: string): string;
+
 /**
  * When express-graphql receives a request which does not Accept JSON, but does
  * Accept HTML, it may present GraphiQL, the in-browser GraphQL explorer IDE.
@@ -68,12 +68,30 @@ add "&raw" to the end of the URL within a browser.
       height: 100vh;
     }
   </style>
-  <link href="//cdn.jsdelivr.net/npm/graphiql@${GRAPHIQL_VERSION}/graphiql.css" rel="stylesheet" />
-  <script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
-  <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
-  <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
-  <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
-  <script src="//cdn.jsdelivr.net/npm/graphiql@${GRAPHIQL_VERSION}/graphiql.min.js"></script>
+  <style>
+    // graphiql/graphiql.css
+    ${loadFileStaticlyFromNPM('graphiql/graphiql.css')}
+  </style>
+  <script>
+    // promise-polyfill/dist/polyfill.min.js
+    ${loadFileStaticlyFromNPM('promise-polyfill/dist/polyfill.min.js')}
+  </script>
+  <script>
+    // unfetch/dist/unfetch.umd.js
+    ${loadFileStaticlyFromNPM('unfetch/dist/unfetch.umd.js')}
+  </script>
+  <script>
+    // react/umd/react.production.min.js
+    ${loadFileStaticlyFromNPM('react/umd/react.production.min.js')}
+  </script>
+  <script>
+    // react-dom/umd/react-dom.production.min.js
+    ${loadFileStaticlyFromNPM('react-dom/umd/react-dom.production.min.js')}
+  </script>
+  <script>
+    // graphiql/graphiql.min.js
+    ${loadFileStaticlyFromNPM('graphiql/graphiql.min.js')}
+  </script>
 </head>
 <body>
   <div id="graphiql">Loading...</div>