🔀 Merge pull request #19 from gluons/ssr

✨ Add SSR support

package.json

@@ -14,13 +14,16 @@
     "url": "git+https://github.com/gluons/vue-pack.git"
   },
   "devDependencies": {
+    "@types/cheerio": "^0.22.9",
     "@types/jest": "^23.3.2",
     "@types/node": "8",
     "@types/webpack": "^4.4.11",
+    "@vue/server-test-utils": "^1.0.0-beta.25",
     "@vue/test-utils": "^1.0.0-beta.25",
     "babel-core": "^6.26.3",
     "babel-jest": "^23.6.0",
     "chalk": "^2.4.1",
+    "cheerio": "^1.0.0-rc.2",
     "cross-env": "^5.2.0",
     "jest": "^23.6.0",
     "lerna": "^3.4.0",
@@ -33,6 +36,7 @@
     "typescript": "^3.0.3",
     "vue": "^2.5.17",
     "vue-class-component": "^6.2.0",
+    "vue-server-renderer": "^2.5.17",
     "vue-template-compiler": "^2.5.17"
   }
 }

packages/@gluons/plugin-splitchunks/README.md

@@ -55,6 +55,11 @@ const options = {
 
 		return splitChunks;
 	},
+	tapSSR(splitChunks) {
+		// Do anything with `splitChunks`
+
+		return splitChunks;
+	}
 	tapWeb(splitChunks) {
 		// Do anything with `splitChunks`
 

packages/@gluons/plugin-splitchunks/src/index.ts

@@ -13,18 +13,37 @@ export { TapFunction };
 export interface SplitChunksPluginOptions {
 	/**
 	 * A function to tap `splitChunks` in all configs
+	 *
+	 * @type {TapFunction}
+	 * @memberof SplitChunksPluginOptions
 	 */
 	tapAll?: TapFunction;
 	/**
 	 * A function to tap `splitChunks` in CommonJS config
+	 *
+	 * @type {TapFunction}
+	 * @memberof SplitChunksPluginOptions
 	 */
 	tapCJS?: TapFunction;
 	/**
 	 * A function to tap `splitChunks` in ES module config
+	 *
+	 * @type {TapFunction}
+	 * @memberof SplitChunksPluginOptions
 	 */
 	tapESM?: TapFunction;
+	/**
+	 * A function to tap `splitChunks` in SSR config
+	 *
+	 * @type {TapFunction}
+	 * @memberof SplitChunksPluginOptions
+	 */
+	tapSSR?: TapFunction;
 	/**
 	 * A function to tap `splitChunks` in web config.
+	 *
+	 * @type {TapFunction}
+	 * @memberof SplitChunksPluginOptions
 	 */
 	tapWeb?: TapFunction;
 }
@@ -49,10 +68,11 @@ export default function SplitChunksPlugin(options?: SplitChunksPluginOptions): P
 				tapSplitChunks(config, options.tapAll);
 			});
 		}
-		// tslint:disable:no-unused-expression
+
 		(typeof options.tapCJS === 'function') && tapSplitChunks(webpackConfigs.commonJSConfig, options.tapCJS);
 		(typeof options.tapESM === 'function') && tapSplitChunks(webpackConfigs.esModuleConfig, options.tapESM);
-		// tslint:enable:no-unused-expression
+		(typeof options.tapSSR === 'function') && tapSplitChunks(webpackConfigs.ssrConfig, options.tapSSR);
+
 		if (typeof options.tapWeb === 'function') {
 			tapSplitChunks(webpackConfigs.webUnminConfig, options.tapWeb);
 			tapSplitChunks(webpackConfigs.webMinConfig, options.tapWeb);

packages/@gluons/plugin-splitchunks/test/splitChunks.test.ts

@@ -28,14 +28,22 @@ const tapESM = splitChunks => Object.assign({}, splitChunks, {
 	}
 });
 
