tessl/npm-svelte

A cybernetically enhanced web application framework that compiles to highly optimized JavaScript with reactive state management and component-based architecture.

—

Quality

—

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

—

The risk profile of this skill

This plugin was archived by the owner on Jun 4, 2026

Reason: Retiring all tiles created prior to the transition to plugin support

Overview

Eval results

Files

Component Lifecycle

Name: tessl/npm-svelte
Author: tessl

Svelte provides lifecycle functions that allow you to run code at specific points in a component's life cycle. These functions must be called during component initialization.

Capabilities

onMount

Schedules a function to run as soon as the component has been mounted to the DOM. Unlike $effect, the provided function only runs once.

/**
 * Schedules a function to run as soon as the component has been mounted to the DOM
 * @param fn - Function to run on mount, can return cleanup function
 */
function onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): void;

Usage Examples:

import { onMount } from "svelte";

let data = [];

onMount(async () => {
  // Fetch data when component mounts
  const response = await fetch("/api/data");
  data = await response.json();
  
  // Return cleanup function (optional)
  return () => {
    console.log("Component unmounted");
  };
});

// Setup intervals or event listeners
onMount(() => {
  const interval = setInterval(() => {
    console.log("Timer tick");
  }, 1000);
  
  // Cleanup interval when component unmounts
  return () => clearInterval(interval);
});

onDestroy

Schedules a callback to run immediately before the component is unmounted. This is the only lifecycle function that runs inside server-side components.

/**
 * Schedules a callback to run immediately before the component is unmounted
 * @param fn - Function to run on component destruction
 */
function onDestroy(fn: () => any): void;

Usage Examples:

import { onDestroy } from "svelte";

let subscription;

// Subscribe to external service
subscription = externalService.subscribe(handleData);

onDestroy(() => {
  // Clean up subscription
  if (subscription) {
    subscription.unsubscribe();
  }
});

// Alternative pattern - cleanup in onMount
import { onMount, onDestroy } from "svelte";

onMount(() => {
  const cleanup = setupSomething();
  onDestroy(cleanup);
});

beforeUpdate (Deprecated)

Schedules a callback to run immediately before the component is updated after any state change. Deprecated in Svelte 5 - use $effect.pre instead.

/**
 * @deprecated Use $effect.pre instead
 * Schedules a callback to run immediately before the component is updated
 * @param fn - Function to run before updates
 */
function beforeUpdate(fn: () => void): void;

Usage Examples:

import { beforeUpdate } from "svelte";

let div;
let autoscroll;

beforeUpdate(() => {
  if (div) {
    const scrollableDistance = div.scrollHeight - div.offsetHeight;
    autoscroll = div.scrollTop > (scrollableDistance - 20);
  }
});

afterUpdate (Deprecated)

Schedules a callback to run immediately after the component has been updated. Deprecated in Svelte 5 - use $effect instead.

/**
 * @deprecated Use $effect instead
 * Schedules a callback to run immediately after the component has been updated
 * @param fn - Function to run after updates
 */
function afterUpdate(fn: () => void): void;

Usage Examples:

import { afterUpdate } from "svelte";

let div;
let autoscroll = false;

afterUpdate(() => {
  if (autoscroll && div) {
    div.scrollTo(0, div.scrollHeight);
  }
});

Types

type NotFunction<T> = T extends Function ? never : T;

Migration Notes

In Svelte 5, prefer using runes over the deprecated lifecycle functions:

Use $effect(() => { ... }) instead of afterUpdate
Use $effect.pre(() => { ... }) instead of beforeUpdate
onMount and onDestroy remain the preferred way to handle component mounting and cleanup