feat: finish up scripts for server and build

Now we need to hook into commander.js.

packages/scripts/package.json

@@ -23,6 +23,8 @@
     "@types/browser-sync": "^0.0.42",
     "@types/node": "^10.11.3",
     "@types/webpack": "^4.4.13",
+    "@types/webpack-dev-middleware": "^2.0.2",
+    "@types/webpack-hot-middleware": "^2.16.4",
     "autoprefixer": "^9.1.5",
     "babel-loader": "^8.0.2",
     "browser-sync": "^2.24.7",
@@ -34,9 +36,11 @@
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
+    "slugify": "^1.3.1",
     "style-loader": "^0.23.0",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "webpack": "^4.20.2",
+    "webpack-dashboard": "^2.0.0",
     "webpack-dev-middleware": "^3.4.0",
     "webpack-hot-middleware": "^2.24.0",
     "webpack-merge": "^4.1.4"
@@ -58,5 +62,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "devDependencies": {
+    "dts-gen": "^0.5.7"
   }
 }

packages/scripts/src/@types/webpack-dashboard/index.d.ts

@@ -0,0 +1,44 @@
+/** Declaration file generated by dts-gen */
+
+export = webpack_dashboard;
+
+declare namespace webpack_dashboard {
+    namespace prototype {
+        function clear(...args: any[]): void;
+
+        function layoutAssets(...args: any[]): void;
+
+        function layoutLog(...args: any[]): void;
+
+        function layoutModules(...args: any[]): void;
+
+        function layoutProblems(...args: any[]): void;
+
+        function layoutStatus(...args: any[]): void;
+
+        function mapNavigationKeysToScrollLog(...args: any[]): void;
+
+        function setData(...args: any[]): void;
+
+        function setLog(...args: any[]): void;
+
+        function setOperations(...args: any[]): void;
+
+        function setProblems(...args: any[]): void;
+
+        function setProblemsError(...args: any[]): void;
+
+        function setProgress(...args: any[]): void;
+
+        function setSizes(...args: any[]): void;
+
+        function setSizesError(...args: any[]): void;
+
+        function setStats(...args: any[]): void;
+
+        function setStatus(...args: any[]): void;
+
+    }
+
+}
+

packages/scripts/src/@types/webpack-dashboard/plugin.d.ts

@@ -0,0 +1,5 @@
+declare module 'webpack-dashboard/plugin' {
+	import * as Tapable from 'tapable';
+	export default class DashboardPlugin extends Tapable.Tapable{}
+}
+

packages/scripts/src/config/CreateWebpackConfig.ts

@@ -87,6 +87,7 @@ export class CreateWebpackConfig {
 			bannerConfig,
 			alias,
 			optimizeSplitChunks,
+			outputPath,
 		} = this.projectConfig;
 		const { host, port } = this.serverConfig;
 		const helper: WebpackConfigHelper = new WebpackConfigHelper(
@@ -101,6 +102,7 @@ export class CreateWebpackConfig {
 				bannerConfig,
 				alias,
 				optimizeSplitChunks,
+				outputPath,
 			},
 			this.isDev
 		);

packages/scripts/src/config/WebpackConfigHelper.ts

@@ -1,5 +1,7 @@
 import cleanWebpackPlugin from 'clean-webpack-plugin';
 import miniCssExtractPlugin from 'mini-css-extract-plugin';
