CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-svelte

Revolutionary JavaScript framework and compiler that builds web applications without runtime overhead by compiling components at build time.

Overview
Eval results
Files

compiler.mddocs/

Compiler

Complete compilation pipeline for transforming Svelte components into optimized JavaScript with preprocessing support.

Capabilities

Component Compilation

Transform Svelte component source code into optimized JavaScript modules.

/**
 * Compiles a Svelte component into JavaScript
 * @param source - Svelte component source code
 * @param options - Compilation options
 * @returns Compilation result with generated code and metadata
 */
function compile(source: string, options?: CompileOptions): CompileResult;

interface CompileOptions {
  /** Component name (inferred from filename if not provided) */
  name?: string;
  /** Source filename for debugging and sourcemaps */
  filename?: string;
  /** Generation target: 'dom', 'ssr', or false */
  generate?: 'dom' | 'ssr' | false;
  /** Error handling mode: 'throw' or 'warn' */
  errorMode?: 'throw' | 'warn';
  /** Variables report mode: 'strict', 'full', or false */
  varsReport?: 'full' | 'strict' | false;
  /** Enable sourcemap generation */
  enableSourcemap?: boolean | { js: boolean; css: boolean };
  /** Development mode with runtime checks */
  dev?: boolean;
  /** Generate accessors for props */
  accessors?: boolean;
  /** Treat objects as immutable */
  immutable?: boolean;
  /** Enable hydration support */
  hydratable?: boolean;
  /** Generate legacy-compatible code */
  legacy?: boolean;
  /** Generate custom element constructor */
  customElement?: boolean;
  /** Custom element tag name */
  tag?: string;
  /** CSS handling: 'injected', 'external', 'none' */
  css?: 'injected' | 'external' | 'none' | boolean;
  /** Preserve HTML comments in SSR */
  preserveComments?: boolean;
  /** Preserve whitespace */
  preserveWhitespace?: boolean;
}

interface CompileResult {
  /** Generated JavaScript code */
  js: {
    code: string;
    map: any;
  };
  /** Generated CSS code */
  css: {
    code: string;
    map: SourceMap;
  };
  /** Abstract syntax tree */
  ast: Ast;
  /** Compilation warnings */
  warnings: Warning[];
  /** Variable declarations */
  vars: Var[];
  /** Performance statistics */
  stats: {
    timings: { total: number };
  };
}

Usage Examples:

import { compile } from "svelte/compiler";

// Basic compilation
const source = `
<script>
  export let name = 'world';
</script>

<h1>Hello {name}!</h1>
`;

const result = compile(source, {
  filename: 'Hello.svelte',
  dev: true
});

console.log(result.js.code); // Generated JavaScript
console.log(result.css.code); // Generated CSS
console.log(result.warnings); // Any warnings

// SSR compilation
const ssrResult = compile(source, {
  generate: 'ssr',
  hydratable: true
});

// Custom element compilation
const customElementResult = compile(source, {
  customElement: true,
  tag: 'hello-component'
});

AST Parsing

Parse Svelte component templates into abstract syntax trees for analysis and transformation.

/**
 * Parses a Svelte component into an AST without compilation
 * @param template - Svelte component source
 * @param options - Parser options
 * @returns Abstract syntax tree
 */
function parse(template: string, options?: ParserOptions): Ast;

interface ParserOptions {
  /** Source filename */
  filename?: string;
  /** Parse as custom element */
  customElement?: boolean;
  /** CSS mode for parsing */
  css?: 'injected' | 'external' | 'none' | boolean;
}

interface Ast {
  /** HTML template AST */
  html: TemplateNode;
  /** CSS style block AST */
  css?: Style;
  /** Instance script AST */
  instance?: Script;
  /** Module script AST */
  module?: Script;
}

Usage Examples:

import { parse } from "svelte/compiler";

const template = `
<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  Count: {count}
</button>

<style>
  button { color: blue; }
</style>
`;

const ast = parse(template, {
  filename: 'Counter.svelte'
});

console.log(ast.html); // Template nodes
console.log(ast.instance); // Script block
console.log(ast.css); // Style block

Preprocessing

Transform component source code before compilation using custom preprocessors.

