Repository: styleguidist/react-styleguidist
Pull request #940 (2018-04-17 21:22:09)

Add `reduce_funcs: false` to uglify for preact compatibility
Related to developit/preact#1065


Patch:
diff --git a/bin/styleguidist.js b/bin/styleguidist.js
index bcaef322..3d998ab1 100755
--- a/bin/styleguidist.js
+++ b/bin/styleguidist.js
@@ -195,7 +195,9 @@ function printServerInstructions(config, options) {
 	console.log(`You can now view your style guide in the browser:`);
 	console.log();
 	console.log(`  ${chalk.bold('Local:')}            ${urls.localUrlForTerminal}`);
-	console.log(`  ${chalk.bold('On your network:')}  ${urls.lanUrlForTerminal}`);
+	if (urls.lanUrlForTerminal) {
+		console.log(`  ${chalk.bold('On your network:')}  ${urls.lanUrlForTerminal}`);
+	}
 	console.log();
 }
 
diff --git a/docs/Configuration.md b/docs/Configuration.md
index c0f9974c..73295f25 100644
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@@ -664,7 +664,7 @@ module.exports = {
 
 > **Note:** `entry`, `externals`, `output`, `watch`, and `stats` options will be ignored. For production builds, `devtool` will also be ignored.
 
-> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.
+> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `MiniHtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.
 
 > **Note:** Run style guide in verbose mode to see the actual webpack config used by Styleguidist: `npx styleguidist server --verbose`.
 
diff --git a/docs/Webpack.md b/docs/Webpack.md
index 468ddc1e..52873cbe 100644
--- a/docs/Webpack.md
+++ b/docs/Webpack.md
@@ -43,7 +43,7 @@ module.exports = {
 
 > **Note:** `entry`, `externals`, `output`, `watch`, and `stats` options will be ignored. For production builds, `devtool` will also be ignored.
 
-> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.
+> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `MiniHtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.
 
 > **Note:** If your loaders don’t work with Styleguidist try to make `include` and `exclude` absolute paths.
 
@@ -81,7 +81,7 @@ module.exports = {
 
 > **Note:** `entry`, `externals`, `output`, `watch`, and `stats` options will be ignored. For production builds, `devtool` will also be ignored.
 
-> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.
+> **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `MiniHtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.
 
 ## Create React App
 
diff --git a/scripts/make-webpack-config.js b/scripts/make-webpack-config.js
index d4d62867..091fb2ab 100644
--- a/scripts/make-webpack-config.js
+++ b/scripts/make-webpack-config.js
@@ -96,6 +96,13 @@ module.exports = function(config, env) {
 				compress: {
 					keep_fnames: true,
 					warnings: false,
+          			/**
+					  * We disable 'reduce_funcs' for keeping uglify from inlining Preact's VNode.
+					  * If enabled, the 'new VNode()' is replaced with a anonymous 'function(){}',
+					  * which is problematic for 'preact-compat', since it extends the VNode prototype
+					  * to accomodate React's API.
+					  * */
+					reduce_funcs: false
 				},
 				mangle: {
 					keep_fnames: true,
diff --git a/scripts/utils/mergeWebpackConfig.js b/scripts/utils/mergeWebpackConfig.js
index 641f0850..46fcfb8b 100644
--- a/scripts/utils/mergeWebpackConfig.js
+++ b/scripts/utils/mergeWebpackConfig.js
@@ -12,6 +12,7 @@ const IGNORE_SECTIONS_ENV = {
 
 const IGNORE_PLUGINS = [
 	'CommonsChunkPlugins',
+	'MiniHtmlWebpackPlugin',
 	'HtmlWebpackPlugin',
 	'OccurrenceOrderPlugin',
 	'DedupePlugin',


Test patch:
diff --git a/scripts/utils/__tests__/mergeWebpackConfig.spec.js b/scripts/utils/__tests__/mergeWebpackConfig.spec.js
index d66d4cc3..95fc6953 100644
--- a/scripts/utils/__tests__/mergeWebpackConfig.spec.js
+++ b/scripts/utils/__tests__/mergeWebpackConfig.spec.js
@@ -2,6 +2,7 @@ import mergeWebpackConfig from '../mergeWebpackConfig';
 
 class UglifyJsPlugin {}
 class MyPlugin {}
+class MiniHtmlWebpackPlugin {}
 
 it('should merge two objects', () => {
 	const result = mergeWebpackConfig({ a: 0, b: 0 }, { b: 1 });
@@ -26,15 +27,18 @@ it('should ignore certain sections', () => {
 });
 
 it('should ignore certain Webpack plugins', () => {
+	const baseInstance = new UglifyJsPlugin();
+	const userInstance = new UglifyJsPlugin();
 	const result = mergeWebpackConfig(
 		{
-			plugins: [new UglifyJsPlugin()],
+			plugins: [baseInstance],
 		},
 		{
-			plugins: [new UglifyJsPlugin(), new MyPlugin()],
+			plugins: [userInstance, new MyPlugin(), new MiniHtmlWebpackPlugin()],
 		}
 	);
 	expect(result.plugins).toHaveLength(2);
+	expect(result.plugins[0]).toBe(baseInstance);
 	expect(result.plugins[0].constructor.name).toBe('UglifyJsPlugin');
 	expect(result.plugins[1].constructor.name).toBe('MyPlugin');
 });