or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-reactify

Browserify transform for JSX (a superset of JS used by React.js)

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/reactify@1.1.x

To install, run

npx @tessl/cli install tessl/npm-reactify@1.1.0

index.mddocs/

Reactify

Reactify is a Browserify transform for JSX (JavaScript XML), a superset of JavaScript used by React.js. It transforms JSX syntax into standard JavaScript at build time, enabling seamless integration of React components with the Browserify build system. The transform also supports ES6 syntax features and type stripping functionality.

Package Information

  • Package Name: reactify
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install reactify

Core Imports

var reactify = require('reactify');

ESM import is not directly supported as this is a legacy package.

Basic Usage

Command Line Usage

Transform JSX files using Browserify:

# Basic JSX transformation
browserify -t reactify main.js

# With ES6 features
browserify -t [ reactify --es6 ] main.js

# Transform files with custom extensions
browserify -t [ reactify --extension coffee ] main.coffee

# Transform all files regardless of extension
browserify -t [ reactify --everything ] main.js

Programmatic Usage

var reactify = require('reactify');
var fs = require('fs');

// Create transform stream
var transform = reactify('path/to/file.jsx', {
  es6: true,
  target: 'es5',
  stripTypes: true
});

// Pipe file through transform
fs.createReadStream('input.jsx')
  .pipe(transform)
  .pipe(fs.createWriteStream('output.js'));

Package.json Configuration

{
  "browserify": {
    "transform": [
      ["reactify", {"es6": true, "target": "es5"}]
    ]
  }
}

Capabilities

Main Transform Function

Creates a Browserify transform stream for JSX compilation. The transform automatically generates source maps for debugging support.

/**
 * Creates a transform stream for JSX compilation
 * @param {string} filename - Path to the file being transformed
 * @param {Object} [options] - Configuration options for the transform
 * @returns {Stream} Transform stream compatible with Browserify
 */
function reactify(filename, options);

Usage Example:

var reactify = require('reactify');

// Basic usage
var stream = reactify('main.jsx');

// With options
var stream = reactify('main.jsx', {
  es6: true,
  target: 'es5',
  stripTypes: true,
  extension: ['coffee', 'litcoffee']
});

File Extension Processing

The transform automatically determines which files to process based on their extensions and configuration options.

Default Extensions: .js, .jsx

Extension Resolution Logic:

  • Files with .js or .jsx extensions are processed by default
  • Additional extensions can be specified via extension or x options
  • When everything: true is set, all files are processed regardless of extension

Configuration Options

The options parameter supports the following configuration:

Extension Options

interface ExtensionOptions {
  /** Transform all files regardless of extension */
  everything?: boolean;
  /** Additional file extensions to transform (alternative to 'x') */
  extension?: string | string[];
  /** Additional file extensions to transform (alternative to 'extension') */
  x?: string | string[];
}

Usage Examples:

// Transform only .js and .jsx files (default)
reactify(filename);

// Transform additional extensions
reactify(filename, {extension: ['coffee', 'litcoffee']});
reactify(filename, {x: 'coffee'});

// Transform all files
reactify(filename, {everything: true});

ES6 Transformation Options

interface ES6Options {
  /** Enable ES6 syntax transformations (alias for 'harmony') */
  es6?: boolean;
  /** Enable ES6 syntax transformations (alias for 'es6') */
  harmony?: boolean;
  /** Target JavaScript version for ES6 features */
  target?: 'es5';
}

Supported ES6 Features:

  • Arrow functions
  • Rest parameters
  • Template literals
  • Object short notation
  • Classes
  • Getter/setter methods (when target: 'es5')

Usage Examples:

// Enable ES6 transformations
reactify(filename, {es6: true});
reactify(filename, {harmony: true});

// ES6 with ES5 target (enables class getters/setters)
reactify(filename, {es6: true, target: 'es5'});

Type Stripping Options

interface TypeOptions {
  /** Remove type annotations from code (kebab-case) */
  'strip-types'?: boolean;
  /** Remove type annotations from code (camelCase) */
  stripTypes?: boolean;
}

Usage Examples:

// Strip Flow/TypeScript type annotations
reactify(filename, {'strip-types': true});
reactify(filename, {stripTypes: true});

// Combine with ES6 features
reactify(filename, {
  stripTypes: true,
  es6: true
});

Error Handling

The transform emits error events for invalid JSX syntax.

interface ReactifyError extends Error {
  name: 'ReactifyError';
  message: string; // Includes filename and original error message
  fileName: string; // Source file path where error occurred
}

Usage Example:

var transform = reactify('invalid.jsx');

transform.on('error', function(error) {
  console.error('Transform error:', error.message);
  console.error('File:', error.fileName);
});

Stream Interface

The returned transform stream follows Node.js stream conventions.

interface TransformStream {
  /** Pipe input data through the transform */
  pipe(destination: WritableStream): WritableStream;
  /** Handle transform errors */
  on(event: 'error', listener: (error: ReactifyError) => void): this;
  /** Handle data output */
  on(event: 'data', listener: (chunk: Buffer) => void): this;
  /** Handle stream end */
  on(event: 'end', listener: () => void): this;
}

Dependencies

Runtime Dependencies

  • react-tools (~0.13.0): JSX transformation engine
  • through (~2.3.4): Stream transformation utility

Compatibility

  • Node.js: Compatible with Node.js environments
  • Browserify: Designed specifically for Browserify build system
  • React: Transforms JSX for React.js components

Source Maps

The transform automatically generates inline source maps for all transformed files. This enables:

  • Debugging Support: Original JSX line numbers in browser dev tools
  • Error Reporting: Accurate stack traces pointing to source JSX files
  • Development Workflow: Seamless debugging experience during development

Source maps are embedded as base64 data URLs in the transformed output and require no additional configuration.

Types

/**
 * Main transform function type
 */
type ReactifyFunction = (filename: string, options?: ReactifyOptions) => TransformStream;

/**
 * Complete options interface
 */
interface ReactifyOptions extends ExtensionOptions, ES6Options, TypeOptions {}

/**
 * Transform stream compatible with Node.js streams
 */
interface TransformStream extends NodeJS.ReadWriteStream {
  on(event: 'error', listener: (error: ReactifyError) => void): this;
}