atlassian / Babel Plugin React Flow Props To Prop Types
Licence: other
Convert Flow React props annotation to PropTypes
Stars: ✭ 236
Programming Languages
Projects that are alternatives of or similar to Babel Plugin React Flow Props To Prop Types
Front End Guide
📚 Study guide and introduction to the modern front end stack.
Stars: ✭ 14,073 (+5863.14%)
Mutual labels: babel
Xdm
a modern MDX compiler. No runtime. With esbuild, Rollup, and webpack plugins
Stars: ✭ 206 (-12.71%)
Mutual labels: babel
Static Html Webpack Boilerplate
🔮 modern tooling for old-school static webpage development
Stars: ✭ 226 (-4.24%)
Mutual labels: babel
Express Api Es6 Starter
Build APIs with Express.js in no time using ES6/ES7/ESNext goodness.
Stars: ✭ 212 (-10.17%)
Mutual labels: babel
Embeddable React Widget
Create an embbedable js widget with react
Stars: ✭ 222 (-5.93%)
Mutual labels: babel
Js Library Boilerplate
Javascript Starter Boilerplate - Webpack 4, Babel 7, UMD, Hot Reloading, and more
Stars: ✭ 202 (-14.41%)
Mutual labels: babel
Webapp
The react-based community network for amFOSS members
Stars: ✭ 226 (-4.24%)
Mutual labels: babel
Django Static Precompiler
Django Static Precompiler provides template tags and filters to compile CoffeeScript, LiveScript, SASS / SCSS, LESS, Stylus, Babel and Handlebars. It works with both inline code and external files.
Stars: ✭ 206 (-12.71%)
Mutual labels: babel
React Expressjs
Simple and compact boilerplate for ReactJS project with expressJS
Stars: ✭ 208 (-11.86%)
Mutual labels: babel
Electron Vue
An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
Stars: ✭ 14,610 (+6090.68%)
Mutual labels: babel
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (-2.97%)
Mutual labels: babel
Babel Plugin React Intl Auto
i18n for the component age. Auto management react-intl ID.
Stars: ✭ 203 (-13.98%)
Mutual labels: babel
React Pwa
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.
Stars: ✭ 2,433 (+930.93%)
Mutual labels: babel
Productivity Frontend
Productivity Application - Kanban Style Productivity Management Application with Customizable Boards, Lists and Cards to Make You More Productive.
Stars: ✭ 234 (-0.85%)
Mutual labels: babel
Gulp Pug Starter
Frontend development with pleasure. Pug + SCSS version
Stars: ✭ 228 (-3.39%)
Mutual labels: babel
Frontend Boilerplate
An ES20XX starter with common frontend tasks using Webpack 4 as module bundler and npm scripts as task runner.
Stars: ✭ 224 (-5.08%)
Mutual labels: babel
babel-plugin-react-flow-props-to-prop-types
Convert Flow React props annotation to PropTypes
- Supports most Flow types (see below)
- Maintains comments
- Works across modules (can import types)
Supported:
-
any/mixed
Unknown types -
void/null
Empty types -
number / string / boolean
Primitives -
42 / "hello" / true
Literals -
[1, 2, 3]
Tuples -
{ ... }
Objects-
{ prop: number }
Object Properties -
{ prop?: number }
Optional properties -
{ [prop: string]: number }
Optional Indexers
-
-
{ [key: string]: number }
Object indexers -
Array<string>
Arrays -
Object
Unknown Objects -
Function
Unknown Functions -
RegExp
regular expressions -
boolean | string
Unions -
{ foo: number } & { bar: string }
Intersections - Referencing other types:
-
type Alias = number
- Type Aliases -
interface Stuff {}
- Interfaces -
class Thing {}
- Class Declarations -
import type {Alias} from "./other";
Type imports
-
Unsupported:
-
{ a: number, [b: string]: number }
Combining properties and indexers -
{ [a: string]: number, [b: string]: number }
Multiple indexers -
{ (): void }
Object call properties -
a.b
Qualified type identifiers -
import typeof Export from "./other";
Typeof imports
Example
In:
class MyComponent extends React.Component {
props: {
// Add a class name to the root element
className: string
};
// ...
}
Out:
class MyComponent extends React.Component {
props: {
// Add a class name to the root element
className: string
};
static propTypes = {
// Add a class name to the root element
className: PropTypes.string.isRequired
};
// ...
}
Installation
$ yarn add prop-types prop-types-extra
$ yarn add --dev babel-plugin-react-flow-props-to-prop-types
Note:
prop-types-extra
is necessary for intersection type support.
Usage
.babelrc
(Recommended)
Via .babelrc
{
"plugins": [
["react-flow-props-to-prop-types", { /* options */ }]
]
}
Via CLI
$ babel --plugins react-flow-props-to-prop-types script.js
Via Node API
require("babel-core").transform("code", {
plugins: [
["react-flow-props-to-prop-types", { /* options */ }]
]
});
Options
resolveOpts
(optional)
Passed through to node-resolve
Override type used in propTypes
Sometimes you have Flow types which cannot be translated into PropTypes. In these scenarios you can provide your own type:
import type {PropType} from "babel-plugin-react-flow-props-to-prop-types";
class MyComponent extends React.Component {
props: {
foo: PropType<UnknownFunctionType, Function>
};
}
PropType is defined as:
type PropType<T, R> = T;
So Flow will use the first type you provide, while this Babel plugin will use the second.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].