SWCSpeedy Web Compiler

    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":

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

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

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

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

    .swcrc
    {
  "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:

    import * as 
    import swc
    swc     from "@swc/core";    


    import swc
    swc    
  .
    function transform(src: string | swc.Program, options?: swc.Options): Promise<swc.Output>
    transform    ("const value: number = 1;", {    
    
    Options.filename?: string | undefined
    The filename associated with the code currently being compiled,
if there is one. The filename is optional, but not all of Swc's
functionality is available when the filename is unknown, because a
subset of options rely on the filename for their functionality.
    

    The three primary cases users could run into are:
    

      

    • The filename is exposed to plugins. Some plugins may require the
presence of the filename.
      • 

    • Options like "test", "exclude", and "ignore" require the filename
for string/RegExp matching.
      • 

    • .swcrc files are loaded relative to the file being compiled.
If this option is omitted, Swc will behave as if swcrc: false has been set.
      • 

    filename    : "input.js",    
    
    Config.jsc?: swc.JscConfig | undefined
    jsc    : {    
      
    JscConfig.parser?: swc.ParserConfig | undefined
    Defaults to EsParserConfig
    parser    : {    
        
    FlowParserConfig.syntax: "flow"
    syntax    : "flow",    
      },
    },
  })
  .
    Promise<Output>.then<void, never>(onfulfilled?: ((value: swc.Output) => void | PromiseLike<void>) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<void>
    Attaches callbacks for the resolution and/or rejection of the Promise.
    @paramonfulfilled  The callback to execute when the Promise is resolved.@paramonrejected  The callback to execute when the Promise is rejected.@returnsA  Promise for the completion of which ever callback is executed.
    then    ((
    output: swc.Output
    output    ) => {    
    
    output: swc.Output
    output    .
    Output.code: string
    Transformed code
    code    ; // const value = 1;    
  });

    You can also parse Flow syntax directly:

    import * as 
    import swc
    swc     from "@swc/core";    


    import swc
    swc    
  .
    function parse(src: string, options?: swc.ParseOptions): Promise<swc.Module> (+1 overload)
    parse    ("const value: number = 1;", {    
    
    FlowParserConfig.syntax: "flow"
    syntax    : "flow",    
  })
  .
    Promise<Module>.then<void, never>(onfulfilled?: ((value: swc.Module) => void | PromiseLike<void>) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<void>
    Attaches callbacks for the resolution and/or rejection of the Promise.
    @paramonfulfilled  The callback to execute when the Promise is resolved.@paramonrejected  The callback to execute when the Promise is rejected.@returnsA  Promise for the completion of which ever callback is executed.
    then    ((
    module: swc.Module
    module    ) => {    
    
    module: swc.Module
    module    .
    Module.type: "Module"
    type    ;    
    
    module: swc.Module
    module    .
    Module.body: swc.ModuleItem[]
    body    ;    
  });

    @swc/cli

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

    .swcrc
    {
  "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:

    .swcrc
    {
  "jsc": {
    "parser": {
      "syntax": "flow",
      "jsx": true
    }
  }
}
    npx swc component.jsx --config-file .swcrc -o component.js