feat: Add initial support for webpack 4

I restored the old code paths. Sadly this makes typing tougher. The
added code needs to be tested still and the old cache is missing for
now.

Author: bebraw

package.json

@@ -70,7 +70,7 @@
   },
   "peerDependencies": {
     "typescript": ">= 3.x",
-    "webpack": ">= 5"
+    "webpack": ">= 4"
   },
   "lint-staged": {
     "*.{js,css,md}": [

src/dependency.ts

@@ -1,11 +1,17 @@
 /* eslint-disable max-classes-per-file */
-import * as webpack from "webpack";
-
 // eslint-disable-next-line
 // @ts-ignore: What's the right way to refer to this one?
 import makeSerializable from "webpack/lib/util/makeSerializable.js";
 
-class DocGenDependency extends webpack.dependencies.NullDependency {
+// This import is compatible with both webpack 4 and 5
+// eslint-disable-next-line
+// @ts-ignore: Webpack 4 type
+import NullDependency from "webpack/lib/dependencies/NullDependency";
+
+// It would be better to extend from webpack.dependencies but that works
+// only with webpack 5, not 4
+// class DocGenDependency extends webpack.dependencies.NullDependency
+class DocGenDependency extends NullDependency {
   public codeBlock: string;
 
   constructor(codeBlock: string) {
@@ -14,7 +20,9 @@ class DocGenDependency extends webpack.dependencies.NullDependency {
     this.codeBlock = codeBlock;
   }
 
-  updateHash: webpack.dependencies.NullDependency["updateHash"] = (hash) => {
+  updateHash: NullDependency["updateHash"] = (hash: {
+    update: (str: string) => void;
+  }) => {
     hash.update(this.codeBlock);
   };
 }
@@ -24,14 +32,14 @@ makeSerializable(
   "react-docgen-typescript-plugin/dist/dependency"
 );
 
-type NullDependencyTemplateType = InstanceType<
-  typeof webpack.dependencies.NullDependency.Template
->;
-class DocGenTemplate extends webpack.dependencies.NullDependency.Template
+type NullDependencyTemplateType = InstanceType<typeof NullDependency.Template>;
+class DocGenTemplate extends NullDependency.Template
   implements NullDependencyTemplateType {
+  // eslint-disable-next-line
+  // @ts-ignore: Webpack 4 type
   apply: NullDependencyTemplateType["apply"] = (
     dependency: DocGenDependency,
-    source
+    source: { insert: (a: number, b: string) => void }
   ) => {
     if (dependency.codeBlock) {
       // Insert to the end
@@ -40,6 +48,8 @@ class DocGenTemplate extends webpack.dependencies.NullDependency.Template
   };
 }
 
+// eslint-disable-next-line
+// @ts-ignore: Webpack 4 type
 DocGenDependency.Template = DocGenTemplate;
 
 export default DocGenDependency;

src/plugin.ts

@@ -1,6 +1,5 @@
 import path from "path";
 import createDebug from "debug";
-import { Compiler, WebpackPluginInstance } from "webpack";
 import ts from "typescript";
 import * as docGen from "react-docgen-typescript";
 import { matcher } from "micromatch";
@@ -60,16 +59,61 @@ const matchGlob = (globs?: string[]) => {
     Boolean(filename && matchers.find((match) => match(filename)));
 };
 
+/** Run the docgen parser and inject the result into the output */
+/** This is used for webpack 4 or earlier */
+function processModule(
+  parser: docGen.FileParser,
+  webpackModule: webpack.Module,
+  tsProgram: ts.Program,
+  loaderOptions: Required<LoaderOptions>
+) {
+  if (!webpackModule) {
+    return;
+  }
+
+  // eslint-disable-next-line
+  // @ts-ignore: Webpack 4 type
+  const { userRequest } = webpackModule;
+
+  const componentDocs = parser.parseWithProgramProvider(
+    userRequest,
+    () => tsProgram
+  );
+
+  if (!componentDocs.length) {
+    return;
+  }
+
+  const docs = generateDocgenCodeBlock({
+    filename: userRequest,
+    source: userRequest,
+    componentDocs,
+    ...loaderOptions,
+  }).substring(userRequest.length);
+
+  // eslint-disable-next-line
+  // @ts-ignore: Webpack 4 type
+  // eslint-disable-next-line
+  let sourceWithDocs = webpackModule._source._value;
+
+  sourceWithDocs += `\n${docs}\n`;
+
+  // eslint-disable-next-line
+  // @ts-ignore: Webpack 4 type
+  // eslint-disable-next-line
+  webpackModule._source._value = sourceWithDocs;
+}
+
 /** Inject typescript docgen information into modules at the end of a build */
-export default class DocgenPlugin implements WebpackPluginInstance {
+export default class DocgenPlugin implements webpack.WebpackPluginInstance {
   private name = "React Docgen Typescript Plugin";
   private options: PluginOptions;
 
   constructor(options: PluginOptions = {}) {
     this.options = options;
   }
 
-  apply(compiler: Compiler): void {
+  apply(compiler: webpack.Compiler): void {
     const pluginName = "DocGenPlugin";
     const {
       docgenOptions,
@@ -83,12 +127,20 @@ export default class DocgenPlugin implements WebpackPluginInstance {
     const { exclude = [], include = ["**/**.tsx"] } = this.options;
     const isExcluded = matchGlob(exclude);
     const isIncluded = matchGlob(include);
+    const webpackVersion = compiler.webpack.version;
+    const isWebpack5 = parseInt(webpackVersion.split(".")[0], 10) >= 5;
 
     compiler.hooks.compilation.tap(pluginName, (compilation) => {
-      compilation.dependencyTemplates.set(
-        DocGenDependency,
-        new DocGenDependency.Template()
-      );
+      if (isWebpack5) {
+        compilation.dependencyTemplates.set(
+          // eslint-disable-next-line
+          // @ts-ignore: Webpack 4 type
+          DocGenDependency,
+          // eslint-disable-next-line
+          // @ts-ignore: Webpack 4 type
+          new DocGenDependency.Template()
+        );
+      }
 
       compilation.hooks.seal.tap(pluginName, () => {
         const modulesToProcess: [string, webpack.Module][] = [];
@@ -122,21 +174,28 @@ export default class DocgenPlugin implements WebpackPluginInstance {
 
         // 3. Process and parse each module and add the type information
         // as a dependency
-        modulesToProcess.forEach(([name, module]) =>
-          module.addDependency(
-            new DocGenDependency(
-              generateDocgenCodeBlock({
-                filename: name,
-                source: name,
-                componentDocs: docGenParser.parseWithProgramProvider(
-                  name,
-                  () => tsProgram
-                ),
-                ...generateOptions,
-              })
-            )
-          )
-        );
+        modulesToProcess.forEach(([name, module]) => {
+          if (isWebpack5) {
+            module.addDependency(
+              // eslint-disable-next-line
+              // @ts-ignore: Webpack 4 type
+              new DocGenDependency(
+                generateDocgenCodeBlock({
+                  filename: name,
+                  source: name,
+                  componentDocs: docGenParser.parseWithProgramProvider(
+                    name,
+                    () => tsProgram
+                  ),
+                  ...generateOptions,
+                })
+              )
+            );
+          } else {
+            // Assume webpack 4 or earlier
+            processModule(docGenParser, module, tsProgram, generateOptions);
+          }
+        });
       });
     });
   }