tessl/npm-svelte

Svelte is a compiler-based UI framework that transforms declarative component code into efficient imperative JavaScript that surgically updates the DOM

Overview

Eval results

Files

Quick Start Guide

Name: tessl/npm-svelte
Author: tessl

This guide will walk you through setting up Svelte and creating your first component.

Installation

npm install svelte

Creating Your First Component

1. Create a Component File

Create a file App.svelte:

<script>
  let count = $state(0);
  
  function increment() {
    count++;
  }
</script>

<button onclick={increment}>
  Count: {count}
</button>

2. Mount the Component

Create main.js:

import { mount } from 'svelte';
import App from './App.svelte';

const app = mount(App, {
  target: document.body
});

3. Build and Run

Use a build tool like Vite, Rollup, or Webpack with Svelte plugin:

npm install -D @sveltejs/vite-plugin vite

Create vite.config.js:

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()]
});

Core Concepts

Reactive State

Use $state to create reactive variables:

<script>
  let name = $state('World');
  let count = $state(0);
</script>

<h1>Hello {name}!</h1>
<button onclick={() => count++}>
  Clicked {count} times
</button>

Derived Values

Use $derived to compute values from state:

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<p>Count: {count}</p>
<p>Doubled: {doubled}</p>

Effects

Use $effect to run side effects:

<script>
  let count = $state(0);
  
  $effect(() => {
    console.log('Count changed:', count);
  });
</script>

Lifecycle Hooks

Use onMount and onDestroy for component lifecycle:

<script>
  import { onMount, onDestroy } from 'svelte';
  
  onMount(() => {
    console.log('Component mounted');
    
    return () => {
      console.log('Component will unmount');
    };
  });
  
  onDestroy(() => {
    console.log('Component destroyed');
  });
</script>

Component Props

Define props using $props():

<script>
  let { name = 'World', age } = $props();
</script>

<h1>Hello {name}!</h1>
{#if age}
  <p>Age: {age}</p>
{/if}

Using Stores

Create and use stores for shared state:

import { writable } from 'svelte/store';

export const count = writable(0);

<script>
  import { count } from './stores.js';
</script>

<button onclick={() => count.update(n => n + 1)}>
  Count: {$count}
</button>

Next Steps

Read the Real-World Scenarios for comprehensive examples
Explore the API Reference for detailed documentation
Check Edge Cases for advanced patterns

Install with Tessl CLI

npx tessl i tessl/npm-svelte

docs

examples

guides

quick-start.md

reference

index.md

tile.json