strothj / babel-plugin-react-docgen-typescript Goto Github PK
View Code? Open in Web Editor NEWBabel Plugin to generate docgen data from React components written in TypeScript.
Babel Plugin to generate docgen data from React components written in TypeScript.
As the number of React components in my project grew, I noticed a performance issue similar to what is discussed in styleguidist/react-docgen-typescript#112: Creating a new Typescript program (ts.createProgram) when transforming each file is expensive.
I loosely adapted https://github.com/strothj/babel-plugin-react-docgen-typescript/blob/0b72d214444bf7a48ec22637654c5bee0eaad26f/src/index.ts to re-use the TypeScript program, and got big perf gains.
It might be possible to adapt this babel plugin. Hope this info could be helpful.
./docgen.js
const rdt = require('react-docgen-typescript');
const template = require('@babel/template');
const ts = require('typescript');
const glob = require('glob');
const util = require('util');
const files = glob.sync('src/**/*.{ts,tsx}', { absolute: true });
const program = ts.createProgram(files, {});
module.exports = function() {
return {
pre() {
this.fileProcessed = false;
},
visitor: {
Program(path, state) {
if (this.fileProcessed) {
return;
}
this.fileProcessed = true;
const { filename } = state.file.opts;
if (files.indexOf(filename) === -1) {
files.push(file);
program = ts.createProgram(files, {});
}
const docs = rdt
.withCompilerOptions({}, { shouldExtractLiteralValuesFromEnum: true })
.parseWithProgramProvider(filename, () => program);
docs.forEach((doc) => {
path.node.body.push(
template.default.ast(`
try {
${doc.displayName}.__docgenInfo = ${util.inspect(
doc,
null,
10,
)};
} catch (e) {}
`),
);
});
},
},
};
};
babel.config.js
const useESM = process.env.ESM === '1';
module.exports = function(api) {
api.cache(true);
return {
presets: [
'@babel/preset-typescript',
['@babel/preset-env', { modules: useESM ? false : 'commonjs' }],
],
plugins: [
'@babel/plugin-transform-react-jsx',
'./docgen',
'@babel/plugin-transform-runtime',
],
};
};
$ time npm run build:esm
> ESM=1 babel src --source-maps --out-dir dist/esm --extensions .ts,.tsx
Successfully compiled 38 files with Babel.
real 0m5.006s
user 0m7.779s
sys 0m0.538s
Before, it was about 40 seconds. Nearly a full order of magnitude improved.
I'm looking for a maintainer to take this project over. If you're comfortable working on a project like this, leave your details below.
Somehow this line of code throws the error. Haven't figured out what caused it.
When setting {shouldExtractLiteralValuesFromEnum: true}
, this plugin outputs enums shaped like so:
Button.__docgenInfo = {
"size": {
"defaultValue": null,
"description": "",
"name": "size",
"required": false,
"type": {
"name": "enum",
"raw": "\"small\" | \"medium\" | \"large\"",
"value": ["\"small\"", "\"medium\"", "\"large\""]
}
}
Other tools, such as react-docgen-typescript
, use a slightly different shape: values are an array of objects, with property value
.
Button.__docgenInfo = {
"size": {
"defaultValue": null,
"description": "",
"name": "size",
"required": false,
"type": {
"name": "enum",
"value": [
{
"value": "\"small\""
},
{
"value": "\"medium\""
},
{
"value": "\"large\""
}
]
}
}
}
This matters for upstream tools in storybook, like storybook-addon-react-docgen
and storybook-addon-smart-knobs
. The unexpected shape breaks props and knobs:
(Should be: oneOf "small" | "medium" | "large"
)
Happy to PR this if maintainers agree with the change. Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.