feat(recipes): bundle package to workaround node_modules tree resolution problems with npm

Author: pieh

packages/gatsby-admin/package.json

@@ -28,6 +28,7 @@
     "lodash-es": "^4.17.15",
     "ncp": "^2.0.0",
     "nodemon": "^2.0.4",
+    "normalize.css": "^8.0.1",
     "prism-react-renderer": "^1.1.1",
     "query-string": "^6.13.3",
     "react": "^16.12.0",

packages/gatsby-recipes/.babelrc.json

@@ -0,0 +1,20 @@
+module.exports = api => {
+  const isTest = api.env('test');
+
+  return {
+    presets: [
+      ["@babel/env", {
+        // use ES modules for rollup and commonjs for jest
+        modules: isTest ? `commonjs` : false,
+        shippedProposals: true,
+        targets: {
+          "node": "10.13.0"
+        }
+      }],
+      "@babel/preset-react"
+    ],
+    plugins: ["@babel/plugin-transform-runtime"]
+  }
+};
+
+

packages/gatsby-recipes/babel.config.js

@@ -1,3 +1,2 @@
-const StepRenderer = require(`./dist/components/step-renderer`).default
-console.log(StepRenderer)
-module.exports.StepRenderer = StepRenderer
+const components = require(`./dist/web/components`)
+module.exports = components

packages/gatsby-recipes/components.js

@@ -15,45 +15,29 @@
     "@babel/standalone": "^7.11.6",
     "@babel/template": "^7.10.4",
     "@babel/types": "^7.11.5",
-    "@emotion/core": "^10.0.14",
-    "@emotion/styled": "^10.0.14",
     "@graphql-tools/schema": "^6.0.14",
     "@graphql-tools/utils": "^6.0.14",
     "@hapi/hoek": "8.x.x",
     "@hapi/joi": "^15.1.1",
-    "@mdx-js/mdx": "^2.0.0-next.4",
-    "@mdx-js/react": "^2.0.0-next.4",
-    "@mdx-js/runtime": "^2.0.0-next.4",
-    "acorn": "^7.2.0",
-    "acorn-jsx": "^5.2.0",
-    "ansi-html": "^0.0.7",
-    "babel-plugin-remove-export-keywords": "^1.6.5",
     "better-queue": "^3.8.10",
     "chokidar": "^3.4.2",
-    "concurrently": "^5.0.0",
     "contentful-management": "^5.26.3",
     "cors": "^2.8.5",
-    "cross-fetch": "^3.0.6",
     "debug": "^4.1.1",
     "detect-port": "^1.3.0",
     "dotenv": "^8.2.0",
     "execa": "^4.0.2",
     "express": "^4.17.1",
     "express-graphql": "^0.9.0",
-    "flatted": "^3.0.0",
-    "formik": "^2.0.8",
     "fs-extra": "^8.1.0",
     "gatsby-core-utils": "^1.3.22",
-    "gatsby-interface": "^0.0.193",
     "gatsby-telemetry": "^1.3.37",
     "glob": "^7.1.6",
     "graphql": "^14.6.0",
     "graphql-compose": "^6.3.8",
     "graphql-subscriptions": "^1.1.0",
     "graphql-type-json": "^0.3.2",
     "hicat": "^0.7.0",
-    "html-tag-names": "^1.1.5",
-    "ink-box": "^1.0.0",
     "is-binary-path": "^2.1.0",
     "is-url": "^1.2.4",
     "jest-diff": "^25.5.0",
@@ -62,14 +46,9 @@
     "mitt": "^1.2.0",
     "mkdirp": "^0.5.1",
     "node-fetch": "^2.5.0",
-    "normalize.css": "^8.0.1",
     "pkg-dir": "^4.2.0",
     "prettier": "^2.0.5",
     "prop-types": "^15.6.1",
-    "property-information": "5.5.0",
-    "react-circular-progressbar": "^2.0.0",
-    "react-icons": "^3.0.1",
-    "react-reconciler": "^0.25.1",
     "remark-mdx": "^2.0.0-next.4",
     "remark-mdxjs": "^2.0.0-next.4",
     "remark-parse": "^6.0.3",
@@ -80,36 +59,39 @@
     "single-trailing-newline": "^1.0.0",
     "strip-ansi": "^6.0.0",
     "style-to-object": "^0.3.0",
-    "subscriptions-transport-ws": "^0.9.16",
-    "svg-tag-names": "^2.0.1",
     "unified": "^8.4.2",
     "unist-util-remove": "^2.0.0",
     "unist-util-visit": "^2.0.2",
-    "urql": "^1.9.7",
     "uuid": "3.4.0",
     "ws": "^7.3.0",
     "xstate": "^4.9.1",
-    "yoga-layout-prebuilt": "^1.9.6",
-    "yup": "^0.27.0"
+    "yoga-layout-prebuilt": "^1.9.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.11.6",
+    "@mdx-js/mdx": "^2.0.0-next.4",
+    "@mdx-js/react": "^2.0.0-next.4",
+    "@mdx-js/runtime": "^2.0.0-next.4",
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@rollup/plugin-babel": "^5.1.0",
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
+    "@rollup/plugin-replace": "^2.3.3",
     "fetch-mock-jest": "^1.3.0",
     "ink": "next",
     "ink-select-input": "^4.0.0",
     "ink-spinner": "^4.0.0-0",
     "react": "^16.12.0",
+    "react-reconciler": "^0.25.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.23.0",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-internal": "^1.0.0",
+    "subscriptions-transport-ws": "^0.9.16",
     "terminal-link": "^2.0.0",
-    "tmp-promise": "^2.1.0"
+    "tmp-promise": "^2.1.0",
+    "urql": "^1.9.7"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-recipes#readme",
   "jest": {
@@ -126,9 +108,6 @@
   ],
   "license": "MIT",
   "main": "dist/index.js",
-  "peerDependencies": {
-    "react": "^16.12.0"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/gatsbyjs/gatsby.git",
@@ -144,16 +123,12 @@
     "remark-mdxjs": "^2.0.0-next.4"
   },
   "scripts": {
-    "build": "concurrently \"npm run build:babel\" \"npm run build:rollup\"",
-    "build:babel": "babel --config-file ./non-rollup-babel.config.js src --out-dir dist --ignore \"**/__tests__\"  --extensions \".ts,.js,.tsx\"",
-    "build:rollup": "rollup -c",
-    "build:watch": "npm run build:babel -- --watch",
+    "build": "rollup -c",
     "prebuild": "rimraf dist",
     "prepare": "npm run build",
     "prewatch": "rimraf dist",
     "test": "jest",
     "test:watch": "jest --watch",
-    "watch": "concurrently \"npm run build:watch\" \"npm run watch:rollup\"",
-    "watch:rollup": "rollup -c -w"
+    "watch": "rollup -c -w"
   }
 }

packages/gatsby-recipes/non-rollup-babel.config.js

@@ -2,6 +2,7 @@ import resolve from "@rollup/plugin-node-resolve"
 import babel from "@rollup/plugin-babel"
 import commonjs from "@rollup/plugin-commonjs"
 import json from "@rollup/plugin-json"
+import replace from "@rollup/plugin-replace";
 import autoExternal from "rollup-plugin-auto-external"
 import internal from "rollup-plugin-internal"
 import path from "path"
@@ -23,38 +24,104 @@ function excludeDevTools() {
   }
 }
 
