feat - Add support for webpack 5

.eslintrc

@@ -8,21 +8,13 @@
     "plugin:jest/recommended",
     "plugin:jest/style"
   ],
-  "plugins": [
-    "prettier",
-    "eslint-plugin-jsdoc",
-    "@typescript-eslint",
-    "jest"
-  ],
+  "plugins": ["prettier", "eslint-plugin-jsdoc", "@typescript-eslint", "jest"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "project": "./tsconfig.json",
     "sourceType": "module"
   },
-  "ignorePatterns": [
-    "jest.config.js",
-    "**/__fixtures__"
-  ],
+  "ignorePatterns": ["jest.config.js", "**/__fixtures__"],
   "env": {
     "jest/globals": true
   },
@@ -31,6 +23,7 @@
     "@typescript-eslint/camelcase": 0,
     "complexity": 0,
     "import/no-unresolved": 0,
-    "import/extensions": 0
+    "import/extensions": 0,
+    "class-methods-use-this": 0
   }
 }

.github/workflows/push.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x]
+        node-version: [12.x, 14.x]
 
     steps:
     - uses: actions/checkout@v1

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 dist
-.env
+example-dist
+coverage
+.env

.npmrc

@@ -1 +1,2 @@
+registry=https://registry.npmjs.org/
 package-lock=false

.prettierrc

@@ -0,0 +1 @@
+{}

package.json

@@ -6,11 +6,20 @@
   "repository": "hipstersmoothie/react-docgen-typescript-plugin",
   "author": "Andrew Lisowski <[email protected]>",
   "main": "dist/index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
   "scripts": {
+    "build:example": "npm run build && webpack",
     "build": "tsc -p tsconfig.build.json",
     "start": "yarn build --watch",
     "lint": "eslint src --ext .ts,.js",
-    "test": "jest",
+    "test": "npm run test:v4 && npm run test:v5",
+    "pretest:v4": "add-no-save @types/webpack ts-loader@8 webpack@4",
+    "test:v4": "jest",
+    "pretest:v5": "add-no-save webpack@5",
+    "test:v5": "jest",
     "release": "auto shipit"
   },
   "keywords": [
@@ -29,18 +38,19 @@
     "find-cache-dir": "^3.3.1",
     "flat-cache": "^3.0.4",
     "micromatch": "^4.0.2",
-    "react-docgen-typescript": "^1.20.5",
-    "tslib": "^2.0.0"
+    "react-docgen-typescript": "^1.22.0",
+    "tslib": "^2.0.0",
+    "webpack-sources": "^2.2.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.5",
     "@types/find-cache-dir": "^3.2.0",
     "@types/flat-cache": "^2.0.0",
-    "@types/jest": "^26.0.16",
+    "@types/jest": "^26.0.23",
     "@types/micromatch": "^4.0.1",
     "@types/node": "^14.0.12",
     "@types/react": "^17.0.0",
-    "@types/webpack": "^4.41.17",
+    "@types/webpack-sources": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^4.9.0",
     "@typescript-eslint/parser": "^4.9.0",
     "auto": "^10.2.3",
@@ -55,13 +65,20 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "3.1.3",
     "jest": "^26.6.3",
+    "memfs": "^3.2.2",
+    "memory-fs": "^0.5.0",
     "prettier": "^2.0.5",
     "react": "^17.0.1",
-    "ts-jest": "^26.4.4",
-    "typescript": "3.8.3"
+    "ts-jest": "^26.5.6",
+    "ts-loader": "^9.1.2",
+    "typescript": "3.8.3",
+    "webpack": "^5.36.2",
+    "webpack-cli": "^4.7.0",
+    "yarn-add-no-save": "^1.0.3"
   },
   "peerDependencies": {
-    "typescript": ">= 3.x"
+    "typescript": ">= 3.x",
+    "webpack": ">= 4"
   },
   "lint-staged": {
     "*.{js,css,md}": [

src/__tests__/plugin.test.ts

@@ -0,0 +1,86 @@
+import webpack, { Configuration } from "webpack";
+import { createFsFromVolume, IFs, Volume } from "memfs";
+import ReactDocgenTypeScriptPlugin from "..";
+
+// eslint-disable-next-line
+const joinPath = require("memory-fs/lib/join");
+
+// Hack for webpack 4. This isn't needed with 5
+// See more: https://github.com/streamich/memfs/issues/404.
+function ensureWebpackMemoryFs(fs: IFs) {
+  // Return it back, when it has Webpack 'join' method
+  // eslint-disable-next-line
+  // @ts-ignore
+  if (fs.join) {
+    return fs;
+  }
+
+  // Create FS proxy, adding `join` method to memfs, but not modifying original object
+  const nextFs = Object.create(fs);
+  nextFs.join = joinPath;
+
+  return nextFs;
+}
+
+function compile(config: Configuration): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const compiler = webpack(config);
+
+    // eslint-disable-next-line
+    // @ts-ignore: There's a type mismatch but this should work based on webpack source
+    compiler.outputFileSystem = ensureWebpackMemoryFs(
+      createFsFromVolume(new Volume())
+    );
+    const memfs = compiler.outputFileSystem;
+
+    compiler.run((error, stats) => {
+      if (error) {
+        return reject(error);
+      }
+
+      if (stats?.hasErrors()) {
+        return reject(stats.toString("errors-only"));
+      }
+
+      memfs.readFile(
+        "./dist/main.js",
+        {
+          encoding: "utf-8",
+        },
+        // eslint-disable-next-line
+        // @ts-ignore: Type mismatch again
+        (err, data) => (err ? reject(err) : resolve(data))
+      );
+
+      return undefined;
+    });
+  });
+}
+
+const getConfig = (
+  options = {},
+  config: { title?: string } = {}
+): Configuration => ({
+  mode: "none",
+  entry: { main: "./src/__tests__/__fixtures__/Simple.tsx" },
+  plugins: [new ReactDocgenTypeScriptPlugin(options)],
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: "ts-loader",
+        options: {
+          transpileOnly: true,
+        },
+      },
+    ],
+  },
+  ...config,
+});
+
+// TODO: What else to test and how?
+test("default options", async () => {
+  const result = await compile(getConfig({}));
+
+  expect(result).toContain("STORYBOOK_REACT_CLASSES");
+});

