UNPKG

5.39 kBJavaScriptView Raw
1"use strict";
2var __assign = (this && this.__assign) || function () {
3 __assign = Object.assign || function(t) {
4 for (var s, i = 1, n = arguments.length; i < n; i++) {
5 s = arguments[i];
6 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7 t[p] = s[p];
8 }
9 return t;
10 };
11 return __assign.apply(this, arguments);
12};
13Object.defineProperty(exports, "__esModule", { value: true });
14var xss_1 = require("xss");
15var get_loading_markup_1 = require("./get-loading-markup");
16var filter = function (val) {
17 return xss_1.filterXSS(val, {
18 // @ts-ignore
19 whiteList: [],
20 stripIgnoreTag: true,
21 stripIgnoreTagBody: ["script"]
22 });
23};
24var loading = get_loading_markup_1.default();
25var CONFIG_ID = 'playground-config';
26var getCdnMarkup = function (_a) {
27 var version = _a.version, _b = _a.cdnUrl, cdnUrl = _b === void 0 ? '//cdn.jsdelivr.net/npm' : _b, faviconUrl = _a.faviconUrl;
28 var buildCDNUrl = function (packageName, suffix) { return filter(cdnUrl + "/" + packageName + (version ? "@" + version : '') + "/" + suffix || ''); };
29 return "\n <link \n rel=\"stylesheet\" \n href=\"" + buildCDNUrl('graphql-playground-react', 'build/static/css/index.css') + "\"\n />\n " + (typeof faviconUrl === 'string' ? "<link rel=\"shortcut icon\" href=\"" + filter(faviconUrl || '') + "\" />" : '') + "\n " + (faviconUrl === undefined ? "<link rel=\"shortcut icon\" href=\"" + buildCDNUrl('graphql-playground-react', 'build/favicon.png') + "\" />" : '') + "\n <script \n src=\"" + buildCDNUrl('graphql-playground-react', 'build/static/js/middleware.js') + "\"\n ></script>\n";
30};
31var renderConfig = function (config) {
32 return xss_1.filterXSS("<div id=\"" + CONFIG_ID + "\">" + JSON.stringify(config) + "</div>", {
33 whiteList: { div: ['id'] },
34 });
35};
36function renderPlaygroundPage(options) {
37 var extendedOptions = __assign(__assign({}, options), { canSaveConfig: false });
38 // for compatibility
39 if (options.subscriptionsEndpoint) {
40 extendedOptions.subscriptionEndpoint = filter(options.subscriptionsEndpoint || '');
41 }
42 if (options.config) {
43 extendedOptions.configString = JSON.stringify(options.config, null, 2);
44 }
45 if (!extendedOptions.endpoint && !extendedOptions.configString) {
46 /* tslint:disable-next-line */
47 console.warn("WARNING: You didn't provide an endpoint and don't have a .graphqlconfig. Make sure you have at least one of them.");
48 }
49 else if (extendedOptions.endpoint) {
50 extendedOptions.endpoint = filter(extendedOptions.endpoint || '');
51 }
52 return "\n <!DOCTYPE html>\n <html>\n <head>\n <meta charset=utf-8 />\n <meta name=\"viewport\" content=\"user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui\">\n <link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Source+Code+Pro:400,700\" rel=\"stylesheet\">\n <title>" + (extendedOptions.title || 'GraphQL Playground') + "</title>\n " + (extendedOptions.env === 'react' || extendedOptions.env === 'electron'
53 ? ''
54 : getCdnMarkup(extendedOptions)) + "\n </head>\n <body>\n <style type=\"text/css\">\n html {\n font-family: \"Open Sans\", sans-serif;\n overflow: hidden;\n }\n \n body {\n margin: 0;\n background: #172a3a;\n }\n\n #" + CONFIG_ID + " {\n display: none;\n }\n \n .playgroundIn {\n -webkit-animation: playgroundIn 0.5s ease-out forwards;\n animation: playgroundIn 0.5s ease-out forwards;\n }\n \n @-webkit-keyframes playgroundIn {\n from {\n opacity: 0;\n -webkit-transform: translateY(10px);\n -ms-transform: translateY(10px);\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n }\n \n @keyframes playgroundIn {\n from {\n opacity: 0;\n -webkit-transform: translateY(10px);\n -ms-transform: translateY(10px);\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n }\n </style>\n " + loading.container + "\n " + renderConfig(extendedOptions) + "\n <div id=\"root\" />\n <script type=\"text/javascript\">\n window.addEventListener('load', function (event) {\n " + loading.script + "\n \n const root = document.getElementById('root');\n root.classList.add('playgroundIn');\n const configText = document.getElementById('" + CONFIG_ID + "').innerText;\n \n if(configText && configText.length) {\n try {\n GraphQLPlayground.init(root, JSON.parse(configText));\n }\n catch(err) {\n console.error(\"could not find config\")\n }\n }\n else {\n GraphQLPlayground.init(root);\n }\n })\n </script>\n </body>\n </html>\n";
55}
56exports.renderPlaygroundPage = renderPlaygroundPage;
57//# sourceMappingURL=render-playground-page.js.map
\No newline at end of file