<script{{#if typescript}} lang="ts"{{/if}}>
	import { onDestroy } from 'svelte';
	import { browser } from '$app/environment';

	{{#if typescript}}
	import { defaultConfig } from '../../_standalone/{{componentName}}/config';
	{{else}}
	import { defaultConfig } from '../../_standalone/{{componentName}}/config.js';
	{{/if}}

	const initScript = () => {
		if (browser) {
			if (window) {
				window.{{componentName}}.start(defaultConfig);
			}
		}
	};

	const stopScript = () => {
		if (browser) {
			if (window) {
				window.{{componentName}}.stop();
			}
		}
	};

	onDestroy(() => {
		stopScript();
	})
</script>

<svelte:head>
	<script type="module" src="/src/_standalone/{{componentName}}/embed{{#if typescript}}.ts{{else}}.js{{/if}}"></script>
</svelte:head>

<main>
	<button
		on:click={initScript}>init {{componentName}} script</button
	>
	<button
		on:click={stopScript}>stop {{componentName}} script</button
	>
	<p>defaultConfig: {JSON.stringify(defaultConfig)}</p>
</main>
