Add preact/debug tools to development version of bundle

package.json

@@ -5,8 +5,8 @@
 	"license": "GPL-2.0-or-later",
 	"main": "build/index.js",
 	"scripts": {
-		"build": "webpack --mode=production",
-		"start": "webpack --mode=development --watch",
+		"build": "webpack",
+		"start": "webpack --watch",
 		"dev": "npm start",
 		"format:php": "wp-env run composer run-script format",
 		"lint:php": "wp-env run composer run-script lint",

src/runtime/debug.js

@@ -0,0 +1,2 @@
+// Must be the first import
+import 'preact/debug';

src/runtime/index.js

@@ -1,3 +1,6 @@
+if (SCRIPT_DEBUG) {
+	require('./debug');
+}
 import registerDirectives from './directives';
 import registerComponents from './components';
 import { init } from './router';

webpack.config.js

@@ -1,72 +1,110 @@
 const defaultConfig = require('@wordpress/scripts/config/webpack.config');
+const { DefinePlugin } = require('webpack');
 const { resolve } = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
+const sharedConfig = {
+	...defaultConfig,
+	output: {
+		filename: '[name].js',
+		path: resolve(process.cwd(), 'build'),
+		library: {
+			name: '__experimentalInteractivity',
+			type: 'window',
+		},
+	},
+	optimization: {
+		runtimeChunk: {
+			name: 'vendors',
+		},
+		splitChunks: {
+			cacheGroups: {
+				vendors: {
+					test: /[\\/]node_modules[\\/]/,
+					name: 'vendors',
+					minSize: 0,
+					chunks: 'all',
+				},
+			},
+		},
+	},
+	module: {
+		rules: [
+			{
+				test: /\.(j|t)sx?$/,
+				exclude: /node_modules/,
+				use: [
+					{
+						loader: require.resolve('babel-loader'),
+						options: {
+							cacheDirectory:
+								process.env.BABEL_CACHE_DIRECTORY || true,
+							babelrc: false,
+							configFile: false,
+							presets: [
+								[
+									'@babel/preset-react',
+									{
+										runtime: 'automatic',
+										importSource: 'preact',
+									},
+								],
+							],
+						},
+					},
+				],
+			},
+			{
+				test: /\.css$/i,
+				use: [MiniCssExtractPlugin.loader, 'css-loader'],
+			},
+		],
+	},
+	plugins: [new MiniCssExtractPlugin()],
+};
+
 module.exports = [
 	defaultConfig,
 	{
-		...defaultConfig,
+		...sharedConfig,
+		name: 'runtime',
 		entry: {
 			runtime: './src/runtime',
-			'e2e/page-1': './e2e/page-1',
-			'e2e/page-2': './e2e/page-2',
-			'e2e/html/directive-bind': './e2e/html/directive-bind',
 		},
+		mode: 'production',
 		output: {
-			filename: '[name].js',
-			path: resolve(process.cwd(), 'build'),
-			library: {
-				name: '__experimentalInteractivity',
-				type: 'window',
-			},
+			...sharedConfig.output,
+			filename: '[name].min.js',
 		},
-		optimization: {
-			runtimeChunk: {
-				name: 'vendors',
-			},
-			splitChunks: {
-				cacheGroups: {
-					vendors: {
-						test: /[\\/]node_modules[\\/]/,
-						name: 'vendors',
-						minSize: 0,
-						chunks: 'all',
-					},
-				},
-			},
+		plugins: [
+			...sharedConfig.plugins,
+			new DefinePlugin({
+				SCRIPT_DEBUG: false,
+			}),
+		],
+	},
+	{
+		...sharedConfig,
+		name: 'runtime-debug',
+		entry: {
+			runtime: './src/runtime',
 		},
-		module: {
-			rules: [
-				{
-					test: /\.(j|t)sx?$/,
-					exclude: /node_modules/,
-					use: [
-						{
-							loader: require.resolve('babel-loader'),
-							options: {
-								cacheDirectory:
-									process.env.BABEL_CACHE_DIRECTORY || true,
-								babelrc: false,
-								configFile: false,
-								presets: [
-									[
-										'@babel/preset-react',
-										{
-											runtime: 'automatic',
-											importSource: 'preact',
-										},
-									],
-								],
-							},
-						},
-					],
-				},
-				{
-					test: /\.css$/i,
-					use: [MiniCssExtractPlugin.loader, 'css-loader'],
-				},
-			],
+		mode: 'development',
+		plugins: [
+			...sharedConfig.plugins,
+			new DefinePlugin({
+				SCRIPT_DEBUG: true,
+			}),
+		],
+	},
+	{
+		...sharedConfig,
+		name: 'e2e',
+		mode: 'development',
+		entry: {
+			'e2e/page-1': './e2e/page-1',
+			'e2e/page-2': './e2e/page-2',
+			'e2e/html/directive-bind': './e2e/html/directive-bind',
 		},
-		plugins: [new MiniCssExtractPlugin()],
 	},
 ];

wp-directives.php

@@ -84,16 +84,18 @@ function wp_directives_uninstall() {
  * Register the scripts
  */
 function wp_directives_register_scripts() {
+	$extension = SCRIPT_DEBUG ? '.js' : '.min.js';
+
 	wp_register_script(
 		'wp-directive-vendors',
-		plugins_url( 'build/vendors.js', __FILE__ ),
+		plugins_url( 'build/vendors' . $extension, __FILE__ ),
 		array(),
 		'1.0.0',
 		true
 	);
 	wp_register_script(
 		'wp-directive-runtime',
-		plugins_url( 'build/runtime.js', __FILE__ ),
+		plugins_url( 'build/runtime' . $extension, __FILE__ ),
 		array( 'wp-directive-vendors' ),
 		'1.0.0',
 		true