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
118
119
|
/*** IMPORT ------------------------------------------- ***/
import { default as dedent } from "@netopwibby/dedent";
import { GRAPHIQL_VERSION } from "./version.ts";
/*** UTILITY ------------------------------------------ ***/
const escapeHtml = (value: string) => value
.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll("\"", """)
.replaceAll("'", "'");
const toScriptString = (value: string) => JSON.stringify(value).replaceAll("<", "\\u003c");
const buildAssetUrl = ({ cdnUrl, suffix, version }: {
cdnUrl?: string;
suffix: string;
version: string;
}) => cdnUrl ?
`${cdnUrl}/@eeeooolll/graphiql@${version}/dist/${suffix}` :
`./_graphiql/${GRAPHIQL_VERSION}/${suffix}`;
/*** EXPORT ------------------------------------------- ***/
export interface RenderPageOptions {
/** Load the bundle from this CDN base (e.g. `//cdn.jsdelivr.net/npm`) instead of the copy embedded in gq. */
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;
/** `@eeeooolll/graphiql` version to load from `cdnUrl`. Defaults to the embedded version; ignored when self-hosting. */
version?: string;
}
/**
* Renders the GraphiQL HTML shell.
*
* Loads the prebuilt IIFE bundle from `@eeeooolll/graphiql` (registered as
* `window.EolGraphiQL`) and mounts it against `endpoint`. The bundle is
* embedded in gq and served by `GraphQLHTTP`; set `cdnUrl` to load it
* from a CDN instead.
*
* 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,
endpoint = "/graphql",
faviconUrl,
title = "GraphiQL",
version = GRAPHIQL_VERSION
} = options;
const scriptUrl = escapeHtml(buildAssetUrl({ cdnUrl, suffix: "standalone.js", version }));
const styleUrl = escapeHtml(buildAssetUrl({ cdnUrl, suffix: "standalone.css", version }));
const faviconLink = faviconUrl === null ?
"" :
`<link rel="shortcut icon" href="${escapeHtml(faviconUrl ?? 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>${escapeHtml(title)}</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: ${toScriptString(endpoint)} });
window.EolGraphiQL.mount(root, { fetcher });
});
</script>
</body>
</html>
`;
}
|