Merge pull request #1 from hipstersmoothie/compiler-options

allow for compilerOption, get features in parity with react-docgen-typescript-loader

Author: hipstersmoothie

readme.md

@@ -21,8 +21,10 @@ const ReactDocgenTypescriptPlugin = require("react-docgen-typescript-plugin");
 module.exports = {
   plugins: [
     new ReactDocgenTypescriptPlugin(),
-    // or with options
+    // or with a tsconfig
     new ReactDocgenTypescriptPlugin({ tsconfigPath: "./tsconfig.json" }),
+    // or with options
+    new ReactDocgenTypescriptPlugin({ jsx: ts.JsxEmit.Preserve }),
   ],
 };
 ```
@@ -34,6 +36,7 @@ This plugins support all parser options from [react-docgen-typescript](https://g
 | Option               | Type           | Description                                                                                                                                         | Default                   |
 | -------------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
 | tsconfigPath         | string         | Specify the location of the `tsconfig.json` to use.                                                                                                 | `null`                    |
+| compilerOptions      | object         | Specify compiler options. Cannot be used with `tsconfigPath`                                                                                        | `null`                    |
 | docgenCollectionName | string or null | Specify the docgen collection name to use. All docgen information will be collected into this global object. Set to `null` to disable.              | `STORYBOOK_REACT_CLASSES` |
 | setDisplayName       | boolean        | Set the components' display name. If you want to set display names yourself or are using another plugin to do this, you should disable this option. | `true`                    |
 | typePropName         | string         | Specify the name of the property for docgen info prop type.                                                                                         | `type`                    |

src/index.ts

@@ -4,13 +4,17 @@ import ts from "typescript";
 import * as docGen from "react-docgen-typescript";
 import generateDocgenCodeBlock from "react-docgen-typescript-loader/dist/generateDocgenCodeBlock";
 
-interface LoaderOptions {
+interface TypescriptOptions {
   /**
    * Specify the location of the tsconfig.json to use. Can not be used with
    * compilerOptions.
    **/
   tsconfigPath?: string;
+  /** Specify TypeScript compiler options. Can not be used with tsconfigPath. */
+  compilerOptions?: ts.CompilerOptions;
+}
 
+interface LoaderOptions {
   /**
    * Specify the docgen collection name to use. All docgen information will
    * be collected into this global object. Set to null to disable.
@@ -45,20 +49,23 @@ interface LoaderOptions {
   typePropName?: string;
 }
 
-export type PluginOptions = docGen.ParserOptions & LoaderOptions;
+export type PluginOptions = docGen.ParserOptions &
+  LoaderOptions &
+  TypescriptOptions;
 
 interface Module {
   userRequest: string;
   _source: {
     _value: string;
-  }
+  };
 }
 
+/** Run the docgen parser and inject the result into the output */
 function processModule(
   parser: docGen.FileParser,
   webpackModule: Module,
   tsProgram: ts.Program,
-  loaderOptions: PluginOptions
+  loaderOptions: Required<LoaderOptions>
 ) {
   if (!webpackModule) {
     return;
@@ -77,9 +84,6 @@ function processModule(
     filename: webpackModule.userRequest,
     source: webpackModule.userRequest,
     componentDocs,
-    typePropName: "type",
-    docgenCollectionName: "STORYBOOK_REACT_CLASSES",
-    setDisplayName: true,
     ...loaderOptions,
   }).substring(webpackModule.userRequest.length);
 
@@ -90,6 +94,21 @@ function processModule(
   webpackModule._source._value = source;
 }
 
+/** Get the contents of the tsconfig in the system */
+function getTSConfigFile(tsconfigPath: string): ts.ParsedCommandLine {
+  const basePath = path.dirname(tsconfigPath);
+  const configFile = ts.readConfigFile(tsconfigPath, ts.sys.readFile);
+
+  return ts.parseJsonConfigFileContent(
+    configFile.config,
+    ts.sys,
+    basePath,
+    {},
+    tsconfigPath
+  );
+}
+
+/** Inject typescript docgen information into modules at the end of a build */
 export default class DocgenPlugin {
   private name = "React Docgen Typescript Plugin";
   private options: PluginOptions;
@@ -102,21 +121,27 @@ export default class DocgenPlugin {
     const pathRegex = RegExp(`\\${path.sep}src.+\\.tsx`);
     const {
       tsconfigPath,
-      propFilter,
-      componentNameResolver,
-      shouldExtractLiteralValuesFromEnum,
-      shouldRemoveUndefinedFromOptional,
-      savePropValueAsString,
-      ...loaderOptions
+      docgenCollectionName = "STORYBOOK_REACT_CLASSES",
+      setDisplayName = true,
+      typePropName = "type",
+      compilerOptions: userCompilerOptions,
+      ...docgenOptions
     } = this.options;
-    const docgenOptions = {
-      propFilter,
-      componentNameResolver,
-      shouldExtractLiteralValuesFromEnum,
-      shouldRemoveUndefinedFromOptional,
-      savePropValueAsString,
+    let compilerOptions = {
+      jsx: ts.JsxEmit.React,
+      module: ts.ModuleKind.CommonJS,
+      target: ts.ScriptTarget.Latest,
     };
 
+    if (userCompilerOptions) {
+      compilerOptions = { ...compilerOptions, ...userCompilerOptions };
+    }
+
+    if (tsconfigPath) {
+      const { options } = getTSConfigFile(tsconfigPath);
+      compilerOptions = { ...compilerOptions, ...options };
+    }
+
     compiler.hooks.make.tap(this.name, (compilation) => {
       compilation.hooks.seal.tap(this.name, () => {
         const modulesToProcess: Module[] = [];
@@ -132,20 +157,21 @@ export default class DocgenPlugin {
           }
         });
 
+        const parser =
+          (tsconfigPath &&
+            docGen.withCustomConfig(tsconfigPath, docgenOptions)) ||
+          docGen.withCompilerOptions(compilerOptions, docgenOptions);
         const tsProgram = ts.createProgram(
           modulesToProcess.map((v) => v.userRequest),
-          {
-            jsx: ts.JsxEmit.React,
-            module: ts.ModuleKind.CommonJS,
-            target: ts.ScriptTarget.Latest,
-          }
+          compilerOptions
         );
-        const parser = tsconfigPath
-          ? docGen.withCustomConfig(tsconfigPath, docgenOptions)
-          : docGen.withDefaultConfig({});
 
         modulesToProcess.forEach((m) =>
-          processModule(parser, m, tsProgram, loaderOptions)
+          processModule(parser, m, tsProgram, {
+            docgenCollectionName,
+            setDisplayName,
+            typePropName,
+          })
         );
       });
     });