tessl/npm-svelte-preprocess

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

—

Pending

Overview

Eval results

Files

TypeScript Processing

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

TypeScript compiler integration providing full TypeScript support in Svelte components with configurable compiler options, tsconfig support, and diagnostic reporting.

Capabilities

TypeScript Preprocessor

Standalone TypeScript preprocessor that can be used independently or as part of the auto preprocessor.

/**
 * Creates a TypeScript preprocessor for script blocks
 * @param options - TypeScript compiler configuration
 * @returns PreprocessorGroup with script preprocessing
 */
function typescript(options?: Options.Typescript): PreprocessorGroup;

namespace Options {
  interface Typescript {
    /** TypeScript compiler options (overrides tsconfig) */
    compilerOptions?: any;
    
    /** Path to tsconfig.json file or boolean to enable/disable tsconfig loading */
    tsconfigFile?: string | boolean;
    
    /** Directory to search for tsconfig.json (when tsconfigFile is true) */
    tsconfigDirectory?: string | boolean;
    
    /** Enable TypeScript diagnostic reporting */
    reportDiagnostics?: boolean;
    
    /** Content to prepend to TypeScript source */
    prependData?: string;
    
    /** Remove common leading whitespace from source */
    stripIndent?: boolean;
  }
}

Usage Examples:

import { typescript } from "svelte-preprocess";

// Basic TypeScript support
const preprocess = {
  script: typescript()
};

// With custom compiler options
const preprocess = {
  script: typescript({
    compilerOptions: {
      target: 'es2020', 
      module: 'esnext',
      strict: true,
      skipLibCheck: true
    }
  })
};

// Using existing tsconfig.json
const preprocess = {
  script: typescript({
    tsconfigFile: './tsconfig.json',
    reportDiagnostics: true
  })
};

// With prepended data for global types
const preprocess = {
  script: typescript({
    prependData: `
      import type { ComponentEvents } from './types/events';
      declare global {
        namespace App {
          interface Locals {
            user?: User;
          }
        }
      }
    `
  })
};

Compiler Options

TypeScript compiler options can be specified directly or loaded from tsconfig.json:

// Direct compiler options
const preprocess = {
  script: typescript({
    compilerOptions: {
      target: 'es2022',
      module: 'esnext',
      moduleResolution: 'node',
      allowSyntheticDefaultImports: true,
      esModuleInterop: true,
      skipLibCheck: true,
      strict: true,
      
      // Svelte-specific settings
      importsNotUsedAsValues: 'preserve',
      preserveValueImports: true
    }
  })
};

// Load from tsconfig.json
const preprocess = {
  script: typescript({
    tsconfigFile: true, // Search for tsconfig.json in current or parent directories
    // or
    tsconfigFile: './src/tsconfig.json', // Specific path
    
    // Optional: override specific options
    compilerOptions: {
      sourceMap: true
    }
  })
};

Diagnostic Reporting

Enable TypeScript diagnostic reporting to get compile-time errors:

const preprocess = {
  script: typescript({
    reportDiagnostics: true,
    compilerOptions: {
      strict: true,
      noUnusedLocals: true,
      noUnusedParameters: true
    }
  })
};

When enabled, TypeScript diagnostics are included in the Processed result and can be handled by build tools:

// Diagnostics are available in the result
interface Processed {
  code: string;
  map?: string | object;
  dependencies?: string[];
  diagnostics?: Array<{
    category: number;
    code: number;
    messageText: string;
    file?: {
      fileName: string;
    };
    start?: number;
    length?: number;
  }>;
}

Content Preparation

Control how TypeScript source is prepared before compilation:

const preprocess = {
  script: typescript({
    // Add global declarations
    prependData: `
      import type { SvelteComponentTyped } from 'svelte';
      
      declare global {
        const __VERSION__: string;
        const __DEV__: boolean;
      }
    `,
    
    // Normalize indentation
    stripIndent: true
  })
};

Integration with Auto Preprocessor

TypeScript processing is automatically enabled when using the auto preprocessor:

import { sveltePreprocess } from "svelte-preprocess";

const preprocess = sveltePreprocess({
  // Enable with defaults
  typescript: true,
  
  // Or with custom options
  typescript: {
    tsconfigFile: './tsconfig.json',
    compilerOptions: {
      target: 'es2020'
    }
  }
});

The auto preprocessor automatically detects TypeScript in:

<script lang="ts">
<script lang="typescript">
External .ts files

Advanced Configuration

// Complete configuration example
const preprocess = {
  script: typescript({
    // TypeScript configuration
    tsconfigFile: './tsconfig.json',
    reportDiagnostics: true,
    
    // Source preparation
    prependData: `
      // Global type declarations
      import type { UserSession } from '$lib/types';
      
      declare global {
        const $session: UserSession;
      }
    `,
    stripIndent: true,
    
    // Compiler overrides
    compilerOptions: {
      // Enable source maps for development
      sourceMap: process.env.NODE_ENV === 'development',
      
      // Svelte-optimized settings
      importsNotUsedAsValues: 'preserve',
      isolatedModules: true
    }
  })
};

Configuration Patterns

Development vs Production

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

const preprocess = {
  script: typescript({
    compilerOptions: {
      // Enable source maps in development
      sourceMap: isDev,
      
      // More aggressive optimization in production
      target: isDev ? 'es2020' : 'es2018',
      
      // Strict checking in development
      strict: isDev,
      noUnusedLocals: isDev,
      noUnusedParameters: isDev
    },
    
    // Report diagnostics in development
    reportDiagnostics: isDev
  })
};

Monorepo Setup

// For packages in a monorepo
const preprocess = {
  script: typescript({
    tsconfigFile: './packages/ui/tsconfig.json',
    tsconfigDirectory: './packages/ui',
    
    compilerOptions: {
      // Reference other packages
      baseUrl: '../../',
      paths: {
        '@packages/*': ['packages/*/src']
      }
    }
  })
};

Types

interface TypescriptOptions {
  /** TypeScript compiler options */
  compilerOptions?: import('typescript').CompilerOptions;
  
  /** Path to tsconfig.json or boolean to enable auto-discovery */
  tsconfigFile?: string | boolean;
  
  /** Directory to search for tsconfig.json */
  tsconfigDirectory?: string | boolean;
  
  /** Enable diagnostic reporting */
  reportDiagnostics?: boolean;
  
  /** Content to prepend to source */
  prependData?: string;
  
  /** Remove leading whitespace */
  stripIndent?: boolean;
}

Install with Tessl CLI