feat: Add bundle-analyzer and lazy-load react-live (#450)

.eslintrc.js

@@ -61,12 +61,15 @@ module.exports = {
     "@typescript-eslint/no-non-null-assertion": 0,
     "@typescript-eslint/ban-ts-ignore": 0,
     "@typescript-eslint/no-empty-function": 0,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
     "no-console": [`warn`, { allow: [`warn`] }],
     "spaced-comment": [2, `always`, { exceptions: [`-`, `+`], markers: [`/`] }],
     "no-use-before-define": 0,
     "linebreak-style": 0,
     "consistent-return": 0,
     import: 0,
+    camelcase: 1,
     "import/no-unresolved": 0,
     "func-names": 0,
     "import/no-extraneous-dependencies": 0,

examples/cara/gatsby-config.js

@@ -2,6 +2,8 @@ require(`dotenv`).config({
   path: `.env`,
 })
 
+const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
+
 module.exports = {
   siteMetadata: {
     // You can overwrite values here that are used for the SEO component
@@ -47,5 +49,13 @@ module.exports = {
     },
     `gatsby-plugin-offline`,
     `gatsby-plugin-netlify`,
-  ],
+    shouldAnalyseBundle && {
+      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
+      options: {
+        analyzerMode: `static`,
+        reportFilename: `_bundle.html`,
+        openAnalyzer: false,
+      },
+    },
+  ].filter(Boolean),
 }

examples/cara/package.json

@@ -22,6 +22,7 @@
     "gatsby-plugin-manifest": "^2.2.6",
     "gatsby-plugin-netlify": "^2.1.6",
     "gatsby-plugin-offline": "^2.2.7",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },

examples/emilia/gatsby-config.js

@@ -2,6 +2,8 @@ require(`dotenv`).config({
   path: `.env`,
 })
 
+const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
+
 module.exports = {
   siteMetadata: {
     siteTitleAlt: `Emilia - Gatsby Starter Portfolio`,
@@ -45,5 +47,13 @@ module.exports = {
     },
     `gatsby-plugin-offline`,
     `gatsby-plugin-netlify`,
-  ],
+    shouldAnalyseBundle && {
+      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
+      options: {
+        analyzerMode: `static`,
+        reportFilename: `_bundle.html`,
+        openAnalyzer: false,
+      },
+    },
+  ].filter(Boolean),
 }

examples/emilia/package.json

@@ -23,6 +23,7 @@
     "gatsby-plugin-netlify": "^2.1.11",
     "gatsby-plugin-offline": "^3.0.1",
     "gatsby-plugin-sitemap": "^2.2.7",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },

examples/emma/gatsby-config.js

@@ -2,6 +2,8 @@ require(`dotenv`).config({
   path: `.env`,
 })
 
+const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
+
 module.exports = {
   siteMetadata: {
     siteTitleAlt: `Emma - Gatsby Starter Portfolio`,
@@ -45,5 +47,13 @@ module.exports = {
     },
     `gatsby-plugin-offline`,
     `gatsby-plugin-netlify`,
-  ],
+    shouldAnalyseBundle && {
+      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
+      options: {
+        analyzerMode: `static`,
+        reportFilename: `_bundle.html`,
+        openAnalyzer: false,
+      },
+    },
+  ].filter(Boolean),
 }

examples/emma/package.json

@@ -23,6 +23,7 @@
     "gatsby-plugin-netlify": "^2.1.6",
     "gatsby-plugin-offline": "^2.2.7",
     "gatsby-plugin-sitemap": "^2.2.7",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },

examples/graphql-playground/gatsby-config.js

@@ -1,3 +1,9 @@
+require(`dotenv`).config({
+  path: `.env`,
+})
+
+const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
+
 module.exports = {
   plugins: [
     {
@@ -6,5 +12,13 @@ module.exports = {
       options: {},
     },
     `gatsby-plugin-netlify`,
-  ],
+    shouldAnalyseBundle && {
+      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
+      options: {
+        analyzerMode: `static`,
+        reportFilename: `_bundle.html`,
+        openAnalyzer: false,
+      },
+    },
+  ].filter(Boolean),
 }

examples/graphql-playground/package.json

@@ -19,6 +19,7 @@
     "@lekoarts/gatsby-theme-graphql-playground": "^1.1.11",
     "gatsby": "^2.20.36",
     "gatsby-plugin-netlify": "^2.1.23",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },

examples/minimal-blog/gatsby-config.js

@@ -2,6 +2,8 @@ require(`dotenv`).config({
   path: `.env`,
 })
 
+const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
+
 module.exports = {
   siteMetadata: {
     siteTitleAlt: `Minimal Blog - Gatsby Theme`,
@@ -66,5 +68,13 @@ module.exports = {
     },
     `gatsby-plugin-offline`,
     `gatsby-plugin-netlify`,
-  ],
+    shouldAnalyseBundle && {
+      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
+      options: {
+        analyzerMode: `static`,
+        reportFilename: `_bundle.html`,
+        openAnalyzer: false,
+      },
+    },
+  ].filter(Boolean),
 }

examples/minimal-blog/package.json

@@ -23,6 +23,7 @@
     "gatsby-plugin-netlify": "^2.1.3",
     "gatsby-plugin-offline": "^2.2.4",
     "gatsby-plugin-sitemap": "^2.2.19",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },

examples/specimens/gatsby-config.js

@@ -1,6 +1,8 @@
 // eslint-disable-next-line global-require
 const remarkPlugins = [require(`remark-slug`)]
 
+const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
+
 module.exports = {
   siteMetadata: {
     siteTitle: `Specimens for Design Systems - @lekoarts/gatsby-theme-specimens`,
@@ -60,5 +62,13 @@ module.exports = {
     },
     `gatsby-plugin-offline`,
     `gatsby-plugin-netlify`,
-  ],
+    shouldAnalyseBundle && {
+      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
+      options: {
+        analyzerMode: `static`,
+        reportFilename: `_bundle.html`,
+        openAnalyzer: false,
+      },
+    },
+  ].filter(Boolean),
 }

examples/specimens/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@lekoarts/gatsby-theme-specimens": "^2.2.8",
+    "@loadable/component": "^5.13.1",
     "@mdx-js/mdx": "^1.5.9",
     "@theme-ui/presets": "^0.3.0",
     "gatsby": "^2.20.36",
@@ -28,6 +29,7 @@
     "gatsby-plugin-offline": "^2.2.7",
     "gatsby-plugin-react-helmet": "^3.1.4",
     "gatsby-plugin-theme-ui": "^0.3.0",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
     "gatsby-source-filesystem": "^2.1.10",
     "mdx-utils": "^0.2.0",
     "prism-react-renderer": "^1.1.0",

examples/specimens/src/components/code.js

@@ -2,7 +2,7 @@
 import React from "react"
 import Highlight, { defaultProps } from "prism-react-renderer"
 import theme from "prism-react-renderer/themes/vsDark"
-import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"
+import loadable from "@loadable/component"
 import { useMDXScope } from "gatsby-plugin-mdx/context"
 import { useMDXComponents } from "@mdx-js/react"
 import { css } from "@emotion/core"
@@ -19,6 +19,20 @@ const badgeStyle = {
   letterSpacing: `0.05em`,
 }
 
