tessl/npm-svelte-preprocess

A Svelte preprocessor wrapper with baked-in support for commonly used preprocessors

—

Pending

Overview

Eval results

Files

JavaScript Processing

Name: tessl/npm-svelte-preprocess
Author: tessl

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

Capabilities

Babel Processing

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

/**
 * Creates Babel preprocessor for script blocks
 * @param options - Babel configuration options
 * @returns PreprocessorGroup with script preprocessing
 */
function babel(options?: Options.Babel): PreprocessorGroup;

namespace Options {
  interface Babel {
    /** Source type for Babel parser */
    sourceType?: 'module';
    
    /** Disable minification */
    minified?: false;
    
    /** Disable AST output */
    ast?: false;
    
    /** Enable code output */
    code?: true;
    
    /** Enable source maps */
    sourceMaps?: boolean;
    
    /** Content to prepend to every file */
    prependData?: string;
    
    /** Remove common leading whitespace */
    stripIndent?: boolean;
    
    // Additional Babel options from @babel/core TransformOptions
    /** Babel presets */
    presets?: any[];
    
    /** Babel plugins */
    plugins?: any[];
    
    /** Target environments */
    targets?: any;
    
    /** Additional Babel configuration */
    [key: string]: any;
  }
}

Usage Examples:

import { babel } from "svelte-preprocess";

// Basic Babel with ES2020+ features
const preprocess = {
  script: babel({
    presets: [
      ['@babel/preset-env', {
        targets: '> 0.25%, not dead'
      }]
    ]
  })
};

// Babel with TypeScript and React JSX support
const preprocess = {
  script: babel({
    presets: [
      '@babel/preset-typescript',
      ['@babel/preset-react', {
        runtime: 'automatic'
      }]
    ],
    plugins: [
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-optional-chaining'
    ]
  })
};

// Development vs Production configuration
const preprocess = {
  script: babel({
    presets: [
      ['@babel/preset-env', {
        targets: process.env.NODE_ENV === 'production' 
          ? '> 0.25%, not dead'
          : 'last 2 versions',
        modules: false,
        useBuiltIns: 'usage',
        corejs: 3
      }]
    ],
    
    plugins: process.env.NODE_ENV === 'development' ? [
      'babel-plugin-transform-inline-environment-variables'
    ] : []
  })
};

CoffeeScript Processing

CoffeeScript compiler integration for legacy CoffeeScript support.

/**
 * Creates CoffeeScript preprocessor for script blocks
 * @param options - CoffeeScript configuration options
 * @returns PreprocessorGroup with script preprocessing
 */
function coffeescript(options?: Options.Coffeescript): PreprocessorGroup;

namespace Options {
  interface Coffeescript {
    /** Enable source map generation */
    sourceMap?: boolean;
    
    /** Filename option (not supported, always undefined) */
    filename?: never;
    
    /** Bare option (not supported, always undefined) */
    bare?: never;
    
    /** Content to prepend to every file */
    prependData?: string;
    
    /** Remove common leading whitespace */
    stripIndent?: boolean;
  }
}

Usage Examples:

import { coffeescript } from "svelte-preprocess";

// Basic CoffeeScript support
const preprocess = {
  script: coffeescript()
};

// CoffeeScript with source maps
const preprocess = {
  script: coffeescript({
    sourceMap: true
  })
};

// CoffeeScript with prepended utilities
const preprocess = {
  script: coffeescript({
    prependData: `
      # Global CoffeeScript utilities
      extend = (obj, props) -> 
        obj[key] = val for key, val of props
        obj
    `
  })
};

Integration with Auto Preprocessor

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

import { sveltePreprocess } from "svelte-preprocess";

// TypeScript with Babel post-processing
const preprocess = sveltePreprocess({
  typescript: {
    compilerOptions: {
      target: 'esnext' // Keep modern syntax for Babel
    }
  },
  
  // Babel applied after TypeScript
  babel: {
    presets: [
      ['@babel/preset-env', {
        targets: '> 1%, not dead'
      }]
    ]
  }
});

// CoffeeScript support
const preprocess = sveltePreprocess({
  coffeescript: {
    sourceMap: true
  }
});

The auto preprocessor detects JavaScript languages based on:

<script lang="coffee">, <script lang="coffeescript">
<script lang="babel">, <script lang="js"> (for explicit Babel processing)
Processing order: Language compiler (TypeScript/CoffeeScript) → Babel transformation

Common Babel Configurations

Modern JavaScript Features

const preprocess = {
  script: babel({
    presets: [
      ['@babel/preset-env', {
        targets: {
          browsers: ['> 1%', 'last 2 versions', 'not dead'],
          node: '14'
        },
        useBuiltIns: 'usage',
        corejs: { version: 3, proposals: true },
        shippedProposals: true
      }]
    ],
    
    plugins: [
      // Stage 3 proposals
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-private-methods',
      '@babel/plugin-proposal-optional-chaining',
      '@babel/plugin-proposal-nullish-coalescing-operator',
      
      // Optimization
      '@babel/plugin-transform-runtime'
    ]
  })
};

Framework Integration

// React/JSX support
const preprocess = {
  script: babel({
    presets: [
      '@babel/preset-env',
      ['@babel/preset-react', {
        runtime: 'automatic' // New JSX transform
      }]
    ]
  })
};

// Vue.js support
const preprocess = {
  script: babel({
    presets: ['@babel/preset-env'],
    plugins: [
      ['@vue/babel-plugin-jsx', {
        enableObjectSlots: false
      }]
    ]
  })
};

Development Tools

const isDev = process.env.NODE_ENV === 'development';

const preprocess = {
  script: babel({
    presets: [
      ['@babel/preset-env', {
        targets: isDev ? 'last 2 versions' : '> 0.25%, not dead'
      }]
    ],
    
    plugins: [
      // Development only
      isDev && 'babel-plugin-transform-inline-environment-variables',
      isDev && ['babel-plugin-module-resolver', {
        alias: {
          '@': './src',
          '@components': './src/components'
        }
      }],
      
      // Production only
      !isDev && 'babel-plugin-transform-remove-console',
      !isDev && ['babel-plugin-transform-remove-debugger']
    ].filter(Boolean)
  })
};

TypeScript + Babel Pipeline

// Process TypeScript first, then apply Babel transforms
const preprocess = sveltePreprocess({
  typescript: {
    compilerOptions: {
      target: 'esnext', // Keep modern syntax
      module: 'esnext',
      moduleResolution: 'node'
    }
  },
  
  babel: {
    presets: [
      ['@babel/preset-env', {
        targets: '> 0.25%, not dead',
        modules: false // Preserve ES modules
      }]
    ],
    
    // Skip TypeScript files (already processed)
    exclude: /\.ts$/
  }
});

Advanced Configuration

Custom Plugin Development

// Custom Babel plugin for Svelte-specific transforms
function customSveltePlugin() {
  return {
    visitor: {
      CallExpression(path) {
        // Custom transformations
      }
    }
  };
}

const preprocess = {
  script: babel({
    plugins: [
      customSveltePlugin,
      // Other plugins
    ]
  })
};

Conditional Compilation

const preprocess = {
  script: babel({
    plugins: [
      ['babel-plugin-transform-inline-environment-variables'],
      ['babel-plugin-minify-dead-code-elimination', {
        optimizeRawSize: true
      }]
    ],
    
    // Environment-specific presets
    env: {
      development: {
        plugins: ['babel-plugin-transform-react-jsx-source']
      },
      
      production: {
        plugins: [
          'babel-plugin-transform-remove-console',
          ['babel-plugin-transform-remove-debugger']
        ]
      }
    }
  })
};

Source Maps and Debugging

const preprocess = sveltePreprocess({
  sourceMap: true, // Global source map setting
  
  babel: {
    sourceMaps: true, // Babel-specific source maps
    retainLines: true, // Preserve line numbers for debugging
    
    presets: [
      ['@babel/preset-env', {
        debug: process.env.NODE_ENV === 'development'
      }]
    ]
  }
});

Error Handling and Debugging

const preprocess = {
  script: babel({
    // Enhanced error reporting
    highlightCode: true,
    
    presets: [
      ['@babel/preset-env', {
        debug: true, // Log transformation details
        verbose: true
      }]
    ],
    
    // Custom error handling
    parserOpts: {
      errorRecovery: true,
      plugins: ['jsx', 'typescript']
    }
  })
};

Types

interface BabelOptions {
  /** Source type for parser */
  sourceType?: 'module' | 'script';
  
  /** Enable minification */
  minified?: boolean;
  
  /** Generate AST */
  ast?: boolean;
  
  /** Generate code output */
  code?: boolean;
  
  /** Enable source maps */
  sourceMaps?: boolean;
  
  /** Content to prepend to source */
  prependData?: string;
  
  /** Remove leading whitespace */
  stripIndent?: boolean;
  
  /** Babel presets */
  presets?: Array<string | [string, any]>;
  
  /** Babel plugins */
  plugins?: Array<string | [string, any]>;
  
  /** Target environments */
  targets?: string | Array<string> | Record<string, string>;
  
  // Additional @babel/core TransformOptions
  [key: string]: any;
}

interface CoffeescriptOptions {
  /** Enable source maps */
  sourceMap?: boolean;
  
  /** Content to prepend to source */
  prependData?: string;
  
  /** Remove leading whitespace */
  stripIndent?: boolean;
  
  /** Not supported (always undefined) */
  filename?: never;
  bare?: never;
}

Install with Tessl CLI