mirror of https://github.com/sveltejs/svelte
Richard Harris
7 years ago
parent
d4c790adb4
commit
e28f223e6c
@ -0,0 +1,14 @@
|
|||||||
|
<script>
|
||||||
|
import Square from './Square.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 100 100">
|
||||||
|
<Square cx={50} cy={50} size={40} style="fill: #ff3e00"/>
|
||||||
|
</svg>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
export let cx;
|
||||||
|
export let cy;
|
||||||
|
export let size;
|
||||||
|
export let style;
|
||||||
|
|
||||||
|
$: x1 = cx - size / 2;
|
||||||
|
$: y1 = cy - size / 2;
|
||||||
|
$: x2 = x1 + size;
|
||||||
|
$: y2 = y1 + size;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<polygon points="{x1},{y1} {x2},{y1} {x2},{y2} {x1},{y2}" {style}/>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<script>
|
||||||
|
import Square from './Square.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 100 100">
|
||||||
|
<Square cx={50} cy={50} size={40} style="fill: #ff3e00"/>
|
||||||
|
</svg>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<svelte:options namespace="svg"/>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export let cx;
|
||||||
|
export let cy;
|
||||||
|
export let size;
|
||||||
|
export let style;
|
||||||
|
|
||||||
|
$: x1 = cx - size / 2;
|
||||||
|
$: y1 = cy - size / 2;
|
||||||
|
$: x2 = x1 + size;
|
||||||
|
$: y2 = y1 + size;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<polygon points="{x1},{y1} {x2},{y1} {x2},{y2} {x1},{y2}" {style}/>
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
---
|
||||||
|
title: <svelte:options>
|
||||||
|
---
|
||||||
|
|
||||||
|
Lastly, `<svelte:options>` allows you to specify compiler options.
|
||||||
|
|
||||||
|
Here, we have a component inside an `<svg>` element. Unless we tell Svelte otherwise, it will compile `Square.svelte` to a module that generates HTML nodes instead of SVG nodes. We can correct that by adding this to the top of `Square.svelte`:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<svelte:options namespace="svg"/>
|
||||||
|
```
|
||||||
|
|
||||||
|
The options that can be set here are:
|
||||||
|
|
||||||
|
* `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
|
||||||
|
* `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
|
||||||
|
* `namespace="..."` — the namespace where this component will be used, most commonly `"svg"`
|
||||||
|
* `tag="..."` — the name to use when compiling this component as a custom element
|
||||||
|
|
||||||
|
Consult the [API reference](docs) for more information on these options.
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
let user = {
|
||||||
|
firstname: 'Ada',
|
||||||
|
lastname: 'Lovelace'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input bind:value={user.firstname}>
|
||||||
|
<input bind:value={user.lastname}>
|
||||||
|
|
||||||
|
{(console.log(user), '')}
|
||||||
|
|
||||||
|
<h1>Hello {user.firstname}!</h1>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
let user = {
|
||||||
|
firstname: 'Ada',
|
||||||
|
lastname: 'Lovelace'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input bind:value={user.firstname}>
|
||||||
|
<input bind:value={user.lastname}>
|
||||||
|
|
||||||
|
{@debug user}
|
||||||
|
|
||||||
|
<h1>Hello {user.firstname}!</h1>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
---
|
||||||
|
title: The @debug tag
|
||||||
|
---
|
||||||
|
|
||||||
|
Occasionally it's useful to inspect a piece of data as it flows through your app.
|
||||||
|
|
||||||
|
One approach is to use `console.log(...)` inside your markup. If you want to pause execution, though, you can use the `{@debug ...}` tag with a comma-separated list of values you want to inspect:
|
||||||
|
|
||||||
|
```html
|
||||||
|
{@debug user}
|
||||||
|
|
||||||
|
<h1>Hello {user.firstname}!</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
If you now open your devtools and start interacting with the `<input>` elements, you'll trigger the debugger as the value of `user` changes.
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Debugging"
|
||||||
|
}
|
||||||
Loading…
Reference in new issue