Feature/generate loader

bin/config-yargs.js

@@ -28,6 +28,16 @@ module.exports = function(yargs) {
 					"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

@@ -159,18 +159,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,17 @@
+var yeoman = require("yeoman-environment");
+var LoaderGenerator = require("./loader-generator").LoaderGenerator;
+
+/**
+ * Runs a yeoman generator to create a new webpack loader project
+ * @returns {void}
+ */
+function loaderCreator() {
+	var env = yeoman.createEnv();
+	var generatorName = "webpack-loader-generator";
+
+	env.registerStub(LoaderGenerator, generatorName);
+
+	env.run(generatorName);
+}
+
+module.exports = loaderCreator;

lib/generate-loader/loader-generator.js

@@ -0,0 +1,58 @@
+var path = require("path");
+var _ = require("lodash");
+var 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}
+ */
+var 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";
+
+var makeLoaderName = require("./loader-generator").makeLoaderName;
+
+describe("makeLoaderName", () => {
+
+	it("should kebab-case loader name and append '-loader'", () => {
+		var loaderName = makeLoaderName("This is a test");
+		expect(loaderName).toEqual("this-is-a-test-loader");
+	});
+
+	it("should not modify a properly formatted loader name", () => {
+		var 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);
+  });
+}, 300);
+
+console.log(esmModule);

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;
+	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`);
+}
+
+/**
+ *
+ *
+ * @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,17 @@
+var yeoman = require("yeoman-environment");
+var PluginGenerator = require("./plugin-generator").PluginGenerator;
+
+/**
+ * Runs a yeoman generator to create a new webpack plugin project
+ * @returns {void}
+ */
+function pluginCreator() {
+	var env = yeoman.createEnv();
+	var generatorName = "webpack-plugin-generator";
+
+	env.registerStub(PluginGenerator, generatorName);
+
+	env.run(generatorName);
+}
+
+module.exports = pluginCreator;