From e07f22b740341a6c88ce3f4b59582966ad90a086 Mon Sep 17 00:00:00 2001 From: Egor Pogadaev Date: Mon, 28 Jun 2021 00:03:20 +0500 Subject: [PATCH 01/12] fix: respect falsy custom options --- src/plugin.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/plugin.ts b/src/plugin.ts index d5920e7..bc64052 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -135,6 +135,12 @@ function processModule( /** Inject typescript docgen information into modules at the end of a build */ export default class DocgenPlugin implements webpack.WebpackPluginInstance { + public static defaultOptions = { + setDisplayName: true, + typePropName: "type", + docgenCollectionName: "STORYBOOK_REACT_CLASSES", + }; + private name = "React Docgen Typescript Plugin"; private options: PluginOptions; @@ -266,6 +272,7 @@ export default class DocgenPlugin implements webpack.WebpackPluginInstance { typePropName, ...docgenOptions } = this.options; + const { defaultOptions } = DocgenPlugin; let compilerOptions = { jsx: ts.JsxEmit.React, @@ -286,9 +293,12 @@ export default class DocgenPlugin implements webpack.WebpackPluginInstance { return { docgenOptions, generateOptions: { - docgenCollectionName: docgenCollectionName || "STORYBOOK_REACT_CLASSES", - setDisplayName: setDisplayName || true, - typePropName: typePropName || "type", + docgenCollectionName: + docgenCollectionName === undefined + ? defaultOptions.docgenCollectionName + : docgenCollectionName, + setDisplayName: setDisplayName ?? defaultOptions.setDisplayName, + typePropName: typePropName ?? defaultOptions.typePropName, }, compilerOptions, }; From 222d854bb2809f4eca1d650779e0c29460e935b8 Mon Sep 17 00:00:00 2001 From: Egor Pogadaev Date: Mon, 28 Jun 2021 00:07:50 +0500 Subject: [PATCH 02/12] test: custom loader options --- src/__tests__/plugin.test.ts | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/__tests__/plugin.test.ts b/src/__tests__/plugin.test.ts index b66b277..e610ad5 100644 --- a/src/__tests__/plugin.test.ts +++ b/src/__tests__/plugin.test.ts @@ -1,6 +1,7 @@ import webpack, { Configuration } from "webpack"; import { createFsFromVolume, IFs, Volume } from "memfs"; import ReactDocgenTypeScriptPlugin from ".."; +import { LoaderOptions } from "../types"; // eslint-disable-next-line const joinPath = require("memory-fs/lib/join"); @@ -84,3 +85,34 @@ test("default options", async () => { expect(result).toContain("STORYBOOK_REACT_CLASSES"); }); + +describe("custom options", () => { + describe("loader options", () => { + const options: Record< + keyof LoaderOptions, + Array + > = { + setDisplayName: [true, false, undefined], + typePropName: ["customValue", undefined], + docgenCollectionName: ["customValue", null, undefined], + }; + const { defaultOptions } = ReactDocgenTypeScriptPlugin; + + (Object.keys(options) as Array).forEach( + (optionName) => { + const values = options[optionName]; + + test.each(values)(`${optionName}: %p`, (value) => { + const plugin = new ReactDocgenTypeScriptPlugin({ + [optionName]: value, + }); + const { generateOptions: resultOptions } = plugin.getOptions(); + + expect(resultOptions[optionName]).toBe( + value === undefined ? defaultOptions[optionName] : value + ); + }); + } + ); + }); +}); From 3a3cb008bbe582ca2727c289e246e7ade624172f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 30 Jun 2021 15:38:05 +0800 Subject: [PATCH 03/12] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 72a3a36..7bf3e9f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-docgen-typescript-plugin", - "version": "1.0.0", + "version": "1.0.1", "description": "A webpack plugin to inject react typescript docgen information.", "license": "MIT", "repository": "hipstersmoothie/react-docgen-typescript-plugin", From 424ea79eb60bbb2849649633704e47ce681a4949 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 30 Jun 2021 15:47:25 +0800 Subject: [PATCH 04/12] update scope --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7bf3e9f..28133ab 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-docgen-typescript-plugin", + "name": "@storybook/react-docgen-typescript-plugin", "version": "1.0.1", "description": "A webpack plugin to inject react typescript docgen information.", "license": "MIT", From fc80057d646bde59b531a9abd2d2e337ea3406ff Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 30 Jun 2021 16:55:56 +0800 Subject: [PATCH 05/12] Upgrade to react-docgen-typescript 2.0.0 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 28133ab..c7aced9 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "find-cache-dir": "^3.3.1", "flat-cache": "^3.0.4", "micromatch": "^4.0.2", - "react-docgen-typescript": "^1.22.0", + "react-docgen-typescript": "^2.0.0", "tslib": "^2.0.0" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index b77f79d..6542193 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5119,10 +5119,10 @@ rc@^1.2.8: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-docgen-typescript@^1.22.0: - version "1.22.0" - resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-1.22.0.tgz#00232c8e8e47f4437cac133b879b3e9437284bee" - integrity sha512-MPLbF8vzRwAG3GcjdL+OHQlhgtWsLTXs+7uJiHfEeT3Ur7IsZaNYqRTLQ9sj2nB6M6jylcPCeCmH7qbszJmecg== +react-docgen-typescript@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.0.0.tgz#0f684350159ae4d2d556f8bc241a74669753944b" + integrity sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw== react-is@^17.0.1: version "17.0.1" From 187a82f54b1fbb8989e57c925ade34d828a7285c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juho=20Veps=C3=A4l=C3=A4inen?= Date: Thu, 29 Jul 2021 10:32:36 +0300 Subject: [PATCH 06/12] fix(dependency): Add webpack 5 specific serialization logic For caching to work in webpack 5, these little additions are needed. I adapted from webpack source while testing against https://github.com/umpox/storybook-repod. Related to https://github.com/storybookjs/storybook/issues/15702. --- src/dependency.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/dependency.ts b/src/dependency.ts index 5057baf..1db3bf3 100644 --- a/src/dependency.ts +++ b/src/dependency.ts @@ -9,6 +9,9 @@ import makeSerializable from "webpack/lib/util/makeSerializable.js"; // @ts-ignore: What's the right way to refer to this one? import NullDependency from "webpack/lib/dependencies/NullDependency.js"; +// This won't be needed when only webpack 5+ can be supported. Patching for now. +type Context = { write: (a: string) => void; read: () => string }; + class DocGenDependency extends NullDependency { public codeBlock: string; @@ -18,6 +21,10 @@ class DocGenDependency extends NullDependency { this.codeBlock = codeBlock; } + get type(): string { + return "docgen"; + } + getModuleEvaluationSideEffectsState(): boolean { return false; } @@ -25,6 +32,16 @@ class DocGenDependency extends NullDependency { updateHash: webpack.dependencies.NullDependency["updateHash"] = (hash) => { hash.update(this.codeBlock); }; + + serialize(context: Context): void { + const { write } = context; + write(this.codeBlock); + } + + deserialize(context: Context): void { + const { read } = context; + this.codeBlock = read(); + } } makeSerializable( From f7d24b33d7c5efc55415c5081e6d3eff497d589b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 29 Nov 2021 14:46:12 +0800 Subject: [PATCH 07/12] Fix publishing settings --- .github/workflows/push.yml | 26 +++++++++++++------------- package.json | 2 +- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml index 2e8f99e..5633bc6 100644 --- a/.github/workflows/push.yml +++ b/.github/workflows/push.yml @@ -3,10 +3,10 @@ name: Node CI on: push: branches: - - master + - main pull_request: branches: - - master + - main jobs: build: @@ -17,17 +17,17 @@ jobs: node-version: [12.x, 14.x] steps: - - uses: actions/checkout@v1 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 - with: - node-version: ${{ matrix.node-version }} - - name: npm install, build, and lint - run: | - yarn - yarn build - yarn lint - yarn test + - uses: actions/checkout@v1 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: npm install, build, and lint + run: | + yarn + yarn build + yarn lint + yarn test release: runs-on: ubuntu-latest diff --git a/package.json b/package.json index c7aced9..db2423f 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "1.0.1", "description": "A webpack plugin to inject react typescript docgen information.", "license": "MIT", - "repository": "hipstersmoothie/react-docgen-typescript-plugin", + "repository": "storybookjs/react-docgen-typescript-plugin", "author": "Andrew Lisowski ", "main": "dist/index.js", "publishConfig": { From 70c8f5c0e410583c7a303fd28d8d873502d44247 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 29 Nov 2021 14:54:21 +0800 Subject: [PATCH 08/12] Add next to branches that trigger CI --- .github/workflows/push.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml index 5633bc6..f3a993d 100644 --- a/.github/workflows/push.yml +++ b/.github/workflows/push.yml @@ -4,9 +4,11 @@ on: push: branches: - main + - next pull_request: branches: - main + - next jobs: build: From 3d57018310087919f8fc0efea03d28485f2768fa Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 29 Nov 2021 14:57:42 +0800 Subject: [PATCH 09/12] Fix package name in README --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 34a14b9..0286a72 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,16 @@
-

react-docgen-typescript-plugin

+

@storybook/react-docgen-typescript-plugin

A webpack plugin to inject react typescript docgen information

## Install ```sh -npm install --save-dev react-docgen-typescript-plugin +npm install --save-dev @storybook/react-docgen-typescript-plugin # or -yarn add -D react-docgen-typescript-plugin +yarn add -D @storybook/react-docgen-typescript-plugin ``` ## Usage From d0324d35872adad614aa50e163f403a2f950e1b8 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 30 Nov 2021 15:22:03 +0800 Subject: [PATCH 10/12] Update react-docgen-typescript --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index db2423f..00b2663 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "find-cache-dir": "^3.3.1", "flat-cache": "^3.0.4", "micromatch": "^4.0.2", - "react-docgen-typescript": "^2.0.0", + "react-docgen-typescript": "^2.1.1", "tslib": "^2.0.0" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 6542193..1afc514 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5119,10 +5119,10 @@ rc@^1.2.8: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-docgen-typescript@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.0.0.tgz#0f684350159ae4d2d556f8bc241a74669753944b" - integrity sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw== +react-docgen-typescript@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.1.1.tgz#c9f9ccb1fa67e0f4caf3b12f2a07512a201c2dcf" + integrity sha512-XWe8bsYqVjxciKdpNoufaHiB7FgUHIOnVQgxUolRL3Zlof2zkdTzuQH6SU2n3Ek9kfy3O1c63ojMtNfpiuNeZQ== react-is@^17.0.1: version "17.0.1" From 4734d37e73a6411a01470383f816b85ceecedb44 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 30 Nov 2021 15:22:13 +0800 Subject: [PATCH 11/12] Update snapshot --- .../__snapshots__/generateDocgenCodeBlock.test.ts.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/__tests__/__snapshots__/generateDocgenCodeBlock.test.ts.snap b/src/__tests__/__snapshots__/generateDocgenCodeBlock.test.ts.snap index 316ff3d..3371a7c 100644 --- a/src/__tests__/__snapshots__/generateDocgenCodeBlock.test.ts.snap +++ b/src/__tests__/__snapshots__/generateDocgenCodeBlock.test.ts.snap @@ -71,7 +71,7 @@ try { // @ts-ignore DefaultPropValueComponent.displayName = \\"DefaultPropValueComponent\\"; // @ts-ignore - DefaultPropValueComponent.__docgenInfo = { \\"description\\": \\"Component with a prop with a default value.\\", \\"displayName\\": \\"DefaultPropValueComponent\\", \\"props\\": { \\"color\\": { \\"defaultValue\\": { value: \\"blue\\" }, \\"description\\": \\"Button color.\\", \\"name\\": \\"color\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"\\\\\\"blue\\\\\\" | \\\\\\"green\\\\\\"\\" } }, \\"counter\\": { \\"defaultValue\\": { value: 123 }, \\"description\\": \\"Button counter.\\", \\"name\\": \\"counter\\", \\"required\\": false, \\"type\\": { \\"name\\": \\"number\\" } }, \\"disabled\\": { \\"defaultValue\\": { value: false }, \\"description\\": \\"Button disabled.\\", \\"name\\": \\"disabled\\", \\"required\\": false, \\"type\\": { \\"name\\": \\"boolean\\" } } } }; + DefaultPropValueComponent.__docgenInfo = { \\"description\\": \\"Component with a prop with a default value.\\", \\"displayName\\": \\"DefaultPropValueComponent\\", \\"props\\": { \\"color\\": { \\"defaultValue\\": null, \\"description\\": \\"Button color.\\", \\"name\\": \\"color\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"\\\\\\"blue\\\\\\" | \\\\\\"green\\\\\\"\\" } }, \\"counter\\": { \\"defaultValue\\": { value: 123 }, \\"description\\": \\"Button counter.\\", \\"name\\": \\"counter\\", \\"required\\": false, \\"type\\": { \\"name\\": \\"number\\" } }, \\"disabled\\": { \\"defaultValue\\": { value: false }, \\"description\\": \\"Button disabled.\\", \\"name\\": \\"disabled\\", \\"required\\": false, \\"type\\": { \\"name\\": \\"boolean\\" } } } }; } catch (__react_docgen_typescript_loader_error) { }" `; @@ -273,7 +273,7 @@ try { // @ts-ignore DefaultPropValueComponent.displayName = \\"DefaultPropValueComponent\\"; // @ts-ignore - DefaultPropValueComponent.__docgenInfo = { \\"description\\": \\"Component with a prop with a default value.\\", \\"displayName\\": \\"DefaultPropValueComponent\\", \\"props\\": { \\"color\\": { \\"defaultValue\\": { value: \\"blue\\" }, \\"description\\": \\"Button color.\\", \\"name\\": \\"color\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"enum\\", \\"value\\": [{ \\"value\\": \\"\\\\\\"blue\\\\\\"\\" }, { \\"value\\": \\"\\\\\\"green\\\\\\"\\" }] } }, \\"counter\\": { \\"defaultValue\\": { value: 123 }, \\"description\\": \\"Button counter.\\", \\"name\\": \\"counter\\", \\"required\\": false, \\"type\\": { \\"name\\": \\"number\\" } }, \\"disabled\\": { \\"defaultValue\\": { value: false }, \\"description\\": \\"Button disabled.\\", \\"name\\": \\"disabled\\", \\"required\\": false, \\"type\\": { \\"name\\": \\"boolean\\" } } } }; + DefaultPropValueComponent.__docgenInfo = { \\"description\\": \\"Component with a prop with a default value.\\", \\"displayName\\": \\"DefaultPropValueComponent\\", \\"props\\": { \\"color\\": { \\"defaultValue\\": null, \\"description\\": \\"Button color.\\", \\"name\\": \\"color\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"enum\\", \\"value\\": [{ \\"value\\": \\"\\\\\\"blue\\\\\\"\\" }, { \\"value\\": \\"\\\\\\"green\\\\\\"\\" }] } }, \\"counter\\": { \\"defaultValue\\": { value: 123 }, \\"description\\": \\"Button counter.\\", \\"name\\": \\"counter\\", \\"required\\": false, \\"type\\": { \\"name\\": \\"number\\" } }, \\"disabled\\": { \\"defaultValue\\": { value: false }, \\"description\\": \\"Button disabled.\\", \\"name\\": \\"disabled\\", \\"required\\": false, \\"type\\": { \\"name\\": \\"boolean\\" } } } }; } catch (__react_docgen_typescript_loader_error) { }" `; From 1ab48a0d084a09d2e849f99b45deb8cac72bb5c1 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 30 Nov 2021 15:26:35 +0800 Subject: [PATCH 12/12] Formatting --- README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 0286a72..01f59f8 100644 --- a/README.md +++ b/README.md @@ -19,8 +19,9 @@ yarn add -D @storybook/react-docgen-typescript-plugin > `react-docgen-typescript-plugin` a lot harder! Turn them off for faster build times. ```ts -const ts = require('typescript'); -const ReactDocgenTypescriptPlugin = require("react-docgen-typescript-plugin").default; +const ts = require("typescript"); +const ReactDocgenTypescriptPlugin = require("react-docgen-typescript-plugin") + .default; module.exports = { plugins: [ @@ -29,7 +30,9 @@ module.exports = { // or with a specific tsconfig new ReactDocgenTypescriptPlugin({ tsconfigPath: "./tsconfig.dev.json" }), // or with compiler options - new ReactDocgenTypescriptPlugin({ compilerOptions: { jsx: ts.JsxEmit.Preserve } }), + new ReactDocgenTypescriptPlugin({ + compilerOptions: { jsx: ts.JsxEmit.Preserve }, + }), ], }; ``` @@ -45,8 +48,8 @@ This plugins support all parser options from [react-docgen-typescript](https://g | 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` | -| exclude | glob[] | Glob patterns to ignore and not generate docgen information for. (Great for ignoring large icon libraries) | `[]` | -| include | glob[] | Glob patterns to generate docgen information for | `['**/**.tsx']` | +| exclude | glob[] | Glob patterns to ignore and not generate docgen information for. (Great for ignoring large icon libraries) | `[]` | +| include | glob[] | Glob patterns to generate docgen information for | `['**/**.tsx']` | ## Debugging @@ -90,4 +93,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d -This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! \ No newline at end of file +This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!