chore(dev): Better local development, added localDev entry point

Author: timsuchanek

packages/graphql-playground-middleware-express/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-playground-middleware-express",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "homepage": "https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-middleware-express",
   "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).",
   "contributors": [
@@ -14,7 +14,7 @@
   "files": [
     "dist"
   ],
-  "playgroundVersion": "1.3.22",
+  "playgroundVersion": "1.3.23",
   "scripts": {
     "build": "rimraf dist && tsc",
     "prepare": "npm run build"

packages/graphql-playground-react/README.md

@@ -41,51 +41,60 @@ You can easily share your Playgrounds with others by clicking on the "Share" but
 
 > You can also find the announcement blog post [here](https://blog.graph.cool/introducing-graphql-playground-f1e0a018f05d).
 
-
 ## Usage
 
 ### Properties
+
 All interfaces, the React component `<Playground />` and all middlewares expose the same set of options:
 
-+ `properties`
-  + `endpoint` [`string`] - the GraphQL endpoint url.
-  + `subscriptionEndpoint` [`string`] - the GraphQL subscriptions endpoint url.
-  + `setTitle` [`boolean`] - reflect the current endpoint in the page title
+* `properties`
+  * `endpoint` [`string`] - the GraphQL endpoint url.
+  * `subscriptionEndpoint` [`string`] - the GraphQL subscriptions endpoint url.
+  * `setTitle` [`boolean`] - reflect the current endpoint in the page title
 
 ### As React Component
 
 #### Install
+
 ```sh
 yarn add graphql-playground
 ```
 
 #### Use
+
 GraphQL Playground provides a React component responsible for rendering the UI and Session management.
 There are **3 dependencies** needed in order to run the `graphql-playground` React component.
+
 1. _Open Sans_ and _Source Code Pro_ fonts
 2. Including `graphql-playground/playground.css`
 3. Rendering the `<Playground />` component
 
 The GraphQL Playground requires **React 16**.
 
 Including Fonts (`1.`)
+
 ```html
 <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Source+Code+Pro:400,700" rel="stylesheet">
 ```
 
 Including stylesheet and the component (`2., 3.`)
+
 ```js
 import React from 'react'
 import ReactDOM from 'react-dom'
 import Playground from 'graphql-playground'
 import 'graphql-playground/playground.css'
 
-ReactDOM.render(<Playground endpoint="https://api.graph.cool/simple/v1/swapi" />, document.body)
+ReactDOM.render(
+  <Playground endpoint="https://api.graph.cool/simple/v1/swapi" />,
+  document.body,
+)
 ```
 
 ### As Server Middleware
 
 #### Install
+
 ```sh
 # Pick the one that matches your server framework
 yarn add graphql-playground-middleware-express  # for Express or Connect
@@ -98,21 +107,24 @@ yarn add graphql-playground-middleware-lambda
 
 We have a full example for each of the frameworks below:
 
-- **Express:** See [packages/graphql-playground-middleware-express/examples/basic](https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-middleware-express/examples/basic)
+* **Express:** See [packages/graphql-playground-middleware-express/examples/basic](https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-middleware-express/examples/basic)
 
-- **Hapi:** See [packages/graphql-playground-middleware/examples/hapi](https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-middleware/examples/hapi)
+* **Hapi:** See [packages/graphql-playground-middleware/examples/hapi](https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-middleware/examples/hapi)
 
-- **Koa:** See [packages/graphql-playground-middleware/examples/koa](https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-middleware/examples/koa)
+* **Koa:** See [packages/graphql-playground-middleware/examples/koa](https://github.com/graphcool/graphql-playground/tree/master/packages/graphql-playground-middleware/examples/koa)
 
-- **Lambda (as serverless handler):** See [serverless-graphql-apollo](https://github.com/serverless/serverless-graphql-apollo) or a quick example below.
+* **Lambda (as serverless handler):** See [serverless-graphql-apollo](https://github.com/serverless/serverless-graphql-apollo) or a quick example below.
 
 ### As serverless handler
+
 #### Install
+
 ```sh
 yarn add graphql-playground-middleware-lambda
 ```
 
 #### Usage
+
 `handler.js`
 
 ```js
@@ -123,17 +135,17 @@ import lambdaPlayground from 'graphql-playground-middleware-lambda'
 exports.graphqlHandler = function graphqlHandler(event, context, callback) {
   function callbackFilter(error, output) {
     // eslint-disable-next-line no-param-reassign
-    output.headers['Access-Control-Allow-Origin'] = '*';
-    callback(error, output);
+    output.headers['Access-Control-Allow-Origin'] = '*'
+    callback(error, output)
   }
 
-  const handler = graphqlLambda({ schema: myGraphQLSchema });
-  return handler(event, context, callbackFilter);
-};
+  const handler = graphqlLambda({ schema: myGraphQLSchema })
+  return handler(event, context, callbackFilter)
+}
 
 exports.playgroundHandler = lambdaPlayground({
   endpoint: '/dev/graphql',
-});
+})
 ```
 
 `serverless.yml`
@@ -165,9 +177,9 @@ $ cd packages/graphql-playground
 $ yarn
 $ yarn start
 ```
