diff --git a/site/content/tutorial/17-module-context/01-sharing-code/app-a/App.svelte b/site/content/tutorial/17-module-context/01-sharing-code/app-a/App.svelte new file mode 100644 index 0000000000..3c0133350a --- /dev/null +++ b/site/content/tutorial/17-module-context/01-sharing-code/app-a/App.svelte @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + diff --git a/site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte b/site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte new file mode 100644 index 0000000000..321deb8773 --- /dev/null +++ b/site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte @@ -0,0 +1,39 @@ + + + + +
+

{title}

+

{composer} / performed by {performer}

+ + +
\ No newline at end of file diff --git a/site/content/tutorial/17-module-context/01-sharing-code/app-b/App.svelte b/site/content/tutorial/17-module-context/01-sharing-code/app-b/App.svelte new file mode 100644 index 0000000000..3c0133350a --- /dev/null +++ b/site/content/tutorial/17-module-context/01-sharing-code/app-b/App.svelte @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + diff --git a/site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte b/site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte new file mode 100644 index 0000000000..27dbe1993b --- /dev/null +++ b/site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte @@ -0,0 +1,46 @@ + + + + + + +
+

{title}

+

{composer} / performed by {performer}

+ + +
\ No newline at end of file diff --git a/site/content/tutorial/17-module-context/01-sharing-code/text.md b/site/content/tutorial/17-module-context/01-sharing-code/text.md new file mode 100644 index 0000000000..9081b18dce --- /dev/null +++ b/site/content/tutorial/17-module-context/01-sharing-code/text.md @@ -0,0 +1,30 @@ +--- +title: Sharing code +--- + +In all the examples we've seen so far, the ` +``` + +It's now possible for the components to 'talk' to each other without any state management: + +```js +onMount(() => { + elements.add(audio); + return () => elements.delete(audio); +}); + +function stopOthers() { + elements.forEach(element => { + if (element !== audio) element.pause(); + }); +} +``` \ No newline at end of file diff --git a/site/content/tutorial/17-module-context/02-module-exports/app-a/App.svelte b/site/content/tutorial/17-module-context/02-module-exports/app-a/App.svelte new file mode 100644 index 0000000000..2d7d23412d --- /dev/null +++ b/site/content/tutorial/17-module-context/02-module-exports/app-a/App.svelte @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + diff --git a/site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte b/site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte new file mode 100644 index 0000000000..27dbe1993b --- /dev/null +++ b/site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte @@ -0,0 +1,46 @@ + + + + + + +
+

{title}

+

{composer} / performed by {performer}

+ + +
\ No newline at end of file diff --git a/site/content/tutorial/17-module-context/02-module-exports/app-b/App.svelte b/site/content/tutorial/17-module-context/02-module-exports/app-b/App.svelte new file mode 100644 index 0000000000..cd5ab44b21 --- /dev/null +++ b/site/content/tutorial/17-module-context/02-module-exports/app-b/App.svelte @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + diff --git a/site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte b/site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte new file mode 100644 index 0000000000..4e3d191dbf --- /dev/null +++ b/site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte @@ -0,0 +1,52 @@ + + + + + + +
+

{title}

+

{composer} / performed by {performer}

+ + +
\ No newline at end of file diff --git a/site/content/tutorial/17-module-context/02-module-exports/text.md b/site/content/tutorial/17-module-context/02-module-exports/text.md new file mode 100644 index 0000000000..d5b4b96621 --- /dev/null +++ b/site/content/tutorial/17-module-context/02-module-exports/text.md @@ -0,0 +1,35 @@ +--- +title: Exports +--- + +Anything exported from a `context="module"` script block becomes an export from the module itself. If we export a `stopAll` function from `AudioPlayer.svelte`... + +```html + +``` + +...we can then import it from `App.svelte`... + +```html + +``` + +...and use it in an event handler: + +```html + +``` + +> You can't have a default export, because the component *is* the default export. \ No newline at end of file diff --git a/site/content/tutorial/17-module-context/meta.json b/site/content/tutorial/17-module-context/meta.json new file mode 100644 index 0000000000..1a8720e2ce --- /dev/null +++ b/site/content/tutorial/17-module-context/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Module context" +} \ 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 b9d949e11f..d0eddbaa1f 100644 --- a/site/content/tutorial/99-todo/99-todo/text.md +++ b/site/content/tutorial/99-todo/99-todo/text.md @@ -68,8 +68,8 @@ Another one should cover how to set up an editor for syntax highlighting. * [x] deep/contextual bindings * [x] Dimensions * [x] `this` -* [ ] shorthand -* [ ] component bindings +* [x] shorthand +* [x] component bindings Maybe lifecycle should go first, since we're using `onMount` in the `this` demo? @@ -98,7 +98,7 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo? * [x] `onDestroy` * [x] `beforeUpdate` * [x] `afterUpdate` -* [ ] how lifecycle functions behave in SSR mode? +* [x] how lifecycle functions behave in SSR mode? ## Transitions @@ -147,18 +147,17 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo? * [x] `` * [x] `` * [x] `` +* [ ] `` -## Miscellaneous +## Module context -* [ ] Debug tags -* [ ] `context="module"` -* [ ] `tick` +* [x] sharing code +* [x] exports ---- +## Miscellaneous -## Bugs etc +* [ ] Debug tags +* [ ] `tick` -* 'Show me' should be greyed out if current state is identical to target state -* Clicking 'Show me' shouldn't change the file you're looking at \ No newline at end of file diff --git a/site/static/tutorial/music/beethoven.mp3 b/site/static/tutorial/music/beethoven.mp3 new file mode 100644 index 0000000000..3bda3ae676 Binary files /dev/null and b/site/static/tutorial/music/beethoven.mp3 differ diff --git a/site/static/tutorial/music/holst.mp3 b/site/static/tutorial/music/holst.mp3 new file mode 100644 index 0000000000..b1ba89f486 Binary files /dev/null and b/site/static/tutorial/music/holst.mp3 differ diff --git a/site/static/tutorial/music/mozart.mp3 b/site/static/tutorial/music/mozart.mp3 new file mode 100644 index 0000000000..d9a2d2781f Binary files /dev/null and b/site/static/tutorial/music/mozart.mp3 differ diff --git a/site/static/tutorial/music/satie.mp3 b/site/static/tutorial/music/satie.mp3 new file mode 100644 index 0000000000..c2488d7bb4 Binary files /dev/null and b/site/static/tutorial/music/satie.mp3 differ diff --git a/site/static/tutorial/music/strauss.mp3 b/site/static/tutorial/music/strauss.mp3 new file mode 100644 index 0000000000..db433dd35f Binary files /dev/null and b/site/static/tutorial/music/strauss.mp3 differ