refactor(core): extract config and cms config file management

Add `lodash.omit` and `needlepoint` dependencies
Add `babel-plugin-transform-decorators-legacy` devDependencies

Author: medfreeman

package.json

@@ -24,6 +24,8 @@
   ],
   "dependencies": {
     "js-yaml": "^3.9.1",
+    "lodash.omit": "^4.5.0",
+    "needlepoint": "^1.0.5",
     "style-loader": "^0.18.2"
   },
   "peerDependencies": {
@@ -32,6 +34,7 @@
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-eslint": "^7.2.3",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "codecov": "^2.3.0",
@@ -65,7 +68,8 @@
         {
           "useBuiltIns": true
         }
-      ]
+      ],
+      "transform-decorators-legacy"
     ],
     "env": {
       "test": {

src/configManager.js

@@ -0,0 +1,89 @@
+import { join, relative } from "path";
+
+import omit from "lodash.omit";
+
+import CmsConfigFile from "./utils/cms.config.file";
+
+const NUXT_CONFIG_KEY = "netlifyCms";
+const CMS_CONFIG_KEY = "cmsConfig";
+const CMS_CONFIG_FILENAME = "netlify-cms.yml";
+
+// Defaults
+const DEFAULTS = {
+  adminPath: "admin",
+  adminTitle: "Content Manager",
+  extensionsDir: "netlify-cms",
+  cmsConfig: {
+    media_folder: "static/uploads"
+  }
+};
+
+class ConfigManager {
+  constructor(nuxtOptions, moduleOptions) {
+    this._cmsConfigFile = new CmsConfigFile(
+      join(nuxtOptions.rootDir, CMS_CONFIG_FILENAME)
+    );
+
+    this._relativeSrcDir = relative(nuxtOptions.rootDir, nuxtOptions.srcDir);
+
+    this._userOptions = {
+      ...nuxtOptions[NUXT_CONFIG_KEY],
+      ...moduleOptions
+    };
+
+    const options = omit(
+      {
+        ...DEFAULTS,
+        ...this._userOptions
+      },
+      CMS_CONFIG_KEY
+    );
+    options.adminPath = options.adminPath.replace(/\/?$/, "/");
+    options.extensionsDir = join(nuxtOptions.srcDir, options.extensionsDir);
+    options.buildDir = join(nuxtOptions.buildDir, "dist", options.adminPath);
+    this._config = options;
+  }
+
+  get config() {
+    return this._config;
+  }
+
+  get cmsConfig() {
+    const config = this.constructor.setConfigPaths(
+      {
+        ...DEFAULTS[CMS_CONFIG_KEY],
+        ...this._cmsConfigFile.config,
+        ...this._userOptions[CMS_CONFIG_KEY]
+      },
+      this._relativeSrcDir
+    );
+    return config;
+  }
+
+  static setConfigPaths(configObject, enforcedPath) {
+    const newConfig = {
+      collections: []
+    };
+
+    if (configObject.media_folder) {
+      newConfig.media_folder = join(enforcedPath, configObject.media_folder);
+    }
+
+    if (configObject.collections) {
+      configObject.collections.forEach(function(collection) {
+        collection.folder &&
+          newConfig.collections.push({
+            ...collection,
+            folder: join(enforcedPath, collection.folder)
+          });
+      });
+    }
+
+    return {
+      ...configObject,
+      ...newConfig
+    };
+  }
+}
+
+export default ConfigManager;

src/module.js

@@ -1,5 +1,3 @@
-import { join, resolve, relative } from "path";
-
 /* eslint-disable import/no-extraneous-dependencies */
 /* covered by nuxt */
 import _ from "lodash";
@@ -13,97 +11,39 @@ import Debug from "debug";
 
 import pkg from "../package.json";
 
-import { loadYAMLFile, toYAML } from "./utils/yaml.js";
-import { setConfigPaths } from "./utils/netlify.config.js";
-import webpackNetlifyConfig from "./webpack.config.js";
+import ConfigManager from "./configManager";
+import getWebpackNetlifyConfig from "./webpack.config";
+import { toYAML } from "./utils/yaml";
 
 const debug = Debug("nuxt:netlify-cms");
 
 const WEBPACK_CLIENT_COMPILER_NAME = "client";
 const WEBPACK_NETLIFY_COMPILER_NAME = "netlify-cms";
-
-// Defaults
-const DEFAULTS = {
-  adminPath: "admin",
-  adminTitle: "Content Manager",
-  extensionsDir: "netlify-cms",
-  cmsConfig: {
-    media_folder: "static/uploads"
-  }
-};
+const NETLIFY_CONFIG_FILE_NAME = "config.yml";
 
 export default function NetlifyCmsModule(moduleOptions) {
-  const NETLIFY_CONFIG_FILE_NAME = join(
-    this.options.rootDir,
-    "netlify-cms.yml"
-  );
-
-  const getNetlifyCmsConfigFromFile = function() {
-    return loadYAMLFile(NETLIFY_CONFIG_FILE_NAME) || {};
-  };
-
-  const transformNetlifyCmsConfigPaths = config => {
-    return setConfigPaths(
-      config,
-      relative(this.options.rootDir, this.options.srcDir)
-    );
-  };
-
-  const getWebpackNetlifyConfig = function(
-    builder,
-    adminPath,
-    adminTitle,
-    extensionsDir
-  ) {
-    return webpackNetlifyConfig.call(
-      builder,
-      WEBPACK_NETLIFY_COMPILER_NAME,
-      adminPath,
-      adminTitle,
-      extensionsDir
-    );
-  };
-
-  const getDistDir = adminPath => {
-    return resolve(this.options.buildDir, "dist", adminPath);
-  };
-
-  const getOptions = () => {
-    const netlifyCmsConfig = getNetlifyCmsConfigFromFile();
-    const options = {
-      ...DEFAULTS,
-      cmsConfig: {
-        ...netlifyCmsConfig
-      },
-      ...this.options.netlifyCms,
-      ...moduleOptions
-    };
-    options.cmsConfig = transformNetlifyCmsConfigPaths(options.cmsConfig);
-    return options;
-  };
+  const configManager = new ConfigManager(this.options, moduleOptions);
+  const config = configManager.config;
 
-  const options = getOptions();
-  const ADMIN_PATH = options.adminPath.replace(/\/?$/, "/");
-  const ADMIN_TITLE = options.adminTitle;
-  const EXTENSIONS_DIR = options.extensionsDir;
-  const DIST_DIR = getDistDir(ADMIN_PATH);
+  const ADMIN_PATH = config.adminPath;
+  const EXTENSIONS_DIR = config.extensionsDir;
+  const BUILD_DIR = config.buildDir;
 
   // This will be called once when builder started
   this.nuxt.plugin("build", async builder => {
     // This will be run just before webpack compiler starts
     builder.plugin("compile", ({ builder, compiler }) => {
       const webpackConfig = getWebpackNetlifyConfig(
-        builder,
-        ADMIN_PATH,
-        ADMIN_TITLE,
-        EXTENSIONS_DIR
+        WEBPACK_NETLIFY_COMPILER_NAME,
+        this.options,
+        config
       );
 
       webpackConfig.plugins.push({
         apply(compiler) {
           compiler.plugin("emit", (compilation, cb) => {
-            const netlifyConfigYAML = toYAML(getOptions().cmsConfig);
-            compilation.assets["config.yml"] = {
+            const netlifyConfigYAML = toYAML(configManager.cmsConfig);
+            compilation.assets[NETLIFY_CONFIG_FILE_NAME] = {
               source: () => netlifyConfigYAML,
               size: () => netlifyConfigYAML.length
             };
@@ -178,7 +118,10 @@ export default function NetlifyCmsModule(moduleOptions) {
     });
 
     // Start watching config file
-    const patterns = [Utils.r(NETLIFY_CONFIG_FILE_NAME)];
+    const patterns = [
+      Utils.r(NETLIFY_CONFIG_FILE_NAME),
+      Utils.r(EXTENSIONS_DIR)
+    ];
 
     const options = {
       ...this.options.watchers.chokidar,
@@ -207,7 +150,7 @@ export default function NetlifyCmsModule(moduleOptions) {
     // Statically serve netlify CMS (i.e. .nuxt/dist/admin/) files in production
     this.addServerMiddleware({
       path: ADMIN_PATH,
-      handler: serveStatic(DIST_DIR, {
+      handler: serveStatic(BUILD_DIR, {
         maxAge: "1y" // 1 year in production
       })
     });

src/utils/cms.config.file.js

@@ -0,0 +1,21 @@
+import { singleton } from "needlepoint";
+
+import { loadYAMLFile } from "./yaml";
+
+@singleton
+class CmsConfig {
+  constructor(fileName) {
+    this._fileName = fileName;
+    this.readFile();
+  }
+
+  readFile() {
+    this._config = loadYAMLFile(this._fileName) || {};
+  }
+
+  get config() {
+    return this._config;
+  }
+}
+
+export default CmsConfig;

src/utils/netlify.config.js

@@ -1,5 +1,5 @@
 import { existsSync } from "fs";
-import { join, resolve } from "path";
+import { resolve } from "path";
 
 import { Utils } from "nuxt";
 /* eslint-disable import/no-extraneous-dependencies */
@@ -10,19 +10,29 @@ import ExtractTextPlugin from "extract-text-webpack-plugin";
 
 export default function webpackNetlifyCmsConfig(
   name,
-  urlPath,
-  pageTitle,
-  extensionsDir
+  nuxtOptions,
+  moduleConfig
 ) {
-  const EXTENSIONS_DIR = join(this.options.srcDir, extensionsDir);
+  const ENTRY = resolve(__dirname, "../lib/entry.js");
+  const BUILD_DIR = moduleConfig.buildDir;
+  const CHUNK_FILENAME = nuxtOptions.build.filenames.chunk;
+  const PUBLIC_PATH = Utils.urlJoin(
+    nuxtOptions.router.base,
+    moduleConfig.adminPath
+  );
+  const EXTENSIONS_DIR = moduleConfig.extensionsDir;
+  const PAGE_TITLE = moduleConfig.adminTitle;
+  const PAGE_TEMPLATE = resolve(__dirname, "../lib/template", "index.html");
+  const REQUIRE_EXTENSIONS = existsSync(EXTENSIONS_DIR) ? true : false;
+
   const config = {
     name,
-    entry: resolve(__dirname, "../lib/entry.js"),
+    entry: ENTRY,
     output: {
-      path: resolve(this.options.buildDir, "dist", urlPath),
+      path: BUILD_DIR,
       filename: "bundle.[chunkhash].js",
-      chunkFilename: this.options.build.filenames.chunk,
-      publicPath: Utils.urlJoin(this.options.router.base, urlPath)
+      chunkFilename: CHUNK_FILENAME,
+      publicPath: PUBLIC_PATH
     },
     module: {
       loaders: [
@@ -44,22 +54,22 @@ export default function webpackNetlifyCmsConfig(
     },
     plugins: [
       new HTMLPlugin({
-        title: pageTitle,
+        title: PAGE_TITLE,
         filename: "index.html",
-        template: resolve(__dirname, "../lib/template", "index.html"),
+        template: PAGE_TEMPLATE,
         inject: true,
         chunksSortMode: "dependency"
       }),
       new webpack.DefinePlugin({
-        REQUIRE_EXTENSIONS: existsSync(EXTENSIONS_DIR) ? true : false
+        REQUIRE_EXTENSIONS
       })
     ]
   };
 
   // --------------------------------------
   // Production specific config
   // --------------------------------------
-  if (!this.options.dev) {
+  if (!nuxtOptions.dev) {
     // CSS extraction
     config.plugins.push(
       new ExtractTextPlugin({

src/webpack.config.js

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`config netlify-cms.yml 1`] = `
-"backend:
+"media_folder: test/fixture/static/uploads
+backend:
   name: github
   repo: me/test
   branch: master
-media_folder: test/fixture/static/uploads
 collections:
   - name: pages
     label: Page