refactor(gatsby-plugin-netlify-cms): major netlify-cms upgrade (gatsb…

…yjs#13036) - New peer dep package `netlify-cms-app` (^2.9.0) - Removes `netlify-cms` dependency - Moves `cms.js` to not be transpiled until gatsby (develop/build)
ajordanow · May 3, 2019 · 48b3a73 · 48b3a73
1 parent 4037077
commit 48b3a73
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 118 deletions.
diff --git a/packages/gatsby-plugin-netlify-cms/.gitignore b/packages/gatsby-plugin-netlify-cms/.gitignore
@@ -1,3 +1 @@
 /*.js
-!index.js
-yarn.lock
diff --git a/packages/gatsby-plugin-netlify-cms/package.json b/packages/gatsby-plugin-netlify-cms/package.json
@@ -20,8 +20,8 @@
     "@babel/core": "^7.0.0",
     "babel-preset-gatsby-package": "^0.1.4",
     "cross-env": "^5.1.4",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1"
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-netlify-cms#readme",
   "keywords": [
@@ -35,7 +35,9 @@
   "main": "index.js",
   "peerDependencies": {
     "gatsby": "^2.0.101",
-    "netlify-cms": "^2.0.6"
+    "netlify-cms-app": "^2.9.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
   },
   "repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-netlify-cms",
   "scripts": {

diff --git a/packages/gatsby-plugin-netlify-cms/src/cms.js b/packages/gatsby-plugin-netlify-cms/src/cms.js
@@ -1,4 +1,15 @@
-import CMS from "netlify-cms"
+import CMS from "netlify-cms-app"
+
+/**
+ * Load Netlify CMS automatically if `window.CMS_MANUAL_INIT` is set.
+ */
+if (!window.CMS_MANUAL_INIT) {
+  CMS.init()
+} else {
+  console.log(
+    `\`window.CMS_MANUAL_INIT\` flag set, skipping automatic initialization.'`
+  )
+}
 
 /**
  * The stylesheet output from the modules at `modulePath` will be at `cms.css`.

diff --git a/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js b/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js
@@ -58,114 +58,124 @@ exports.onCreateWebpackConfig = (
     manualInit = false,
   }
 ) => {
-  if ([`develop`, `build-javascript`].includes(stage)) {
-    const gatsbyConfig = getConfig()
-    const { program } = store.getState()
-    const publicPathClean = trim(publicPath, `/`)
-    const config = {
-      ...gatsbyConfig,
-      entry: {
-        cms: [
-          manualInit && `${__dirname}/cms-manual-init.js`,
-          `${__dirname}/cms.js`,
-          enableIdentityWidget && `${__dirname}/cms-identity.js`,
-        ]
-          .concat(modulePath)
-          .filter(p => p),
-      },
-      output: {
-        path: path.join(program.directory, `public`, publicPathClean),
-      },
-      module: {
-        /**
-         * Manually swap `style-loader` for `MiniCssExtractPlugin.loader`.
-         * `style-loader` is only used in development, and doesn't allow us to
-         * pass the `styles` entry css path to Netlify CMS.
-         */
-        rules: deepMap(gatsbyConfig.module.rules, value => {
-          if (
-            typeof get(value, `loader`) === `string` &&
-            value.loader.includes(`style-loader`)
-          ) {
-            return { ...value, loader: MiniCssExtractPlugin.loader }
-          }
-          return value
-        }),
-      },
-      plugins: [
-        /**
-         * Remove plugins that either attempt to process the core Netlify CMS
-         * application, or that we want to replace with our own instance.
-         */
-        ...gatsbyConfig.plugins.filter(
-          plugin =>
-            ![`MiniCssExtractPlugin`, `GatsbyWebpackStatsExtractor`].find(
-              pluginName =>
-                plugin.constructor && plugin.constructor.name === pluginName
-            )
-        ),
-
-        /**
-         * Provide a custom message for Netlify CMS compilation success.
-         */
-        stage === `develop` &&
-          new FriendlyErrorsPlugin({
-            clearConsole: false,
-            compilationSuccessInfo: {
-              messages: [
-                `Netlify CMS is running at ${
-                  program.ssl ? `https` : `http`
-                }://${program.host}:${program.port}/${publicPathClean}/`,
-              ],
-            },
-          }),
+  if (![`develop`, `build-javascript`].includes(stage)) {
+    return Promise.resolve()
+  }
+  const gatsbyConfig = getConfig()
+  const { program } = store.getState()
+  const publicPathClean = trim(publicPath, `/`)
+  const config = {
+    ...gatsbyConfig,
+    entry: {
+      cms: [
+        manualInit && `${__dirname}/cms-manual-init.js`,
+        `${__dirname}/cms.js`,
+        enableIdentityWidget && `${__dirname}/cms-identity.js`,
+      ]
+        .concat(modulePath)
+        .filter(p => p),
+    },
+    output: {
+      path: path.join(program.directory, `public`, publicPathClean),
+    },
+    module: {
+      /**
+       * Manually swap `style-loader` for `MiniCssExtractPlugin.loader`.
+       * `style-loader` is only used in development, and doesn't allow us to
+       * pass the `styles` entry css path to Netlify CMS.
+       */
+      rules: deepMap(gatsbyConfig.module.rules, value => {
+        if (
+          typeof get(value, `loader`) === `string` &&
+          value.loader.includes(`style-loader`)
+        ) {
+          return { ...value, loader: MiniCssExtractPlugin.loader }
+        }
+        return value
+      }),
+    },
+    plugins: [
+      /**
+       * Remove plugins that either attempt to process the core Netlify CMS
+       * application, or that we want to replace with our own instance.
+       */
+      ...gatsbyConfig.plugins.filter(
+        plugin =>
+          ![`MiniCssExtractPlugin`, `GatsbyWebpackStatsExtractor`].find(
+            pluginName =>
+              plugin.constructor && plugin.constructor.name === pluginName
+          )
+      ),
 
-        /**
-         * Use a simple filename with no hash so we can access from source by
-         * path.
-         */
-        new MiniCssExtractPlugin({
-          filename: `[name].css`,
+      /**
+       * Provide a custom message for Netlify CMS compilation success.
+       */
+      stage === `develop` &&
+        new FriendlyErrorsPlugin({
+          clearConsole: false,
+          compilationSuccessInfo: {
+            messages: [
+              `Netlify CMS is running at ${program.ssl ? `https` : `http`}://${
+                program.host
+              }:${program.port}/${publicPathClean}/`,
+            ],
+          },
         }),
 
-        /**
-         * Auto generate CMS index.html page.
-         */
-        new HtmlWebpackPlugin({
-          title: htmlTitle,
-          chunks: [`cms`],
-          excludeAssets: [/cms.css/],
-        }),
+      /**
+       * Use a simple filename with no hash so we can access from source by
+       * path.
+       */
+      new MiniCssExtractPlugin({
+        filename: `[name].css`,
+      }),
 
-        /**
-         * Exclude CSS from index.html, as any imported styles are assumed to be
-         * targeting the editor preview pane. Uses `excludeAssets` option from
-         * `HtmlWebpackPlugin` config.
-         */
-        new HtmlWebpackExcludeAssetsPlugin(),
+      /**
+       * Auto generate CMS index.html page.
+       */
+      new HtmlWebpackPlugin({
+        title: htmlTitle,
+        chunks: [`cms`],
+        excludeAssets: [/cms.css/],
+      }),
 
-        /**
-         * Pass in needed Gatsby config values.
-         */
-        new webpack.DefinePlugin({
-          __PATH__PREFIX__: pathPrefix,
-          CMS_PUBLIC_PATH: JSON.stringify(publicPath),
-        }),
-      ].filter(p => p),
+      /**
+       * Exclude CSS from index.html, as any imported styles are assumed to be
+       * targeting the editor preview pane. Uses `excludeAssets` option from
+       * `HtmlWebpackPlugin` config.
+       */
+      new HtmlWebpackExcludeAssetsPlugin(),
 
       /**
-       * Remove mode and common chunks style optimizations from Gatsby's default
-       * config, they cause issues for our pre-bundled code.
+       * Pass in needed Gatsby config values.
        */
-      mode: `none`,
-      optimization: {},
-      devtool: stage === `develop` ? `cheap-module-source-map` : `source-map`,
-    }
+      new webpack.DefinePlugin({
+        __PATH__PREFIX__: pathPrefix,
+        CMS_PUBLIC_PATH: JSON.stringify(publicPath),
+      }),
+    ].filter(p => p),
 
+    /**
+     * Remove common chunks style optimizations from Gatsby's default
+     * config, they cause issues for our pre-bundled code.
+     */
+    mode: stage === `develop` ? `development` : `production`,
+    optimization: {},
+    devtool: stage === `develop` ? `cheap-module-source-map` : `source-map`,
+  }
+
+  return new Promise((resolve, reject) => {
     if (stage === `develop`) {
       webpack(config).watch({}, () => {})
-    } else {
-      webpack(config).run()
+
+      return resolve()
     }
-  }
+
+    return webpack(config).run((err, stats) => {
+      if (err) return reject(err)
+      const errors = stats.compilation.errors || []
+      if (errors.length > 0) return reject(stats.compilation.errors)
+      return resolve()
+    })
+  })
 }
