Add a plugin system

lerna.json

@@ -5,6 +5,7 @@
     "packages/babel-preset-razzle",
     "packages/create-razzle-app",
     "packages/razzle-dev-utils",
+    "packages/razzle-plugin-*",
     "examples/*"
   ],
   "useWorkspaces": true,

package.json

@@ -52,6 +52,7 @@
     "packages/babel-preset-razzle",
     "packages/create-razzle-app",
     "packages/razzle-dev-utils",
+    "packages/razzle-plugin-*",
     "examples/*"
   ]
 }

packages/razzle/config/createConfig.js

@@ -11,6 +11,7 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const autoprefixer = require('autoprefixer');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const paths = require('./paths');
+const runPlugin = require('./runPlugin');
 const getClientEnv = require('./env').getClientEnv;
 const nodePath = require('./env').nodePath;
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
@@ -36,7 +37,8 @@ const postCssOptions = {
 module.exports = (
   target = 'web',
   env = 'dev',
-  { clearConsole = true, host = 'localhost', port = 3000 }
+  { clearConsole = true, host = 'localhost', port = 3000, modify, plugins },
+  webpackObject
 ) => {
   // First we check to see if the user has a custom .babelrc file, otherwise
   // we just use babel-preset-razzle.
@@ -571,5 +573,23 @@ module.exports = (
     ];
   }
 
+  // Apply razzle plugins, if they are present in razzle.config.js
+  if (Array.isArray(plugins)) {
+    plugins.forEach(plugin => {
+      config = runPlugin(
+        plugin,
+        config,
+        { target, dev: IS_DEV },
+        webpackObject
+      );
+    });
+  }
+
+  // Check if razzle.config has a modify function. If it does, call it on the
+  // configs we created.
+  if (modify) {
+    config = modify(config, { target, dev: IS_DEV }, webpackObject);
+  }
+
   return config;
 };

packages/razzle/config/runPlugin.js

@@ -0,0 +1,25 @@
+'use strict';
+
+function runPlugin(plugin, config, { target, dev }, webpack) {
+  if (typeof plugin === 'string') {
+    // Apply the plugin with default options if passing only a string
+    return runPlugin({ name: plugin }, config, { target, dev }, webpack);
+  }
+
+  if (typeof plugin.func === 'function') {
+    // Used for writing plugin tests
+    return plugin.func(config, { target, dev }, webpack, plugin.options);
+  }
+
+  const completePluginName = `razzle-plugin-${plugin.name}`;
+
+  // Try to find the plugin in node_modules
+  const razzlePlugin = require(completePluginName);
+  if (!razzlePlugin) {
+    throw new Error(`Unable to find '${completePluginName}`);
+  }
+
+  return razzlePlugin(config, { target, dev }, webpack, plugin.options);
+}
+
+module.exports = runPlugin;

packages/razzle/scripts/build.js

@@ -91,21 +91,6 @@ ${razzle.port !== '3000' && `PORT=${razzle.port}`}
   let clientConfig = createConfig('web', 'prod', razzle);
   let serverConfig = createConfig('node', 'prod', razzle);
 
-  // Check if razzle.config has a modify function. If it does, call it on the
-  // configs we just created.
-  if (razzle.modify) {
-    clientConfig = razzle.modify(
-      clientConfig,
-      { target: 'web', dev: false },
-      webpack
-    );
-    serverConfig = razzle.modify(
-      serverConfig,
-      { target: 'node', dev: false },
-      webpack
-    );
-  }
-
   process.noDeprecation = true; // turns off that loadQuery clutter.
 
   console.log('Creating an optimized production build...');

packages/razzle/scripts/start.js

@@ -43,23 +43,8 @@ function main() {
 
   // Create dev configs using our config factory, passing in razzle file as
   // options.
-  let clientConfig = createConfig('web', 'dev', razzle);
-  let serverConfig = createConfig('node', 'dev', razzle);
-
-  // Check if razzle.config has a modify function. If it does, call it on the
-  // configs we just created.
-  if (razzle.modify) {
-    clientConfig = razzle.modify(
-      clientConfig,
-      { target: 'web', dev: true },
-      webpack
-    );
-    serverConfig = razzle.modify(
-      serverConfig,
-      { target: 'node', dev: true },
-      webpack
-    );
-  }
+  let clientConfig = createConfig('web', 'dev', razzle, webpack);
+  let serverConfig = createConfig('node', 'dev', razzle, webpack);
 
   // Compile our assets with webpack
   const clientCompiler = compile(clientConfig);