Feature/generate loader

bin/config-yargs.js

@@ -25,6 +25,16 @@ module.exports = function(yargs) {
 				describe: 'Migrate your webpack configuration from webpack 1 to webpack 2',
 				group: INIT_GROUP
 			},
+			'generate-loader': {
+				type: 'boolean',
+				describe: 'Generates a new webpack loader project',
+				group: INIT_GROUP
+			},
+			'generate-plugin': {
+				type: 'boolean',
+				describe: 'Generates a new webpack plugin project',
+				group: INIT_GROUP
+			},
 			'config': {
 				type: 'string',
 				describe: 'Path to the config file',

bin/webpack.js

@@ -155,18 +155,22 @@ if(argv.verbose) {
 	argv['display-cached'] = true;
 	argv['display-cached-assets'] = true;
 }
-if(argv._.includes('init')) {
+if(argv._.indexOf('init') >= 0) {
 	const initPkgs = argv._.length === 1 ? [] : [argv._.pop()];
 
 	return require('../lib/initialize')(initPkgs);
-} else if(argv._.includes('migrate')) {
+} else if(argv._.indexOf('migrate') >= 0) {
 	const filePaths = argv._.length === 1 ? [] : [argv._.pop()];
 	if (!filePaths.length) {
 		throw new Error('Please specify a path to your webpack config');
 	}
 	const inputConfigPath = path.resolve(process.cwd(), filePaths[0]);
 
 	return require('../lib/migrate.js')(inputConfigPath, inputConfigPath);
+} else if(argv._.indexOf('generate-loader') >= 0) {
+	return require('../lib/generate-loader/index.js')();
+} else if(argv._.indexOf('generate-plugin') >= 0) {
+	return require('../lib/generate-plugin/index.js')();
 } else {
 	var options = require('./convert-argv')(yargs, argv);
 

lib/generate-loader/index.js

@@ -0,0 +1,16 @@
+const yeoman = require('yeoman-environment');
+const LoaderGenerator = require('./loader-generator').LoaderGenerator;
+
+/**
+ * Runs a yeoman generator to create a new webpack loader project
+ */
+function loaderCreator() {
+	let env = yeoman.createEnv();
+	const generatorName = 'webpack-loader-generator';
+
+	env.registerStub(LoaderGenerator, generatorName);
+
+	env.run(generatorName);
+}
+
+module.exports = loaderCreator;

lib/generate-loader/loader-generator.js

@@ -0,0 +1,58 @@
+const path = require('path');
+const _ = require('lodash');
+const webpackGenerator = require('../utils/webpack-generator');
+
+/**
+ * Formats a string into webpack loader format
+ * (eg: 'style-loader', 'raw-loader')
+ *
+ * @param {string} name A loader name to be formatted
+ * @returns {string} The formatted string
+ */
+function makeLoaderName(name) {
+	name = _.kebabCase(name);
+	if (!/loader$/.test(name)) {
+		name += '-loader';
+	}
+	return name;
+}
+
+/**
+ * A yeoman generator class for creating a webpack
+ * loader project. It adds some starter loader code
+ * and runs `webpack-defaults`.
+ *
+ * @class LoaderGenerator
+ * @extends {Generator}
+ */
+const LoaderGenerator = webpackGenerator(
+	[{
+		type: 'input',
+		name: 'name',
+		message: 'Loader name',
+		default: 'my-loader',
+		filter: makeLoaderName,
+		validate: str => str.length > 0,
+	}],
+	path.join(__dirname, 'templates'),
+	[
+		'src/cjs.js.tpl',
+		'test/test-utils.js.tpl',
+		'test/unit.test.js.tpl',
+		'test/functional.test.js.tpl',
+		'test/fixtures/simple-file.js.tpl',
+		'examples/simple/webpack.config.js.tpl',
+		'examples/simple/src/index.js.tpl',
+		'examples/simple/src/lazy-module.js.tpl',
+		'examples/simple/src/static-esm-module.js.tpl',
+	],
+	[
+		'src/_index.js.tpl',
+	],
+	(gen) => ({ name: gen.props.name })
+);
+
+module.exports = {
+	makeLoaderName,
+	LoaderGenerator,
+};

lib/generate-loader/loader-generator.test.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const makeLoaderName = require('./loader-generator').makeLoaderName;
+
+describe('makeLoaderName', () => {
+
+	it('should kebab-case loader name and append \'-loader\'', () => {
+		const loaderName = makeLoaderName('This is a test');
+		expect(loaderName).toEqual('this-is-a-test-loader');
+	});
+
+	it('should not modify a properly formatted loader name', () => {
+		const loaderName = makeLoaderName('properly-named-loader');
+		expect(loaderName).toEqual('properly-named-loader');
+	});
+
+});

lib/generate-loader/templates/examples/simple/src/index.js.tpl

@@ -0,0 +1,11 @@
+import esmModule from './static-esm-module';
+
+const getLazyModule = () => System.import('./lazy-module');
+
+setTimeout(() => {
+  getLazyModule.then((modDefault) => {
+    console.log(modDefault); //eslint-disable-line
+  });
+}, 300);
+
+console.log(esmModule); //eslint-disable-line

lib/generate-loader/templates/examples/simple/src/lazy-module.js.tpl

@@ -0,0 +1 @@
+export default 'lazy';

lib/generate-loader/templates/examples/simple/src/static-esm-module.js.tpl

@@ -0,0 +1 @@
+export default 'foo';

lib/generate-loader/templates/examples/simple/webpack.config.js.tpl

@@ -0,0 +1,27 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.join(__dirname, 'example_dist'),
+    filename: '[name].chunk.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: [
+          {
+            loader: 'example-loader',
+            options: {},
+          },
+        ],
+      },
+    ],
+  },
+  resolveLoader: {
+    alias: {
+      'example-loader': require.resolve('../../src/'),
+    },
+  },
+};

lib/generate-loader/templates/src/_index.js.tpl

@@ -0,0 +1,25 @@
+/**
+ * See the webpack docs for more information about loaders:
+ * https://github.com/webpack/docs/wiki/how-to-write-a-loader
+ */
+
+export default function loader(source) {
+	const { loaders, resource, request, version, webpack } = this;
+
+	const newSource = `
+	/**
+	 * <%= name %>
+	 *
+	 * Resource Location: ${resource}
+	 * Loaders chained to module: ${JSON.stringify(loaders)}
+	 * Loader API Version: ${version}
+	 * Is this in "webpack mode": ${webpack}
+	 * This is the users request for the module: ${request}
+	 */
+	/**
+	 * Original Source From Loader
+	 */
+	${source}`;
+
+	return newSource;
+}

lib/generate-loader/templates/src/cjs.js.tpl

@@ -0,0 +1 @@
+module.exports = require('./index').default;

lib/generate-loader/templates/test/fixtures/simple-file.js.tpl

@@ -0,0 +1,3 @@
+import foo from "./foo"; // eslint-disable-line
+
+console.log(foo);

lib/generate-loader/templates/test/functional.test.js.tpl

@@ -0,0 +1,21 @@
+import {
+	runWebpackExampleInMemory,
+} from '../test/test-utils';
+
+test('should run with no errors or warnings', async () => {
+	const buildStats = await runWebpackExampleInMemory('simple');
+	const { errors, warnings } = buildStats;
+
+	expect([...errors, ...warnings].length).toBe(0);
+});
+
+test('should append transformations to JavaScript module', async () => {
+	const buildStats = await runWebpackExampleInMemory('simple');
+	const { modules } = buildStats;
+
+	const moduleToTest = modules[0].source()._source._value; //eslint-disable-line
+	const loadedString = '* Original Source From Loader';
+
+	expect(moduleToTest).toEqual(expect.stringContaining(loadedString));
+	expect(moduleToTest).toMatchSnapshot();
+});

lib/generate-loader/templates/test/test-utils.js.tpl

@@ -0,0 +1,82 @@
+import path from 'path';
+import webpack from 'webpack';
+import Promise from 'bluebird';
+import MemoryFs from 'memory-fs';
+
+const fs = new MemoryFs();
+const unitTestFixtures = path.resolve(__dirname, 'fixtures');
+
+/**
+ *
+ *
+ * @param {string} fixtureName
+ * @param {string} [withQueryString='']
+ * @returns {string} Absolute path of a file with query that is to be run by a loader.
+ */
+function getFixtureResource(fixtureName, withQueryString = '') {
+	return `${getFixture(fixtureName)}?${withQueryString}`;
+}
+
+/**
+ *
+ *
+ * @param {string} fixtureName
+ * @returns {string} Absolute path of a file with query that is to be run by a loader.
+ */
+function getFixture(fixtureName) {
+	return path.resolve(unitTestFixtures, `${fixtureName}.js`);
+}
+
+/**
+ *
+ *
+ * @param {Object} withOptions - Loader Options
+ * @returns {{loader: string, options: Object}}
+ */
+function getLoader(withOptions) {
+	return [{ loader: path.resolve(__dirname, '../dist/index.js'), options: withOptions }];
+}
+
+/**
+ *
+ *
+ * @param {string} exampleName
+ * @returns {Object|Array} - Returns an object or array of objects representing the webpack configuration options
+ */
+function getExampleConfig(exampleName) {
+	return require(`../examples/${exampleName}/webpack.config.js`); //eslint-disable-line
+}
+
+/**
+ *
+ *
+ * @param {string} exampleName - name of example inside of examples folder
+ * @returns
+ */
+async function runWebpackExampleInMemory(exampleName) {
+	const webpackConfig = getExampleConfig(exampleName);
+	const compiler = webpack(webpackConfig);
+
+	compiler.outputFileSystem = fs;
+
+	const run = Promise.promisify(compiler.run, { context: compiler });
+	const stats = await run();
+
+
+	const { compilation } = stats;
+	const { errors, warnings, assets, entrypoints, chunks, modules } = compilation;
+	const statsJson = stats.toJson();
+
+	return {
+		assets,
+		entrypoints,
+		errors,
+		warnings,
+		stats,
+		chunks,
+		modules,
+		statsJson,
+	};
+}
+
+export { getExampleConfig, runWebpackExampleInMemory, fs, getFixtureResource, getLoader, getFixture };

lib/generate-loader/templates/test/unit.test.js.tpl

@@ -0,0 +1,32 @@
+import fs from 'fs';
+import Promise from 'bluebird';
+import { runLoaders } from 'loader-runner';
+import { getFixtureResource, getFixture, getLoader } from './test-utils';
+
+const runLoadersPromise = Promise.promisify(runLoaders);
+const readFilePromise = Promise.promisify(fs.readFile, { context: fs });
+
+
+const loaders = getLoader();
+
+describe('Example Loader Tests: Fixture: simple-file', () => {
+	const fixtureName = 'simple-file';
+	const resource = getFixture(fixtureName);
+
+	test('loaded file should be different', async () => {
+		const originalSource = await readFilePromise(resource);
+		const { result } = await runLoadersPromise({ resource: getFixtureResource(fixtureName), loaders });
+
+		expect(result).not.toEqual(originalSource);
+	});
+
+	test('loader prepends correct information', async () => {
+		const { result } = await runLoadersPromise({ resource: getFixtureResource(fixtureName), loaders });
+		const resultMatcher = expect.arrayContaining([
+			expect.stringContaining(' * Original Source From Loader'),
+		]);
+
+		expect(result).toEqual(resultMatcher);
+		expect(result).toMatchSnapshot();
+	});
+});

lib/generate-plugin/index.js

@@ -0,0 +1,16 @@
+const yeoman = require('yeoman-environment');
+const PluginGenerator = require('./plugin-generator').PluginGenerator;
+
+/**
+ * Runs a yeoman generator to create a new webpack plugin project
+ */
+function pluginCreator() {
+	let env = yeoman.createEnv();
+	const generatorName = 'webpack-plugin-generator';
+
+	env.registerStub(PluginGenerator, generatorName);
+
+	env.run(generatorName);
+}
+
+module.exports = pluginCreator;