msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

restructure

Browse Source
pull/2986/head
Richard Harris 6 years ago
parent f42bb4c7fd
commit 570098e8dd
2 changed files with 181 additions and 176 deletions
Show Stats Download Patch File Download Diff File

341
site/content/docs/02-template-syntax.md
Unescape View File

@ -101,27 +101,7 @@ Text can also contain JavaScript expressions:
``` ```
### HTML expressions ### `{#if ...}`
```sv
{@html expression}
```
---
In a text expression, characters like `<` and `>` are escaped. With HTML expressions, they're not.
> Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an XSS vulnerability.
```html
<div class="blog-post">
<h1>{post.title}</h1>
{@html post.content}
</div>
```
### If blocks
```sv ```sv
{#if expression}...{/if} {#if expression}...{/if}
@ -158,7 +138,7 @@ Additional conditions can be added with `{:else if expression}`, optionally endi
``` ```
### Each blocks ### `{#each ...}`
```sv ```sv
{#each expression as name}...{/each} {#each expression as name}...{/each}
@ -229,7 +209,7 @@ An each block can also have an `{:else}` clause, which is rendered if the list i
``` ```
### Await blocks ### `{#await ...}`
```sv ```sv
{#await expression}...{:then name}...{:catch name}...{/await} {#await expression}...{:then name}...{:catch name}...{/await}
@ -283,7 +263,77 @@ If you don't care about the pending state, you can also omit the initial block.
``` ```
### DOM events (on:eventname) ### `{@html ...}`
```sv
{@html expression}
```
---
In a text expression, characters like `<` and `>` are escaped. With HTML expressions, they're not.
> Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an XSS vulnerability.
```html
<div class="blog-post">
<h1>{post.title}</h1>
{@html post.content}
</div>
```
### `{@debug ...}`
```sv
{@debug}
```
```sv
{@debug var1, var2, ..., varN}
```
---
The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
It accepts a comma-separated list of variable names (not arbitrary expressions).
```html
<script>
let user = {
firstname: 'Ada',
lastname: 'Lovelace'
};
</script>
{@debug user}
<h1>Hello {user.firstname}!</h1>
```
---
`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
```html
<!-- Compiles -->
{@debug user}
{@debug user1, user2, user3}
<!-- WON'T compile -->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}
```
The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when *any* state changes, as opposed to the specified variables.
### Element directives
#### on:*event*
```sv ```sv
on:eventname={handler} on:eventname={handler}
@ -370,29 +420,7 @@ It's possible to have multiple event listeners for the same event:
<button on:click={increment} on:click={track}>Click me!</button> <button on:click={increment} on:click={track}>Click me!</button>
``` ```
### Component events (on:eventname) #### bind:*name*
```sv
on:eventname={handler}
```
---
Components can emit events using [createEventDispatcher](docs#createEventDispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
```html
<SomeComponent on:whatever={handler}/>
```
---
As with DOM events, if the `on:` directive is used without a value, the component will *forward* the event, meaning that a consumer of the component can listen for it.
```html
<SomeComponent on:whatever/>
```
### Element bindings (bind:property)
```sv ```sv
bind:property={variable} bind:property={variable}
@ -436,7 +464,7 @@ Numeric input values are coerced; even though `input.value` is a string as far a
<input type="range" bind:value={num}> <input type="range" bind:value={num}>
``` ```
#### Binding related elements (bind:group) #### `bind:group`
--- ---
@ -460,6 +488,28 @@ Inputs that work together can use `bind:group`.
<input type="checkbox" bind:group={fillings} value="Guac (extra)"> <input type="checkbox" bind:group={fillings} value="Guac (extra)">
``` ```
#### `bind:this` (elements)
---
To get a reference to a DOM node, use `bind:this`.
```html
<script>
import { onMount } from 'svelte';
let canvasElement;
onMount(() => {
const ctx = canvasElement.getContext('2d');
drawStuff(ctx);
});
</script>
<canvas bind:this={canvasElement}></canvas>
```
#### Binding `<select>` value #### Binding `<select>` value
--- ---
@ -550,63 +600,8 @@ Block-level elements have 4 readonly bindings, measured using a technique simila
</div> </div>
``` ```
#### Binding a DOM node (bind:this)
---
To get a reference to a DOM node, use `bind:this`.
```html
<script>
import { onMount } from 'svelte';
let canvasElement;
onMount(() => {
const ctx = canvasElement.getContext('2d');
drawStuff(ctx);
});
</script>
<canvas bind:this={canvasElement}></canvas>
```
### Component bindings (bind:property) #### `class:`
```sv
bind:property={variable}
```
```sv
bind:this={component_instance}
```
---
You can bind to component props using the same mechanism.
```html
<Keypad bind:value={pin}/>
```
#### Binding a component instance (bind:this)
---
Components also support `bind:this`, allowing you to interact with component instances programmatically.
> Note that we can't do `{cart.empty}` since `cart` is `undefined` when the button is first rendered and throws an error.
```html
<ShoppingCart bind:this={cart}/>
<button on:click={() => cart.empty()}>
Empty shopping cart
</button>
```
### Class directive (class:name)
```sv ```sv
class:name={value} class:name={value}
@ -632,7 +627,7 @@ A `class:` directive provides a shorter way of toggling a class on an element.
``` ```
### Use directive (use:action) #### `use:`
```sv ```sv
use:action use:action
@ -697,7 +692,7 @@ An action can have parameters. If the returned value has an `update` method, it
``` ```
### Transitions (transition/in/out:name) #### `transition:`/`in:`/`out:`
```sv ```sv
transition:name transition:name
@ -777,7 +772,7 @@ The `in:` and `out:` directives are not bidirectional. An in transition will con
> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](docs#Client-side_component_API). > By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](docs#Client-side_component_API).
#### Transition parameters ##### Transition parameters
--- ---
@ -793,7 +788,7 @@ Like actions, transitions can have parameters.
{/if} {/if}
``` ```
#### Custom transition functions ##### Custom transition functions
--- ---
@ -869,7 +864,7 @@ A custom transition function can also return a `tick` function, which is called
If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](tutorial/deferred-transitions) possible. If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](tutorial/deferred-transitions) possible.
#### Transition events ##### Transition events
--- ---
@ -913,7 +908,7 @@ Local transitions only play when the block they belong to is created or destroye
``` ```
### Animations (animate:name) #### `animate:`
```sv ```sv
animate:name animate:name
@ -959,7 +954,7 @@ Animations can be used with Svelte's [built-in animation functions](docs#svelte_
{/each} {/each}
``` ```
#### Animation Parameters ##### Animation Parameters
--- ---
@ -973,7 +968,7 @@ As with actions and transitions, animations can have parameters.
{/each} {/each}
``` ```
#### Custom animation functions ##### Custom animation functions
--- ---
@ -1047,9 +1042,68 @@ A custom animation function can also return a `tick` function, which is called *
{/each} {/each}
``` ```
### Component directives
#### on:*event* <span hidden>components</span>
```sv
on:eventname={handler}
```
---
Components can emit events using [createEventDispatcher](docs#createEventDispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
### &lt;slot&gt; ```html
<SomeComponent on:whatever={handler}/>
```
---
As with DOM events, if the `on:` directive is used without a value, the component will *forward* the event, meaning that a consumer of the component can listen for it.
```html
<SomeComponent on:whatever/>
```
#### bind:*property* <span hidden>components</span>
```sv
bind:property={variable}
```
---
You can bind to component props using the same mechanism.
```html
<Keypad bind:value={pin}/>
```
#### `bind:this` <span hidden>components</span>
```sv
bind:this={component_instance}
```
---
Components also support `bind:this`, allowing you to interact with component instances programmatically.
> Note that we can't do `{cart.empty}` since `cart` is `undefined` when the button is first rendered and throws an error.
```html
<ShoppingCart bind:this={cart}/>
<button on:click={() => cart.empty()}>
Empty shopping cart
</button>
```
### `<slot>`
```sv ```sv
<slot><!-- optional fallback --></slot> <slot><!-- optional fallback --></slot>
@ -1150,7 +1204,7 @@ Named slots can also expose values. The `let:` directive goes on the element wit
``` ```
### &lt;svelte:self&gt; ### `<svelte:self>`
--- ---
@ -1171,7 +1225,7 @@ It cannot appear at the top level of your markup; it must be inside an if or eac
{/if} {/if}
``` ```
### &lt;svelte:component&gt; ### `<svelte:component>`
```sv ```sv
<svelte:component this={expression}> <svelte:component this={expression}>
@ -1188,7 +1242,7 @@ If `this` is falsy, no component is rendered.
``` ```
### &lt;svelte:window&gt; ### `<svelte:window>`
```sv ```sv
<svelte:window on:event={handler}/> <svelte:window on:event={handler}/>
@ -1230,7 +1284,7 @@ All except `scrollX` and `scrollY` are readonly.
``` ```
### &lt;svelte:body&gt; ### `<svelte:body>`
```sv ```sv
<svelte:body on:event={handler}/> <svelte:body on:event={handler}/>
@ -1248,7 +1302,7 @@ As with `<svelte:window>`, this element allows you to add listeners to events on
``` ```
### &lt;svelte:head&gt; ### `<svelte:head>`
```sv ```sv
<svelte:head> <svelte:head>
@ -1265,7 +1319,7 @@ This element makes it possible to insert elements into `document.head`. During s
``` ```
### &lt;svelte:options&gt; ### `<svelte:options>`
```sv ```sv
<svelte:options option={value}> <svelte:options option={value}>
@ -1284,51 +1338,4 @@ The `<svelte:options>` element provides a place to specify per-component compile
```html ```html
<svelte:options tag="my-custom-element"/> <svelte:options tag="my-custom-element"/>
``` ```
### @debug
```sv
{@debug}
```
```sv
{@debug var1, var2, ..., varN}
```
---
The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
It accepts a comma-separated list of variable names (not arbitrary expressions).
```html
<script>
let user = {
firstname: 'Ada',
lastname: 'Lovelace'
};
</script>
{@debug user}
<h1>Hello {user.firstname}!</h1>
```
---
`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
```html
<!-- Compiles -->
{@debug user}
{@debug user1, user2, user3}
<!-- WON'T compile -->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}
```
The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when *any* state changes, as opposed to the specified variables.

16
site/src/routes/docs/_sections.js
Unescape View File

@ -111,15 +111,13 @@ export default function() {
const slug = makeSlug(rawtext); const slug = makeSlug(rawtext);
if (level === 3 || level === 4) { if (level === 3 || level === 4) {
const title = unescape( const title = text
text .replace(/<\/?code>/g, '')
.replace(/<\/?code>/g, '') .replace(/\.(\w+)(\((.+)?\))?/, (m, $1, $2, $3) => {
.replace(/\.(\w+)(\((.+)?\))?/, (m, $1, $2, $3) => { if ($3) return `.${$1}(...)`;
if ($3) return `.${$1}(...)`; if ($2) return `.${$1}()`;
if ($2) return `.${$1}()`; return `.${$1}`;
return `.${$1}`; });
})
);
subsections.push({ slug, title, level }); subsections.push({ slug, title, level });
} }

Write Preview
Loading…
Cancel
Save