0
# JavaScript Processing
1

2
Babel integration for modern JavaScript transformation and CoffeeScript compilation support with configurable options and preset management.
3

4
## Capabilities
5

6
### Babel Processing
7

8
Babel integration for transforming modern JavaScript and applying custom transformations to script blocks.
9

10
```typescript { .api }
11
/**
12
 * Creates Babel preprocessor for script blocks
13
 * @param options - Babel configuration options
14
 * @returns PreprocessorGroup with script preprocessing
15
 */
16
function babel(options?: Options.Babel): PreprocessorGroup;
17

18
namespace Options {
19
  interface Babel {
20
    /** Source type for Babel parser */
21
    sourceType?: 'module';
22
    
23
    /** Disable minification */
24
    minified?: false;
25
    
26
    /** Disable AST output */
27
    ast?: false;
28
    
29
    /** Enable code output */
30
    code?: true;
31
    
32
    /** Enable source maps */
33
    sourceMaps?: boolean;
34
    
35
    /** Content to prepend to every file */
36
    prependData?: string;
37
    
38
    /** Remove common leading whitespace */
39
    stripIndent?: boolean;
40
    
41
    // Additional Babel options from @babel/core TransformOptions
42
    /** Babel presets */
43
    presets?: any[];
44
    
45
    /** Babel plugins */
46
    plugins?: any[];
47
    
48
    /** Target environments */
49
    targets?: any;
50
    
51
    /** Additional Babel configuration */
52
    [key: string]: any;
53
  }
54
}
55
```
56

57
**Usage Examples:**
58

59
```typescript
60
import { babel } from "svelte-preprocess";
61

62
// Basic Babel with ES2020+ features
63
const preprocess = {
64
  script: babel({
65
    presets: [
66
      ['@babel/preset-env', {
67
        targets: '> 0.25%, not dead'
68
      }]
69
    ]
70
  })
71
};
72

73
// Babel with TypeScript and React JSX support
74
const preprocess = {
75
  script: babel({
76
    presets: [
77
      '@babel/preset-typescript',
78
      ['@babel/preset-react', {
79
        runtime: 'automatic'
80
      }]
81
    ],
82
    plugins: [
83
      '@babel/plugin-proposal-class-properties',
84
      '@babel/plugin-proposal-optional-chaining'
85
    ]
86
  })
87
};
88

89
// Development vs Production configuration
90
const preprocess = {
91
  script: babel({
92
    presets: [
93
      ['@babel/preset-env', {
94
        targets: process.env.NODE_ENV === 'production' 
95
          ? '> 0.25%, not dead'
96
          : 'last 2 versions',
97
        modules: false,
98
        useBuiltIns: 'usage',
99
        corejs: 3
100
      }]
101
    ],
102
    
103
    plugins: process.env.NODE_ENV === 'development' ? [
104
      'babel-plugin-transform-inline-environment-variables'
105
    ] : []
106
  })
107
};
108
```
109

110
### CoffeeScript Processing
111

112
CoffeeScript compiler integration for legacy CoffeeScript support.
113

114
```typescript { .api }
115
/**
116
 * Creates CoffeeScript preprocessor for script blocks
117
 * @param options - CoffeeScript configuration options
118
 * @returns PreprocessorGroup with script preprocessing
119
 */
120
function coffeescript(options?: Options.Coffeescript): PreprocessorGroup;
121

122
namespace Options {
123
  interface Coffeescript {
124
    /** Enable source map generation */
125
    sourceMap?: boolean;
126
    
127
    /** Filename option (not supported, always undefined) */
128
    filename?: never;
129
    
130
    /** Bare option (not supported, always undefined) */
131
    bare?: never;
132
    
133
    /** Content to prepend to every file */
134
    prependData?: string;
135
    
136
    /** Remove common leading whitespace */
137
    stripIndent?: boolean;
138
  }
139
}
140
```
141

142
**Usage Examples:**
143

144
```typescript
145
import { coffeescript } from "svelte-preprocess";
146

147
// Basic CoffeeScript support
148
const preprocess = {
149
  script: coffeescript()
150
};
151

152
// CoffeeScript with source maps
153
const preprocess = {
154
  script: coffeescript({
155
    sourceMap: true
156
  })
157
};
158

159
// CoffeeScript with prepended utilities
160
const preprocess = {
161
  script: coffeescript({
162
    prependData: `
