Exportable component functions.

[0x1618]

Hello I wonder if it is possible to export a function from one component to another.

Component A:

<script>
	let isVisible = $state(true);

	const makeInvisible = () => (isVisible = false)
</script>

{#if isVisible}
	I'm visible.
{/if}

Component B:

<script lang="ts">
	import ComponentA from "ComponentA.svelte"
</script>

<ComponentA />

<button onclick={makeInvisible}>Make component invisible!</button> // Run makeInvisible from Component A.

[brunnerh]

You can export functions, they will be exposed on the component instance, e.g.

export const makeInvisible = () => (isVisible = false)

<script>
	import ComponentA from "./ComponentA.svelte"

	let instance = $state();
</script>

<ComponentA bind:this={instance}/>

<button onclick={() => instance.makeInvisible()}>
	Make component invisible!
</button>

Playground

There also is the <script module>, which you can export things from, but they will not have access to any component instance data. Exports from there are named exports of the component module.

import Component, { functionA, functionB, /* ... */ } from './component.svelte';

Playground

[0x1618]

Works perfect, thanks.