+import path from 'path';
+import slugify from 'slugify';
 import webpack from 'webpack';
 import {
 	BannerConfig,
@@ -17,6 +19,7 @@ interface Config {
 	slug: ProjectConfig['slug'];
 	host: ServerConfig['host'];
 	port: ServerConfig['port'];
+	outputPath: ProjectConfig['outputPath'];
 	hasReact: ProjectConfig['hasReact'];
 	hasSass: ProjectConfig['hasSass'];
 	bannerConfig: BannerConfig;
@@ -120,12 +123,18 @@ export class WebpackConfigHelper {
 	public getOutput(): webpack.Output {
 		// Now use the config to create a output
 		// Destucture stuff we need from config
-		const { type, slug, host, port } = this.config;
+		const { type, slug, host, port, outputPath } = this.config;
 		// and file
-		const { path, filename } = this.file;
+		const { name, filename } = this.file;
+		const outputInnerDir: string = slugify(name, { lower: true });
 		// Assuming it is production
 		const output: webpack.Output = {
-			path,
+			// Here we create a directory inside the user provided outputPath
+			// The name of the directory is the sluggified verion of `name`
+			// of this configuration object.
+			// Also here we assume, user has passed in the correct `relative`
+			// path for `outputPath`. Otherwise this will break.
+			path: path.join(process.cwd(), outputPath, outputInnerDir),
 			filename,
 			// leave blank because we would handle with free variable
 			// __webpack_public_path__ in runtime.
@@ -139,7 +148,7 @@ export class WebpackConfigHelper {
 			// Maybe we can have a `prefix` in Config, but let's not do that
 			// right now.
 			output.publicPath = `//${host ||
-				'localhost'}:${port}/wp-content/${contentDir}/${slug}/`;
+				'localhost'}:${port}/wp-content/${contentDir}/${slug}/${outputPath}/${outputInnerDir}`;
 		}
 
 		return output;

packages/scripts/src/config/project.config.default.ts

@@ -1,3 +1,4 @@
+import path from 'path';
 import webpack from 'webpack';
 
 // Export common interfaces
@@ -28,7 +29,6 @@ export interface EntryConfig {
 export interface FileConfig {
 	name: string;
 	entry: EntryConfig;
-	path: string;
 	filename: string;
 	webpackConfig?: webpack.Configuration;
 }
@@ -41,12 +41,24 @@ export interface ProjectConfig {
 	slug: string;
 	bannerConfig: BannerConfig;
 	files: FileConfig[];
+	/**
+	 * The relative path of the output directory, w.r.t the directory
+	 * from where the script has been called.
+	 *
+	 * It has to be relative, otherwise we possibly can not make
+	 * hot-reload work.
+	 *
+	 * The script should be called from the root of your project. Otherwise
+	 * we can not know how to create the URL of assets.
+	 */
+	outputPath: string;
 	hasReact: boolean;
 	hasSass: boolean;
 	externals?: webpack.Configuration['externals'];
 	alias?: webpack.Resolve['alias'];
 	errorOverlay?: boolean;
 	optimizeSplitChunks: boolean;
+	watch?: string;
 }
 
 /**
@@ -78,12 +90,12 @@ export const projectConfigDefault: ProjectConfig = {
 		// 		main: ['src/mobile.js'],
 		// 	},
 		// 	filename: '[name].js',
-		// 	path: path.resolve(process.cwd(), 'dist'),
 		// 	// Extra webpack config to be passed directly
 		// 	webpackConfig: undefined,
 		// },
 		// If has more length, then multi-compiler
 	],
+	outputPath: 'dist',
 	// Project specific config
 	// Needs react?
 	hasReact: true,
@@ -102,4 +114,6 @@ export const projectConfigDefault: ProjectConfig = {
 	// <https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks>
 	// Won't hurt because we use PHP to automate loading
 	optimizeSplitChunks: true,
+	// Usually PHP and other files to watch and reload when changed
+	watch: 'inc/**/*.php',
 };

packages/scripts/src/scripts/Build.ts

@@ -0,0 +1,42 @@
+import webpack from 'webpack';
+import { CreateWebpackConfig } from '../config/CreateWebpackConfig';
+import { ProjectConfig } from '../config/project.config.default';
+import { ServerConfig } from '../config/server.config.default';
+
+export class Build {
+	private projectConfig: ProjectConfig;
+	private serverConfig: ServerConfig;
+
+	constructor(projectConfig: ProjectConfig, serverConfig: ServerConfig) {
+		this.projectConfig = projectConfig;
+		this.serverConfig = serverConfig;
+	}
+
+	/**
+	 * Build the files.
+	 */
+	public build(): Promise<string> {
+		return new Promise((resolve, reject) => {
+			const config = new CreateWebpackConfig(
+				this.projectConfig,
+				this.serverConfig,
+				false
+			);
+			const compiler = webpack(
+				config.getConfig() as webpack.Configuration
+			);
+			compiler.run((err, stats) => {
+				if (err || stats.hasErrors()) {
+					reject(stats.toString({ colors: true }));
+				}
+				resolve(
+					stats.toString({
+						colors: true,
+						assets: true,
+						chunks: true,
+					})
+				);
+			});
+		});
+	}
+}