1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
/*** IMPORT ------------------------------------------- ***/
import { default as dedent } from "@netopwibby/dedent";
import { filterXSS } from "xss";
/*** UTILITY ------------------------------------------ ***/
const filter = (val: string) => filterXSS(val, {
stripIgnoreTag: true,
stripIgnoreTagBody: ["script"],
whiteList: {}
});
const buildAssetUrl = ({ cdnUrl, suffix, version }: {
cdnUrl: string
suffix: string
version?: string
}) => filter(`${cdnUrl}/@eeeooolll/graphiql${version ? `@${version}` : ""}/dist/${suffix}`);
/*** EXPORT ------------------------------------------- ***/
export interface RenderPageOptions {
/** Base CDN. Defaults to jsDelivr. */
cdnUrl?: string;
/** GraphQL endpoint the embedded fetcher posts to. */
endpoint?: string;
/** Optional `<link rel="shortcut icon">`. `null` skips, `undefined` falls back to default. */
faviconUrl?: string | null;
/** Document `<title>`. */
title?: string;
/** Pin `@eeeooolll/graphiql` to a specific version on the CDN. */
version?: string;
}
/**
* Renders the GraphiQL HTML shell.
*
* Loads the prebuilt IIFE bundle from `@eeeooolll/graphiql` (registered as
* `window.EolGraphiQL`) and mounts it against `endpoint`.
*
* Usually called indirectly via `GraphQLHTTP({ graphiql: true })`; invoke it
* directly if you need to embed GraphiQL in a custom route.
*/
export function renderPlaygroundPage(options: RenderPageOptions): string {
const {
cdnUrl = "//cdn.jsdelivr.net/npm",
endpoint = "/graphql",
faviconUrl,
title = "GraphiQL",
version
} = options;
const safeEndpoint = filter(endpoint);
const safeTitle = filter(title);
const scriptUrl = buildAssetUrl({ cdnUrl, suffix: "standalone.js", version });
const styleUrl = buildAssetUrl({ cdnUrl, suffix: "standalone.css", version });
const faviconLink =
faviconUrl === null ?
"" :
typeof faviconUrl === "string" ?
`<link rel="shortcut icon" href="${filter(faviconUrl)}"/>` :
`<link rel="shortcut icon" href="${buildAssetUrl({ cdnUrl, suffix: "favicon.svg", version })}"/>`;
return dedent`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>${safeTitle}</title>
${faviconLink}
<link rel="stylesheet" href="${styleUrl}"/>
<style>
*,
*::before,
*::after {
margin: 0; padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
#root {
height: 100vh;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="${scriptUrl}"></script>
<script>
window.addEventListener("load", () => {
const root = document.getElementById("root");
const fetcher = window.EolGraphiQL.createHttpFetcher({ url: "${safeEndpoint}" });
window.EolGraphiQL.mount(root, { fetcher });
});
</script>
</body>
</html>
`;
}
|