-const tapWeb = splitChunks => Object.assign({}, splitChunks, {
+const tapSSR = splitChunks => Object.assign({}, splitChunks, {
 	cacheGroups: {
 		vendors: {
 			test: /vendors4/
 		}
 	}
 });
 
+const tapWeb = splitChunks => Object.assign({}, splitChunks, {
+	cacheGroups: {
+		vendors: {
+			test: /vendors5/
+		}
+	}
+});
+
 describe('SplitChunksPlugin', () => {
 	it('should change `splitChunks` in all configs', async () => {
 		const vuePackConfig: VuePackConfig = {
@@ -141,14 +149,14 @@ describe('SplitChunksPlugin', () => {
 		}
 	});
 
-	it('should change `splitChunks` in only web config', async () => {
+	it('should change `splitChunks` in only SSR config', async () => {
 		const vuePackConfig: VuePackConfig = {
 			entry: 'index.ts',
 			libraryName: 'Test',
 			externals: {}, // Prevent destructuring error
 			plugins: [
 				SplitChunksPlugin({
-					tapWeb
+					tapSSR
 				})
 			]
 		};
@@ -160,7 +168,7 @@ describe('SplitChunksPlugin', () => {
 
 			expect(config.optimization).toHaveProperty('splitChunks');
 
-			if ((i === 2) || (i === 3)) {
+			if (i === 2) {
 				expect(config.optimization.splitChunks).toMatchObject({
 					cacheGroups: {
 						vendors: {
@@ -179,4 +187,43 @@ describe('SplitChunksPlugin', () => {
 			}
 		}
 	});
+
+	it('should change `splitChunks` in only web config', async () => {
+		const vuePackConfig: VuePackConfig = {
+			entry: 'index.ts',
+			libraryName: 'Test',
+			externals: {}, // Prevent destructuring error
+			plugins: [
+				SplitChunksPlugin({
+					tapWeb
+				})
+			]
+		};
+
+		const configs: Configuration[] = await createConfigs(vuePackConfig);
+
+		for (let i = 0; i < configs.length; i++) { // tslint:disable-line: prefer-for-of
+			const config = configs[i];
+
+			expect(config.optimization).toHaveProperty('splitChunks');
+
+			if ((i === 3) || (i === 4)) {
+				expect(config.optimization.splitChunks).toMatchObject({
+					cacheGroups: {
+						vendors: {
+							test: /vendors5/
+						}
+					}
+				});
+			} else {
+				expect(config.optimization.splitChunks).not.toMatchObject({
+					cacheGroups: {
+						vendors: {
+							test: /vendors5/
+						}
+					}
+				});
+			}
+		}
+	});
 });

packages/@gluons/types/src/Configuration.ts

@@ -142,9 +142,8 @@ export function toBaseOptions(config: Configuration): BaseOptions {
  * @returns {WebOptions}
  */
 export function toWebOptions(config: Configuration, minimize: boolean): WebOptions {
-	const webOptions: WebOptions = Object.assign(
-		{},
-		pick(config, [
+	const webOptions: WebOptions = {
+		...pick(config, [
 			'entry',
 			'libraryName',
 			'fileName',
@@ -154,10 +153,8 @@ export function toWebOptions(config: Configuration, minimize: boolean): WebOptio
 			'externals',
 			'sourceMap'
 		]),
-		{
-			minimize
-		}
-	);
+		minimize
+	};
 
 	return webOptions;
 }

packages/@gluons/types/src/WebpackChainer.ts

@@ -7,18 +7,37 @@
 export interface WebpackChainConfigGroup {
 	/**
 	 * Common JS `webpack-chain`'s config instance
+	 *
+	 * @type {any}
+	 * @memberof WebpackChainConfigGroup
 	 */
 	readonly commonJSConfig: any;
 	/**
 	 * ES module `webpack-chain`'s config instance
+	 *
+	 * @type {any}
+	 * @memberof WebpackChainConfigGroup
 	 */
 	readonly esModuleConfig: any;
+	/**
+	 * SSR (Server-Side Rendering) `webpack-chain`'s config instance
+	 *
+	 * @type {any}
+	 * @memberof WebpackChainConfigGroup
+	 */
+	readonly ssrConfig: any;
 	/**
 	 * Unminified web `webpack-chain`'s config instance
+	 *
+	 * @type {any}
+	 * @memberof WebpackChainConfigGroup
 	 */
 	readonly webUnminConfig: any;
 	/**
 	 * Minified web `webpack-chain`'s config instance
+	 *
+	 * @type {any}
+	 * @memberof WebpackChainConfigGroup
 	 */
 	readonly webMinConfig: any;
 }

packages/@gluons/vue-pack/src/createConfigs.ts

@@ -5,7 +5,7 @@ import {
 } from '@gluons/vue-pack-types';
 import { Configuration as WebpackConfiguration } from 'webpack';
 
-import createModuleConfig, { Options as CreateModuleConfigOptions } from './lib/createModuleConfig';
+import createModuleConfig from './lib/createModuleConfig';
 import createWebConfig from './lib/createWebConfig';
 import executeChainWebpack from './lib/executeChainWebpack';
 import executePlugins from './lib/executePlugins';
@@ -16,6 +16,7 @@ const { toBaseOptions, toWebOptions } = ConfigurationMethods;
 const barOptions = [
 	{ name: 'CommonJS', color: 'green' },
 	{ name: 'ES Module', color: 'magenta' },
+	{ name: 'Server-Side Rendering', color: 'blue' },
 	{ name: 'Web Unminified', color: 'cyan' },
 	{ name: 'Web Minified', color: 'yellow' }
 ];
@@ -29,23 +30,18 @@ const barOptions = [
  */
 export default async function createConfigs(config: Configuration): Promise<WebpackConfiguration[]> {
 	const baseOptions = toBaseOptions(config);
-	const commonJSOptions: CreateModuleConfigOptions = Object.assign(
-		{},
-		baseOptions,
-		{
-			moduleType: 'common'
-		} as CreateModuleConfigOptions
-	);
-	const esModuleOptions: CreateModuleConfigOptions = Object.assign(
-		{},
-		baseOptions,
-		{
-			moduleType: 'es'
-		} as CreateModuleConfigOptions
-	);
-
-	const commonJSConfig = await createModuleConfig(commonJSOptions);
-	const esModuleConfig = await createModuleConfig(esModuleOptions);
+	const commonJSConfig = await createModuleConfig({
+		...baseOptions,
+		moduleType: 'common'
+	});
+	const esModuleConfig = await createModuleConfig({
+		...baseOptions,
+		moduleType: 'es'
+	});
+	const ssrConfig = await createModuleConfig({
+		...baseOptions,
+		moduleType: 'ssr'
+	});
 	const webUnminConfig = await createWebConfig(toWebOptions(config, false));
 	const webMinConfig = await createWebConfig(toWebOptions(config, true));
 
@@ -55,6 +51,7 @@ export default async function createConfigs(config: Configuration): Promise<Webp
 	const allConfigs = [
 		commonJSConfig,
 		esModuleConfig,
+		ssrConfig,
 		webUnminConfig,
 		webMinConfig
 	];
@@ -65,6 +62,7 @@ export default async function createConfigs(config: Configuration): Promise<Webp
 	const webpackConfigGroup: WebpackChainConfigGroup = {
 		commonJSConfig,
 		esModuleConfig,
+		ssrConfig,
 		webUnminConfig,
 		webMinConfig
 	};

packages/@gluons/vue-pack/src/lib/createBaseConfig.ts

@@ -1,8 +1,7 @@
 import { BaseOptions } from '@gluons/vue-pack-types';
 import Config from 'webpack-chain';
 
-import infuseAliases from './infuseAliases';
-import infuseWebpackModule from './infuser/infuseWebpackModule';
+import infuseAliases from './infuser/infuseAliases';
 
 /**
  * Create base config via `webpack-chain`'s config instance.
@@ -40,7 +39,6 @@ export default async function createBaseConfig(options: BaseOptions): Promise<an
 	;
 
 	infuseAliases(config, alias);
-	await infuseWebpackModule(config, outDir, sourceMap);
 
 	return config;
 }

packages/@gluons/vue-pack/src/lib/createModuleConfig.ts

@@ -3,10 +3,12 @@ import { BaseOptions } from '@gluons/vue-pack-types';
 import createBaseConfig from './createBaseConfig';
 import infuseCJSOutput from './infuser/infuseCJSOutput';
 import infuseESMOutput from './infuser/infuseESMOutput';
+import infuseSSROutput from './infuser/infuseSSROutput';
+import infuseWebpackModule from './infuser/infuseWebpackModule';
 import infuseWebpackOptimization from './infuser/infuseWebpackOptimization';
 import infuseWebpackPlugins from './infuser/infuseWebpackPlugins';
 
-export type Options = BaseOptions & { moduleType: 'common' | 'es' };
+export type Options = BaseOptions & { moduleType: 'common' | 'es' | 'ssr' };
 
 /**
  * Create module config via `webpack-chain`'s config instance.
@@ -18,6 +20,7 @@ export type Options = BaseOptions & { moduleType: 'common' | 'es' };
 export default async function createModuleConfig(options: Options): Promise<any> {
 	const {
 		fileName,
+		outDir,
 		define,
 		sourceMap,
 		externals: { module: moduleExternals },
@@ -27,11 +30,20 @@ export default async function createModuleConfig(options: Options): Promise<any>
 
 	if (moduleType === 'common') {
 		infuseCJSOutput(config);
-	} else {
+	} else if (moduleType === 'es') {
 		infuseESMOutput(config);
+	} else {
+		infuseSSROutput(config);
+		config.target('node');
 	}
 
 	infuseWebpackOptimization(config, false);
+	await infuseWebpackModule({
+		config,
+		outDir,
+		sourceMap,
+		ssr: moduleType === 'ssr'
+	});
 	infuseWebpackPlugins({
 		config,
 		fileName,