podhmo/Makefile

## app.tsx
import { h, Fragment } from 'preact';
import { useState, useCallback } from 'preact/hooks';
import { memo } from 'preact/compat';
import type { ComponentChildren } from 'preact';


export const App = () => {
    return (<>
        <h1>hello</h1>
        <Accordion></Accordion>
    </>);
}


function Accordion() {
    const [items, setitems] = useState([]);
    const lazyItems = useCallback(() => {
        console.log("called")
        setitems(["foo", "bar", "boo"]);
    }, [items]);

    return (<>
        <details role="list" onClick={lazyItems}>
            <summary role="button">アコーディオン</summary>
            <ul>{items.map((x) => <li>{x}</li>)}</ul>
        </details>
    </>);
}


## index.html
<!doctype html>
<html lang="ja">

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

    <!-- css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">


    <script type="importmap">
    {
        "imports": {
            "preact": "https://esm.sh/preact@10.18.1",
            "preact/": "https://esm.sh/preact@10.18.1/"
        }
    }
    </script>
</head>

<body>
    <div class="container">
        <div id="app"></div>
    </div>

    <script type="module">
        import { h, Component, render } from "preact";
        import { App } from "./app.js";

        render(h(App, null, null), document.querySelector("#app"));
    </script>
</body>

</html>

## Makefile
SHELL = bash

serve:
	esbuild --serve=8080 --servedir=. --outfile=app.js app.tsx

main.js: app.tsx main.ts
	esbuild --bundle --outfile=main.js --keep-names main.ts

## tsconfig.json
{
    "compilerOptions": {
        "jsx": "preserve",
        "jsxFactory": "h",
        "jsxFragmentFactory": "Fragment"
    },
}
	import { h, Fragment } from 'preact';
	import { useState, useCallback } from 'preact/hooks';
	import { memo } from 'preact/compat';
	import type { ComponentChildren } from 'preact';


	export const App = () => {
	return (<>
	<h1>hello</h1>
	<Accordion></Accordion>
	</>);
	}


	function Accordion() {
	const [items, setitems] = useState([]);
	const lazyItems = useCallback(() => {
	console.log("called")
	setitems(["foo", "bar", "boo"]);
	}, [items]);

	return (<>
	<details role="list" onClick={lazyItems}>
	<summary role="button">アコーディオン</summary>
	<ul>{items.map((x) => <li>{x}</li>)}</ul>
	</details>
	</>);
	}
	<!doctype html>
	<html lang="ja">

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

	<!-- css -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">


	<script type="importmap">
	{
	"imports": {
	"preact": "https://esm.sh/preact@10.18.1",
	"preact/": "https://esm.sh/preact@10.18.1/"
	}
	}
	</script>
	</head>

	<body>
	<div class="container">
	<div id="app"></div>
	</div>

	<script type="module">
	import { h, Component, render } from "preact";
	import { App } from "./app.js";

	render(h(App, null, null), document.querySelector("#app"));
	</script>
	</body>

	</html>
	SHELL = bash

	serve:
	esbuild --serve=8080 --servedir=. --outfile=app.js app.tsx

	main.js: app.tsx main.ts
	esbuild --bundle --outfile=main.js --keep-names main.ts
	{
	"compilerOptions": {
	"jsx": "preserve",
	"jsxFactory": "h",
	"jsxFragmentFactory": "Fragment"
	},
	}