feat(module): compatibility with nuxt v2 (#111)

BREAKING CHANGE: This module is no more compatible with nuxt versions older than v2.0.0
Update `nuxt` devDependency to v.2.0.0

Compatibility with webpack v4
Add `FriendlyErrorsWebpackPlugin`
Add `@nuxt/friendly-errors-webpack-plugin`, `extract-css-chunks-webpack-plugin`
Use `consola` instead of debug for logging, improve messages
Add `webpackbar` in production, improve logging
Upgrade husky, move config to its own key
Remove `.yarnrc` engine compatibility fix

Replace `nuxtent` by `@dinamomx/nuxtent` dependency, temporary fix, see nuxt-community/nuxtent-module#190
Fix `nuxt-netlify-cms` dependency to `file` protocol

Author: medfreeman

.yarnrc

@@ -1,5 +1,5 @@
 module.exports = {
-  modules: ["nuxtent", "nuxt-netlify-cms"],
+  modules: ["@dinamomx/nuxtent", "nuxt-netlify-cms"],
   nuxtent: {
     content: {
       page: "/_post",

example/nuxt.config.js

@@ -5,8 +5,8 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.3.1",
     "nuxt": "latest",
-    "nuxtent": "latest",
-    "nuxt-netlify-cms": "../"
+    "@dinamomx/nuxtent": "latest",
+    "nuxt-netlify-cms": "file:../"
   },
   "scripts": {
     "dev": "nuxt",

example/package.json

@@ -7,9 +7,6 @@
   "author": "Mehdi Lahlou <mehdi.lahlou@free.fr>",
   "repository": "https://github.com/medfreeman/nuxt-netlify-cms-module.git",
   "scripts": {
-    "#<git hooks>": "handled by husky",
-    "precommit": "lint-staged",
-    "#</git hooks>": "handled by husky",
     "lint": "eslint --ignore-path .gitignore --fix \"**/*.js\"",
     "test": "cross-env NODE_ENV=test DEBUG=nuxt:netlify-cms jest --runInBand --forceExit",
     "pretest": "yarn lint",
@@ -23,6 +20,8 @@
     "dist"
   ],
   "dependencies": {
+    "@nuxt/friendly-errors-webpack-plugin": "^2.4.0",
+    "extract-css-chunks-webpack-plugin": "^3.3.2",
     "js-yaml": "^3.10.0",
     "needlepoint": "^1.0.5",
     "style-loader": "^0.23.0"
@@ -31,6 +30,7 @@
     "netlify-cms": ">=0.4.0"
   },
   "devDependencies": {
+    "@nuxt/common": "^2.3.4",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^10.0.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
@@ -52,11 +52,16 @@
     "koa-static": "^5.0.0",
     "lint-staged": "^8.0.4",
     "netlify-cms": "2.4.0",
-    "nuxt": "^1.4.2",
+    "nuxt": "^2.0.0",
     "prettier": "^1.7.0",
     "request-promise-native": "^1.0.4",
     "standard-version": "^5.0.0"
   },
+  "husky": {
+    "hooks": {
+      "precommit": "lint-staged"
+    }
+  },
   "lint-staged": {
     "*.js": [
       "git-exec-and-restage prettier --write --"

example/yarn.lock

@@ -1,25 +1,27 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { join } from "path";
+import { resolve, join } from "path";
 
 /* covered by nuxt */
-import { move } from "fs-extra";
+import { copy } from "fs-extra";
 import _ from "lodash";
-import { Utils } from "nuxt";
+import { r, urlJoin } from "@nuxt/common";
+import consola from "consola";
 import chokidar from "chokidar";
+import env from "std-env";
 import pify from "pify";
 import webpack from "webpack";
 import webpackDevMiddleware from "webpack-dev-middleware";
 import webpackHotMiddleware from "webpack-hot-middleware";
+import WebpackBar from "webpackbar";
 import serveStatic from "serve-static";
-import Debug from "debug";
 
 import pkg from "../package.json";
 
 import ConfigManager from "./configManager";
 import getWebpackNetlifyConfig from "./webpack.config";
 import { toYAML } from "./utils/yaml";
 
-const debug = Debug("nuxt:netlify-cms");
+const logger = consola.withScope("nuxt:netlify-cms");
 
 const WEBPACK_CLIENT_COMPILER_NAME = "client";
 const WEBPACK_NETLIFY_COMPILER_NAME = "netlify-cms";
@@ -29,63 +31,115 @@ export default function NetlifyCmsModule(moduleOptions) {
   const configManager = new ConfigManager(this.options, moduleOptions);
   const config = configManager.config;
 
+  const emitNetlifyConfig = compilation => {
+    const netlifyConfigYAML = toYAML(configManager.cmsConfig);
+    compilation.assets[NETLIFY_CONFIG_FILE_NAME] = {
+      source: () => netlifyConfigYAML,
+      size: () => netlifyConfigYAML.length
+    };
+  };
+
   // This will be called once when builder started
   this.nuxt.hook("build:before", builder => {
+    const bundleBuilder = builder.bundleBuilder;
+
+    const webpackConfig = getWebpackNetlifyConfig(
+      WEBPACK_NETLIFY_COMPILER_NAME,
+      this.options,
+      config
+    );
+
+    webpackConfig.plugins.push({
+      apply(compiler) {
+        compiler.hooks.emit.tapAsync("NetlifyCMSPlugin", (compilation, cb) => {
+          compilation.hooks.additionalAssets.tapAsync(
+            "NetlifyCMSPlugin",
+            callback => {
+              emitNetlifyConfig(compilation);
+              callback();
+            }
+          );
+
+          emitNetlifyConfig(compilation);
+          cb();
+        });
+      }
+    });
+
+    !this.options.dev &&
+      webpackConfig.plugins.push(
+        new WebpackBar({
+          name: WEBPACK_NETLIFY_COMPILER_NAME,
+          color: "red",
+          reporters: ["basic", "fancy", "profile", "stats"],
+          basic: !this.options.build.quiet && env.minimalCLI,
+          fancy: !this.options.build.quiet && !env.minimalCLI,
+          profile: !this.options.build.quiet && this.options.build.profile,
+          stats:
+            !this.options.build.quiet &&
+            !this.options.dev &&
+            this.options.build.stats,
+          reporter: {
+            change: (_, { shortPath }) => {
+              this.nuxt.callHook("bundler:change", shortPath);
+            },
+            done: context => {
+              if (context.hasErrors) {
+                this.nuxt.callHook("bundler:error");
+              }
+            },
+            allDone: () => {
+              this.nuxt.callHook("bundler:done");
+            }
+          }
+        })
+      )
+
+    const netlifyCompiler = webpack(webpackConfig);
+
     // This will be run just before webpack compiler starts
     this.nuxt.hook("build:compile", ({ name }) => {
       if (name !== WEBPACK_CLIENT_COMPILER_NAME) {
         return;
       }
-      const webpackConfig = getWebpackNetlifyConfig(
-        WEBPACK_NETLIFY_COMPILER_NAME,
-        this.options,
-        config
-      );
 
-      webpackConfig.plugins.push({
-        apply(compiler) {
-          compiler.plugin("emit", (compilation, cb) => {
-            const netlifyConfigYAML = toYAML(configManager.cmsConfig);
-            compilation.assets[NETLIFY_CONFIG_FILE_NAME] = {
-              source: () => netlifyConfigYAML,
-              size: () => netlifyConfigYAML.length
-            };
-            cb();
-          });
-        }
-      });
-
-      const netlifyCompiler = webpack(webpackConfig);
+      logger.success("Netlify-cms builder initialized");
 
       // This will be run just after webpack compiler ends
-      netlifyCompiler.plugin("done", async stats => {
-        // Don't reload failed builds
-        if (stats.hasErrors()) {
-          /* istanbul ignore next */
-          return;
+      netlifyCompiler.hooks.done.tapAsync(
+        "NetlifyCMSPlugin",
+        async (stats, cb) => {
+          // Don't reload failed builds
+          if (stats.hasErrors()) {
+            /* istanbul ignore next */
+            return;
+          }
+
+          // Show a message inside console when the build is ready
+          this.options.dev &&
+            logger.info(`Netlify-cms served on: ${config.adminPath}`);
+
+          cb();
         }
-        debug(`Bundle built!`);
-      });
+      );
 
       // in development
       if (this.options.dev) {
         // Use shared filesystem and cache
-        netlifyCompiler.outputFileSystem = builder.mfs;
-        // Show a message inside console when the build is ready
-        this.nuxt.hook("build:compiled", async () => {
-          debug(`Serving on: ${config.adminPath}`);
-        });
+        netlifyCompiler.outputFileSystem = bundleBuilder.mfs;
 
         // Create webpack dev middleware
         const netlifyWebpackDevMiddleware = pify(
           webpackDevMiddleware(netlifyCompiler, {
             publicPath: "/",
-            stats: builder.webpackStats,
-            noInfo: true,
-            quiet: true,
+            stats: false,
+            logLevel: "silent",
             watchOptions: this.options.watchers.webpack
           })
         );
+        netlifyWebpackDevMiddleware.close = pify(
+          netlifyWebpackDevMiddleware.close
+        );
 
         // Create webpack hot middleware
         const netlifyWebpackHotMiddleware = pify(
@@ -137,7 +191,10 @@ export default function NetlifyCmsModule(moduleOptions) {
       path: config.adminPath,
       handler: async (req, res) => {
         if (this.nuxt.renderer.netlifyWebpackDevMiddleware) {
-          debug(`requesting url: ${Utils.urlJoin(config.adminPath, req.url)}`);
+          logger.info(
+            `Netlify-cms requested url: ${urlJoin(config.adminPath, req.url)}`
+          );
+
           await this.nuxt.renderer.netlifyWebpackDevMiddleware(req, res);
         }
         if (this.nuxt.renderer.netlifyWebpackHotMiddleware) {
@@ -147,7 +204,7 @@ export default function NetlifyCmsModule(moduleOptions) {
     });
 
     // Start watching config file
-    const patterns = [Utils.r(configManager.cmsConfigFileName)];
+    const patterns = [r(configManager.cmsConfigFileName)];
 
     const options = {
       ...this.options.watchers.chokidar,
@@ -160,6 +217,8 @@ export default function NetlifyCmsModule(moduleOptions) {
       this.nuxt.renderer.netlifyWebpackHotMiddleware.publish({
         action: "reload"
       });
+
+      logger.info("Netlify-cms files refreshed");
     }, 200);
 
     // Watch for src Files
@@ -185,13 +244,17 @@ export default function NetlifyCmsModule(moduleOptions) {
     });
   }
 
-  // Move cms folder from `dist/_nuxt` folder to `dist/` after nuxt generate
-  this.nuxt.hook("generate:distCopied", async generator => {
-    await move(
-      join(generator.distNuxtPath, config.adminPath).replace(/\/$/, ""),
-      join(generator.distPath, config.adminPath).replace(/\/$/, "")
+  // Move cms folder from `.nuxt/dist/admin` folder to `dist/` after nuxt generate
+  this.nuxt.hook("generate:distCopied", async nuxt => {
+    await copy(
+      resolve(nuxt.options.buildDir, "dist", config.adminPath).replace(
+        /\/$/,
+        ""
+      ),
+      join(nuxt.distPath, config.adminPath).replace(/\/$/, "")
     );
-    debug("Netlify CMS files copied");
+
+    logger.success("Netlify-cms files copied");
   });
 }