CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-babel--plugin-transform-flow-strip-types

Strip flow type annotations from your output code.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

@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"
  ]
}

docs

index.md

tile.json