or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

cli.md development-integration.md index.md programmatic-api.md

tile.json

Development Integration

Automatic compilation hooks and transformers for seamless development workflow integration with require hooks, Jest, and build tool plugins.

Capabilities

Require Hook

Automatic compilation of Flow-typed files during development using Node.js require hooks.

/**
 * Configure require hook for automatic Flow type removal
 * @param {RegisterOptions} options - Configuration options for file matching
 * @returns {Function} Function to configure options, also serves as require hook setup
 */
require('flow-remove-types/register')(options);

interface RegisterOptions {
  /** Transform all files, not just those with @flow comment (default: false) */
  all?: boolean;
  /** Pattern for files to transform (RegExp or glob string) */
  includes?: RegExp | string;
  /** Alternative name for includes */
  include?: RegExp | string;
  /** Pattern for files to exclude (RegExp or glob string, default: /\/node_modules\//) */
  excludes?: RegExp | string;
  /** Alternative name for excludes */
  exclude?: RegExp | string;
}

Usage Examples:

// Basic setup - transform files with @flow pragma
require('flow-remove-types/register');
require('./my-flow-module'); // Automatically transformed

// Transform all files
require('flow-remove-types/register')({ all: true });

// Custom include/exclude patterns
require('flow-remove-types/register')({
  includes: /\/src\//,           // Only files in src/
  excludes: /\/(test|spec)\//    // Exclude test files
});

// Glob-style patterns
require('flow-remove-types/register')({
  include: 'src/**/*.js',
  exclude: 'src/**/*.test.js'
});

Jest Transformer

Jest transformer for automatic Flow type removal during test execution.

/**
 * Jest transformer object for Flow type removal
 */
const transformer = {
  process(src: string, filename: string): { code: string };
}

Configuration:

// jest.config.js
module.exports = {
  transform: {
    "^.+\\.js(?:\\.flow)?$": "flow-remove-types/jest"
  }
};

// Alternative: package.json
{
  "jest": {
    "transform": {
      "^.+\\.js(?:\\.flow)?$": "flow-remove-types/jest"
    }
  }
}

Usage with Different File Extensions:

// Support multiple Flow file extensions
module.exports = {
  transform: {
    "^.+\\.(js|jsx|mjs|cjs|flow)$": "flow-remove-types/jest"
  }
};

Build Tool Integration

Flow Remove Types integrates with popular build tools through community plugins:

Webpack

// webpack.config.js with remove-flow-types-loader
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'remove-flow-types-loader'
      }
    ]
  }
};

Rollup

// rollup.config.js with rollup-plugin-flow
import flow from 'rollup-plugin-flow';

export default {
  plugins: [
    flow({ all: true, pretty: true })
  ]
};

Browserify

// With unflowify transform
browserify('src/app.js')
  .transform('unflowify')
  .bundle();

Gulp

// With gulp-flow-remove-types
const gulp = require('gulp');
const flowRemoveTypes = require('gulp-flow-remove-types');

gulp.task('build', () => {
  return gulp.src('src/**/*.js')
    .pipe(flowRemoveTypes({ pretty: true }))
    .pipe(gulp.dest('dist/'));
});

Development Workflow Patterns

Mocha Integration

Use the require hook with Mocha for testing Flow-typed code:

mocha -r flow-remove-types/register test/**/*.js

Development vs Production

Set up different configurations for development and production:

// development.js - require hook for fast iteration
require('flow-remove-types/register')({ all: true });
require('./app');

// build.js - pre-compile for production
const flowRemoveTypes = require('flow-remove-types');
const fs = require('fs');

const input = fs.readFileSync('src/app.js', 'utf8');
const result = flowRemoveTypes(input, { pretty: true });
fs.writeFileSync('dist/app.js', result.toString());

Source Map Support

Enable source maps for debugging transformed code in development:

// Enable source maps with pretty mode
const result = flowRemoveTypes(source, { 
  pretty: true 
});

// Write source map
fs.writeFileSync('dist/app.js.map', JSON.stringify(result.generateMap()));

Pattern Matching

Include/Exclude Configuration

The require hook supports flexible pattern matching for file transformation:

/**
 * Convert string patterns to RegExp with glob-like syntax
 * Supports glob patterns like "src/*.js" -> /\/src\/.*\.js/
 */
function regexpPattern(pattern);

Pattern Examples:

// String patterns (converted to RegExp)
require('flow-remove-types/register')({
  include: 'src/*.js',      // -> /\/src\/.*\.js/
  exclude: '*/test/*'       // -> /.*\/test\/.*/
});

// RegExp patterns (used directly)
require('flow-remove-types/register')({
  includes: /\/src\/.*\.js$/,
  excludes: /node_modules/
});

// Default exclude pattern
// excludes: /\/node_modules\//  (automatic)

File Extension Support

The require hook automatically handles these file extensions:

const supportedExtensions = ['.js', '.mjs', '.cjs', '.jsx', '.flow', '.es6'];

Error Handling

Require Hook Errors

Transform errors during require include filename context:

try {
  require('./broken-flow-file');
} catch (error) {
  // Error message includes filename:
  // "broken-flow-file.js: Unexpected token"
}

Configuration Errors

Invalid patterns throw descriptive errors:

try {
  require('flow-remove-types/register')({
    includes: 123  // Invalid pattern
  });
} catch (error) {
  // "flow-remove-types: includes and excludes must be RegExp or path strings"
}

Performance Considerations

Development: Use require hook for fast iteration without pre-compilation
Production: Pre-compile files for optimal runtime performance
Testing: Jest transformer provides automatic transformation during test runs
Build: Integrate with build tools for optimized production bundles

The require hook adds minimal overhead and only transforms files matching include/exclude patterns.

Version

Tile

Files