Add Preact dev tools to development bundles (#11459)

* Now Preact dev tools are injected into development bundles.

* Updated frontend debugging documentation.

* Updated frontend debugging documentation wording.

app/javascript/Search/Search.jsx

@@ -1,4 +1,3 @@
-import 'preact/devtools';
 import { h, Component, Fragment } from 'preact';
 import PropTypes from 'prop-types';
 import {

app/javascript/Search/SearchForm.jsx

@@ -1,4 +1,3 @@
-import 'preact/devtools';
 import PropTypes from 'prop-types';
 import { h } from 'preact';
 

app/javascript/onboarding/Onboarding.jsx

@@ -1,4 +1,3 @@
-import 'preact/devtools';
 import { h, Component } from 'preact';
 import PropTypes from 'prop-types';
 
@@ -69,7 +68,18 @@ export default class Onboarding extends Component {
   render() {
     const { currentSlide } = this.state;
     const { communityConfig } = this.props;
-    return <main className="onboarding-body" style={communityConfig.communityBackground && {backgroundImage: `url(${communityConfig.communityBackground})`}}>{this.slides[currentSlide]}</main>;
+    return (
+      <main
+        className="onboarding-body"
+        style={
+          communityConfig.communityBackground && {
+            backgroundImage: `url(${communityConfig.communityBackground})`,
+          }
+        }
+      >
+        {this.slides[currentSlide]}
+      </main>
+    );
   }
 }
 
@@ -78,6 +88,6 @@ Onboarding.propTypes = {
     communityName: PropTypes.string.isRequired,
     communityBackground: PropTypes.string.isRequired,
     communityLogo: PropTypes.string.isRequired,
-    communityDescription: PropTypes.string.isRequired
-  }).isRequired
+    communityDescription: PropTypes.string.isRequired,
+  }).isRequired,
 };

config/webpack/development.js

@@ -8,4 +8,19 @@ const config = environment.toWebpackConfig();
 // For more information, see https://webpack.js.org/configuration/devtool/#devtool
 config.devtool = 'eval-source-map';
 
+// Inject the preact/devtools import into all the webpacker pack files (webpack entry points) that reference at least one Preact component
+// so that Preact compoonents can be debugged with the Preact DevTools.
+config.entry = Object.entries(config.entry).reduce(
+  (previous, [entryPointName, entryPointFileName]) => {
+    if (/\.jsx$/.test(entryPointFileName)) {
+      previous[entryPointName] = ['preact/devtools', entryPointFileName];
+    } else {
+      previous[entryPointName] = entryPointFileName;
+    }
+
+    return previous;
+  },
+  {},
+);
+
 module.exports = config;

docs/frontend/debugging.md

@@ -48,5 +48,5 @@ If you do not see your editor here, consider contributing to the documentation.
 
 Preact has their
 [own developer tools](https://preactjs.github.io/preact-devtools/) in the form
-of a browser extension. These tools are currently supported for Preact version
-10.x and up. Forem currently uses Preact 10.x.
+of a browser extension. The Forem codebase is configured out of the box to
+support the Preact Devtools.