Coder Social home page Coder Social logo

babel-plugin-react-docgen-typescript's People

Contributors

dependabot[bot] avatar dsil avatar petermikitsh avatar strothj avatar yehq avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

babel-plugin-react-docgen-typescript's Issues

Enum shape parity

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:

Screen Shot 2020-03-23 at 7 02 24 PM

(Should be: oneOf "small" | "medium" | "large")

Happy to PR this if maintainers agree with the change. Thanks!

Performance: Re-use TS Program

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.

Looking for maintainer

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.