diff --git a/packages/gatsby-plugin-netlify-cms/index.js → ...es/gatsby-plugin-netlify-cms/src/index.js b/packages/gatsby-plugin-netlify-cms/index.js → ...es/gatsby-plugin-netlify-cms/src/index.js
diff --git a/yarn.lock b/yarn.lock
@@ -17412,15 +17412,15 @@ react-docgen@^4.1.0:
     node-dir "^0.1.10"
     recast "^0.17.3"
 
-react-dom@^16.4.1:
-  version "16.5.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.1.tgz#29d0c5a01ed3b6b4c14309aa91af6ec4eb4f292c"
-  integrity sha512-l4L9GtX7ezgnDIIr6AaNvGBM4BiK0fSs4/V8bdsu9X6xqrtHr+jp6auT0hbHpN7bH9WRvDBZceWQ9WJ3lGCIvQ==
+react-dom@^16.8.4:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
+  integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    schedule "^0.4.0"
+    scheduler "^0.13.6"
 
 react-dom@^16.8.6:
   version "16.8.6"
@@ -17469,15 +17469,15 @@ react-typography@^0.16.18:
   resolved "https://registry.yarnpkg.com/react-typography/-/react-typography-0.16.18.tgz#89341b63d615f1dfcf5e471797df5acce5bde1f3"
   integrity sha512-BFkw59H2mkYRLLtHOT2UZve/9/RticAvL7o7rheOo/+tlwQyfF61wF2XzGRcA3IWASg+DbXnNViyywHBFlNj6A==
 
-react@^16.4.1:
-  version "16.5.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.5.1.tgz#8cb8e9f8cdcb4bde41c9a138bfbf907e66132372"
-  integrity sha512-E+23+rbpPsJgSX812LQkwupUCFnbVE84+L8uxlkqN5MU0DcraWMlVf9cRvKCKtGu0XvScyRnW7Z+9d7ymkjy3A==
+react@^16.8.4:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
+  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    schedule "^0.4.0"
+    scheduler "^0.13.6"
 
 react@^16.8.6:
   version "16.8.6"
@@ -18741,11 +18741,12 @@ saxes@^3.1.5:
   dependencies:
     xmlchars "^1.3.1"
 
-schedule@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/schedule/-/schedule-0.4.0.tgz#fa20cfd0bfbf91c47d02272fd7096780d3170bbb"
-  integrity sha512-hYjmoaEMojiMkWCxKr6ue+LYcZ29u29+AamWYmzwT2VOO9ws5UJp/wNhsVUPiUeNh+EdRfZm7nDeB40ffTfMhA==
+scheduler@^0.13.6:
+  version "0.13.6"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
+  integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
   dependencies:
+    loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
 scheduler@^0.13.6: