[WIP] UI: endpoint for init

packages/init/config.ts

@@ -9,7 +9,7 @@ export class Config {
 	// Data members
 	private configName: string = "";
 	private topScope: string[] = [""];
-	private webpackOptions: IWebpackOptions = {};
+	public webpackOptions: IWebpackOptions = {};
 	private merge: object = {};
 	private configPath: string = process.cwd();
 

packages/ui-gui/README.md

@@ -4,9 +4,8 @@ GUI for `webpack-cli ui`
 
 #### Package Structure (base: `./`)
 
-1. `./`: Backend will serve from root folder
+1. `./build`: contains bundled resources and frontend serves from this folder.
 2. `./src` : contains source
-3. `./build`: contains bundled resources
 
 ## CLI Commands
 ``` bash
@@ -21,3 +20,4 @@ npm run build
 
 # test the production build locally
 npm run serve
+```

packages/ui-server/.gitignore

@@ -0,0 +1 @@
+/utils/**.js

packages/ui-server/routes/api/_entry.js

@@ -0,0 +1,85 @@
+/* eslint-disable node/no-unpublished-require */
+const InputValidate = require("../../../webpack-scaffold").InputValidate;
+const webpackEntryPoint = {};
+function forEachPromise(entries, fn) {
+	return entries.reduce((promise, prop) => {
+		const trimmedProp = prop.trim();
+
+		return promise.then((n) => {
+			if (n) {
+				Object.keys(n).forEach((val) => {
+					if (
+						n[val].charAt(0) !== "(" &&
+						n[val].charAt(0) !== "[" &&
+						!n[val].includes("function") &&
+						!n[val].includes("path") &&
+						!n[val].includes("process")
+					) {
+						n[val] = `\'${n[val].replace(/"|'/g, "").concat(".js")}\'`;
+					}
+					webpackEntryPoint[val] = n[val];
+				});
+			} else {
+				n = {};
+			}
+			return fn(trimmedProp);
+		});
+	}, Promise.resolve());
+}
+/**
+ * Asks for entry points, either if it has multiple or one entry
+ * @param {Object} questioner Instance of TCP questioner used by init endpoint
+ * @param {Object} answer Boolean answer to whether mutiple entries are used or not
+ * @returns {Object} An Object to entry for webpack config
+ */
+module.exports = function(questioner, answer) {
+	if (answer.entryType === true) {
+		return questioner.question({
+			action: "question",
+			question: InputValidate(
+				"multipleEntries",
+				"Type the names you want for your modules (entry files), separated by comma [example: app,vendor]"
+			),
+		}).then((entries) => {
+			return forEachPromise(entries, (entryProp) => {
+				return questioner.question({
+					action: "question",
+					question: InputValidate(
+						`${entryProp}`,
+						`What is the location of "${entryProp}"? [example: ./src/${entryProp}]`
+					),
+				});
+			}).then((entryPropAnswer) => {
+				Object.keys(entryPropAnswer).forEach(val => {
+					if (
+						entryPropAnswer[val].charAt(0) !== "(" &&
+						entryPropAnswer[val].charAt(0) !== "[" &&
+						!entryPropAnswer[val].includes("function") &&
+						!entryPropAnswer[val].includes("path") &&
+						!entryPropAnswer[val].includes("process")
+					) {
+						entryPropAnswer[val] = `\'${entryPropAnswer[val]
+							.replace(/"|'/g, "")
+							.concat(".js")}\'`;
+					}
+					webpackEntryPoint[val] = entryPropAnswer[val];
+				});
+				return webpackEntryPoint;
+			});
+		});
+	} else {
+		return questioner.question({
+			action: "question",
+			question: InputValidate(
+				"singularEntry",
+				"Which module will be the first to enter the application? [default: ./src/index]"
+			)
+		}).then((singularEntryAnswer) => {
+			let singularEntry = singularEntryAnswer.singularEntry;
+			if (singularEntry.indexOf("\"") >= 0) {
+				singularEntry = singularEntry.replace(/"/g, "'");
+			}
+			return singularEntry;
+		});
+	}
+};

packages/ui-server/routes/api/_module.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * Returns an module.rule object that has the babel loader if invoked
+ *
+ * @returns {Function} A callable function that adds the babel-loader with env preset
+ */
+module.exports = function() {
+	return {
+		include: ["path.resolve(__dirname, 'src')"],
+		loader: "'babel-loader'",
+		options: {
+			plugins: [
+				"'syntax-dynamic-import'",
+			],
+			presets: [
+				[
+					"'env'",
+					{
+						"'modules'": false,
+					},
+				],
+			],
+		},
+		test: `${new RegExp(/\.js$/)}`,
+	};
+};

packages/ui-server/routes/api/_plugins.js

@@ -0,0 +1,7 @@
+/**
+ * Callable function with the initial plugins
+ *
+ * @returns {Function} An function that returns an array
+ * that consists of the uglify plugin
+ */
+module.exports = () => ["new UglifyJSPlugin()"];

packages/ui-server/routes/api/_tooltip.js

@@ -0,0 +1,50 @@
+/**
+ *
+ * Tooltip object that consists of tooltips for various of
+ * features
+ *
+ * @returns {Object} An Object that consists of tooltip methods to be invoked
+ */
+module.exports = {
+	cssPlugin: () => `/*
+* We've enabled MiniCssExtractPlugin for you. This allows your app to
+* use css modules that will be moved into a separate CSS file instead of inside
+* one of your module entries!
+*
+* https://github.com/webpack-contrib/mini-css-extract-plugin
+*
+*/`,
+	splitChunks: () => `/*
+* SplitChunksPlugin is enabled by default and replaced
+* deprecated CommonsChunkPlugin. It automatically identifies modules which
+* should be splitted of chunk by heuristics using module duplication count and
+* module category (i. e. node_modules). And splits the chunks…
+*
+* It is safe to remove "splitChunks" from the generated configuration
+* and was added as an educational example.
+*
+* https://webpack.js.org/plugins/split-chunks-plugin/
+*
+*/`,
+	postcss: () => `/*
+* We've enabled Postcss, autoprefixer and precss for you. This allows your app
+* to lint  CSS, support variables and mixins, transpile future CSS syntax,
+* inline images, and more!
+*
+* To enable SASS or LESS, add the respective loaders to module.rules
+*
+* https://github.com/postcss/postcss
+*
+* https://github.com/postcss/autoprefixer
+*
+* https://github.com/jonathantneal/precss
+*
+*/`,
+	uglify: () => `/*
+* We've enabled UglifyJSPlugin for you! This minifies your app
+* in order to load faster and run less javascript.
+*
+* https://github.com/webpack-contrib/uglifyjs-webpack-plugin
+*
+*/`
+};