CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-sveltejs--package

A specialized build tool for creating Svelte component libraries and packages

Pending
Overview
Eval results
Files

build-system.mddocs/

Build System

Core build functionality for processing Svelte packages with support for TypeScript, preprocessing, and file watching.

Capabilities

Build Function

Builds a Svelte package once, processing all files and generating output.

/**
 * Build a Svelte package once
 * @param options - Build configuration options
 */
function build(options: Options): Promise<void>;

Usage Examples:

import { build } from "@sveltejs/package/src/index.js";
import { load_config } from "@sveltejs/package/src/config.js";

// Basic build
const config = await load_config();
await build({
  cwd: process.cwd(),
  input: "src/lib",
  output: "dist",
  preserve_output: false,
  types: true,
  config
});

// Build without TypeScript declarations
await build({
  cwd: process.cwd(),
  input: "src/lib", 
  output: "dist",
  preserve_output: false,
  types: false,
  config
});

// Build preserving existing output
await build({
  cwd: process.cwd(),
  input: "src/lib",
  output: "dist", 
  preserve_output: true,
  types: true,
  config
});

Watch Function

Builds a Svelte package and watches for file changes, rebuilding incrementally.

/**
 * Build a Svelte package and watch for changes
 * @param options - Build configuration options
 * @returns WatchResult with watcher controls
 */
function watch(options: Options): Promise<WatchResult>;

interface WatchResult {
  /** Chokidar file watcher instance */
  watcher: chokidar.FSWatcher;
  /** Promise that resolves when watcher is ready */
  ready: Promise<void>;
  /** Promise that resolves when current processing batch is complete */
  settled(): Promise<void>;
}

Usage Examples:

import { watch } from "@sveltejs/package/src/index.js";
import { load_config } from "@sveltejs/package/src/config.js";

// Start watching
const config = await load_config();
const watchResult = await watch({
  cwd: process.cwd(),
  input: "src/lib",
  output: "dist",
  preserve_output: false,
  types: true,
  config
});

// Wait for watcher to be ready
await watchResult.ready;
console.log("Watching for changes...");

// Wait for current batch to complete
await watchResult.settled();

// Stop watching
watchResult.watcher.close();

Build Process

The build system follows this process:

  1. Validation: Validate input directory exists
  2. Setup: Create temporary directory, scan for files
  3. TypeScript: Generate .d.ts files if types enabled
  4. File Processing: Process each file (Svelte preprocessing, TS transpilation, alias resolution)
  5. Output: Copy processed files to output directory
  6. Validation: Run package validation checks

File Processing Pipeline

Each file goes through:

  1. Detection: Analyze file type and determine processing needs
  2. Preprocessing: Apply Svelte preprocessors if applicable
  3. Transpilation: Convert TypeScript to JavaScript if needed
  4. Alias Resolution: Resolve $lib and custom path aliases
  5. Code Analysis: Analyze processed code for validation
  6. Writing: Write processed file to output

Watch Mode Behavior

In watch mode:

  • Incremental processing of changed files only
  • Debounced rebuilds (100ms delay)
  • Automatic .d.ts regeneration when TypeScript files change
  • File deletion handling with cleanup of empty directories
  • Error isolation - errors don't stop the watcher

Utility Functions

Supporting utility functions used internally by the build system.

/**
 * Resolves path aliases in import statements
 * @param input - Input directory path
 * @param file - File path relative to input
 * @param content - File content to process
 * @param aliases - Alias mapping (e.g., { '$lib': 'src/lib' })
 * @returns Content with resolved aliases
 */
function resolve_aliases(input: string, file: string, content: string, aliases: Record<string, string>): string;

/**
 * Strip lang/type attributes from Svelte script and style tags
 * @param content - Svelte component content
 * @returns Content with stripped attributes
 */
function strip_lang_tags(content: string): string;

/**
 * Write file with directory creation
 * @param file - File path to write
 * @param contents - File contents
 */
function write(file: string, contents: string | Buffer): void;

/**
 * Scan directory for files matching extensions
 * @param input - Directory to scan
 * @param extensions - File extensions to include
 * @returns Array of analyzed file objects
 */
function scan(input: string, extensions: string[]): File[];

/**
 * Analyze file type and determine processing requirements
 * @param file - File path to analyze
 * @param extensions - Svelte file extensions
 * @returns File analysis object
 */
function analyze(file: string, extensions: string[]): File;

Usage Examples:

import { resolve_aliases, strip_lang_tags, write, scan, analyze } from "@sveltejs/package/src/utils.js";

// Resolve $lib aliases in import statements
const resolvedContent = resolve_aliases(
  'src/lib',
  'components/Button.svelte',
  'import { utils } from "$lib/utils";',
  { '$lib': 'src/lib' }
);
// Result: 'import { utils } from "../utils";'

// Strip lang attributes from Svelte components
const stripped = strip_lang_tags('<script lang="ts">export let name: string;</script>');
// Result: '<script>export let name: string;</script>'

// Write file with automatic directory creation
write('dist/components/Button.js', 'export default Button;');

// Scan directory for Svelte files
const files = scan('src/lib', ['.svelte']);
// Result: [{ name: 'Button.svelte', dest: 'Button.svelte', base: 'Button', is_svelte: true }]

// Analyze individual file
const analysis = analyze('components/Button.svelte', ['.svelte']);
// Result: { name: 'components/Button.svelte', dest: 'components/Button.svelte', base: 'components/Button', is_svelte: true }

Types

interface Options {
  cwd: string;
  input: string;
  output: string;
  preserve_output: boolean;
  types: boolean;
  tsconfig?: string;
  config: Config;
}

interface Config {
  extensions?: string[];
  kit?: {
    alias?: Record<string, string>;
    files?: {
      lib?: string;
    };
    outDir?: string;
  };
  preprocess?: PreprocessorGroup;
}

interface File {
  name: string;
  dest: string;
  base: string;
  is_svelte: boolean;
}

Install with Tessl CLI

npx tessl i tessl/npm-sveltejs--package

docs

build-system.md

configuration.md

filesystem.md

index.md

typescript.md

validation.md

tile.json