diff --git a/site/content/tutorial/16-special-elements/06-svelte-head/text.md b/site/content/tutorial/16-special-elements/06-svelte-head/text.md index a6e784cb9c..22dcc7fdab 100644 --- a/site/content/tutorial/16-special-elements/06-svelte-head/text.md +++ b/site/content/tutorial/16-special-elements/06-svelte-head/text.md @@ -2,7 +2,7 @@ title: --- -Lastly, `` allows you to insert elements inside the `` of your document: +The `` element allows you to insert elements inside the `` of your document: ```html diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/App.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/App.svelte new file mode 100644 index 0000000000..e0051449ee --- /dev/null +++ b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/App.svelte @@ -0,0 +1,14 @@ + + + + + + + \ No newline at end of file diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Square.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Square.svelte new file mode 100644 index 0000000000..3019ee9542 --- /dev/null +++ b/site/content/tutorial/16-special-elements/07-svelte-options/app-a/Square.svelte @@ -0,0 +1,13 @@ + + + diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/App.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/App.svelte new file mode 100644 index 0000000000..e0051449ee --- /dev/null +++ b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/App.svelte @@ -0,0 +1,14 @@ + + + + + + + \ No newline at end of file diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Square.svelte b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Square.svelte new file mode 100644 index 0000000000..38f26d1dba --- /dev/null +++ b/site/content/tutorial/16-special-elements/07-svelte-options/app-b/Square.svelte @@ -0,0 +1,15 @@ + + + + + diff --git a/site/content/tutorial/16-special-elements/07-svelte-options/text.md b/site/content/tutorial/16-special-elements/07-svelte-options/text.md new file mode 100644 index 0000000000..8452a29a60 --- /dev/null +++ b/site/content/tutorial/16-special-elements/07-svelte-options/text.md @@ -0,0 +1,20 @@ +--- +title: +--- + +Lastly, `` allows you to specify compiler options. + +Here, we have a component inside an `` 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 + +``` + +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. \ No newline at end of file diff --git a/site/content/tutorial/18-debugging/01-debug/app-a/App.svelte b/site/content/tutorial/18-debugging/01-debug/app-a/App.svelte new file mode 100644 index 0000000000..dd2243d7ae --- /dev/null +++ b/site/content/tutorial/18-debugging/01-debug/app-a/App.svelte @@ -0,0 +1,13 @@ + + +

Hello {user.firstname}!

\ No newline at end of file diff --git a/site/content/tutorial/18-debugging/01-debug/app-b/App.svelte b/site/content/tutorial/18-debugging/01-debug/app-b/App.svelte new file mode 100644 index 0000000000..1b91ac740b --- /dev/null +++ b/site/content/tutorial/18-debugging/01-debug/app-b/App.svelte @@ -0,0 +1,13 @@ + + + + + +{@debug user} + +

Hello {user.firstname}!

\ No newline at end of file diff --git a/site/content/tutorial/18-debugging/01-debug/text.md b/site/content/tutorial/18-debugging/01-debug/text.md new file mode 100644 index 0000000000..8c9f59d082 --- /dev/null +++ b/site/content/tutorial/18-debugging/01-debug/text.md @@ -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} + +

Hello {user.firstname}!

+``` + +If you now open your devtools and start interacting with the `` elements, you'll trigger the debugger as the value of `user` changes. \ No newline at end of file diff --git a/site/content/tutorial/18-debugging/meta.json b/site/content/tutorial/18-debugging/meta.json new file mode 100644 index 0000000000..5eeed281d3 --- /dev/null +++ b/site/content/tutorial/18-debugging/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Debugging" +} \ No newline at end of file diff --git a/site/content/tutorial/99-todo/99-todo/text.md b/site/content/tutorial/99-todo/99-todo/text.md index fd654cbacc..63306aceae 100644 --- a/site/content/tutorial/99-todo/99-todo/text.md +++ b/site/content/tutorial/99-todo/99-todo/text.md @@ -148,7 +148,7 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo? * [x] `` * [x] `` * [x] `` -* [ ] `` +* [x] `` ## Module context @@ -159,4 +159,4 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo? ## Miscellaneous -* [ ] Debug tags \ No newline at end of file +* [x] Debug tags \ No newline at end of file diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts index 33d84b2009..9f0bc6cb10 100644 --- a/src/compile/nodes/Element.ts +++ b/src/compile/nodes/Element.ts @@ -101,7 +101,7 @@ export default class Element extends Node { if (!this.namespace && svg.test(this.name)) { this.component.warn(this, { code: `missing-namespace`, - message: `<${this.name}> is an SVG element – did you forget to add { namespace: 'svg' } ?` + message: `<${this.name}> is an SVG element – did you forget to add ?` }); }