Change svelte example

Author: pomber

packages/storybook/src/assets/steps.svelte.mdx

@@ -1,12 +1,12 @@
 <StepHead>
 
 ```svelte App.svelte
-<h1>Hello Svelte</h1>
+<h1>Svelte</h1>
 ```
 
 </StepHead>
 
-^0
+Svelte uses a custom file format, similar to HTML
 
 <StepHead>
 
@@ -15,16 +15,57 @@
   let name = "Svelte"
 </script>
 
-<h1>{name}</h1>
+<h1>Hello {name}</h1>
 ```
 
 </StepHead>
 
-^1
+You can use curly braces to render data.
 
 <StepHead>
 
 ```svelte App.svelte
+
+```
+
+---
+
+```svelte MyComponent.svelte
+<div>
+  <button>Hello</button>
+</div>
+```
+
+</StepHead>
+
+Each svelte file is a different component
+
+<StepHead>
+
+```svelte App.svelte focus=2,5,6
+<script>
+  import MyComponent from './MyComponent.svelte'
+</script>
+
+<MyComponent />
+<MyComponent />
+```
+
+---
+
+```svelte MyComponent.svelte focus=2[1]
+<div>
+  <button>Hello</button>
+</div>
+```
+
+</StepHead>
+
+You can add imports inside the script tag
+
+<StepHead>
+
+```svelte App.svelte focus=5[14:26],6[14:28]
 <script>
   import MyComponent from './MyComponent.svelte'
 </script>
@@ -33,19 +74,32 @@
 <MyComponent name="Ronaldo" />
 ```
 
+---
+
+```svelte MyComponent.svelte focus=2[1]
+<div>
+  <button>Hello</button>
+</div>
+```
+
 </StepHead>
 
-^2
+To share data with children components
 
 <StepHead>
 
-```svelte App.svelte focus=2
+```svelte App.svelte focus=5[14:26],6[14:28]
+<script>
+  import MyComponent from './MyComponent.svelte'
+</script>
 
+<MyComponent name="Messi" />
+<MyComponent name="Ronaldo" />
 ```
 
 ---
 
-```svelte MyComponent.svelte
+```svelte MyComponent.svelte focus=2,6
 <script>
   export let name;
 </script>
@@ -57,45 +111,47 @@
 
 </StepHead>
 
-^3 Each svelte file is a different component
+you can create props using the export keyword
 
 <StepHead>
 
-```svelte App.svelte
-
-```
-
-```svelte MyComponent.svelte focus=2 active
+```svelte MyComponent.svelte focus=3,8
 <script>
   export let name;
+  let goalCount = 2;
 </script>
 
 <div>
   <button>{name}</button>
+  {"⚽".repeat(goalCount)}
 </div>
 ```
 
 </StepHead>
 
-^4 You can declare props with the export keyword.
+Inside curly braces you can put any javascript expression
 
 <StepHead>
 
-```svelte MyComponent.svelte focus=3,8
+```svelte MyComponent.svelte focus=11[11:32]
 <script>
   export let name;
   let goalCount = 2;
+
+  function handleClick() {
+    // TODO
+  }
 </script>
 
 <div>
-  <button>{name}</button>
+  <button on:click={handleClick}>{name}</button>
   {"⚽".repeat(goalCount)}
 </div>
 ```
 
 </StepHead>
 
-^5 using js inside curly braces
+With the on directive you can listen to events
 
 <StepHead>
 
@@ -117,7 +173,7 @@
 
 </StepHead>
 
-^6 adding event handlers
+here, when the goalcount changes after a click, svelte will rerender the component (show)
 
 <StepHead>
 
@@ -143,11 +199,11 @@
 
 </StepHead>
 
-^7 firing custom events
+You can also use a custom event to share data with the parent
 
 <StepHead>
 
-```svelte App.svelte focus=4:6,9[27:42],10[29:44]
+```svelte App.svelte focus=9[27:42],10[29:44]
 <script>
   import MyComponent from './MyComponent.svelte'
 