163
      # Global CoffeeScript utilities
164
      extend = (obj, props) -> 
165
        obj[key] = val for key, val of props
166
        obj
167
    `
168
  })
169
};
170
```
171

172
## Integration with Auto Preprocessor
173

174
JavaScript processors integrate with the auto preprocessor and can be applied automatically or in combination:
175

176
```typescript
177
import { sveltePreprocess } from "svelte-preprocess";
178

179
// TypeScript with Babel post-processing
180
const preprocess = sveltePreprocess({
181
  typescript: {
182
    compilerOptions: {
183
      target: 'esnext' // Keep modern syntax for Babel
184
    }
185
  },
186
  
187
  // Babel applied after TypeScript
188
  babel: {
189
    presets: [
190
      ['@babel/preset-env', {
191
        targets: '> 1%, not dead'
192
      }]
193
    ]
194
  }
195
});
196

197
// CoffeeScript support
198
const preprocess = sveltePreprocess({
199
  coffeescript: {
200
    sourceMap: true
201
  }
202
});
203
```
204

205
The auto preprocessor detects JavaScript languages based on:
206
- `<script lang="coffee">`, `<script lang="coffeescript">`
207
- `<script lang="babel">`, `<script lang="js">` (for explicit Babel processing)
208
- Processing order: Language compiler (TypeScript/CoffeeScript) → Babel transformation
209

210
## Common Babel Configurations
211

212
### Modern JavaScript Features
213

214
```typescript
215
const preprocess = {
216
  script: babel({
217
    presets: [
218
      ['@babel/preset-env', {
219
        targets: {
220
          browsers: ['> 1%', 'last 2 versions', 'not dead'],
221
          node: '14'
222
        },
223
        useBuiltIns: 'usage',
224
        corejs: { version: 3, proposals: true },
225
        shippedProposals: true
226
      }]
227
    ],
228
    
229
    plugins: [
230
      // Stage 3 proposals
231
      '@babel/plugin-proposal-class-properties',
232
      '@babel/plugin-proposal-private-methods',
233
      '@babel/plugin-proposal-optional-chaining',
234
      '@babel/plugin-proposal-nullish-coalescing-operator',
235
      
236
      // Optimization
237
      '@babel/plugin-transform-runtime'
238
    ]
239
  })
240
};
241
```
242

243
### Framework Integration
244

245
```typescript
246
// React/JSX support
247
const preprocess = {
248
  script: babel({
249
    presets: [
250
      '@babel/preset-env',
251
      ['@babel/preset-react', {
252
        runtime: 'automatic' // New JSX transform
253
      }]
254
    ]
255
  })
256
};
257

258
// Vue.js support
259
const preprocess = {
260
  script: babel({
261
    presets: ['@babel/preset-env'],
262
    plugins: [
263
      ['@vue/babel-plugin-jsx', {
264
        enableObjectSlots: false
265
      }]
266
    ]
267
  })
268
};
269
```
270

271
### Development Tools
272

273
```typescript
274
const isDev = process.env.NODE_ENV === 'development';
275

276
const preprocess = {
277
  script: babel({
278
    presets: [
279
      ['@babel/preset-env', {
280
        targets: isDev ? 'last 2 versions' : '> 0.25%, not dead'
281
      }]
282
    ],
283
    
284
    plugins: [
285
      // Development only
286
      isDev && 'babel-plugin-transform-inline-environment-variables',
287
      isDev && ['babel-plugin-module-resolver', {
288
        alias: {
289
          '@': './src',
290
          '@components': './src/components'
291
        }
292
      }],
293
      
294
      // Production only
295
      !isDev && 'babel-plugin-transform-remove-console',
296
      !isDev && ['babel-plugin-transform-remove-debugger']
297
    ].filter(Boolean)
298
  })
299
};
300
```
301

302
### TypeScript + Babel Pipeline
303

