diff --git a/packages/graphql-playground-middleware/.gitignore b/packages/graphql-playground-html/.gitignore similarity index 100% rename from packages/graphql-playground-middleware/.gitignore rename to packages/graphql-playground-html/.gitignore diff --git a/packages/graphql-playground-middleware/package.json b/packages/graphql-playground-html/package.json similarity index 91% rename from packages/graphql-playground-middleware/package.json rename to packages/graphql-playground-html/package.json index 9f45163e1..229404752 100644 --- a/packages/graphql-playground-middleware/package.json +++ b/packages/graphql-playground-html/package.json @@ -1,8 +1,8 @@ { - "name": "graphql-playground-middleware", + "name": "graphql-playground-html", "version": "1.2.1-beta.6", "homepage": - "https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-middleware", + "https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-html", "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).", "contributors": [ diff --git a/packages/graphql-playground-html/src/get-loading-markup.ts b/packages/graphql-playground-html/src/get-loading-markup.ts new file mode 100644 index 000000000..7716ea948 --- /dev/null +++ b/packages/graphql-playground-html/src/get-loading-markup.ts @@ -0,0 +1,469 @@ +const getLoadingMarkup = () => ({ + script: ` + const loadingWrapper = document.getElementById('loading-wrapper'); + loadingWrapper.classList.add('fadeOut'); + `, + container: ` + +
+ +
Loading + GraphQL Playground +
+
+`, +}) + +export default getLoadingMarkup diff --git a/packages/graphql-playground-middleware/src/index.ts b/packages/graphql-playground-html/src/index.ts similarity index 100% rename from packages/graphql-playground-middleware/src/index.ts rename to packages/graphql-playground-html/src/index.ts diff --git a/packages/graphql-playground-html/src/render-playground-page.ts b/packages/graphql-playground-html/src/render-playground-page.ts new file mode 100644 index 000000000..18be3502f --- /dev/null +++ b/packages/graphql-playground-html/src/render-playground-page.ts @@ -0,0 +1,120 @@ +import * as path from 'path' +import * as fs from 'fs' +import * as findUp from 'find-up' + +import getLoadingMarkup from './get-loading-markup' + +export interface MiddlewareOptions { + endpoint: string + subscriptionEndpoint?: string + setTitle?: string + folderName?: string +} + +export interface RenderPageOptions extends MiddlewareOptions { + version: string + env?: any +} + +const configPath = findUp.sync(['.graphqlconfig', '.graphqlconfig.yml']) +const configString = configPath + ? fs.readFileSync(configPath, 'utf-8') + : undefined +const folderName = configPath + ? path.basename(path.dirname(configPath)) + : undefined + +const loading = getLoadingMarkup() + +export function renderPlaygroundPage(options: RenderPageOptions) { + const extendedOptions = { + ...options, + configString, + folderName, + canSaveConfig: false, + env: process.env, + } + return ` + + + + + + GraphQL Playground + + + + + + + ${loading.container} +
+ + + +` +} diff --git a/packages/graphql-playground-middleware/tsconfig.json b/packages/graphql-playground-html/tsconfig.json similarity index 100% rename from packages/graphql-playground-middleware/tsconfig.json rename to packages/graphql-playground-html/tsconfig.json diff --git a/packages/graphql-playground-middleware/yarn.lock b/packages/graphql-playground-html/yarn.lock similarity index 100% rename from packages/graphql-playground-middleware/yarn.lock rename to packages/graphql-playground-html/yarn.lock diff --git a/packages/graphql-playground-middleware-express/package.json b/packages/graphql-playground-middleware-express/package.json index 573c8664f..0d6b437cd 100644 --- a/packages/graphql-playground-middleware-express/package.json +++ b/packages/graphql-playground-middleware-express/package.json @@ -31,6 +31,9 @@ "@types/node": "^8.0.47", "typescript": "^2.6.1" }, + "dependencies": { + "graphql-playground-html": "^1.2.0" + }, "typings": "dist/index.d.ts", "typescript": { "definition": "dist/index.d.ts" diff --git a/packages/graphql-playground-middleware-express/src/index.ts b/packages/graphql-playground-middleware-express/src/index.ts index 78cdb3166..50e27840b 100644 --- a/packages/graphql-playground-middleware-express/src/index.ts +++ b/packages/graphql-playground-middleware-express/src/index.ts @@ -3,7 +3,7 @@ import { MiddlewareOptions, RenderPageOptions, renderPlaygroundPage, -} from 'graphql-playground-middleware' +} from 'graphql-playground-html' /* tslint:disable */ const { version } = require('../package.json') diff --git a/packages/graphql-playground-middleware-hapi/src/index.ts b/packages/graphql-playground-middleware-hapi/src/index.ts index d4c0a5004..6e252c5db 100644 --- a/packages/graphql-playground-middleware-hapi/src/index.ts +++ b/packages/graphql-playground-middleware-hapi/src/index.ts @@ -3,7 +3,7 @@ import { MiddlewareOptions, RenderPageOptions, renderPlaygroundPage, -} from 'graphql-playground-middleware' +} from 'graphql-playground-html' // tslint:disable-next-line const pkg = require('../package.json') diff --git a/packages/graphql-playground-middleware-koa/src/index.ts b/packages/graphql-playground-middleware-koa/src/index.ts index ad210d174..de240aaef 100644 --- a/packages/graphql-playground-middleware-koa/src/index.ts +++ b/packages/graphql-playground-middleware-koa/src/index.ts @@ -3,7 +3,7 @@ import { MiddlewareOptions, renderPlaygroundPage, RenderPageOptions, -} from 'graphql-playground-middleware' +} from 'graphql-playground-html' /* tslint:disable-next-line */ const { version } = require('../package.json') diff --git a/packages/graphql-playground-middleware-lambda/src/index.ts b/packages/graphql-playground-middleware-lambda/src/index.ts index bfd0b3486..5f40a6e95 100644 --- a/packages/graphql-playground-middleware-lambda/src/index.ts +++ b/packages/graphql-playground-middleware-lambda/src/index.ts @@ -3,7 +3,7 @@ import { MiddlewareOptions, RenderPageOptions, renderPlaygroundPage, -} from 'graphql-playground-middleware' +} from 'graphql-playground-html' /* tslint:disable-next-line */ const { version } = require('../package.json') diff --git a/packages/graphql-playground-middleware/src/render-playground-page.ts b/packages/graphql-playground-middleware/src/render-playground-page.ts deleted file mode 100644 index 9d63af680..000000000 --- a/packages/graphql-playground-middleware/src/render-playground-page.ts +++ /dev/null @@ -1,96 +0,0 @@ -import * as path from 'path' -import * as fs from 'fs' -import * as findUp from 'find-up' - -export interface MiddlewareOptions { - endpoint: string - subscriptionEndpoint?: string - setTitle?: string - folderName?: string -} - -export interface RenderPageOptions extends MiddlewareOptions { - version: string - env?: any -} - -const configPath = findUp.sync(['.graphqlconfig', '.graphqlconfig.yml']) -const configString = configPath - ? fs.readFileSync(configPath, 'utf-8') - : undefined -const folderName = configPath - ? path.basename(path.dirname(configPath)) - : undefined - -export function renderPlaygroundPage(options: RenderPageOptions) { - const extendedOptions = { - ...options, - configString, - folderName, - canSaveConfig: false, - env: process.env, - } - return ` - - - - - - GraphQL Playground - - - - - -
- - -
- Loading GraphQL Playground -
-
- - - -` -}