or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

@babel/plugin-transform-flow-strip-types

@babel/plugin-transform-flow-strip-types is a Babel plugin that strips Flow type annotations from JavaScript and TypeScript code during compilation. It processes Flow directives, removes type-only imports and exports, and systematically eliminates all Flow type constructs while preserving the executable code.

Package Information

Package Name: @babel/plugin-transform-flow-strip-types
Package Type: npm
Language: TypeScript
Installation: npm install --save-dev @babel/plugin-transform-flow-strip-types

Core Imports

import transformFlowStripTypes from "@babel/plugin-transform-flow-strip-types";

For CommonJS:

const transformFlowStripTypes = require("@babel/plugin-transform-flow-strip-types");

Basic Usage

// Basic Babel configuration
{
  "plugins": ["@babel/plugin-transform-flow-strip-types"]
}

// With options
{
  "plugins": [
    ["@babel/plugin-transform-flow-strip-types", {
      "requireDirective": false,
      "allowDeclareFields": false
    }]
  ]
}

// Using programmatically with Babel
import { transform } from "@babel/core";
import transformFlowStripTypes from "@babel/plugin-transform-flow-strip-types";

const result = transform(code, {
  plugins: [transformFlowStripTypes]
});

Capabilities

Plugin Factory Function

The main export is a Babel plugin factory function that creates a plugin instance with visitor methods for stripping Flow types.

/**
 * Creates a Babel plugin for stripping Flow type annotations
 * @param api - Babel API object
 * @param opts - Plugin configuration options
 * @returns Babel plugin configuration object
 */
declare function transformFlowStripTypes(
  api: any,
  opts: Options
): {
  name: string;
  inherits: any;
  visitor: BabelVisitor;
};

export default transformFlowStripTypes;

Configuration Options

Plugin configuration options for controlling stripping behavior.

/**
 * Configuration options for the Flow strip types plugin
 */
interface Options {
  /**
   * When true, only strips Flow types if a @flow directive is present
   * When false (default), strips Flow types regardless of directive
   */
  requireDirective?: boolean;
  
  /**
   * When true, allows class properties with declare modifier
   * When false (default), throws error for declare fields (Babel 7 only)
   */
  allowDeclareFields?: boolean;
}

Flow Constructs Removed

The plugin systematically removes the following Flow-specific syntax:

Type Annotations

Variable type annotations: let x: string = "hello"
Function parameter types: function foo(x: number): string
Function return types: function foo(): string
Class property types: class C { prop: string }

Type Imports and Exports

Type-only imports: import type { User } from "./types"
Typeof imports: import typeof { api } from "./api"
Mixed imports with all type specifiers

Generic Type Arguments

Function calls: foo<T>()
Constructor calls: new Foo<T>()
JSX elements: <Component<T> />
Optional calls: foo?.<T>()

Class Features

Implements clauses: class C implements Interface
Property type annotations and variance modifiers
Declare fields: declare prop: string

Other Flow Constructs

Type cast expressions: (value: any)
Flow directive comments: // @flow, // @flow strict
Optional parameters: function foo(x?: string)
Function predicates: function isString(x): x %checks

Error Handling

The plugin throws compilation errors in specific scenarios:

/**
 * Error thrown when requireDirective is true but no @flow directive found
 */
class FlowDirectiveRequiredError extends Error {
  message: "A @flow directive is required when using Flow annotations with the `requireDirective` option.";
}

/**
 * Error thrown when declare fields are used without allowDeclareFields option (Babel 7)
 */
class DeclareFieldsNotAllowedError extends Error {
  message: "The 'declare' modifier is only allowed when the 'allowDeclareFields' option of @babel/plugin-transform-flow-strip-types or @babel/preset-flow is enabled.";
}

Flow Directive Handling

The plugin recognizes and processes the following Flow directive patterns:

@flow - Standard Flow directive
@flow strict - Strict Flow checking
@flow strict-local - Local strict Flow checking
@flow weak - Weak Flow checking
@noflow - Disable Flow checking

Usage Examples:

// Input with Flow directive
// @flow
function add(a: number, b: number): number {
  return a + b;
}

// Output (directive removed, types stripped)
function add(a, b) {
  return a + b;
}

Dependencies

Runtime Dependencies:

@babel/helper-plugin-utils - Provides the declare function for plugin creation
@babel/plugin-syntax-flow - Enables Flow syntax parsing

Peer Dependencies:

@babel/core ^7.0.0-0 - Required Babel core for plugin execution

Version Compatibility

Node.js: >=6.9.0 (>=20.19.0 || >=22.12.0 for Babel 8)
Babel: ^7.0.0-0
Module System: ES Module with CommonJS build available

Advanced Configuration Examples

// Require Flow directive to be present
{
  "plugins": [
    ["@babel/plugin-transform-flow-strip-types", {
      "requireDirective": true
    }]
  ]
}

// Allow declare fields (Babel 7 only)
{
  "plugins": [
    ["@babel/plugin-transform-flow-strip-types", {
      "allowDeclareFields": true
    }]
  ]
}

// Combined with other plugins
{
  "plugins": [
    "@babel/plugin-syntax-flow",
    "@babel/plugin-transform-flow-strip-types",
    "@babel/plugin-transform-class-properties"
  ]
}