Svelteで作るWebComponents / svelte-web-components

Vue.js Night #1
https://giftee.connpass.com/event/150145/
にて発表した資料です。

1. SvelteͰ࡞Δ WebComponents @yashi848484
2. ࣗݾ঺հ • Twitter: @yashi848484 • Like: WebϑϩϯτΤϯυ • Love: ΀Α΀Α • Recent troubles: ཱྀߦؼࠃศɺ୆෩Ͱܽߤ
3. ຊ೔఻͍͑ͨ͜ͱ • Svelteͱ͸Ͳ͏͍͏frameworkͳͷ͔ • ֤छframeworkʹґଘ͠ͳ͍ܗͰcomponentΛ࡞Δ ͱɺ༷ʑͳϓϩμΫτͰcomponentΛڞ༗Ͱ͖ͯศ རͦ͏
4. ࡞ͬͨ΋ͷ • SvelteͰcustom elements(WebComponents)Λ࡞ͬͨ • ࡞ͬͨcustom elementsΛɺVue applicationͱReact applicationͷ྆ํͰ࢖ͬͯΈͨ
5. Svelteͱ͸ • https://svelte.dev/ • svélt: ͢ΒΓͱͨ͠ɺ͢ΜͳΓͱͨ͠ • .svelteίʔυΛɺjsʹม׵͢ΔίϯύΠϥ • (ࠓճ͸ɺ.svelte→custom elementsͱͯ͠ు͖ग़͢ ܗͰ࢖༻)
6. Svelteͱ͸ • ίʔυྔগͳ͘ॻ͚Δ͜ͱΛ໨తͱ͍ͯ͠Δ • Virtual DOMΛ࢖ΘͣɺDOMΛ௚઀ॻ͖׵͑ΔΞϓ ϩʔν • ࣮ߦ࣌ͷύϑΥʔϚϯε͕ྑ͍ɺͱݴΘΕ͍ͯΔ
7. Svelteͱ͸ • ύϑΥʔϚϯεʹؔͯ͠ɺVue΍Reactͱൺֱ͞ΕΔ ͜ͱ͕ଟ͍ • →jQuery౳ͱൺֱ͢Δ΄͏͕ϕλʔʁ
8. <template> <h1>Hello {{ name }}</h1> </template> <script> export default { data() { return { name: "world" }; } }; </script> <script> let name = "world"; </script> <h1>Hello {name}</h1> 7VF 4WFMUF Svelte syntax
9. <template> <h1>Hello world</h1> </template> <style scoped> h1 { color: red; } </style> <style> h1 { color: red; } </style> <h1>Hello world </h1> Svelte syntax 7VF 4WFMUF
10. <template> <div> <div>count: {{ count }}</div> <button @click="handleClick"> button</button> </div> </template> <script> export default { data() { return { count: 0 }; }, methods: { handleClick() { this.count += 1; } } }; </script> <script> let count = 0; function handleClick() { count += 1; } </script> <div>count: {count}</div> <button on:click={handleClick} >button</button> Svelte syntax 7VF 4WFMUF
11. Svelte syntax • data binding, style binding • if, eachͳͲͷϒϩοΫ • slot • ϥΠϑαΠΫϧϝιου • (؆қతͳ)store • transition, animation • (ҰԠ)contextAPI
12. WebComponents • ࠶ར༻ՄೳͳಠࣗͷΧελϜཁૉΛ࡞੒͠ɺ͜ΕΛ ΢ΣϒΞϓϦ಺Ͱར༻͢ΔͨΊͷٕज़ • Custom elements • Shadow DOM • HTML templates • HTML imports←ഇࢭ
13. Demo
14. <script> export let title = "Svelte Card"; export let message = "This is card component created by svelte"; let selected = false; function handleOnClick() { selected = !selected; } </script> <style> /* লུ */ </style> <svelte:options tag="svelte-card" /> <div class="card" class:selected on:click={handleOnClick}> <div class="card-title">{title}</div> <div class="card-body">{message}</div> <slot name="footer" /> </div> Svelte CustomElement
15. <template> <div class="container"> <h1>Svelte x {{ name }}</h1> <div class="content-wrapper"> <template v-for="card in cards"> <svelte- card :title="card.title" :message="card.message" :key="car d.id"> <svelte-button slot="footer" @click="handleButtonOnClick" ></svelte-button> </svelte-card> </template> </div> </div> </template> <script> import "../public/svelte-elements"; WebComponents in Vue
16. return ( <div className="container"> <h1>Svelte x {props.name}</h1> <div className="content-wrapper"> {cards.map((card, i) => ( <svelte- card title={card.title} message={card.message} key= {i}> <svelte-button slot="footer" onClick={handleButtonOnClick} ></svelte-button> </svelte-card> ))} </div> </div> ); WebComponents in React
17. ྑͦ͞͏ͳͱ͜Ζ • Svelte͸ɺsyntax͕Vueʹࣅ͍ͯΔ ɹˠVue.jsΛॻ͍͍ͯΔਓͰ͋Ε͹ɺΩϟονΞοϓ͸ָͦ͏ • ͔ͭɺΑΓίʔυྔগͳ͘ॻ͘͜ͱ͕Ͱ͖Δ • طʹVueͱReactͷϓϩμΫτ͕͋Γɺޙ͔ΒσβΠϯͷ౷Ұ ԽΛਤΓ͍ͨ৔߹ͳͲʹWebComponents͸ศརͦ͏
18. ՝୊ • SvelteʹΑΔcustom elementsు͖ग़͠͸ɺSvelteͷ͓·͚ػೳ ɹˠΞϓϦέʔγϣϯ࡞੒༻్ͰਅՁΛൃشͰ͖Δ⭕ • Svelte͸TypeScriptະαϙʔτ ɹˠࠓޙαϙʔτ͞ΕΔ༧ఆ • WebComponentsॳΊͯ࢖ͬͨͷͰɺࠓޙ஌ࣝΛਂΊ͍͖͍ͯͨ
19. Source https://github.com/yashi8484/svelte-custom-elements
20. Thank you!