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

Svelte

Name: tessl/npm-svelte
Author: tessl

Svelte is a revolutionary JavaScript framework and compiler that takes a unique approach to building web applications. Rather than running in the browser as a traditional framework, Svelte compiles components at build time into highly optimized vanilla JavaScript that surgically updates the DOM. This compilation step eliminates the overhead of a virtual DOM and framework runtime, resulting in smaller bundle sizes and faster performance.

Package Information

Package Name: svelte
Package Type: npm
Language: JavaScript/TypeScript
Installation: npm install svelte

Core Imports

import { onMount, createEventDispatcher } from "svelte";

Additional imports for animations, transitions, and easing:

import { spring, tweened } from "svelte/motion";
import { fade, fly, slide, scale } from "svelte/transition";
import { cubicOut, elasticOut } from "svelte/easing";
import { flip } from "svelte/animate";

Compiler usage:

import { compile, parse, preprocess } from "svelte/compiler";

Store management:

import { writable, readable, derived } from "svelte/store";

Basic Usage

// Component lifecycle
import { onMount, onDestroy } from "svelte";

export let name = "";

onMount(() => {
  console.log("Component mounted");
  return () => {
    console.log("Cleanup function");
  };
});

// Event handling
import { createEventDispatcher } from "svelte";

const dispatch = createEventDispatcher();

function handleClick() {
  dispatch("message", {
    text: "Hello from component"
  });
}

// Store usage
import { writable } from "svelte/store";

const count = writable(0);

function increment() {
  count.update(n => n + 1);
}

Architecture

Svelte's architecture consists of several key components:

Compiler: Transforms .svelte components into optimized JavaScript at build time
Runtime: Minimal runtime library providing lifecycle hooks and reactivity
Component System: Template-based components with scoped CSS and reactive state
Store System: Global state management with reactive subscriptions
Transition/Animation: Built-in animation and transition effects
Server-Side Rendering: Full SSR support with hydration capabilities

Capabilities

Core Runtime

Component lifecycle hooks, event dispatching, and context management for building interactive Svelte components.

function onMount(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): void;
function onDestroy(fn: () => any): void;
function beforeUpdate(fn: () => void): void;
function afterUpdate(fn: () => void): void;
function tick(): Promise<void>;
function createEventDispatcher<EventMap extends Record<string, any> = any>(): EventDispatcher<EventMap>;
function setContext<T>(key: any, context: T): T;
function getContext<T>(key: any): T;
function getAllContexts<T extends Map<any, any> = Map<any, any>>(): T;
function hasContext(key: any): boolean;

Core Runtime

Compiler

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

function compile(source: string, options?: CompileOptions): CompileResult;
function parse(template: string, options?: ParserOptions): Ast;
function preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: { filename?: string }): Promise<Processed>;
function walk(ast: Node, visitors: { enter?: (node: Node, parent?: Node) => void; leave?: (node: Node, parent?: Node) => void; }): void;
const VERSION: string;

Compiler

Store Management

Reactive state management system with readable, writable, and derived stores for application-wide state.

function writable<T>(value?: T, start?: StartStopNotifier<T>): Writable<T>;
function readable<T>(value?: T, start?: StartStopNotifier<T>): Readable<T>;
function derived<S extends Stores, T>(stores: S, fn: Function, initial_value?: T): Readable<T>;
function readonly<T>(store: Readable<T>): Readable<T>;
function get<T>(store: Readable<T>): T;

Store Management

Motion and Animation

Physics-based animations and smooth transitions between state values with spring and tween effects.

function spring<T = any>(value?: T, opts?: SpringOpts): Spring<T>;
function tweened<T>(value?: T, defaults?: TweenedOptions<T>): Tweened<T>;

Motion and Animation

List Animations

FLIP animations for smooth list reordering and element positioning transitions.

function flip(node: Element, { from, to }: { from: DOMRect; to: DOMRect }, params?: FlipParams): AnimationConfig;

List Animations

Transitions

Built-in transition effects for element enter/exit animations with customizable parameters and easing functions.

function blur(node: Element, params?: BlurParams): TransitionConfig;
function fade(node: Element, params?: FadeParams): TransitionConfig;
function fly(node: Element, params?: FlyParams): TransitionConfig;
function slide(node: Element, params?: SlideParams): TransitionConfig;
function scale(node: Element, params?: ScaleParams): TransitionConfig;
function draw(node: SVGElement & { getTotalLength(): number }, params?: DrawParams): TransitionConfig;
function crossfade(params: CrossfadeParams): [send: Function, receive: Function];

Transitions

Easing Functions

Comprehensive collection of easing functions for smooth animation curves and natural motion effects.

function linear(t: number): number;
function cubicInOut(t: number): number;
function elasticOut(t: number): number;
function bounceInOut(t: number): number;

Easing Functions

Actions

Element lifecycle and behavior enhancement system for reusable DOM interactions.

interface Action<Element = HTMLElement, Parameter = undefined, Attributes extends Record<string, any> = Record<never, any>> {
  (node: Element, parameter?: Parameter): void | ActionReturn<Parameter, Attributes>;
}

interface ActionReturn<Parameter = undefined, Attributes extends Record<string, any> = Record<never, any>> {
  update?: (parameter: Parameter) => void;
  destroy?: () => void;
}

Actions

Core Types

class SvelteComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any> {
  constructor(options: ComponentConstructorOptions<Props>);
  $destroy(): void;
  $on<K extends Extract<keyof Events, string>>(type: K, callback: ((e: Events[K]) => void) | null | undefined): () => void;
  $set(props: Partial<Props>): void;
}

interface ComponentConstructorOptions<Props extends Record<string, any> = Record<string, any>> {
  target: Element | Document | ShadowRoot;
  anchor?: Element;
  props?: Props;
  context?: Map<any, any>;
  hydrate?: boolean;
  intro?: boolean;
}

interface EventDispatcher<EventMap extends Record<string, any>> {
  <Type extends keyof EventMap>(
    ...args: null extends EventMap[Type]
      ? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
      : undefined extends EventMap[Type]
      ? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
      : [type: Type, parameter: EventMap[Type], options?: DispatchOptions]
  ): boolean;
}

interface DispatchOptions {
  cancelable?: boolean;
}

Install with Tessl CLI