or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-rollup--plugin-sucrase

Rollup plugin that compiles TypeScript, Flow, JSX, and other modern JavaScript syntax using Sucrase for fast compilation

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/@rollup/plugin-sucrase@5.0.x

To install, run

npx @tessl/cli install tessl/npm-rollup--plugin-sucrase@5.0.0

@rollup/plugin-sucrase

A Rollup plugin that compiles TypeScript, Flow, JSX, and other modern JavaScript syntax using Sucrase for fast compilation. Sucrase is a fast alternative to Babel for transforming modern JavaScript, providing high-performance bundling workflows while maintaining compatibility with Rollup's plugin ecosystem.

Package Information

Package Name: @rollup/plugin-sucrase
Package Type: npm
Language: JavaScript/TypeScript
Node Version: 14.0.0+
Installation: npm install @rollup/plugin-sucrase --save-dev

Core Imports

import sucrase from '@rollup/plugin-sucrase';

CommonJS:

const sucrase = require('@rollup/plugin-sucrase');

Basic Usage

import { rollup } from 'rollup';
import sucrase from '@rollup/plugin-sucrase';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    resolve({
      extensions: ['.js', '.ts']
    }),
    sucrase({
      exclude: ['node_modules/**'],
      transforms: ['typescript']
    })
  ]
};

Capabilities

Plugin Creation

Creates a Rollup plugin instance configured for Sucrase transformations.

/**
 * Creates a Rollup plugin for compiling modern JavaScript/TypeScript with Sucrase
 * @param options - Configuration options for the plugin
 * @returns Rollup plugin instance
 */
function sucrase(options?: RollupSucraseOptions): Plugin;

Usage Examples:

// Basic TypeScript compilation
sucrase({
  transforms: ['typescript']
})

// JSX with custom pragma
sucrase({
  transforms: ['jsx'],
  jsxPragma: 'React.createElement',
  jsxFragmentPragma: 'React.Fragment'
})

// TypeScript + JSX (TSX files)
sucrase({
  transforms: ['typescript', 'jsx']
})

// With file filtering
sucrase({
  transforms: ['typescript'],
  include: ['src/**/*.ts'],
  exclude: ['node_modules/**', '**/*.test.ts']
})

// Production optimizations
sucrase({
  transforms: ['typescript'],
  production: true,
  enableLegacyTypeScriptModuleInterop: false
})

// Jest test compilation
sucrase({
  transforms: ['typescript', 'jest']
})

// ES6 to CommonJS conversion
sucrase({
  transforms: ['imports'],
  production: true
})

Configuration Options

interface RollupSucraseOptions {
  /**
   * Array of transform types to apply
   * Supported values: 'typescript', 'jsx', 'flow', 'imports', 'react-hot-loader', 'jest'
   */
  transforms?: string[];
  
  /**
   * Custom JSX pragma function name
   * @default 'React.createElement'
   */
  jsxPragma?: string;
  
  /**
   * Custom JSX fragment pragma
   * @default 'React.Fragment'
   */
  jsxFragmentPragma?: string;
  
  /**
   * Enable legacy TypeScript module interoperability
   * @default false
   */
  enableLegacyTypeScriptModuleInterop?: boolean;
  
  /**
   * Enable legacy Babel 5 module interoperability
   * @default false
   */
  enableLegacyBabel5ModuleInterop?: boolean;
  
  /**
   * Enable production mode optimizations
   * @default false
   */
  production?: boolean;
  
  /**
   * Disable ES module transforms
   * @default false
   */
  disableESTransforms?: boolean;
  
  /**
   * Picomatch pattern or array of patterns specifying files to include
   * @default null (all files)
   */
  include?: FilterPattern;
  
  /**
   * Picomatch pattern or array of patterns specifying files to exclude
   * @default null (no files excluded)
   */
  exclude?: FilterPattern;
}

Transform Types

The transforms option accepts an array of the following transform types:

'typescript': Compiles TypeScript syntax, removes type annotations
'jsx': Transforms JSX syntax to JavaScript function calls
'flow': Removes Flow type annotations
'imports': Transforms ES6 import/export statements to CommonJS
'react-hot-loader': Enables advanced hot reloading for React components
'jest': Hoists Jest method calls (like jest.mock()) above imports for proper test execution

Common combinations:

['typescript'] - TypeScript files (.ts)
['jsx'] - JSX files (.jsx)
['typescript', 'jsx'] - TypeScript + JSX files (.tsx)
['flow'] - Flow-typed JavaScript files
['typescript', 'jest'] - TypeScript test files with Jest
['imports'] - ES6 modules to CommonJS conversion

File Resolution

The plugin automatically resolves TypeScript imports with the following extension priority:

{path}.ts
{path}.tsx
{path}/index.ts
{path}/index.tsx

For imports ending in .js, it also checks:

{path}.ts (replacing .js with .ts)
{path}.tsx (replacing .js with .tsx)

This allows you to import TypeScript files using .js extensions, which TypeScript expects for ES module compatibility.

Types

/**
 * Rollup plugin interface
 */
interface Plugin {
  name: string;
  resolveId?(importee: string, importer?: string): string | null | undefined;
  transform?(code: string, id: string): { code: string; map: any } | null;
}

/**
 * File filtering pattern type from @rollup/pluginutils
 */
type FilterPattern = string | RegExp | Array<string | RegExp> | null;

Error Handling

The plugin handles transformation errors by:

File Filtering: Files not matching include/exclude patterns are skipped silently
Transform Errors: Sucrase transformation errors are propagated to Rollup with source location information
Resolution Errors: Module resolution failures return undefined, allowing other plugins to handle resolution

Performance Considerations

Fast Compilation: Sucrase is designed for speed over feature completeness compared to Babel
Limited Transforms: Focuses on syntax transformation rather than polyfills or advanced transforms
TypeScript Support: Faster than tsc for compilation, but does not perform type checking
Source Maps: Generates source maps for debugging transformed code