suukii/mini-vue.html

## mini-vue.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Vue</title>
</head>

<body>
    <div id="counter"></div>
    <button id="inc">inc</button>
    <script>
        const incBtn = $('#inc');
        const counterContainer = $('#counter');

        incBtn.addEventListener('click', () => {
            counter.count++;
        });

        const counter = {
            count: 1,
        };

        const counterComponent = {
            render(state) {
                return h('h1', {}, String(state.count));
            },
        };

        observe(counter);

        let oldNode = null;
        autorun(function () {
            if (oldNode) {
                const newNode = counterComponent.render(counter);
                patch(oldNode, newNode);
                oldNode = newNode;
            } else {
                oldNode = counterComponent.render(counter);
                mount(oldNode, counterContainer);
            }
        });
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Mini Vue</title>
	</head>

	<body>
	<div id="counter"></div>
	<button id="inc">inc</button>
	<script>
	const incBtn = $('#inc');
	const counterContainer = $('#counter');

	incBtn.addEventListener('click', () => {
	counter.count++;
	});

	const counter = {
	count: 1,
	};

	const counterComponent = {
	render(state) {
	return h('h1', {}, String(state.count));
	},
	};

	observe(counter);

	let oldNode = null;
	autorun(function () {
	if (oldNode) {
	const newNode = counterComponent.render(counter);
	patch(oldNode, newNode);
	oldNode = newNode;
	} else {
	oldNode = counterComponent.render(counter);
	mount(oldNode, counterContainer);
	}
	});
	</script>
	</body>

	</html>