From e28f223e6cc331f22a549ffbc50039659f0d108f Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sat, 9 Mar 2019 23:57:16 -0500 Subject: [PATCH] couple more chapters --- .../06-svelte-head/text.md | 2 +- .../07-svelte-options/app-a/App.svelte | 14 +++++++++++++ .../07-svelte-options/app-a/Square.svelte | 13 ++++++++++++ .../07-svelte-options/app-b/App.svelte | 14 +++++++++++++ .../07-svelte-options/app-b/Square.svelte | 15 ++++++++++++++ .../07-svelte-options/text.md | 20 +++++++++++++++++++ .../18-debugging/01-debug/app-a/App.svelte | 13 ++++++++++++ .../18-debugging/01-debug/app-b/App.svelte | 13 ++++++++++++ .../tutorial/18-debugging/01-debug/text.md | 15 ++++++++++++++ site/content/tutorial/18-debugging/meta.json | 3 +++ site/content/tutorial/99-todo/99-todo/text.md | 4 ++-- src/compile/nodes/Element.ts | 2 +- 12 files changed, 124 insertions(+), 4 deletions(-) create mode 100644 site/content/tutorial/16-special-elements/07-svelte-options/app-a/App.svelte create mode 100644 site/content/tutorial/16-special-elements/07-svelte-options/app-a/Square.svelte create mode 100644 site/content/tutorial/16-special-elements/07-svelte-options/app-b/App.svelte create mode 100644 site/content/tutorial/16-special-elements/07-svelte-options/app-b/Square.svelte create mode 100644 site/content/tutorial/16-special-elements/07-svelte-options/text.md create mode 100644 site/content/tutorial/18-debugging/01-debug/app-a/App.svelte create mode 100644 site/content/tutorial/18-debugging/01-debug/app-b/App.svelte create mode 100644 site/content/tutorial/18-debugging/01-debug/text.md create mode 100644 site/content/tutorial/18-debugging/meta.json 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 ?` }); }