CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-rollup--plugin-sucrase

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

—

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/

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

  1. {path}.ts
  2. {path}.tsx
  3. {path}/index.ts
  4. {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:

  1. File Filtering: Files not matching include/exclude patterns are skipped silently
  2. Transform Errors: Sucrase transformation errors are propagated to Rollup with source location information
  3. 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

docs

index.md

tile.json