-export default {
-  input: "src/index.js",
-  output: {
-    file: "dist/index.js",
-    format: "cjs",
+export default [
+  {
+    input: {
+      index: `src/index.js`,
+      "graphql-server/server": `src/graphql-server/server.js`
+    },
+    output: {
+      dir: `dist`,
+      entryFileNames: `[name].js`,
+      format: "cjs",
+      sourcemap: true,
+    },
+    plugins: [
+      replace({
+        values: {
+          "process.env.NODE_ENV": JSON.stringify(`production`)
+        }
+      }),
+      excludeDevTools(),
+      json(),
+      babel({
+        babelHelpers: `runtime`,
+        skipPreflightCheck: true,
+        exclude: `node_modules/**`,
+      }),
+      commonjs({
+        transformMixedEsModules: true
+      }),
+      resolve({
+        dedupe: [
+          `react`,
+          `ink`,
+          `ink-select-input`,
+          `ink-spinner`,
+          `terminal-link`,
+          `react-reconcilier`,
+          `@mdx-js/mdx`,
+          `@mdx-js/react`,
+          `@mdx-js/runtime`,
+          `urql`, 
+          `@urql/core`,
+          `subscriptions-transport-ws`,
+        ]
+      }),
+      autoExternal(),
+      internal([
+        `react`,
+        `ink`,
+        `ink-select-input`,
+        `ink-spinner`,
+        `terminal-link`,
+        `react-reconcilier`,
+        `@mdx-js/mdx`,
+        `@mdx-js/react`,
+        `@mdx-js/runtime`,
+        `urql`,
+        `@urql/core`,
+        `subscriptions-transport-ws`,
+      ]),
+    ],
+    external: [
+      `ws`,
+      `gatsby-telemetry`,
+      `gatsby-core-utils`,
+      `yoga-layout-prebuilt`,
+    ],
   },
-  plugins: [
-    excludeDevTools(),
-    json(),
-    babel({
-      babelHelpers: "runtime",
-      skipPreflightCheck: true,
-      exclude: "node_modules/**",
-    }),
-    resolve(),
-    commonjs(),
-    autoExternal(),
-    internal([
-      "ink",
-      "ink-select-input",
-      "ink-spinner",
-      "terminal-link",
-      "react-reconcilier",
-    ]),
-  ],
-  external: [
-    `yoga-layout-prebuilt`,
-    `ws`,
-    `urql`,
-    `node-fetch`,
-    `react`,
-    `react-devtools-core`,
-    `graphql-server`,
-  ],
-}
+  {
+    input: {
+      components: `src/components.js`,
+    },
+    output: {
+      dir: `dist/web/`,
+      entryFileNames: `[name].js`,
+      format: "es",
+      sourcemap: true,
+    },
+    plugins: [
+      babel({
+        babelHelpers: `runtime`,
+        skipPreflightCheck: true,
+        exclude: `node_modules/**`,
+      }),
+      commonjs({
+        transformMixedEsModules: true
+      }),
+      resolve({
+        dedupe: [
+          `@mdx-js/react`,
+        ]
+      }),
+      autoExternal(),
+      internal([
+        `@mdx-js/react`
+      ])
+    ],
+    external: [
+      `react`
+    ]
+  }
+]

packages/gatsby-recipes/package.json

@@ -1,4 +1,4 @@
-const findDependencyMatch = require(`../find-dependency-match`)
+import findDependencyMatch from "../find-dependency-match"
 
 describe(`findDependencyMatch`, () => {
   test(`basic matching`, () => {

packages/gatsby-recipes/rollup.config.js

@@ -1,4 +1,5 @@
-const render = require(`./renderer`)
+import render from "./renderer"
 
-module.exports = (context, cb) =>
-  render(context.recipe, cb, context, true, true, true)
+export default function ApplyPlan(context, cb) {
+  return render(context.recipe, cb, context, true, true, true)
+}

packages/gatsby-recipes/src/__tests__/find-dependency-match.js

@@ -1,32 +1,31 @@
-const React = require(`react`)
-const { useState, useEffect } = require(`react`)
+import React, { useState, useEffect } from "react"
 import SelectInput from "ink-select-input"
 import { render, Box, Text, useInput, useApp, Transform } from "ink"
 import Spinner from "ink-spinner"
 import StepRenderer from "../components/step-renderer"
-const hicat = require(`hicat`)
-const { trackCli } = require(`gatsby-telemetry`)
+import hicat from "hicat"
+import { trackCli } from "gatsby-telemetry"
 import {
   useResource,
   useResourceByUUID,
   ResourceProvider,
 } from "../renderer/resource-provider"
 import terminalLink from "terminal-link"
 import PropTypes from "prop-types"
-const {
+import {
   createClient,
   useMutation,
   useSubscription,
   Provider,
   defaultExchanges,
   subscriptionExchange,
-} = require(`urql`)
-const { SubscriptionClient } = require(`subscriptions-transport-ws`)
-const fetch = require(`node-fetch`)
-const ws = require(`ws`)
-const semver = require(`semver`)
-const remove = require(`unist-util-remove`)
-const recipesList = require(`./recipes-list`).default
+} from "urql"
+import { SubscriptionClient } from "subscriptions-transport-ws"
+import fetch from "node-fetch"
+import ws from "ws"
+import semver from "semver"
+import remove from "unist-util-remove"
+import recipesList from "../recipes-list"
 
 const removeJsx = () => tree => {
   remove(tree, `export`, () => true)