Svelete module 挙動 メモ

App.svelte

<script>
    import { onMount } from 'svelte';

    import Box, {moduleVariable} from './Box.svelte';
    console.log(moduleVariable);

    let boxone;
    let boxtwo;

    onMount(async () => {
        console.log("boxone.text", boxone.text);
        console.log("boxone.moduleVariable", boxone.moduleVariable);
        console.log("boxone.getModuleVariable()", boxone.getModuleVariable());
        console.log(Box.moduleVariable);
    });

</script>

<Box bind:this={boxone} text="Box one" moduleVariable="aaa"/>
<Box text="Box two" moduleVariable="aaa"/>

Box.svelte

<style>
    .box {
        border: solid 1px black;
    }
</style>

<script context="module">
    let count = 0;
    export let moduleVariable = "a default variable in a module context";
</script>

<svelte:options accessors={true}/>

<script>
    import { onMount } from 'svelte';

    export let text = "Empty";

    onMount(async () => {
        count += 1;
        console.log(text, count);
    });

    export function getModuleVariable() {
        return moduleVariable;
    }

    function buttonClick() {
        console.log("buttonClick");
    }
</script>

<div class="box">
    {text}, {moduleVariable}
</div>
<button on:click={buttonClick}>
    button
</button>