barelyhuman · June 19, 2025 07:10
diff --git a/*toy.md b/*toy.md
diff --git a/h.js b/h.js
 import {
    classModule,
    eventListenersModule,
    h,
    init as initDOM,
    propsModule,
    styleModule,
 } from "https://esm.sh/snabbdom";

 export { h };

 const patch = initDOM([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
 ]);

 export function init(
    model,
    update,
    view,
    mountTo,
 ) {
    const initialModel = model();
    const container = mountTo();

    let prevView;
    const createDispatcher = (baseState) => (msg, payload) => {
        const state = update(msg, payload, { ...baseState });
        const nextView = view(state, createDispatcher(state));
        patch(prevView, nextView);
        prevView = nextView;
    };

    prevView = view(initialModel, createDispatcher(initialModel));
    patch(container, prevView);
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" />
 </head>
 <body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
    <script src="./index.js" type="module"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
 import { h, init } from "./h.js";

 function model() {
    return {
        count: 0,
    };
 }

 function view(state, update) {
    return h("div.p-3.flex.flex-col.items-center.justify-center", {}, [
        h("p", {}, state.count),
        h("button.min-w-[150px].bg-black.text-white.px-3.py-2", {
            style: {
                "cursor": "pointer",
            },
            on: {
                click: () => {
                    update("DEC", undefined);
                },
            },
        }, [
            "-",
        ]),
        h("button.min-w-[150px].bg-black.text-white.px-3.py-2", {
            style: {
                "cursor": "pointer",
            },
            on: {
                click: () => {
                    update("INC", undefined);
                },
            },
        }, [
            "+",
        ]),
    ]);
 }

 function update(msg, payload, state) {
    switch (msg) {
        case "INC": {
            return {
                ...state,
                count: state.count + 1,
            };
        }
        case "DEC": {
            return {
                ...state,
                count: state.count - 1,
            };
        }
    }
    return {};
 }

 init(
    model,
    update,
    view,
    () => document.querySelector("#app"),
 );
	import {
	classModule,
	eventListenersModule,
	h,
	init as initDOM,
	propsModule,
	styleModule,
	} from "https://esm.sh/snabbdom";

	export { h };

	const patch = initDOM([
	classModule,
	propsModule,
	styleModule,
	eventListenersModule,
	]);

	export function init(
	model,
	update,
	view,
	mountTo,
	) {
	const initialModel = model();
	const container = mountTo();

	let prevView;
	const createDispatcher = (baseState) => (msg, payload) => {
	const state = update(msg, payload, { ...baseState });
	const nextView = view(state, createDispatcher(state));
	patch(prevView, nextView);
	prevView = nextView;
	};

	prevView = view(initialModel, createDispatcher(initialModel));
	patch(container, prevView);
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" />
	</head>
	<body>
	<div id="app"></div>
	<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
	<script src="./index.js" type="module"></script>
	</body>
	</html>
	import { h, init } from "./h.js";

	function model() {
	return {
	count: 0,
	};
	}

	function view(state, update) {
	return h("div.p-3.flex.flex-col.items-center.justify-center", {}, [
	h("p", {}, state.count),
	h("button.min-w-[150px].bg-black.text-white.px-3.py-2", {
	style: {
	"cursor": "pointer",
	},
	on: {
	click: () => {
	update("DEC", undefined);
	},
	},
	}, [
	"-",
	]),
	h("button.min-w-[150px].bg-black.text-white.px-3.py-2", {
	style: {
	"cursor": "pointer",
	},
	on: {
	click: () => {
	update("INC", undefined);
	},
	},
	}, [
	"+",
	]),
	]);
	}

	function update(msg, payload, state) {
	switch (msg) {
	case "INC": {
	return {
	...state,
	count: state.count + 1,
	};
	}
	case "DEC": {
	return {
	...state,
	count: state.count - 1,
	};
	}
	}
	return {};
	}

	init(
	model,
	update,
	view,
	() => document.querySelector("#app"),
	);