Merge pull request #172 from developit/feat/immutable-build

Feature: Immutable build

Author: reznord

package.json

@@ -158,6 +158,7 @@
     "unfetch": "^3.0.0",
     "url-loader": "^0.5.8",
     "webpack": "^2.3.3",
+    "webpack-chunk-hash": "^0.4.0",
     "webpack-dev-server": "^2.4.5",
     "webpack-plugin-replace": "^1.1.1",
     "which": "^1.2.14",

src/lib/webpack/async-component-loader.js

@@ -1,5 +1,4 @@
-var loaderUtils = require('loader-utils'),
-	path = require('path');
+var loaderUtils = require('loader-utils');
 
 module.exports = function() {};
 module.exports.pitch = function(remainingRequest) {
@@ -16,7 +15,7 @@ module.exports.pitch = function(remainingRequest) {
 	}
 
 	return `
-		import async from ${JSON.stringify(path.resolve(__dirname, '../../components/async'))};
+		import async from 'preact-cli/async-component';
 
 		function load(cb) {
 			require.ensure([], function(require) {

src/lib/webpack/push-manifest.js

@@ -1,33 +1,45 @@
 module.exports = class PushManifestPlugin {
 	apply(compiler) {
 		compiler.plugin('emit', function(compilation, callback) {
-			let defaults = {
-					'style.css': {
-						type: 'style',
-						weight: 1
-					},
-					'bundle.js': {
-						type: 'script',
-						weight: 1
-					},
-				},
-				manifest = {
-					'/': defaults
-				};
+			let routes = [], mainJs, mainCss;
 
 			for (let filename in compilation.assets) {
-				if (/route-/.test(filename) && !/\.map$/.test(filename)) {
-					let path = filename.replace(/route-/, '/').replace(/\.chunk(\.\w+)?\.js$/, '').replace(/\/home/, '/');
-					manifest[path] = {
-						...defaults,
-						[filename]: {
-							type: 'script',
-							weight: .9
-						}
-					};
+				if (!/\.map$/.test(filename)) {
+					if (/route-/.test(filename)) {
+						routes.push(filename);
+					} else if (/^style(.+)\.css$/.test(filename)) {
+						mainCss = filename;
+					} else if (/^bundle(.+)\.js$/.test(filename)) {
+						mainJs = filename;
+					}
 				}
 			}
 
+			let defaults = {
+				[mainCss]: {
+					type: 'style',
+					weight: 1
+				},
+				[mainJs]: {
+					type: 'script',
+					weight: 1
+				},
+			},
+			manifest = {
+				'/': defaults
+			};
+
+			routes.forEach(filename => {
+				let path = filename.replace(/route-/, '/').replace(/\.chunk(\.\w+)?\.js$/, '').replace(/\/home/, '/');
+				manifest[path] = {
+					...defaults,
+					[filename]: {
+						type: "script",
+						weight: 0.9
+					}
+				};
+			});
+
 			let output = JSON.stringify(manifest);
 			compilation.assets['push-manifest.json'] = {
 				source() {

src/lib/webpack/webpack-base-config.js

@@ -13,6 +13,7 @@ import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import autoprefixer from 'autoprefixer';
 import ProgressBarPlugin from 'progress-bar-webpack-plugin';
 import ReplacePlugin from 'webpack-plugin-replace';
+import WebpackChunkHash from 'webpack-chunk-hash';
 import requireRelative from 'require-relative';
 import createBabelConfig from '../babel-config';
 
@@ -70,7 +71,8 @@ export default (env) => {
 					react: 'preact-compat',
 					'react-dom': 'preact-compat',
 					'create-react-class': 'preact-compat/lib/create-react-class',
-					'react-addons-css-transition-group': 'preact-css-transition-group'
+					'react-addons-css-transition-group': 'preact-css-transition-group',
+					'preact-cli/async-component': resolve(__dirname, '../../components/async')
 				}
 			},
 			resolveLoader: {
@@ -238,7 +240,7 @@ export default (env) => {
 		// produce HTML & CSS:
 		addPlugins([
 			new ExtractTextPlugin({
-				filename: 'style.css',
+				filename: isProd ? "style.[contenthash:5].css" : "style.css",
 				disable: !isProd,
 				allChunks: true
 			})
@@ -277,6 +279,7 @@ const development = () =>	group([]);
 
 const production = () => addPlugins([
 	new webpack.HashedModuleIdsPlugin(),
+	new WebpackChunkHash(),
 	new webpack.LoaderOptionsPlugin({
 		minimize: true
 	}),

src/lib/webpack/webpack-client-config.js

@@ -32,7 +32,7 @@ export default env => {
 		setOutput({
 			path: env.dest,
 			publicPath: '/',
-			filename: '[name].js',
+			filename: isProd ? "[name].[chunkhash:5].js" : "[name].js",
 			chunkFilename: '[name].chunk.[chunkhash:5].js',
 		}),
 

tests/build.snapshot.js

@@ -1,18 +1,23 @@
 
+const commons = {
+	'polyfills.*.js': { size: 4620 },
+	'polyfills.*.js.map': { size: 31760 },
+	'favicon.ico': { size: 15086 },
+};
+
 const smallBuildCommons = {
+	...commons,
 	assets: {
 		'favicon.ico': { size: 15086 },
 		'icon.png': { size: 51484 }
 	},
-	'polyfills.js': { size: 4620 },
-	'polyfills.js.map': { size: 31760 },
-	'favicon.ico': { size: 15086 },
 	'sw.js': { size: 3330 },
 	'manifest.json': { size: 298 },
-	'push-manifest.json': { size: 88 },
+	'push-manifest.json': { size: 100 },
 };
 
 const fullBuildCommons = {
+	...commons,
 	assets: {
 		'favicon.ico': { size: 15086 },
 		icons: {
@@ -24,79 +29,75 @@ const fullBuildCommons = {
 			'mstile-150x150.png': { size: 9050 }
 		}
 	},
-	'polyfills.js': { size: 4620 },
-	'push-manifest.json': { size: 303 },
-	'favicon.ico': { size: 15086 },
+	'push-manifest.json': { size: 327 },
 	'manifest.json': { size: 426 },
 	'sw.js': { size: 3850 }
 };
 
 export default {
 	empty: {
 		...smallBuildCommons,
-		'bundle.js': { size: 9810 },
-		'bundle.js.map': { size: 44660 },
+		'bundle.*.js': { size: 9810 },
+		'bundle.*.js.map': { size: 44660 },
 		'index.html': { size: 630 },
-		'style.css': { size: 131 },
-		'style.css.map': { size: 359 },
+		'style.*.css': { size: 131 },
+		'style.*.css.map': { size: 359 },
 		'ssr-build': {
 			'ssr-bundle.js': { size: 16245 },
 			'ssr-bundle.js.map': { size: 31821 },
-			'style.css': { size: 130 },
-			'style.css.map': { size: 360 },
+			'style.*.css': { size: 130 },
+			'style.*.css.map': { size: 360 },
 		}
 	},
 	simple: {
 		...smallBuildCommons,
-		'bundle.js': { size: 10460 },
-		'bundle.js.map': { size: 48670 },
+		'bundle.*.js': { size: 10460 },
+		'bundle.*.js.map': { size: 48670 },
 		'index.html': { size: 640 },
-		'style.css': { size: 296},
-		'style.css.map': { size: 621 },
+		'style.*.css': { size: 296},
+		'style.*.css.map': { size: 621 },
 		'manifest.json': { size: 290 },
 		'ssr-build': {
 			'ssr-bundle.js': { size: 18205 },
 			'ssr-bundle.js.map': { size: 33478 },
-			'style.css': { size: 296 },
-			'style.css.map': { size: 621 },
+			'style.*.css': { size: 296 },
+			'style.*.css.map': { size: 621 },
 		}
 	},
 	root: {
 		...fullBuildCommons,
-		'bundle.js': { size: 18460 },
-		'bundle.js.map': { size: 101500 },
+		'bundle.*.js': { size: 18460 },
+		'bundle.*.js.map': { size: 101500 },
 		'route-home.chunk.*.js': { size: 1020 },
 		'route-home.chunk.*.js.map': { size: 4977 },
 		'route-profile.chunk.*.js': { size: 1660 },
 		'route-profile.chunk.*.js.map': { size: 8607 },
-		'polyfills.js.map': { size: 31750 },
 		'index.html': { size: 870 },
-		'style.css': { size: 1065 },
-		'style.css.map': { size: 2246 },
+		'style.*.css': { size: 1065 },
+		'style.*.css.map': { size: 2246 },
 		'ssr-build': {
 			'ssr-bundle.js': { size: 39459 },
 			'ssr-bundle.js.map': { size: 65629 },
-			'style.css': { size: 1065 },
-			'style.css.map': { size: 2250 },
+			'style.*.css': { size: 1065 },
+			'style.*.css.map': { size: 2250 },
 		}
 	},
 	'full': {
 		...fullBuildCommons,
-		'bundle.js': { size: 19300 },
-		'bundle.js.map': { size: 105590 },
+		'bundle.*.js': { size: 19300 },
+		'bundle.*.js.map': { size: 105590 },
 		'route-home.chunk.*.js': { size: 1000 },
 		'route-home.chunk.*.js.map': { size: 4981 },
 		'route-profile.chunk.*.js': { size: 1650 },
 		'route-profile.chunk.*.js.map': { size: 8609 },
-		'polyfills.js.map': { size: 31800 },
 		'index.html': { size: 850 },
-		'style.css': { size: 1065 },
-		'style.css.map': { size: 2345 },
+		'style.*.css': { size: 1065 },
+		'style.*.css.map': { size: 2345 },
 		'ssr-build': {
 			'ssr-bundle.js': { size: 41715 },
 			'ssr-bundle.js.map': { size: 66661 },
-			'style.css': { size: 1065 },
-			'style.css.map': { size: 2345 },
+			'style.*.css': { size: 1065 },
+			'style.*.css.map': { size: 2345 },
 		}
 	}
 };
@@ -107,7 +108,6 @@ export const sassPrerendered = `
 		<h1>Header on background</h1>
 		<p>Paragraph on background</p>
 	</div>
-	<script src="/bundle.js" defer="defer"></script>
 	{{ ... }}
 </body>
 `;
@@ -123,7 +123,7 @@ export const withCustomTemplate = `
 	<body>
 		<h1>Guess what</h1>
 		<h2>This is an app with custom template</h2>
-		<script src="/bundle.js" defer="defer"></script>
+		{{ ... }}
 	</body>
 </html>
 `;
@@ -133,7 +133,6 @@ export const multiplePrerenderingHome = `
 	<div id="app">
 		<div>Home</div>
 	</div>
-	<script defer="defer" src="/bundle.js"></script>
 	{{ ... }}
 </body>
 `;
@@ -143,7 +142,6 @@ export const multiplePrerenderingRoute = `
 	<div id="app">
 		<div>Route66</div>
 	</div>
-	<script defer="defer" src="/bundle.js"></script>
 	{{ ... }}
 </body>
 `;

tests/lib/filesMatchSnapshot.js

@@ -1,4 +1,5 @@
 import { join } from 'path';
+import { Minimatch } from 'minimatch';
 
 const minimumSizeDifference = 10;
 const percentageThreshold = 0.05;
@@ -8,6 +9,7 @@ export default (actual, expected) => {
 	let normalizedExpected = normalize(expected);
 	let normalizedActual = normalize(actual);
 
+	let expectedPaths = Object.keys(normalizedExpected).map(p => new Minimatch(p));
 	let expectedBoundaries = Object.keys(normalizedExpected)
 		.reduce((acc, path) => Object.assign(acc, {
 			[path]: {
@@ -17,11 +19,20 @@ export default (actual, expected) => {
 		}), {});
 
 	let comparisonResult = Object.keys(normalizedActual).reduce((acc, path) => {
-		let expectedValues = expectedBoundaries[path];
+		let expectedFilePaths = expectedPaths.filter(p => p.match(path)).map(p => p.pattern);
+
+		if (expectedFilePaths > 1) {
+			throw new Error(`Invalid snapshot configuration!
+				Found duplicate matches for path: ${path}.
+				Mathes: ${expectedFilePaths.join(',')}
+			`);
+		}
+		let expectedPath = expectedFilePaths[0];
+		let expectedValues = expectedBoundaries[expectedPath];
 		let actualValue = normalizedActual[path].size;
 
 		if (expectedValues && expectedValues.min <= actualValue && actualValue <= expectedValues.max) {
-			return Object.assign(acc, { [path]: expectedValues });
+			return Object.assign(acc, { [expectedPath]: expectedValues });
 		}
 
 		return Object.assign(acc, { [path]: actualValue });
@@ -37,15 +48,7 @@ const boundary = (direction, val) => {
 	return Math.max(minimumFileSize, val + rounded);
 };
 
-const normalize = obj => {
-	let flat = flatten(obj, o => Object.keys(o).length === 1 && typeof o.size === 'number');
-
-	return Object.keys(flat).reduce((agg, key) => {
-		let newKey = key.replace(/\.chunk\.\w+\./, '.chunk.*.');
-		agg[newKey] = flat[key];
-		return agg;
-	}, {});
-};
+const normalize = obj => flatten(obj, o => Object.keys(o).length === 1 && typeof o.size === 'number');
 
 const flatten = (obj, stop, path = '') => Object.keys(obj)
 	.reduce((agg, key) => {

tests/serve.snapshot.js

@@ -14,7 +14,6 @@ export const homePageHTML = `
 			<p>This is the Home component.</p>
 		</div>
 	</div>
-	<script src="/bundle.js" defer="defer"></script>
 	{{ ... }}
 </body>
 `;
@@ -37,7 +36,6 @@ export const profilePageHtml = `
 			<p><button>Click Me</button> Clicked 10 times.</p>
 		</div>
 	</div>
-	<script src="/bundle.js" defer="defer"></script>
 	{{ ... }}
 </body>
 `;