Add preact/debug tools to development version of bundle

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 (INCLUDE_DEBUG_TOOLS) {
+	require('./debug');
+}
 import registerDirectives from './directives';
 import registerComponents from './components';
 import { init } from './router';

webpack.config.js

@@ -1,72 +1,104 @@
 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,
 		entry: {
 			runtime: './src/runtime',
-			'e2e/page-1': './e2e/page-1',
-			'e2e/page-2': './e2e/page-2',
-			'e2e/html/directive-bind': './e2e/html/directive-bind',
 		},
 		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({
+				INCLUDE_DEBUG_TOOLS: false,
+			}),
+		],
+	},
+	{
+		...sharedConfig,
+		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'],
-				},
-			],
+		plugins: [
+			...sharedConfig.plugins,
+			new DefinePlugin({
+				INCLUDE_DEBUG_TOOLS: true,
+			}),
+		],
+	},
+	{
+		...sharedConfig,
+		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,6 +84,8 @@ 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__ ),
@@ -93,7 +95,7 @@ function wp_directives_register_scripts() {
 	);
 	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