nexpr/vue3-htm.html

## vue3-htm.html
<!doctype html>
<meta charset="utf-8" />

<script type="module">
	import { createApp, ref, h } from "https://unpkg.com/vue@3.3.7/dist/vue.esm-browser.js"
	import htm from "https://cdn.jsdelivr.net/npm/htm@3.1.1/mini/index.module.js"
	const html = htm.bind(
		(type, props, ...children) =>
			h(type, props, typeof type === "string" ? children : () => children)
	)

	const Component = {
		props: ["foo"],
		setup(props, { slots }) {
			return () => html`
				<div>
					<div>foo: ${props.foo}</div>
					<div>slot: ${slots.default()}</div>
				</div>
			`
		},
	}

	const App = {
		components: {
			Component,
		},
		setup() {
			const count = ref(1000)
			const text = ref("")

			return () => html`
				<div>
					<button onClick=${() => count.value++}>${count.value}</button>
					${[1, 2, 3].map(n => {
						return html`
							<div>
								<span>${n}</span>
								<input
									value=${text.value}
									onInput=${(event) => text.value = event.target.value}
								/>
							</div>
						`
					})}
					<${Component} foo=${count.value}>${text.value}</>
				</div>
			`
		},
	}

	createApp({
		components: {
			App,
		},
		setup() {
			return () => html`<${App} />`
		},
	}).mount("#root")
</script>

<div id="root"></div>
	<!doctype html>
	<meta charset="utf-8" />

	<script type="module">
	import { createApp, ref, h } from "https://unpkg.com/vue@3.3.7/dist/vue.esm-browser.js"
	import htm from "https://cdn.jsdelivr.net/npm/htm@3.1.1/mini/index.module.js"
	const html = htm.bind(
	(type, props, ...children) =>
	h(type, props, typeof type === "string" ? children : () => children)
	)

	const Component = {
	props: ["foo"],
	setup(props, { slots }) {
	return () => html`
	<div>
	<div>foo: ${props.foo}</div>
	<div>slot: ${slots.default()}</div>
	</div>
	`
	},
	}

	const App = {
	components: {
	Component,
	},
	setup() {
	const count = ref(1000)
	const text = ref("")

	return () => html`
	<div>
	<button onClick=${() => count.value++}>${count.value}</button>
	${[1, 2, 3].map(n => {
	return html`
	<div>
	<span>${n}</span>
	<input
	value=${text.value}
	onInput=${(event) => text.value = event.target.value}
	/>
	</div>
	`
	})}
	<${Component} foo=${count.value}>${text.value}</>
	</div>
	`
	},
	}

	createApp({
	components: {
	App,
	},
	setup() {
	return () => html`<${App} />`
	},
	}).mount("#root")
	</script>

	<div id="root"></div>