-Open
-[localhost:3000/middleware.html?endpoint=https://api.graph.cool/simple/v1/swapi](http://localhost:3000/middleware.html?endpoint=https://api.graph.cool/simple/v1/swapi) for local development!
 
+Open
+[localhost:3000/localDev.html?endpoint=https://api.graph.cool/simple/v1/swapi](http://localhost:3000/localDev.html?endpoint=https://api.graph.cool/simple/v1/swapi) for local development!
 
 <a name="help-and-community" />
 

packages/graphql-playground-react/config/paths.js

@@ -1,29 +1,29 @@
-'use strict';
+'use strict'
 
-const path = require('path');
-const fs = require('fs');
-const url = require('url');
+const path = require('path')
+const fs = require('fs')
+const url = require('url')
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebookincubator/create-react-app/issues/637
-const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+const appDirectory = fs.realpathSync(process.cwd())
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath)
 
-const envPublicUrl = process.env.PUBLIC_URL;
+const envPublicUrl = process.env.PUBLIC_URL
 
 function ensureSlash(path, needsSlash) {
-  const hasSlash = path.endsWith('/');
+  const hasSlash = path.endsWith('/')
   if (hasSlash && !needsSlash) {
-    return path.substr(path, path.length - 1);
+    return path.substr(path, path.length - 1)
   } else if (!hasSlash && needsSlash) {
-    return `${path}/`;
+    return `${path}/`
   } else {
-    return path;
+    return path
   }
 }
 
 const getPublicUrl = appPackageJson =>
-  envPublicUrl || require(appPackageJson).homepage;
+  envPublicUrl || require(appPackageJson).homepage
 
 // We use `PUBLIC_URL` environment variable or "homepage" field to infer
 // "public path" at which the app is served.
@@ -32,10 +32,10 @@ const getPublicUrl = appPackageJson =>
 // We can't use a relative path in HTML because we don't want to load something
 // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
 function getServedPath(appPackageJson) {
-  const publicUrl = getPublicUrl(appPackageJson);
+  const publicUrl = getPublicUrl(appPackageJson)
   const servedUrl =
-    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
-  return ensureSlash(servedUrl, true);
+    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/')
+  return ensureSlash(servedUrl, true)
 }
 
 // config after eject: we're in ./config/
@@ -46,6 +46,7 @@ module.exports = {
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveApp('src/index.tsx'),
   middlewareIndexJs: resolveApp('src/middlewareIndex.tsx'),
+  localDevIndexJs: resolveApp('src/localDevIndex.tsx'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   yarnLockFile: resolveApp('yarn.lock'),
@@ -54,4 +55,4 @@ module.exports = {
   appTsConfig: resolveApp('tsconfig.json'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
   servedPath: getServedPath(resolveApp('package.json')),
-};
+}

packages/graphql-playground-react/config/webpack.config.dev.js

@@ -42,6 +42,11 @@ module.exports = {
       require.resolve('react-dev-utils/webpackHotDevClient'),
       paths.middlewareIndexJs,
     ],
+    localDev: [
+      require.resolve('./polyfills'),
+      require.resolve('react-dev-utils/webpackHotDevClient'),
+      paths.localDevIndexJs,
+    ],
   },
   output: {
     // Next line is not used in dev but WebpackDevServer crashes without it:
@@ -218,15 +223,21 @@ module.exports = {
     // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,
-      chunks: ["index"],
+      chunks: ['index'],
       template: paths.appHtml,
     }),
     new HtmlWebpackPlugin({
       inject: true,
-      chunks: ["middleware"],
+      chunks: ['middleware'],
       template: paths.appHtml,
       filename: 'middleware.html',
     }),
+    new HtmlWebpackPlugin({
+      inject: true,
+      chunks: ['localDev'],
+      template: paths.appHtml,
+      filename: 'localDev.html',
+    }),
     // Add module names to factory functions so they appear in browser profiler.
     new webpack.NamedModulesPlugin(),
     // Makes some environment variables available to the JS code, for example:

packages/graphql-playground-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-playground-react",
-  "version": "1.3.22",
+  "version": "1.3.23",
   "main": "./lib/lib.js",
   "typings": "./lib/lib.d.ts",
   "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).",

packages/graphql-playground-react/src/localDevIndex.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import MiddlewareApp from './components/MiddlewareApp'
+import './styles/graphiql_dark.css'
+import './styles/graphiql_light.css'
+import './index.css'
+import 'graphcool-styles/dist/styles.css'
+
+if (process.env.NODE_ENV !== 'production') {
+  /* tslint:disable-next-line */
+  // const { whyDidYouUpdate } = require('why-did-you-update')
+  // whyDidYouUpdate(React)
+}
+
+/* tslint:disable-next-line */
+;(window as any)['GraphQLPlayground'] = {
+  init(element: HTMLElement, options) {
+    ReactDOM.render(
+      <MiddlewareApp
+        setTitle={true}
+        showNewWorkspace={false}
+        {...options}
+      />,
+      element,
+    )
+  },
+}

packages/graphql-playground-react/src/middlewareIndex.tsx

@@ -19,38 +19,9 @@ if (process.env.NODE_ENV !== 'production') {
       <MiddlewareApp
         setTitle={true}
         showNewWorkspace={false}
-        config={config}
         {...options}
       />,
       element,
     )
   },
 }
-
-const config = {
-  projects: {
-    app: {
-      schemaPath: 'src/schema.graphql',
-      extensions: {
-        endpoints: {
-          default: 'http://localhost:5000',
-        },
-      },
-    },
-    database: {
-      schemaPath: 'src/generated/database.graphql',
-      extensions: {
-        graphcool: 'graphcool.yml',
-        endpoints: {
-          dev: {
-            url: 'http://localhost:60000/nilan/dev',
-            headers: {
-              Authorization:
-                'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InNlcnZpY2UiOiJuaWxhbkBkZXYiLCJyb2xlcyI6WyJhZG1pbiJdfSwiaWF0IjoxNTE1MTQ1NzI1LCJleHAiOjE1MTU3NTA1MjV9.PP3HPmxqDTS3AM_7J4IjBvWAqhbK9m3Awe4padHLxRs',
-            },
-          },
-        },
-      },
-    },
-  },
-}