svelte

What is svelte?

Svelte is a modern JavaScript compiler that allows you to write high-performance user interfaces with significantly less boilerplate code than traditional frameworks. It shifts much of the work to compile time, producing highly optimized vanilla JavaScript at the end.

What are svelte's main functionalities?

Reactive Declarations

Svelte allows you to write reactive statements using the $: syntax. When the state changes, the reactive statements automatically update to reflect the new state.

let count = 0;

$: doubled = count * 2;

Component Definition

Components in Svelte are defined using a combination of HTML, CSS, and JavaScript, which are encapsulated within a single file with a .svelte extension.

<script>
  export let name;
</script>

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

Store Management

Svelte provides a simple store mechanism to manage global state. The 'writable' store is a basic store that allows reading and writing values reactively.

import { writable } from 'svelte/store';

const count = writable(0);

Transitions and Animations

Svelte makes it easy to add transitions and animations to elements when they enter or leave the DOM.

import { fade } from 'svelte/transition';

<div in:fade={{ delay: 0, duration: 200 }}>Fade In</div>

Bindings

Svelte provides a concise syntax for two-way data binding to HTML elements, allowing for easy synchronization between the DOM and component state.

<script>
  let value = '';
</script>

<input bind:value={value} />

Other packages similar to svelte

react

React is a popular JavaScript library for building user interfaces. It uses a virtual DOM for efficient updates, and it's known for its component-based architecture. Unlike Svelte, React requires a runtime library and often involves more boilerplate code.

vue

Vue is a progressive JavaScript framework used for building UIs and single-page applications. It is similar to Svelte in its component structure and reactivity model but differs in that it uses a virtual DOM and requires a runtime.

angular

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It is more prescriptive than Svelte, with a complex ecosystem and a steep learning curve, and it includes features like dependency injection and RxJS integration.

preact

Preact is a fast, 3kB alternative to React with the same modern API. It provides a similar component-based architecture but with a smaller footprint. Preact is closer to Svelte in terms of size but still operates with a virtual DOM.

README

Svelte

The magical disappearing UI framework. Read the introductory blog post.

---

This is the Svelte compiler, which is primarily intended for authors of tooling that integrates Svelte with different build systems. If you just want to write Svelte components and use them in your app, you probably want one of those tools:

• svelte-cli – Command line interface for compiling components
• rollup-plugin-svelte – Rollup plugin
• sveltify - Browserify transform
• gulp-svelte - gulp plugin
• metalsmith-svelte - Metalsmith plugin
• system-svelte – System.js loader
• svelte-loader – Webpack loader
• More to come!

API

import * as svelte from 'svelte';

const { code, map } = svelte.compile( source, {
	// the target module format – defaults to 'es' (ES2015 modules), can
	// also be 'amd', 'cjs', 'umd' or 'iife'
	format: 'umd',

	// the filename of the source file, used in e.g. generating sourcemaps
	filename: 'MyComponent.html',

	// the name of the constructor. Required for 'iife' and 'umd' output,
	// but otherwise mostly useful for debugging. Defaults to 'SvelteComponent'
	name: 'MyComponent',

	// for 'amd' and 'umd' output, you can optionally specify an AMD module ID
	amd: {
		id: 'my-component'
	},

	// custom error/warning handlers. By default, errors will throw, and
	// warnings will be printed to the console. Where applicable, the
	// error/warning object will have `pos`, `loc` and `frame` properties
	onerror: err => {
		console.error( err.message );
	},

	onwarn: warning => {
		console.warn( warning.message );
	}
});

Example/starter repos

• charpeni/svelte-example - Some Svelte examples with configured Rollup, Babel, ESLint, directives, Two-Way binding, and nested components
• EmilTholin/svelte-test
• lukechinworth/codenames – example integration with Redux

License

MIT