svelte/use
svelteのディレクティブの1つ。use:{{関数名}}で対象の要素が作成されたときに指定した関数を実行する
例
code:html
<div id='map' use:mapInit></div>
うれしさ
こんな感じにも書ける
DOMが作成される前までmapElemがundefinedになるので、Mapを初期化する前にtypeofを書く必要がある
bind:thisは推奨されない
code:svelte
<script lang='ts'>
const map = $state<maplibre.Map>();
let mapElem = $state<HTMLElement>();
onMount(() => {
if (typeof mapElem === 'undefined') return;
map = new maplibre.Map({
container: mapElem
})
});
</script>
<div bind:this={mapElem}></div>
恐らく、useとbind（$bindable）を使えばシュッと書ける？
code:map.svelte
<script lang='ts'>
const {map = $bindable()} = $props();
const mapInit = (node) => {
$effect(() => { // onMount使えないのかなあ
map = new maplibre.Map({
container: node
});
return () => {
map.remove();
}
});
}
</script>
<div use:mapInit bind:map></div>
code:+page.svelte
<script lang='ts'>
import Map from '$lib/Map.svelte';
const map = $state<maplibre.Map>();
</script>
<Map bind:map />
svelte 5.xからはattachmentが推奨されるようになった