podhmo/00.html

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

<head>
    <meta charset="utf-8">
    <title>preact sandbox</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/",
            "./dist/": "./dist/"
        }
    }
    </script>
</head>

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

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

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

</html>

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


export const App = () => {
    const [count, setCount] = useState(0);

    return (<>
        <h1>hello</h1>
        <button onClick={() => setCount(() => count + 1)}>click me { count }</button>
    </>);
}

## Makefile
SHELL = bash

serve:
	esbuild --serve=8080 --servedir=. --outdir=dist *.tsx

## tsconfig.json
{
    "compilerOptions": {
        "lib": [
            "es2022",
            "dom"
        ],
        "jsxFactory": "h",
        "jsxFragmentFactory": "Fragment",
        "jsx": "preserve"
    }
}
	<!doctype html>
	<html lang="ja">

	<head>
	<meta charset="utf-8">
	<title>preact sandbox</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/",
	"./dist/": "./dist/"
	}
	}
	</script>
	</head>

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

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

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

	</html>
	import { h, Fragment } from 'preact';
	import { useState} from 'preact/hooks';
	import type { ComponentChildren } from 'preact';


	export const App = () => {
	const [count, setCount] = useState(0);

	return (<>
	<h1>hello</h1>
	<button onClick={() => setCount(() => count + 1)}>click me { count }</button>
	</>);
	}
	SHELL = bash

	serve:
	esbuild --serve=8080 --servedir=. --outdir=dist *.tsx
	{
	"compilerOptions": {
	"lib": [
	"es2022",
	"dom"
	],
	"jsxFactory": "h",
	"jsxFragmentFactory": "Fragment",
	"jsx": "preserve"
	}
	}