Skip to content

Commit fec8f5e

Browse files
xavxyzxavxyz
committed
refactor(graphql-playground-html): merge the middleware package and the html package 👌
1 parent c082c07 commit fec8f5e

File tree

15 files changed

+163
-308
lines changed

15 files changed

+163
-308
lines changed

‎packages/graphql-playground-html/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "graphql-playground-html",
3-
"version": "1.2.0",
3+
"version": "1.2.1-beta.6",
44
"homepage":
55
"https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-html",
66
"description":
@@ -26,5 +26,8 @@
2626
"typings": "dist/index.d.ts",
2727
"typescript": {
2828
"definition": "dist/index.d.ts"
29+
},
30+
"dependencies": {
31+
"find-up": "^2.1.0"
2932
}
3033
}

‎packages/graphql-playground-html/src/render-loading.ts renamed to ‎packages/graphql-playground-html/src/get-loading-markup.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default () => ({
1+
const getLoadingMarkup = () => ({
22
script: `
33
const loadingWrapper = document.getElementById('loading-wrapper');
44
loadingWrapper.classList.add('fadeOut');
@@ -465,3 +465,5 @@ export default () => ({
465465
</div>
466466
`,
467467
})
468+
469+
export default getLoadingMarkup

‎packages/graphql-playground-html/src/index.ts

Lines changed: 5 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,5 @@
1-
import renderLoading from './render-loading'
2-
3-
export interface MiddlewareOptions {
4-
endpoint: string
5-
subscriptionEndpoint?: string
6-
version: string
7-
isLocal: boolean
8-
}
9-
10-
export default function renderPlaygroundPage(options: MiddlewareOptions) {
11-
const loading = renderLoading()
12-
13-
return `
14-
<!DOCTYPE html>
15-
<html>
16-
17-
<head>
18-
<meta charset=utf-8 />
19-
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
20-
<title>GraphQL Playground</title>
21-
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground@${
22-
options.version
23-
}/build/static/css/index.css"
24-
/>
25-
<link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground@${
26-
options.version
27-
}/build/favicon.png" />
28-
<script src="//cdn.jsdelivr.net/npm/graphql-playground@${
29-
options.version
30-
}/build/static/js/middleware.js"></script>
31-
</head>
32-
33-
<body>
34-
<style type="text/css">
35-
html {
36-
font-family: "Open Sans", sans-serif;
37-
overflow: hidden;
38-
}
39-
40-
body {
41-
margin: 0;
42-
background: #172a3a;
43-
}
44-
45-
.playgroundIn {
46-
-webkit-animation: playgroundIn 0.5s ease-out forwards;
47-
animation: playgroundIn 0.5s ease-out forwards;
48-
}
49-
50-
@-webkit-keyframes playgroundIn {
51-
from {
52-
opacity: 0;
53-
-webkit-transform: translateY(10px);
54-
-ms-transform: translateY(10px);
55-
transform: translateY(10px);
56-
}
57-
to {
58-
opacity: 1;
59-
-webkit-transform: translateY(0);
60-
-ms-transform: translateY(0);
61-
transform: translateY(0);
62-
}
63-
}
64-
65-
@keyframes playgroundIn {
66-
from {
67-
opacity: 0;
68-
-webkit-transform: translateY(10px);
69-
-ms-transform: translateY(10px);
70-
transform: translateY(10px);
71-
}
72-
to {
73-
opacity: 1;
74-
-webkit-transform: translateY(0);
75-
-ms-transform: translateY(0);
76-
transform: translateY(0);
77-
}
78-
}
79-
</style>
80-
${options.isLocal ? '' : loading.container}
81-
<div id="root" />
82-
<script type="text/javascript">
83-
window.addEventListener('load', function (event) {
84-
${options.isLocal ? '' : loading.script}
85-
86-
const root = document.getElementById('root');
87-
root.classList.add('playgroundIn');
88-
89-
GraphQLPlayground.init(root, ${JSON.stringify(options, null, 2)})
90-
})
91-
</script>
92-
</body>
93-
94-
</html>`
95-
}
1+
export {
2+
renderPlaygroundPage,
3+
MiddlewareOptions,
4+
RenderPageOptions,
5+
} from './render-playground-page'

‎packages/graphql-playground-html/src/render-playground-page.ts

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import * as path from 'path'
2+
import * as fs from 'fs'
3+
import * as findUp from 'find-up'
4+
5+
import getLoadingMarkup from './get-loading-markup'
6+
7+
export interface MiddlewareOptions {
8+
endpoint: string
9+
subscriptionEndpoint?: string
10+
setTitle?: string
11+
folderName?: string
12+
}
13+
14+
export interface RenderPageOptions extends MiddlewareOptions {
15+
version: string
16+
env?: any
17+
}
18+
19+
const configPath = findUp.sync(['.graphqlconfig', '.graphqlconfig.yml'])
20+
const configString = configPath
21+
? fs.readFileSync(configPath, 'utf-8')
22+
: undefined
23+
const folderName = configPath
24+
? path.basename(path.dirname(configPath))
25+
: undefined
26+
27+
const loading = getLoadingMarkup()
28+
29+
export function renderPlaygroundPage(options: RenderPageOptions) {
30+
const extendedOptions = {
31+
...options,
32+
configString,
33+
folderName,
34+
canSaveConfig: false,
35+
env: process.env,
36+
}
37+
return `
38+
<!DOCTYPE html>
39+
<html>
40+
<head>
41+
<meta charset=utf-8 />
42+
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
43+
<title>GraphQL Playground</title>
44+
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground@${
45+
options.version
46+
}/build/static/css/index.css" />
47+
<link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground@${
48+
options.version
49+
}/build/favicon.png" />
50+
<script src="//cdn.jsdelivr.net/npm/graphql-playground@${
51+
options.version
52+
}/build/static/js/middleware.js"></script>
53+
</head>
54+
<body>
55+
<style type="text/css">
56+
html {
57+
font-family: "Open Sans", sans-serif;
58+
overflow: hidden;
59+
}
60+
61+
body {
62+
margin: 0;
63+
background: #172a3a;
64+
}
65+
66+
.playgroundIn {
67+
-webkit-animation: playgroundIn 0.5s ease-out forwards;
68+
animation: playgroundIn 0.5s ease-out forwards;
69+
}
70+
71+
@-webkit-keyframes playgroundIn {
72+
from {
73+
opacity: 0;
74+
-webkit-transform: translateY(10px);
75+
-ms-transform: translateY(10px);
76+
transform: translateY(10px);
77+
}
78+
to {
79+
opacity: 1;
80+
-webkit-transform: translateY(0);
81+
-ms-transform: translateY(0);
82+
transform: translateY(0);
83+
}
84+
}
85+
86+
@keyframes playgroundIn {
87+
from {
88+
opacity: 0;
89+
-webkit-transform: translateY(10px);
90+
-ms-transform: translateY(10px);
91+
transform: translateY(10px);
92+
}
93+
to {
94+
opacity: 1;
95+
-webkit-transform: translateY(0);
96+
-ms-transform: translateY(0);
97+
transform: translateY(0);
98+
}
99+
}
100+
</style>
101+
${loading.container}
102+
<div id="root" />
103+
<script type="text/javascript">
104+
window.addEventListener('load', function (event) {
105+
${loading.script}
106+
107+
const root = document.getElementById('root');
108+
root.classList.add('playgroundIn');
109+
110+
GraphQLPlayground.init(root, ${JSON.stringify(
111+
extendedOptions,
112+
null,
113+
2,
114+
)})
115+
})
116+
</script>
117+
</body>
118+
</html>
119+
`
120+
}

‎packages/graphql-playground-html/yarn.lock

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,33 @@
66
version "8.0.53"
77
resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.53.tgz#396b35af826fa66aad472c8cb7b8d5e277f4e6d8"
88

9+
find-up@^2.1.0:
10+
version "2.1.0"
11+
resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
12+
dependencies:
13+
locate-path "^2.0.0"
14+
15+
locate-path@^2.0.0:
16+
version "2.0.0"
17+
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
18+
dependencies:
19+
p-locate "^2.0.0"
20+
path-exists "^3.0.0"
21+
22+
p-limit@^1.1.0:
23+
version "1.1.0"
24+
resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
25+
26+
p-locate@^2.0.0:
27+
version "2.0.0"
28+
resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
29+
dependencies:
30+
p-limit "^1.1.0"
31+
32+
path-exists@^3.0.0:
33+
version "3.0.0"
34+
resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
35+
936
typescript@^2.6.1:
1037
version "2.6.2"
1138
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"

‎packages/graphql-playground-middleware-express/src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
MiddlewareOptions,
44
RenderPageOptions,
55
renderPlaygroundPage,
6-
} from 'graphql-playground-middleware'
6+
} from 'graphql-playground-html'
77

88
/* tslint:disable */
99
const { version } = require('../package.json')

‎packages/graphql-playground-middleware-hapi/src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
MiddlewareOptions,
44
RenderPageOptions,
55
renderPlaygroundPage,
6-
} from 'graphql-playground-middleware'
6+
} from 'graphql-playground-html'
77

88
// tslint:disable-next-line
99
const pkg = require('../package.json')

‎packages/graphql-playground-middleware-koa/src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
MiddlewareOptions,
44
renderPlaygroundPage,
55
RenderPageOptions,
6-
} from 'graphql-playground-middleware'
6+
} from 'graphql-playground-html'
77

88
/* tslint:disable-next-line */
99
const { version } = require('../package.json')

‎packages/graphql-playground-middleware-lambda/src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
MiddlewareOptions,
44
RenderPageOptions,
55
renderPlaygroundPage,
6-
} from 'graphql-playground-middleware'
6+
} from 'graphql-playground-html'
77

88
/* tslint:disable-next-line */
99
const { version } = require('../package.json')

‎packages/graphql-playground-middleware/.gitignore

Lines changed: 0 additions & 18 deletions
This file was deleted.

0 commit comments

Comments
 (0)