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