@@ -160,123 +216,108 @@
 <MyComponent name="Ronaldo" on:goal={onGoal}/>
 ```
 
+---
+
+```svelte MyComponent.svelte focus=10
+
+```
+
 </StepHead>
 
-handling custom events
+and use the on directive again to handle it
 
 <StepHead>
 
-```svelte App.svelte focus=3,9,12
+```svelte App.svelte focus=4:6,9[27:42],10[29:44]
 <script>
   import MyComponent from './MyComponent.svelte'
-  import MyBox from './MyBox.svelte'
+
   function onGoal(event) {
     console.log(event.detail.player)
   }
 </script>
 
-<MyBox>
-  <MyComponent name="Messi" on:goal={onGoal}/>
-  <MyComponent name="Ronaldo" on:goal={onGoal}/>
-</MyBox>
-
+<MyComponent name="Messi" on:goal={onGoal}/>
+<MyComponent name="Ronaldo" on:goal={onGoal}/>
 ```
 
----
-
 </StepHead>
 
-adding style
+and do something with the data
 
 <StepHead>
 
-```svelte App.svelte focus=9,12
-
-```
-
----
-
-```svelte MyBox.svelte
-<div>
-  something
-</div>
-
-<style>
-  div {
-    border: 8px solid hotpink;
+```svelte App.svelte focus=3
+<script>
+  import MyComponent from './MyComponent.svelte'
+  const players = ['Messi', 'Ronaldo', 'Laspada']
+  function onGoal(event) {
+    console.log(event.detail.player)
   }
-</style>
-```
-
-</StepHead>
-
-...
-
-<StepHead>
-
-```svelte App.svelte focus=9,12
-
-```
-
----
-
-```svelte MyBox.svelte focus=2
-<div>
-  <slot />
-</div>
+</script>
 
-<style>
-  div {
-    border: 8px solid hotpink;
-  }
-</style>
+<MyComponent name="Messi" on:goal={onGoal}/>
+<MyComponent name="Ronaldo" on:goal={onGoal}/>
 ```
 
 </StepHead>
 
-using slot
+If you want to render a list
 
 <StepHead>
 
-```svelte App.svelte focus=4
+```svelte App.svelte focus=3,9,10[16:28],11
 <script>
   import MyComponent from './MyComponent.svelte'
-  import MyBox from './MyBox.svelte'
   const players = ['Messi', 'Ronaldo', 'Laspada']
   function onGoal(event) {
     console.log(event.detail.player)
   }
 </script>
 
-<MyBox>
-  <MyComponent name="Messi" on:goal={onGoal}/>
-  <MyComponent name="Ronaldo" on:goal={onGoal}/>
-</MyBox>
+{#each players as player}
+  <MyComponent name={player} on:goal={onGoal}/>
+{/each}
 ```
 
 </StepHead>
 
-rendering lists
+you can use the each block.
 
 <StepHead>
 
-```svelte App.svelte focus=4,11,12[18:30],13
+```svelte App.svelte focus=9:13
 <script>
   import MyComponent from './MyComponent.svelte'
-  import MyBox from './MyBox.svelte'
   const players = ['Messi', 'Ronaldo', 'Laspada']
   function onGoal(event) {
     console.log(event.detail.player)
   }
 </script>
 
-<MyBox>
-  {#each players as player}
-    <MyComponent name={player} on:goal={onGoal}/>
-  {/each}
-</MyBox>
+<style>
+  div {
+    border: 8px solid hotpink;
+  }
+</style>
+
+<div>
+{#each players as player}
+  <MyComponent name={player} on:goal={onGoal}/>
+{/each}
+</div>
+```
+
+</StepHead>
+
+Svelte also support style tags,
+
+<StepHead>
+
+```svelte App.svelte focus=10:12,15,19
+
 ```
 
 </StepHead>
 
-...
+Here the style only applies to the div from the current component and not others.