1. babel-plugin-transform-flow-comments
Turn flow type annotations into comments
babel-plugin-transform-flow-comments
Package: babel-plugin-transform-flow-comments
Created by: babel
Last modified: Mon, 13 Jun 2022 04:04:31 GMT
Version: 6.22.0
License: MIT
Downloads: 10,065
Repository: https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-flow-comments

Install

npm install babel-plugin-transform-flow-comments
yarn add babel-plugin-transform-flow-comments

babel-plugin-transform-flow-comments

Turn flow type annotations into comments.

You should be able to use this plugin instead of babel-plugin-flow-strip-types to preserve the /* @flow */ directive and still use flow.

http://flowtype.org/blog/2015/02/20/Flow-Comments.html

Example

In

 function foo(bar?) {}
function foo2(bar?: string) {}
function foo(x: number): string {}
type B = {
  name: string;
};
export type GraphQLFormattedError = number;
import type A, { B, C } from './types';
import typeof D, { E, F } from './types';

Out

 "use strict";

function foo(bar /*:: ?*/) {}
function foo2(bar /*:: ?: string*/) {}
function foo(x /*: number*/) /*: string*/ {}
/*:: type B = {
  name: string;
};*/
/*:: export type GraphQLFormattedError = number;*/
/*:: import type A, { B, C } from './types';*/
/*:: import typeof D, { E, F } from './types';*/

Installation

 $ npm install babel-plugin-transform-flow-comments

Usage

Via .babelrc (Recommended)

.babelrc

 {
  "plugins": ["transform-flow-comments"]
}

Via CLI

 $ babel --plugins transform-flow-comments script.js

Via Node API

 require("babel-core").transform("code", {
  plugins: ["transform-flow-comments"]
});

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin