@ -50,10 +50,12 @@ In development mode (see the [compiler options](/docs/svelte-compiler#svelte-com
If you export a `const`, `class` or `function`, it is readonly from outside the component. Functions are valid prop values, however, as shown below.
If you export a `const`, `class` or `function`, it is readonly from outside the component. Functions are valid prop values, however, as shown below.
```svelte
```svelte
<!--- file: App.svelte --->
<script>
<script>
// these are readonly
// these are readonly
export const thisIs = 'readonly';
export const thisIs = 'readonly';
/** @param {string} name */
export function greet(name) {
export function greet(name) {
alert(`hello ${name}!`);
alert(`hello ${name}!`);
}
}
@ -68,6 +70,7 @@ Readonly props can be accessed as properties on the element, tied to the compone
You can use reserved words as prop names.
You can use reserved words as prop names.
```svelte
```svelte
<!--- file: App.svelte --->
<script>
<script>
/** @type {string} */
/** @type {string} */
let className;
let className;
@ -154,10 +157,12 @@ Any top-level statement (i.e. not inside a block or a function) can be made reac
Only values which directly appear within the `$:` block will become dependencies of the reactive statement. For example, in the code below `total` will only update when `x` changes, but not `y`.
Only values which directly appear within the `$:` block will become dependencies of the reactive statement. For example, in the code below `total` will only update when `x` changes, but not `y`.
```svelte
```svelte
<!--- file: App.svelte --->
<script>
<script>
let x = 0;
let x = 0;
let y = 0;
let y = 0;
/** @param {number} value */
function yPlusAValue(value) {
function yPlusAValue(value) {
return value + y;
return value + y;
}
}
@ -178,9 +183,10 @@ It is important to note that the reactive blocks are ordered via simple static a
let x = 0;
let x = 0;
let y = 0;
let y = 0;
const setY = (value) => {
/** @param {number} value */
function setY(value) {
y = value;
y = value;
};
}
$: yDependent = y;
$: yDependent = y;
$: setY(x);
$: setY(x);
@ -192,6 +198,7 @@ Moving the line `$: yDependent = y` below `$: setY(x)` will cause `yDependent` t
If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a `let` declaration on your behalf.
If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a `let` declaration on your behalf.
Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
```svelte
```svelte
<!--- file: App.svelte --->
<script>
<script>
/** @param {HTMLElement} node */
/** @type {import('svelte/action').Action} */
function foo(node) {
function foo(node) {
// the node has been mounted in the DOM
// the node has been mounted in the DOM
@ -421,9 +429,11 @@ An action can have a parameter. If the returned value has an `update` method, it
> Don't worry about the fact that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
> Don't worry about the fact that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
```svelte
```svelte
<!--- file: App.svelte --->
<script>
<script>
export let bar;
export let bar;
/** @type {import('svelte/action').Action} */
function foo(node, bar) {
function foo(node, bar) {
// the node has been mounted in the DOM
// the node has been mounted in the DOM
@ -505,6 +515,7 @@ The `t` argument passed to `css` is a value between `0` and `1` after the `easin
The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.
The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.
```svelte
```svelte
<!--- file: App.svelte --->
<script>
<script>
import { elasticOut } from 'svelte/easing';
import { elasticOut } from 'svelte/easing';
@ -717,12 +728,15 @@ The function is called repeatedly _before_ the animation begins, with different
<!-- TODO: Types -->
<!-- TODO: Types -->
```svelte
```svelte
<!--- file: App.svelte --->
<script>
<script>
import { cubicOut } from 'svelte/easing';
import { cubicOut } from 'svelte/easing';
/**
/**
* @param {HTMLElement} node
* @param {HTMLElement} node
* @param {{ from: DOMRect, to: DOMRect }} states
* @param {Object} states
* @param {DOMRect} states.from
* @param {DOMRect} states.to
* @param {any} params
* @param {any} params
*/
*/
function whizz(node, { from, to }, params) {
function whizz(node, { from, to }, params) {
@ -755,7 +769,9 @@ A custom animation function can also return a `tick` function, which is called _
@ -19,6 +19,7 @@ Function that creates a store which has values that can be set from 'outside' co
`update` is a method that takes one argument which is a callback. The callback takes the existing store value as its argument and returns the new value to be set to the store.
`update` is a method that takes one argument which is a callback. The callback takes the existing store value as its argument and returns the new value to be set to the store.
```js
```js
/// file: store.js
import { writable } from 'svelte/store';
import { writable } from 'svelte/store';
const count = writable(0);
const count = writable(0);
@ -60,6 +61,7 @@ Note that the value of a `writable` is lost when it is destroyed, for example wh
Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.
Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.
Generally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. `get` allows you to do so.
Generally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. `get` allows you to do so.
> This works by creating a subscription, reading the value, then unsubscribing. It's therefore not recommended in hot code paths.
> This works by creating a subscription, reading the value, then unsubscribing. It's therefore not recommended in hot code paths.
- `js` and `css` are objects with the following properties:
- `js` and `css` are objects with the following properties:
@ -151,22 +140,12 @@ compiled: {
> EXPORT_SNIPPET: svelte/compiler#parse
> EXPORT_SNIPPET: svelte/compiler#parse
```js
ast: object = svelte.parse(
source: string,
options?: {
filename?: string,
customElement?: boolean
}
)
```
The `parse` function parses a component, returning only its abstract syntax tree. Unlike compiling with the `generate: false` option, this will not perform any validation or other analysis of the component beyond parsing it. Note that the returned AST is not considered public API, so breaking changes could occur at any point in time.
The `parse` function parses a component, returning only its abstract syntax tree. Unlike compiling with the `generate: false` option, this will not perform any validation or other analysis of the component beyond parsing it. Note that the returned AST is not considered public API, so breaking changes could occur at any point in time.
The `preprocess` function provides convenient hooks for arbitrarily transforming component source code. For example, it can be used to convert a `<style lang="sass">` block into vanilla CSS.
The `preprocess` function provides convenient hooks for arbitrarily transforming component source code. For example, it can be used to convert a `<style lang="sass">` block into vanilla CSS.
The first argument is the component source code. The second is an array of _preprocessors_ (or a single preprocessor, if you only have one), where a preprocessor is an object with `markup`, `script` and `style` functions, each of which is optional.
The first argument is the component source code. The second is an array of _preprocessors_ (or a single preprocessor, if you only have one), where a preprocessor is an object with `markup`, `script` and `style` functions, each of which is optional.
@ -215,10 +167,10 @@ The `markup` function receives the entire component source text, along with the
> Preprocessor functions should additionally return a `map` object alongside `code` and `dependencies`, where `map` is a sourcemap representing the transformation.
> Preprocessor functions should additionally return a `map` object alongside `code` and `dependencies`, where `map` is a sourcemap representing the transformation.
Multiple preprocessors can be used together. The output of the first becomes the input to the second. `markup` functions run first, then `script` and `style`.
Multiple preprocessors can be used together. The output of the first becomes the input to the second. `markup` functions run first, then `script` and `style`.
The `walk` function provides a way to walk the abstract syntax trees generated by the parser, using the compiler's own built-in instance of [estree-walker](https://github.com/Rich-Harris/estree-walker).
The `walk` function provides a way to walk the abstract syntax trees generated by the parser, using the compiler's own built-in instance of [estree-walker](https://github.com/Rich-Harris/estree-walker).
The walker takes an abstract syntax tree to walk and an object with two optional methods: `enter` and `leave`. For each node, `enter` is called (if present). Then, unless `this.skip()` is called during `enter`, each of the children are traversed, and then `leave` is called on the node.
The walker takes an abstract syntax tree to walk and an object with two optional methods: `enter` and `leave`. For each node, `enter` is called (if present). Then, unless `this.skip()` is called during `enter`, each of the children are traversed, and then `leave` is called on the node.
```js
```js
import svelte from 'svelte/compiler';
import { walk } from 'svelte/compiler';
svelte.walk(ast, {
walk(ast, {
enter(node, parent, prop, index) {
enter(node, parent, prop, index) {
do_something(node);
do_something(node);
if (should_skip_children(node)) {
if (should_skip_children(node)) {
@ -347,6 +292,6 @@ svelte.walk(ast, {
The current version, as set in package.json.
The current version, as set in package.json.
```js
```js
import svelte from 'svelte/compiler';
import { VERSION } from 'svelte/compiler';
console.log(`running svelte version ${svelte.VERSION}`);
Puru Vijay
3 years ago