#Flow

SWC can parse Flow syntax and strip Flow type-only constructs during transform.

This guide covers the most common ways to use Flow support:

• .swcrc
• @swc/core
• @swc/cli

#.swcrc

Configure the parser with syntax: "flow":

{
  "$schema": "https://swc.rs/schema.json",
  "jsc": {
    "parser": {
      "syntax": "flow",
      "jsx": false
    }
  }
}

For Flow code that uses a file pragma, enable requireDirective:

{
  "jsc": {
    "parser": {
      "syntax": "flow",
      "requireDirective": true
    }
  }
}

Other supported Flow parser options map to the Flow parser configuration in SWC:

{
  "jsc": {
    "parser": {
      "syntax": "flow",
      "all": false,
      "enums": false,
      "decorators": false,
      "components": false,
      "patternMatching": false
    }
  }
}

#@swc/core

Use jsc.parser.syntax = "flow" when transforming Flow input:

const swc = require("@swc/core");

swc
  .transform("const value: number = 1;", {
    filename: "input.js",
    jsc: {
      parser: {
        syntax: "flow",
      },
    },
  })
  .then((output) => {
    output.code; // const value = 1;
  });

You can also parse Flow syntax directly:

const swc = require("@swc/core");

swc
  .parse("const value: number = 1;", {
    syntax: "flow",
  })
  .then((module) => {
    module.type;
    module.body;
  });

#@swc/cli

Point the CLI at a .swcrc with syntax: "flow":

{
  "jsc": {
    "parser": {
      "syntax": "flow"
    }
  }
}

npx swc input.js --config-file .swcrc -o output.js

For JSX-flavored Flow input, set jsx: true and compile .jsx inputs with the same config:

{
  "jsc": {
    "parser": {
      "syntax": "flow",
      "jsx": true
    }
  }
}

npx swc component.jsx --config-file .swcrc -o component.js