304
```typescript
305
// Process TypeScript first, then apply Babel transforms
306
const preprocess = sveltePreprocess({
307
  typescript: {
308
    compilerOptions: {
309
      target: 'esnext', // Keep modern syntax
310
      module: 'esnext',
311
      moduleResolution: 'node'
312
    }
313
  },
314
  
315
  babel: {
316
    presets: [
317
      ['@babel/preset-env', {
318
        targets: '> 0.25%, not dead',
319
        modules: false // Preserve ES modules
320
      }]
321
    ],
322
    
323
    // Skip TypeScript files (already processed)
324
    exclude: /\.ts$/
325
  }
326
});
327
```
328

329
## Advanced Configuration
330

331
### Custom Plugin Development
332

333
```typescript
334
// Custom Babel plugin for Svelte-specific transforms
335
function customSveltePlugin() {
336
  return {
337
    visitor: {
338
      CallExpression(path) {
339
        // Custom transformations
340
      }
341
    }
342
  };
343
}
344

345
const preprocess = {
346
  script: babel({
347
    plugins: [
348
      customSveltePlugin,
349
      // Other plugins
350
    ]
351
  })
352
};
353
```
354

355
### Conditional Compilation
356

357
```typescript
358
const preprocess = {
359
  script: babel({
360
    plugins: [
361
      ['babel-plugin-transform-inline-environment-variables'],
362
      ['babel-plugin-minify-dead-code-elimination', {
363
        optimizeRawSize: true
364
      }]
365
    ],
366
    
367
    // Environment-specific presets
368
    env: {
369
      development: {
370
        plugins: ['babel-plugin-transform-react-jsx-source']
371
      },
372
      
373
      production: {
374
        plugins: [
375
          'babel-plugin-transform-remove-console',
376
          ['babel-plugin-transform-remove-debugger']
377
        ]
378
      }
379
    }
380
  })
381
};
382
```
383

384
### Source Maps and Debugging
385

386
```typescript
387
const preprocess = sveltePreprocess({
388
  sourceMap: true, // Global source map setting
389
  
390
  babel: {
391
    sourceMaps: true, // Babel-specific source maps
392
    retainLines: true, // Preserve line numbers for debugging
393
    
394
    presets: [
395
      ['@babel/preset-env', {
396
        debug: process.env.NODE_ENV === 'development'
397
      }]
398
    ]
399
  }
400
});
401
```
402

403
## Error Handling and Debugging
404

405
```typescript
406
const preprocess = {
407
  script: babel({
408
    // Enhanced error reporting
409
    highlightCode: true,
410
    
411
    presets: [
412
      ['@babel/preset-env', {
413
        debug: true, // Log transformation details
414
        verbose: true
415
      }]
416
    ],
417
    
418
    // Custom error handling
419
    parserOpts: {
420
      errorRecovery: true,
421
      plugins: ['jsx', 'typescript']
422
    }
423
  })
424
};
425
```
426

427
## Types
428

429
```typescript { .api }
430
interface BabelOptions {
431
  /** Source type for parser */
432
  sourceType?: 'module' | 'script';
433
  
434
  /** Enable minification */
435
  minified?: boolean;
436
  
437
  /** Generate AST */
438
  ast?: boolean;
439
  
440
  /** Generate code output */
441
  code?: boolean;
442
  
443
  /** Enable source maps */
444
  sourceMaps?: boolean;
445
  
446
  /** Content to prepend to source */
447
  prependData?: string;
448
  
449
  /** Remove leading whitespace */
450
  stripIndent?: boolean;
451
  
452
  /** Babel presets */
453
  presets?: Array<string | [string, any]>;
454
  
455
  /** Babel plugins */
456
  plugins?: Array<string | [string, any]>;
457
  
458
  /** Target environments */
459
  targets?: string | Array<string> | Record<string, string>;
460
  
461
  // Additional @babel/core TransformOptions
462
  [key: string]: any;
463
}
464

465
interface CoffeescriptOptions {
466
  /** Enable source maps */
467
  sourceMap?: boolean;
468
  
469
  /** Content to prepend to source */
470
  prependData?: string;
471
  
472
  /** Remove leading whitespace */
473
  stripIndent?: boolean;
474
  
475
  /** Not supported (always undefined) */
476
  filename?: never;
477
  bare?: never;
478
}
479
```