Merge pull request #1011 from Loonride/feat/serve-wip

[NEXT]: webpack-cli serve refactor draft

Author: evenstensberg

lib/bootstrap.js

@@ -1,11 +1,19 @@
-const webpackCli = require('./webpack-cli');
+const WebpackCLI = require('./webpack-cli');
 const { core, commands } = require('./utils/cli-flags');
 const cmdArgs = require('command-line-args');
 
 require('./utils/process-log');
 
 const isFlagPresent = (args, flag) => args.find(arg => [flag, `--${flag}`].includes(arg));
-const stripDashedFlags = (args, cmd) => args.slice(2).filter(arg => ~arg.indexOf('--') && arg !== cmd.name && arg !== cmd.alias);
+const isArgCommandName = (arg, cmd) => arg === cmd.name || arg === cmd.alias;
+const stripDashedFlags = (args, cmd) => args.filter(arg => !arg.includes('--') && !isArgCommandName(arg, cmd));
+const normalizeFlags = (args, cmd) => {
+    const slicedArgs = args.slice(2);
+    if (cmd.name === 'serve') {
+        return slicedArgs.filter(arg => !isArgCommandName(arg, cmd));
+    }
+    return stripDashedFlags(slicedArgs, cmd);
+};
 
 const isCommandUsed = commands =>
     commands.find(cmd => {
@@ -27,7 +35,7 @@ async function runCLI(cli, commandIsUsed) {
 
     if (commandIsUsed) {
         commandIsUsed.defaultOption = true;
-        args = stripDashedFlags(process.argv, commandIsUsed);
+        args = normalizeFlags(process.argv, commandIsUsed);
         return await cli.runCommand(commandIsUsed, ...args);
     } else {
         try {
@@ -41,8 +49,7 @@ async function runCLI(cli, commandIsUsed) {
             if (err.name === 'UNKNOWN_VALUE') {
                 process.cliLogger.error(`Parse Error (unknown argument): ${err.value}`);
                 return;
-            }
-            else if (err.name === 'ALREADY_SET') {
+            } else if (err.name === 'ALREADY_SET') {
                 const argsMap = {};
                 const keysToDelete = [];
                 process.argv.forEach((arg, idx) => {
@@ -75,9 +82,6 @@ async function runCLI(cli, commandIsUsed) {
     }
 }
 
-// eslint-disable-next-line space-before-function-paren
-(async () => {
-    const commandIsUsed = isCommandUsed(commands);
-    const cli = new webpackCli();
-    runCLI(cli, commandIsUsed);
-})();
+const commandIsUsed = isCommandUsed(commands);
+const cli = new WebpackCLI();
+runCLI(cli, commandIsUsed);

lib/commands/external.js

@@ -60,10 +60,6 @@ class ExternalCommand {
         if (!pkgLoc) {
             pkgLoc = await ExternalCommand.promptInstallation(scopeName, name);
         }
-        // Serve needs to be checked for
-        if (name === 'serve') {
-            return pkgLoc ? require(pkgLoc).serve(args) : null;
-        }
         return pkgLoc ? require(pkgLoc).default(args) : null;
     }
 }

lib/utils/cli-flags.js

@@ -39,6 +39,12 @@ module.exports = {
             type: String,
             description: 'Outputs information about your system and dependencies',
         },
+        {
+            name: 'serve',
+            scope: 'external',
+            type: String,
+            description: 'Run the webpack Dev Server',
+        },
     ],
     core: [
         {

lib/utils/compiler.js

@@ -112,7 +112,11 @@ function compilerCallback(compiler, err, stats, lastHash, options, outputOptions
     }
 }
 
-module.exports = async function webpackInstance(opts, shouldUseMem) {
+function getCompiler(opts) {
+    return webpack(opts.options);
+}
+
+async function webpackInstance(opts, shouldUseMem) {
     const { outputOptions, processingErrors, options } = opts;
     if (outputOptions.color) {
         require('supports-color').stdout;
@@ -122,7 +126,8 @@ module.exports = async function webpackInstance(opts, shouldUseMem) {
     if (processingErrors.length > 0) {
         throw new Error(processingErrors);
     }
-    const compiler = await webpack(options);
+
+    const compiler = await getCompiler(opts);
     let lastHash = null;
 
     const ProgressPlugin = webpack.ProgressPlugin;
@@ -197,3 +202,6 @@ module.exports = async function webpackInstance(opts, shouldUseMem) {
         return await invokeCompilerInstance(compiler, lastHash, options, outputOptions);
     }
 };
+
+module.exports.getCompiler = getCompiler;
+module.exports.webpackInstance = webpackInstance;

lib/utils/dev-server-flags.js

@@ -0,0 +1,193 @@
+const CONFIG_GROUP = 'Config options:';
+const ADVANCED_GROUP = 'Advanced options:';
+const DISPLAY_GROUP = 'Stats options:';
+const SSL_GROUP = 'SSL options:';
+const CONNECTION_GROUP = 'Connection options:';
+const RESPONSE_GROUP = 'Response options:';
+const BASIC_GROUP = 'Basic options:';
+
+module.exports = {
+    devServer: [
+        {
+            name: 'bonjour',
+            type: Boolean,
+            describe: 'Broadcasts the server via ZeroConf networking on start',
+        },
+        {
+            name: 'lazy',
+            type: Boolean,
+            describe: 'Lazy',
+        },
+        {
+            name: 'liveReload',
+            type: Boolean,
+            defaultValue: true,
+            describe: 'Enables/Disables live reloading on changing files',
+        },
+        {
+            name: 'serveIndex',
+            type: Boolean,
+            describe: 'Enables/Disables serveIndex middleware',
+            defaultValue: true,
+        },
+        {
+            name: 'inline',
+            type: Boolean,
+            defaultValue: true,
+            describe:
+                'Inline mode (set to false to disable including client scripts like livereload)',
+        },
+        {
+            name: 'profile',
+            type: Boolean,
+            describe: 'Print compilation profile data for progress steps',
+        },
+        {
+            name: 'progress',
+            type: Boolean,
+            describe: 'Print compilation progress in percentage',
+            group: BASIC_GROUP,
+        },
+        {
+            name: 'hot-only',
+            type: Boolean,
+            describe: 'Do not refresh page if HMR fails',
+            group: ADVANCED_GROUP,
+        },
+        {
+            name: 'stdin',
+            type: Boolean,
+            describe: 'close when stdin ends',
+        },
+        {
+            name: 'open',
+            type: String,
+            describe: 'Open the default browser, or optionally specify a browser name',
+        },
+        {
+            name: 'useLocalIp',
+            type: Boolean,
+            describe: 'Open default browser with local IP',
+        },
+        {
+            name: 'open-page',
+            type: String,
+            describe: 'Open default browser with the specified page',
+        },
+        {
+            name: 'client-log-level',
+            type: String,
+            group: DISPLAY_GROUP,
+            defaultValue: 'info',
+            describe:
+                'Log level in the browser (trace, debug, info, warn, error or silent)',
+        },
+        {
+            name: 'https',
+            type: Boolean,
+            group: SSL_GROUP,
+            describe: 'HTTPS',
+        },
+        {
+            name: 'http2',
+            type: Boolean,
+            group: SSL_GROUP,
+            describe: 'HTTP/2, must be used with HTTPS',
+        },
+        {
+            name: 'key',
+            type: String,
+            describe: 'Path to a SSL key.',
+            group: SSL_GROUP,
+        },
+        {
+            name: 'cert',
+            type: String,
+            describe: 'Path to a SSL certificate.',
+            group: SSL_GROUP,
+        },
+        {
+            name: 'cacert',
+            type: String,
+            describe: 'Path to a SSL CA certificate.',
+            group: SSL_GROUP,
+        },
+        {
+            name: 'pfx',
+            type: String,
+            describe: 'Path to a SSL pfx file.',
+            group: SSL_GROUP,
+        },
+        {
+            name: 'pfx-passphrase',
+            type: String,
+            describe: 'Passphrase for pfx file.',
+            group: SSL_GROUP,
+        },
+        {
+            name: 'content-base',
+            type: String,
+            describe: 'A directory or URL to serve HTML content from.',
+            group: RESPONSE_GROUP,
+        },
+        {
+            name: 'watch-content-base',
+            type: Boolean,
+            describe: 'Enable live-reloading of the content-base.',
+            group: RESPONSE_GROUP,
+        },
+        {
+            name: 'history-api-fallback',
+            type: Boolean,
+            describe: 'Fallback to /index.html for Single Page Applications.',
+            group: RESPONSE_GROUP,
+        },
+        {
+            name: 'compress',
+            type: Boolean,
+            describe: 'Enable gzip compression',
+            group: RESPONSE_GROUP,
+        },
+        // findPort is currently not set up
+        {
+            name: 'port',
+            type: Number,
+            describe: 'The port',
+            group: CONNECTION_GROUP,
+        },
+        {
+            name: 'disable-host-check',
+            type: Boolean,
+            describe: 'Will not check the host',
+            group: CONNECTION_GROUP,
+        },
+        {
+            name: 'socket',
+            type: String,
+            describe: 'Socket to listen',
+            group: CONNECTION_GROUP,
+        },
+        {
+            name: 'public',
+            type: String,
+            describe: 'The public hostname/ip address of the server',
+            group: CONNECTION_GROUP,
+        },
+        {
+            name: 'host',
+            type: String,
+            describe: 'The hostname/ip address the server will bind to',
+            group: CONNECTION_GROUP,
+        },
+        // use command-line-args "multiple" option, allowing the usage: --allowed-hosts host1 host2 host3
+        // instead of the old, comma-separated syntax: --allowed-hosts host1,host2,host3
+        {
+            name: 'allowed-hosts',
+            type: String,
+            describe:
+                'A list of hosts that are allowed to access the dev server, separated by spaces',
+            group: CONNECTION_GROUP,
+            multiple: true,
+        },
+    ],
+};

lib/webpack-cli.js

@@ -5,7 +5,7 @@ const Compiler = require('./utils/compiler');
 
 const webpackMerge = require('webpack-merge');
 
-class webpackCLI extends GroupHelper {
+class WebpackCLI extends GroupHelper {
     constructor() {
         super();
         this.groupMap = new Map();
@@ -104,12 +104,22 @@ class webpackCLI extends GroupHelper {
         return wrappedConfig;
     }
 
-    async run(args, yargsOptions) {
+    async processArgs(args, yargsOptions) {
         await this.setMappedGroups(args, yargsOptions);
         await this.resolveGroups();
         let groupResult = await this.runOptionGroups();
         groupResult = this.checkDefaults(groupResult);
-        const webpack = await Compiler(groupResult, this.shouldUseMem);
+        return groupResult;
+    }
+
+    async getCompiler(args, yargsOptions) {
+        const groupResult = await this.processArgs(args, yargsOptions);
+        return await Compiler.getCompiler(groupResult);
+    }
+
+    async run(args, yargsOptions) {
+        const groupResult = await this.processArgs(args, yargsOptions);
+        const webpack = await Compiler.webpackInstance(groupResult, this.shouldUseMem);
         return webpack;
     }
 
@@ -122,7 +132,7 @@ class webpackCLI extends GroupHelper {
         } else if (command.name === 'plugin') {
             command.name = 'generate-plugin';
         }
-        return require('./commands/external').run(command.name, ...args);
+        return await require('./commands/external').run(command.name, ...args);
     }
 
     runHelp() {
@@ -137,4 +147,4 @@ class webpackCLI extends GroupHelper {
 
 }
 
-module.exports = webpackCLI;
+module.exports = WebpackCLI;

packages/generators/types/json-loader.d.ts

@@ -1 +1,2 @@
+*.js.map
 *.js

packages/serve/.gitignore

@@ -0,0 +1,31 @@
+/**
+ *
+ * Converts dash-seperated strings to camel case
+ *
+ * @param {String} str - the string to convert
+ * 
+ * @returns {String} - new camel case string
+ */
+function dashesToCamelCase(str): string {
+    return str.replace(/-([a-z])/g, (g): string => g[1].toUpperCase());
+}
+
+/**
+ *
+ * Converts CLI args to camel case from dash-separated words
+ *
+ * @param {Object} args - argument object parsed by command-line-args
+ * 
+ * @returns {Object} - the same args object as passed in, with new keys
+ */
+export default function argsToCamelCase(args): object {
+    Object.keys(args).forEach((key): void => {
+        const newKey = dashesToCamelCase(key);
+        if (key !== newKey) {
+            const arg = args[key];
+            delete args[key];
+            args[newKey] = arg;
+        }
+    });
+    return args;
+}