🔮 magical-types

Document React components and other stuff typed with TypeScript magically

Getting Started

Installing babel-plugin-macros

magical-types is used as a Babel Macro. Unless you're using Create React App or Gatsby, you'll need to install it and add it to your Babel config.

yarn add babel-plugin-macros

{
  "plugins": ["babel-plugin-macros"]
}

Installing magical-types

yarn add @magical-types/macro

Using it

import { PropTypes, FunctionTypes, RawTypes } from "@magical-types/macro";

type Props = {
  someProp: string;
};

let MyComponent = (props: Props) => {
  return <div />;
};

<PropTypes component={MyComponent} />;

function myFunctionThatDoesCoolStuff(someArgument: { thing: true }) {}

<FunctionTypes function={myFunctionThatDoesCoolStuff} />;

type SomeObject = { someProperty: boolean };

<RawTypes<SomeObject> />;

function someFunctionThatReturnsAComponent() {
  return MyComponent;
}

let AnotherComp = someFunctionThatReturnsAComponent();

<PropTypes component={AnotherComp} />;

Thanks/Inspiration

This project is mostly some ideas that I've been thinking about because of some of the constraints in react-docgen, react-docgen-typescript and extract-react-types and how some problems could be removed by changing some constraints, notably the removal of having to know what is and isn't a React component.

The code for rendering types is heavily based off pretty-proptypes.