tanhauhau/Component.svelte

## Component.svelte
<script>
	import { createEventDispatcher } from 'svelte';
	import { getContext } from 'svelte';
	import { fade } from 'svelte/transition';

	const dispatch = createEventDispatcher();

	export let a = 1;
	export let b = 1;

	export function reset() {
		a = 1;
		b = 1;
	}

	$: product = a * b;
	$: dispatch('product', { product, a, b })

	const c = getContext('c');
	let d = true;
</script>

<input type="checkbox" bind:checked={d} />

<!-- {#if d} -->
	<div transition:fade style="display: grid; grid-template-columns: 10px 230px; align-items: center; gap: 5px;">
		<div style="grid-column: 2 / 3;">
			<button on:click={() => a-=5}>-</button>
			<input type="number" bind:value={a} />
			<button on:click={() => a+=5}>+</button>
		</div>
		<div>
			X
		</div>
		<div>
			<button on:click={() => b-=5}>-</button>
			<input type="number" bind:value={b} />
			<button on:click={() => b+=5}>+</button>
		</div>
		<div>=</div>
		<div style="text-align: right;">{product}</div>
	</div>

	C: {c}
<!-- {/if} -->

<style>
	input, button {
		margin: 0;
	}
</style>

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>Svelte app</title>

	<link rel='icon' type='image/png' href='/favicon.png'>
	<link rel='stylesheet' href='/global.css'>
	<link rel='stylesheet' href='/build/bundle.css'>

	<script defer src='/build/bundle.js'></script>
</head>

<body>
	<h1>Hello Component API</h1>
	<main></main>
	<button id="random">Randomize</button>
	<button id="reset">Reset</button>
	<button id="destroy">Destroy</button>
	<footer>Examples prepared by lihautan</footer>
</body>
</html>

## main.js
import Component from './Component.svelte';

const component = new Component({
  target: document.body,
  anchor: document.querySelector('footer'),
  props: {
    a: 5,
    b: 10,
  },
  context: new Map([['c', 20]]),
  intro: true,
});

document.querySelector('#random')
	.addEventListener('click', function () {
  	component.$set({
			a: Math.floor(Math.random() * 100),
			b: Math.floor(Math.random() * 100)
		})
	});

document.querySelector('#reset')
	.addEventListener('click', function () {
  	component.reset();
	});

document.querySelector('#destroy')
	.addEventListener('click', function () {
  	component.$destroy();
	});

component.$on('product', (event) => {
	console.log('product event', event.detail)
})

// import App from './App.svelte';

// var app = new App({
// 	target: document.body
// });

// export default app;
	<script>
	import { createEventDispatcher } from 'svelte';
	import { getContext } from 'svelte';
	import { fade } from 'svelte/transition';

	const dispatch = createEventDispatcher();

	export let a = 1;
	export let b = 1;

	export function reset() {
	a = 1;
	b = 1;
	}

	$: product = a * b;
	$: dispatch('product', { product, a, b })

	const c = getContext('c');
	let d = true;
	</script>

	<input type="checkbox" bind:checked={d} />

	<!-- {#if d} -->
	<div transition:fade style="display: grid; grid-template-columns: 10px 230px; align-items: center; gap: 5px;">
	<div style="grid-column: 2 / 3;">
	<button on:click={() => a-=5}>-</button>
	<input type="number" bind:value={a} />
	<button on:click={() => a+=5}>+</button>
	</div>
	<div>
	X
	</div>
	<div>
	<button on:click={() => b-=5}>-</button>
	<input type="number" bind:value={b} />
	<button on:click={() => b+=5}>+</button>
	</div>
	<div>=</div>
	<div style="text-align: right;">{product}</div>
	</div>

	C: {c}
	<!-- {/if} -->

	<style>
	input, button {
	margin: 0;
	}
	</style>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>Svelte app</title>

	<link rel='icon' type='image/png' href='/favicon.png'>
	<link rel='stylesheet' href='/global.css'>
	<link rel='stylesheet' href='/build/bundle.css'>

	<script defer src='/build/bundle.js'></script>
	</head>

	<body>
	<h1>Hello Component API</h1>
	<main></main>
	<button id="random">Randomize</button>
	<button id="reset">Reset</button>
	<button id="destroy">Destroy</button>
	<footer>Examples prepared by lihautan</footer>
	</body>
	</html>
	import Component from './Component.svelte';

	const component = new Component({
	target: document.body,
	anchor: document.querySelector('footer'),
	props: {
	a: 5,
	b: 10,
	},
	context: new Map([['c', 20]]),
	intro: true,
	});

	document.querySelector('#random')
	.addEventListener('click', function () {
	component.$set({
	a: Math.floor(Math.random() * 100),
	b: Math.floor(Math.random() * 100)
	})
	});

	document.querySelector('#reset')
	.addEventListener('click', function () {
	component.reset();
	});

	document.querySelector('#destroy')
	.addEventListener('click', function () {
	component.$destroy();
	});

	component.$on('product', (event) => {
	console.log('product event', event.detail)
	})

	// import App from './App.svelte';

	// var app = new App({
	// target: document.body
	// });

	// export default app;