Skip to content
This repository was archived by the owner on Mar 20, 2023. It is now read-only.

Commit 7949942

Browse files
IvanGoncharovIvanGoncharov
authored
Remove CDN usage (#524)
Better solution planned here: graphql/graphiql#676
1 parent a56d694 commit 7949942

File tree

5 files changed

+277
-13
lines changed

5 files changed

+277
-13
lines changed

‎.babelrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
module.exports = {
22
plugins: [
3+
'./resources/load-staticly-from-npm.js',
34
'@babel/plugin-transform-flow-strip-types',
45
'@babel/plugin-transform-modules-commonjs',
56
],

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,20 @@
6868
"eslint-plugin-prettier": "3.1.0",
6969
"express": "4.17.0",
7070
"flow-bin": "0.102.0",
71+
"graphiql": "^0.13.2",
7172
"graphql": "14.4.1",
7273
"mocha": "6.1.4",
7374
"multer": "1.4.1",
7475
"nyc": "14.1.1",
7576
"prettier": "1.17.1",
77+
"promise-polyfill": "^8.1.3",
78+
"react": "^16.8.6",
79+
"react-dom": "^16.8.6",
7680
"restify": "4.3.2",
7781
"sane": "4.1.0",
7882
"sinon": "7.3.2",
79-
"supertest": "4.0.2"
83+
"supertest": "4.0.2",
84+
"unfetch": "^4.1.0"
8085
},
8186
"peerDependencies": {
8287
"graphql": "^14.4.1"

‎resources/load-staticly-from-npm.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// @noflow
2+
3+
'use strict';
4+
5+
const fs = require('fs');
6+
7+
/**
8+
* Eliminates function call to `invariant` if the condition is met.
9+
*
10+
* Transforms:
11+
*
12+
* loadStaticlyFromNPM(<npm path>)
13+
*
14+
* to:
15+
*
16+
* "<file content>"
17+
*/
18+
module.exports = function inlineInvariant(context) {
19+
return {
20+
visitor: {
21+
CallExpression(path) {
22+
const { node } = path;
23+
24+
if (
25+
node.callee.type === 'Identifier' &&
26+
node.callee.name === 'loadFileStaticlyFromNPM'
27+
) {
28+
const npmPath = node.arguments[0].value;
29+
const filePath = require.resolve(npmPath);
30+
const content = fs.readFileSync(filePath, 'utf-8');
31+
32+
path.replaceWith(context.types.stringLiteral(content));
33+
}
34+
},
35+
},
36+
};
37+
};

‎src/renderGraphiQL.js‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ export type GraphiQLOptions = {|
1717
defaultQuery?: ?string,
1818
|};
1919

20-
// Current latest version of GraphiQL.
21-
const GRAPHIQL_VERSION = '0.13.0';
22-
2320
// Ensures string values are safe to be used within a <script> tag.
2421
function safeSerialize(data) {
2522
return data ? JSON.stringify(data).replace(/\//g, '\\/') : 'undefined';
2623
}
2724

25+
// Implemented as Babel transformation, see ../resources/load-staticly-from-npm.js
26+
declare function loadFileStaticlyFromNPM(npmPath: string): string;
27+
2828
/**
2929
* When express-graphql receives a request which does not Accept JSON, but does
3030
* 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.
6868
height: 100vh;
6969
}
7070
</style>
71-
<link href="//cdn.jsdelivr.net/npm/graphiql@${GRAPHIQL_VERSION}/graphiql.css" rel="stylesheet" />
72-
<script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
73-
<script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
74-
<script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
75-
<script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
76-
<script src="//cdn.jsdelivr.net/npm/graphiql@${GRAPHIQL_VERSION}/graphiql.min.js"></script>
71+
<style>
72+
// graphiql/graphiql.css
73+
${loadFileStaticlyFromNPM('graphiql/graphiql.css')}
74+
</style>
75+
<script>
76+
// promise-polyfill/dist/polyfill.min.js
77+
${loadFileStaticlyFromNPM('promise-polyfill/dist/polyfill.min.js')}
78+
</script>
79+
<script>
80+
// unfetch/dist/unfetch.umd.js
81+
${loadFileStaticlyFromNPM('unfetch/dist/unfetch.umd.js')}
82+
</script>
83+
<script>
84+
// react/umd/react.production.min.js
85+
${loadFileStaticlyFromNPM('react/umd/react.production.min.js')}
86+
</script>
87+
<script>
88+
// react-dom/umd/react-dom.production.min.js
89+
${loadFileStaticlyFromNPM('react-dom/umd/react-dom.production.min.js')}
90+
</script>
91+
<script>
92+
// graphiql/graphiql.min.js
93+
${loadFileStaticlyFromNPM('graphiql/graphiql.min.js')}
94+
</script>
7795
</head>
7896
<body>
7997
<div id="graphiql">Loading...</div>

0 commit comments

Comments
 (0)