SvelteͰ࡞Δ WebComponents @yashi848484

ࣗݾ঺հ • Twitter: @yashi848484 • Like: WebϑϩϯτΤϯυ • Love: ΀Α΀Α • Recent troubles: ཱྀߦؼࠃศɺ୆෩Ͱܽߤ

ຊ೔఻͍͑ͨ͜ͱ • Svelteͱ͸Ͳ͏͍͏frameworkͳͷ͔ • ֤छframeworkʹґଘ͠ͳ͍ܗͰcomponentΛ࡞Δ ͱɺ༷ʑͳϓϩμΫτͰcomponentΛڞ༗Ͱ͖ͯศ རͦ͏

࡞ͬͨ΋ͷ • SvelteͰcustom elements(WebComponents)Λ࡞ͬͨ • ࡞ͬͨcustom elementsΛɺVue applicationͱReact applicationͷ྆ํͰ࢖ͬͯΈͨ

Svelteͱ͸ • https://svelte.dev/ • svélt: ͢ΒΓͱͨ͠ɺ͢ΜͳΓͱͨ͠ • .svelteίʔυΛɺjsʹม׵͢ΔίϯύΠϥ • (ࠓճ͸ɺ.svelte→custom elementsͱͯ͠ు͖ग़͢ ܗͰ࢖༻)

Svelteͱ͸ • ίʔυྔগͳ͘ॻ͚Δ͜ͱΛ໨తͱ͍ͯ͠Δ • Virtual DOMΛ࢖ΘͣɺDOMΛ௚઀ॻ͖׵͑ΔΞϓ ϩʔν • ࣮ߦ࣌ͷύϑΥʔϚϯε͕ྑ͍ɺͱݴΘΕ͍ͯΔ

Svelteͱ͸ • ύϑΥʔϚϯεʹؔͯ͠ɺVue΍Reactͱൺֱ͞ΕΔ ͜ͱ͕ଟ͍ • →jQuery౳ͱൺֱ͢Δ΄͏͕ϕλʔʁ

Hello {{ name }}

export default { data() { return { name: "world" }; } }; let name = "world";

Hello {name}

7VF 4WFMUF Svelte syntax

Hello world

h1 { color: red; } h1 { color: red; }

Hello world

Svelte syntax 7VF 4WFMUF

export default { data() { return { count: 0 }; }, methods: { handleClick() { this.count += 1; } } }; let count = 0; function handleClick() { count += 1; } button Svelte syntax 7VF 4WFMUF

Svelte syntax • data binding, style binding • if, eachͳͲͷϒϩοΫ • slot • ϥΠϑαΠΫϧϝιου • (؆қతͳ)store • transition, animation • (ҰԠ)contextAPI

WebComponents • ࠶ར༻ՄೳͳಠࣗͷΧελϜཁૉΛ࡞੒͠ɺ͜ΕΛ ΢ΣϒΞϓϦ಺Ͱར༻͢ΔͨΊͷٕज़ • Custom elements • Shadow DOM • HTML templates • HTML imports←ഇࢭ

Demo

export let title = "Svelte Card"; export let message = "This is card component created by svelte"; let selected = false; function handleOnClick() { selected = !selected; } /* লུ */ Svelte CustomElement

import "../public/svelte-elements"; WebComponents in Vue

return ( ); WebComponents in React

ྑͦ͞͏ͳͱ͜Ζ • Svelte͸ɺsyntax͕Vueʹࣅ͍ͯΔ ɹˠVue.jsΛॻ͍͍ͯΔਓͰ͋Ε͹ɺΩϟονΞοϓ͸ָͦ͏ • ͔ͭɺΑΓίʔυྔগͳ͘ॻ͘͜ͱ͕Ͱ͖Δ • طʹVueͱReactͷϓϩμΫτ͕͋Γɺޙ͔ΒσβΠϯͷ౷Ұ ԽΛਤΓ͍ͨ৔߹ͳͲʹWebComponents͸ศརͦ͏

՝୊ • SvelteʹΑΔcustom elementsు͖ग़͠͸ɺSvelteͷ͓·͚ػೳ ɹˠΞϓϦέʔγϣϯ࡞੒༻్ͰਅՁΛൃشͰ͖Δ⭕ • Svelte͸TypeScriptະαϙʔτ ɹˠࠓޙαϙʔτ͞ΕΔ༧ఆ • WebComponentsॳΊͯ࢖ͬͨͷͰɺࠓޙ஌ࣝΛਂΊ͍͖͍ͯͨ

Source https://github.com/yashi8484/svelte-custom-elements

Thank you!