src/dependency.ts

@@ -0,0 +1,54 @@
+/* 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";
+
+// eslint-disable-next-line
+// @ts-ignore: What's the right way to refer to this one?
+import NullDependency from "webpack/lib/dependencies/NullDependency.js";
+
+class DocGenDependency extends NullDependency {
+  public codeBlock: string;
+
+  constructor(codeBlock: string) {
+    super();
+
+    this.codeBlock = codeBlock;
+  }
+
+  updateHash: webpack.dependencies.NullDependency["updateHash"] = (hash) => {
+    hash.update(this.codeBlock);
+  };
+}
+
+makeSerializable(
+  DocGenDependency,
+  "react-docgen-typescript-plugin/dist/dependency"
+);
+
+type NullDependencyTemplateType = InstanceType<
+  typeof webpack.dependencies.NullDependency.Template
+>;
+class DocGenTemplate extends NullDependency.Template
+  implements NullDependencyTemplateType {
+  // eslint-disable-next-line
+  // @ts-ignore: Webpack 4 type
+  apply: NullDependencyTemplateType["apply"] = (
+    dependency: DocGenDependency,
+    source
+  ) => {
+    if (dependency.codeBlock) {
+      // Insert to the end
+      source.insert(Infinity, dependency.codeBlock);
+    }
+  };
+}
+
+// @ts-ignore TODO: How to type this correctly?
+DocGenDependency.Template = DocGenTemplate;
+
+// Default imports are tricky with CommonJS
+// eslint-disable-next-line
+export { DocGenDependency };

src/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable  */
 
-import type { DocgenPluginType, PluginOptions } from './plugin'
+import type { DocgenPluginType, PluginOptions } from "./plugin";
 
 class EmptyPlugin {
   constructor(_: PluginOptions) {}
@@ -9,12 +9,15 @@ class EmptyPlugin {
 
 let plugin: DocgenPluginType;
 
+// It should be possible to use the plugin without TypeScript.
+// In that case using it is a no-op.
 try {
   require.resolve("typescript");
-  plugin = require('./plugin').default;
+  plugin = require("./plugin").default;
 } catch (error) {
   plugin = EmptyPlugin as any;
 }
 
 export { PluginOptions } from "./plugin";
+export { plugin as ReactDocgenTypeScriptPlugin };
 export default plugin;