Merge branch 'master' of github.com:spotify/backstage into blam/scaffolder

* 'master' of github.com:spotify/backstage:
  packages/cli: added jest transform for .esm.js files
  plugins/graphiql: use dynamic import to load graphiql
  packages/cli: target modern browsers and switch output to module
  packages/storybook: make local core imports resolve to core src
  packages/storybook: use ts-loader for JS too

plugins/graphiql/package.json

@@ -16,7 +16,7 @@
     "backstage"
   ],
   "license": "Apache-2.0",
-  "main": "dist/index.cjs.js",
+  "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "backstage-cli plugin:build",

plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx

@@ -14,14 +14,16 @@
  * limitations under the License.
  */
 
-import React, { FC, useState } from 'react';
+import React, { FC, useState, Suspense } from 'react';
 import { Tabs, Tab, makeStyles, Typography, Divider } from '@material-ui/core';
 import 'graphiql/graphiql.css';
-import GraphiQL from 'graphiql';
 import { StorageBucket } from 'lib/storage';
 import { GraphQLEndpoint } from 'lib/api';
+import { Progress } from '@backstage/core';
 import { BackstageTheme } from '@backstage/theme';
 
+const GraphiQL = React.lazy(() => import('graphiql'));
+
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   root: {
     height: '100%',
@@ -58,20 +60,22 @@ export const GraphiQLBrowser: FC<GraphiQLBrowserProps> = ({ endpoints }) => {
 
   return (
     <div className={classes.root}>
-      <Tabs
-        classes={{ root: classes.tabs }}
-        value={tabIndex}
-        onChange={(_, value) => setTabIndex(value)}
-        indicatorColor="primary"
-      >
-        {endpoints.map(({ title }, index) => (
-          <Tab key={index} label={title} value={index} />
-        ))}
-      </Tabs>
-      <Divider />
-      <div className={classes.graphiQlWrapper}>
-        <GraphiQL key={tabIndex} fetcher={fetcher} storage={storage} />
-      </div>
+      <Suspense fallback={<Progress />}>
+        <Tabs
+          classes={{ root: classes.tabs }}
+          value={tabIndex}
+          onChange={(_, value) => setTabIndex(value)}
+          indicatorColor="primary"
+        >
+          {endpoints.map(({ title }, index) => (
+            <Tab key={index} label={title} value={index} />
+          ))}
+        </Tabs>
+        <Divider />
+        <div className={classes.graphiQlWrapper}>
+          <GraphiQL key={tabIndex} fetcher={fetcher} storage={storage} />
+        </div>
+      </Suspense>
     </div>
   );
 };

plugins/home-page/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/plugin-home-page",
   "version": "0.1.1-alpha.4",
-  "main": "dist/index.cjs.js",
+  "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
   "private": true,

plugins/inventory/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/plugin-inventory",
   "version": "0.1.1-alpha.4",
-  "main": "dist/index.cjs.js",
+  "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
   "private": true,

plugins/lighthouse/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/plugin-lighthouse",
   "version": "0.1.1-alpha.4",
-  "main": "dist/index.cjs.js",
+  "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
   "private": true,

plugins/tech-radar/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/plugin-tech-radar",
   "version": "0.1.1-alpha.4",
-  "main": "dist/index.cjs.js",
+  "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
   "private": true,

plugins/welcome/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/plugin-welcome",
   "version": "0.1.1-alpha.4",
-  "main": "dist/index.cjs.js",
+  "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "private": true,
   "license": "Apache-2.0",