/**
 * Applies preprocessors to transform component source
 * @param source - Original component source
 * @param preprocessor - Preprocessor configuration
 * @param options - Processing options
 * @returns Processed source code
 */
function preprocess(
  source: string, 
  preprocessor: PreprocessorGroup | PreprocessorGroup[], 
  options?: { filename?: string }
): Promise<Processed>;

interface PreprocessorGroup {
  /** Preprocessor name */
  name?: string;
  /** Markup preprocessor */
  markup?: MarkupPreprocessor;
  /** Style preprocessor */
  style?: Preprocessor;
  /** Script preprocessor */
  script?: Preprocessor;
}

type MarkupPreprocessor = (options: {
  content: string;
  filename?: string;
}) => Processed | void | Promise<Processed | void>;

type Preprocessor = (options: {
  content: string;
  attributes: Record<string, string | boolean>;
  markup: string;
  filename?: string;
}) => Processed | void | Promise<Processed | void>;

interface Processed {
  /** Transformed code */
  code: string;
  /** Source map */
  map?: string | object;
  /** Additional dependencies to watch */
  dependencies?: string[];
  /** Updated attributes */
  attributes?: Record<string, string | boolean>;
}

Usage Examples:

import { preprocess } from "svelte/compiler";

// TypeScript preprocessing
const preprocessors = {
  script: ({ content, attributes }) => {
    if (attributes.lang === 'ts') {
      // Transform TypeScript to JavaScript
      return {
        code: transformTypeScript(content),
        map: generateSourceMap()
      };
    }
  },
  style: ({ content, attributes }) => {
    if (attributes.lang === 'scss') {
      // Transform SCSS to CSS
      return {
        code: compileSass(content)
      };
    }
  }
};

const processed = await preprocess(source, preprocessors, {
  filename: 'Component.svelte'
});

console.log(processed.code); // Transformed source

AST Traversal

Utility for walking and analyzing AST nodes.

/**
 * Walk an AST with enter/leave callbacks
 * @param ast - AST node to traverse
 * @param handlers - Enter and leave callback functions
 */
function walk(ast: Node, handlers: {
  enter?: (node: Node, parent: Node, prop: string, index: number) => void;
  leave?: (node: Node, parent: Node, prop: string, index: number) => void;
}): void;

Usage Examples:

import { parse, walk } from "svelte/compiler";

const ast = parse(template);

// Find all variable references
const variables = [];

walk(ast.html, {
  enter(node) {
    if (node.type === 'Identifier') {
      variables.push(node.name);
    }
  }
});

console.log('Variables used:', variables);

Version Information

/**
 * Current Svelte version
 */
const VERSION: string;

AST Node Types

interface TemplateNode {
  start: number;
  end: number;
  type: string;
  children?: TemplateNode[];
}

interface Element extends TemplateNode {
  type: 'Element' | 'InlineComponent' | 'SlotTemplate' | 'Title' | 'Slot' | 'Head' | 'Options' | 'Window' | 'Document' | 'Body';
  name: string;
  attributes: Array<Attribute | SpreadAttribute | Directive>;
}

interface Text extends TemplateNode {
  type: 'Text';
  data: string;
}

interface MustacheTag extends TemplateNode {
  type: 'MustacheTag' | 'RawMustacheTag';
  expression: Node;
}

interface Script extends TemplateNode {
  type: 'Script';
  context: string;
  content: Program;
}

interface Style extends TemplateNode {
  type: 'Style';
  attributes: any[];
  children: any[];
  content: {
    start: number;
    end: number;
    styles: string;
  };
}

interface Warning {
  start?: { line: number; column: number; pos?: number };
  end?: { line: number; column: number };
  pos?: number;
  code: string;
  message: string;
  filename?: string;
  frame?: string;
  toString(): string;
}

interface Var {
  name: string;
  export_name?: string;
  injected?: boolean;
  module?: boolean;
  mutated?: boolean;
  reassigned?: boolean;
  referenced?: boolean;
  writable?: boolean;
}

Install with Tessl CLI

npx tessl i tessl/npm-svelte@4.2.0

docs

actions.md

compiler.md

core-runtime.md

easing-functions.md

index.md

list-animations.md

motion-animation.md

store-management.md

transitions.md

tile.json