0
# Reactify
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: reactify
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install reactify`
10

11
## Core Imports
12

13
```javascript
14
var reactify = require('reactify');
15
```
16

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

19
## Basic Usage
20

21
### Command Line Usage
22

23
Transform JSX files using Browserify:
24

25
```bash
26
# Basic JSX transformation
27
browserify -t reactify main.js
28

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

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

35
# Transform all files regardless of extension
36
browserify -t [ reactify --everything ] main.js
37
```
38

39
### Programmatic Usage
40

41
```javascript
42
var reactify = require('reactify');
43
var fs = require('fs');
44

45
// Create transform stream
46
var transform = reactify('path/to/file.jsx', {
47
  es6: true,
48
  target: 'es5',
49
  stripTypes: true
50
});
51

52
// Pipe file through transform
53
fs.createReadStream('input.jsx')
54
  .pipe(transform)
55
  .pipe(fs.createWriteStream('output.js'));
56
```
57

58
### Package.json Configuration
59

60
```json
61
{
62
  "browserify": {
63
    "transform": [
64
      ["reactify", {"es6": true, "target": "es5"}]
65
    ]
66
  }
67
}
68
```
69

70
## Capabilities
71

72
### Main Transform Function
73

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

76
```javascript { .api }
77
/**
78
 * Creates a transform stream for JSX compilation
79
 * @param {string} filename - Path to the file being transformed
80
 * @param {Object} [options] - Configuration options for the transform
81
 * @returns {Stream} Transform stream compatible with Browserify
82
 */
83
function reactify(filename, options);
84
```
85

86
**Usage Example:**
87

88
```javascript
89
var reactify = require('reactify');
90

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

94
// With options
95
var stream = reactify('main.jsx', {
96
  es6: true,
97
  target: 'es5',
98
  stripTypes: true,
99
  extension: ['coffee', 'litcoffee']
100
});
101
```
102

103
### File Extension Processing
104

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

107
**Default Extensions:** `.js`, `.jsx`
108

109
**Extension Resolution Logic:**
110
- Files with `.js` or `.jsx` extensions are processed by default
111
- Additional extensions can be specified via `extension` or `x` options
112
- When `everything: true` is set, all files are processed regardless of extension
113

114
## Configuration Options
115

116
The `options` parameter supports the following configuration:
117

118
### Extension Options
119

120
```javascript { .api }
121
interface ExtensionOptions {
122
  /** Transform all files regardless of extension */
123
  everything?: boolean;
124
  /** Additional file extensions to transform (alternative to 'x') */
125
  extension?: string | string[];
126
  /** Additional file extensions to transform (alternative to 'extension') */
127
  x?: string | string[];
128
}
129
```
130

131
**Usage Examples:**
132

133
```javascript
134
// Transform only .js and .jsx files (default)
135
reactify(filename);
136

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

141
// Transform all files
142
reactify(filename, {everything: true});
143
```
144

145
### ES6 Transformation Options
146

147
```javascript { .api }
148
interface ES6Options {
149
  /** Enable ES6 syntax transformations (alias for 'harmony') */
150
  es6?: boolean;
151
  /** Enable ES6 syntax transformations (alias for 'es6') */
152
  harmony?: boolean;
153
  /** Target JavaScript version for ES6 features */
154
  target?: 'es5';
155
}
156
```
157

158
**Supported ES6 Features:**
159
- Arrow functions
160
- Rest parameters
161
- Template literals
162
- Object short notation
163
- Classes
164
- Getter/setter methods (when `target: 'es5'`)
165

166
**Usage Examples:**
167

168
```javascript
169
// Enable ES6 transformations
170
reactify(filename, {es6: true});
171
reactify(filename, {harmony: true});
172

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

177
### Type Stripping Options
178

179
```javascript { .api }
180
interface TypeOptions {
181
  /** Remove type annotations from code (kebab-case) */
182
  'strip-types'?: boolean;
183
  /** Remove type annotations from code (camelCase) */
184
  stripTypes?: boolean;
185
}
186
```
187

188
**Usage Examples:**
189

190
```javascript
191
// Strip Flow/TypeScript type annotations
192
reactify(filename, {'strip-types': true});
193
reactify(filename, {stripTypes: true});
194

195
// Combine with ES6 features
196
reactify(filename, {
197
  stripTypes: true,
198
  es6: true
199
});
200
```
201

202
## Error Handling
203

204
The transform emits error events for invalid JSX syntax.
205

206
```javascript { .api }
207
interface ReactifyError extends Error {
208
  name: 'ReactifyError';
209
  message: string; // Includes filename and original error message
210
  fileName: string; // Source file path where error occurred
211
}
212
```
213

214
**Usage Example:**
215

216
```javascript
217
var transform = reactify('invalid.jsx');
218

219
transform.on('error', function(error) {
220
  console.error('Transform error:', error.message);
221
  console.error('File:', error.fileName);
222
});
223
```
224

225
## Stream Interface
226

227
The returned transform stream follows Node.js stream conventions.
228

229
```javascript { .api }
230
interface TransformStream {
231
  /** Pipe input data through the transform */
232
  pipe(destination: WritableStream): WritableStream;
233
  /** Handle transform errors */
234
  on(event: 'error', listener: (error: ReactifyError) => void): this;
235
  /** Handle data output */
236
  on(event: 'data', listener: (chunk: Buffer) => void): this;
237
  /** Handle stream end */
238
  on(event: 'end', listener: () => void): this;
239
}
240
```
241

242
## Dependencies
243

244
### Runtime Dependencies
245

246
- **react-tools (~0.13.0)**: JSX transformation engine
247
- **through (~2.3.4)**: Stream transformation utility
248

249
### Compatibility
250

251
- **Node.js**: Compatible with Node.js environments
252
- **Browserify**: Designed specifically for Browserify build system
253
- **React**: Transforms JSX for React.js components
254

255
## Source Maps
256

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

259
- **Debugging Support**: Original JSX line numbers in browser dev tools
260
- **Error Reporting**: Accurate stack traces pointing to source JSX files
261
- **Development Workflow**: Seamless debugging experience during development
262

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

265
## Types
266

267
```javascript { .api }
268
/**
269
 * Main transform function type
270
 */
271
type ReactifyFunction = (filename: string, options?: ReactifyOptions) => TransformStream;
272

273
/**
274
 * Complete options interface
275
 */
276
interface ReactifyOptions extends ExtensionOptions, ES6Options, TypeOptions {}
277

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