+const LazyLiveProvider = loadable(async () => {
+  const Module = await import(`react-live`)
+  const { LiveProvider, LiveEditor, LiveError, LivePreview } = Module
+  return (props) => (
+    <LiveProvider {...props}>
+      <div css={css(badgeStyle)}>Editor</div>
+      <LiveEditor css={css({ marginBottom: `1rem`, borderRadius: `0.25rem` })} />
+      <LiveError />
+      <div css={css(badgeStyle)}>Preview</div>
+      <LivePreview css={css({ marginBottom: `3rem` })} />
+    </LiveProvider>
+  )
+})
+
 const Code = ({ codeString, language, live, noInline }) => {
   const imported = useMDXScope()
   const defined = useMDXComponents()
@@ -27,13 +41,12 @@ const Code = ({ codeString, language, live, noInline }) => {
 
   if (live) {
     return (
-      <LiveProvider code={codeString} theme={theme} noInline={noInline || false} scope={{ ...defined, ...imported }}>
-        <div css={css(badgeStyle)}>Editor</div>
-        <LiveEditor css={css({ marginBottom: `1rem`, borderRadius: `0.25rem` })} />
-        <LiveError />
-        <div css={css(badgeStyle)}>Preview</div>
-        <LivePreview css={css({ marginBottom: `3rem` })} />
-      </LiveProvider>
+      <LazyLiveProvider
+        code={codeString}
+        theme={theme}
+        noInline={noInline || false}
+        scope={{ ...defined, ...imported }}
+      />
     )
   }
   return (

examples/status-dashboard/gatsby-config.js

@@ -2,6 +2,8 @@ require(`dotenv`).config({
   path: `.env`,
 })
 
+const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
+
 module.exports = {
   siteMetadata: {
     siteUrl: process.env.SITE_URL || `https://status.lekoarts.de`,
@@ -28,5 +30,13 @@ module.exports = {
     },
     `gatsby-plugin-offline`,
     `gatsby-plugin-netlify`,
-  ],
+    shouldAnalyseBundle && {
+      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
+      options: {
+        analyzerMode: `static`,
+        reportFilename: `_bundle.html`,
+        openAnalyzer: false,
+      },
+    },
+  ].filter(Boolean),
 }

examples/status-dashboard/package.json

@@ -24,6 +24,7 @@
     "gatsby-plugin-netlify": "^2.1.6",
     "gatsby-plugin-offline": "^2.2.7",
     "gatsby-plugin-react-helmet": "^3.1.4",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^5.2.1"

examples/styleguide/gatsby-config.js

@@ -1,3 +1,9 @@
+require(`dotenv`).config({
+  path: `.env`,
+})
+
+const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
+
 module.exports = {
   siteMetadata: {
     siteTitle: `Styleguide`,
@@ -19,5 +25,13 @@ module.exports = {
       },
     },
     `gatsby-plugin-netlify`,
-  ],
+    shouldAnalyseBundle && {
+      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
+      options: {
+        analyzerMode: `static`,
+        reportFilename: `_bundle.html`,
+        openAnalyzer: false,
+      },
+    },
+  ].filter(Boolean),
 }

examples/styleguide/package.json

@@ -21,6 +21,7 @@
     "gatsby-plugin-netlify": "^2.1.27",
     "gatsby-plugin-react-helmet": "^3.1.16",
     "gatsby-plugin-theme-ui": "^0.3.0",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^5.2.1",

package.json

@@ -38,17 +38,18 @@
     "@testing-library/jest-dom": "^5.11.0",
     "@testing-library/react": "^10.4.5",
     "@types/chroma-js": "^2.0.0",
-    "@types/jest": "^25.2.3",
-    "@types/node": "^12.12.48",
+    "@types/jest": "^26.0.4",
+    "@types/loadable__component": "^5.10.0",
+    "@types/node": "^14.0.20",
     "@types/react": "^16.9.41",
     "@types/react-dom": "^16.9.8",
-    "@types/react-helmet": "^5.0.16",
+    "@types/react-helmet": "^6.0.0",
     "@types/styled-system": "^5.1.9",
     "@types/testing-library__cypress": "^5.0.6",
     "@types/testing-library__jest-dom": "^5.9.1",
     "@types/theme-ui": "^0.3.4",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
+    "@typescript-eslint/eslint-plugin": "^3.6.0",
+    "@typescript-eslint/parser": "^3.6.0",
     "concurrently": "^5.2.0",
     "cross-env": "^7.0.2",
     "cypress": "^4.10.0",

renovate.json5

@@ -17,7 +17,7 @@
     },
     {
       groupName: "types",
-      packagePatterns: ["^@types"],
+      packagePatterns: ["^@types/"],
       // only upgrade types with approval as they can break transitives
       masterIssueApproval: true,
     },

themes/gatsby-theme-minimal-blog/package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@lekoarts/gatsby-theme-minimal-blog-core": "^2.3.10",
+    "@loadable/component": "^5.13.1",
     "@theme-ui/color": "^0.3.1",
     "@theme-ui/components": "^0.3.1",
     "@theme-ui/presets": "^0.3.0",