Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
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.
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} />
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 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 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 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.
The magical disappearing UI framework.
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:
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', 'iife' or 'eval'
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 );
}
});
The Svelte compiler exposes the following API:
compile( source [, options ] ) => { code, map, ast, css }
- Compile the component with the given options (see below). Returns an object containing the compiled JavaScript, a sourcemap, an AST and transformed CSS.create( source [, options ] ) => function
- Compile the component and return the component itself.preprocess( source, options ) => Promise
— Preprocess a source file, e.g. to use PostCSS or CoffeeScriptVERSION
- The version of this copy of the Svelte compiler as a string, 'x.x.x'
.The Svelte compiler optionally takes a second argument, an object of configuration options:
Values | Description | Default | |
---|---|---|---|
generate | 'dom' , 'ssr' | Whether to generate JavaScript code intended for use on the client ('dom' ), or for use in server-side rendering ('ssr' ). | 'dom' |
dev | true , false | Whether to enable run-time checks in the compiled component. These are helpful during development, but slow your component down. | false |
css | true , false | Whether to include code to inject your component's styles into the DOM. | true |
hydratable | true , false | Whether to support hydration on the compiled component. | false |
customElement | true , false , { tag, props } | Whether to compile this component to a custom element. If tag /props are passed, compiles to a custom element and overrides the values exported by the component. | false |
cascade | true , false | Whether to cascade all of the component's styles to child components. If false , only selectors wrapped in :global(...) and keyframe IDs beginning with -global- are cascaded. | true |
shared | true , false , string | Whether to import various helpers from a shared external library. When you have a project with multiple components, this reduces the overall size of your JavaScript bundle, at the expense of having immediately-usable component. You can pass a string of the module path to use, or true will import from 'svelte/shared.js' . | false |
legacy | true , false | Ensures compatibility with very old browsers, at the cost of some extra code. | false |
format | 'es' , 'amd' , 'cjs' , 'umd' , 'iife' , 'eval' | The format to output in the compiled component.'es' - ES6/ES2015 module, suitable for consumption by a bundler'amd' - AMD module'cjs' - CommonJS module'iife' - IIFE-wrapped function defining a global variable, suitable for use directly in browser'eval' - standalone function, suitable for passing to eval() | 'es' for generate: 'dom' 'cjs' for generate: 'ssr' |
name | string | The name of the constructor in the compiled component. | 'SvelteComponent' |
filename | string | The filename to use in sourcemaps and compiler error and warning messages. | 'SvelteComponent.html' |
amd .id | string | The AMD module ID to use for the 'amd' and 'umd' output formats. | undefined |
globals | object , function | When outputting to the 'umd' , 'iife' or 'eval' formats, an object or function mapping the names of imported dependencies to the names of global variables. | {} |
onerror | function | Specify a callback for when Svelte encounters an error while compiling the component. Passed two arguments: the error object, and another function that is Svelte's default onerror handling. | (exception is thrown) |
onwarn | function | Specify a callback for when Svelte encounters a non-fatal warning while compiling the component. Passed two arguments: the warning object, and another function that is Svelte's default onwarn handling. | (warning is logged to console) |
svelte.preprocess
returns a Promise that resolves to an object with a toString
method (other properties will be added in future). It takes an options object with markup
, style
or script
properties:
const processed = await svelte.preprocess(source, {
markup: ({ content }) => {
// `content` is the entire component string
return { code: '...', map: {...} };
},
style: ({ content, attributes }) => {
// `content` is what's inside the <style> element, if present
// `attributes` is a map of attributes on the element
if (attributes.type !== 'text/scss') return;
return { code: '...', map: {...} };
},
script: ({ content, attributes }) => {
// `content` is what's inside the <script> element, if present
// `attributes` is a map of attributes on the element
if (attributes.type !== 'text/coffeescript') return;
return { code: '...', map: {...} };
}
});
The style
and script
preprocessors will run after the markup
preprocessor. Each preprocessor can return a) nothing (in which case no transformation takes place), b) a { code, map }
object, or c) a Promise that resolves to a) or b). Note that sourcemaps are currently discarded, but will be used in future versions of Svelte.
To keep Svelte's performance in check, we use BrowserStack to quickly run benchmarks for each PR that immediately give feedback to the contributor. You can see how we use BrowserStack in the svelte-bench project and check out BrowserStack's services on their website.
FAQs
Cybernetically enhanced web apps
The npm package svelte receives a total of 1,288,868 weekly downloads. As such, svelte popularity was classified as popular.
We found that svelte demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.