podhmo/00app.tsx

## 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>
    </>);
}

## 01app.tsx
import { h, Fragment } from 'preact';
import { useState } from 'preact/hooks';
import { signal } from '@preact/signals';
import type { ComponentChildren } from 'preact';


const count = signal(0);

export const App = () => {
    return (<>
        <h1>hello</h1>
        <button onClick={() => count.value++}>click me {count.value}</button>
    </>);
}

## deno.json
{
  "tasks": {
    "dev": "deno run --watch main.ts"
  },
  "imports": {
    "preact": "npm:preact@10.18.1",
    "preact/hooks": "npm:preact@10.18.1/hooks",
    "@preact/signals": "npm:@preact/signals@1.2.1"
  },
  "compilerOptions": {
    "lib": [
      "es2022",
      "dom"
    ],
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}

## deno.lock
{
  "version": "3",
  "packages": {
    "specifiers": {
      "npm:@preact/signals@1.2.1": "npm:@preact/signals@1.2.1_preact@10.18.1",
      "npm:preact@10.18.1": "npm:preact@10.18.1"
    },
    "npm": {
      "@preact/signals-core@1.5.0": {
        "integrity": "sha512-U2diO1Z4i1n2IoFgMYmRdHWGObNrcuTRxyNEn7deSq2cru0vj0583HYQZHsAqcs7FE+hQyX3mjIV7LAfHCvy8w==",
        "dependencies": {}
      },
      "@preact/signals@1.2.1_preact@10.18.1": {
        "integrity": "sha512-hRPvp1C2ooDzOHqfnhdpHgoIFDbYFAXLhoid3+jSItuPPD/J0r/UsiWKv/8ZO/oEhjRaP0M5niuRYsWqmY2GEA==",
        "dependencies": {
          "@preact/signals-core": "@preact/signals-core@1.5.0",
          "preact": "preact@10.18.1"
        }
      },
      "preact@10.18.1": {
        "integrity": "sha512-mKUD7RRkQQM6s7Rkmi7IFkoEHjuFqRQUaXamO61E6Nn7vqF/bo7EZCmSyrUnp2UWHw0O7XjZ2eeXis+m7tf4lg==",
        "dependencies": {}
      }
    }
  },
  "remote": {}
}

## index.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/",
            "@preact/signals": "https://esm.sh/@preact/signals@1.2.1",
            "./dist/": "./dist/"
        }
    }
    </script>
</head>

<body>
    <div class="container">
        <details>
            <summary>examples</summary>
            <li><a href="./?app=00app.js">00app.js</a></li>
            <li><a href="./?app=01app.js">01app.js</a></li>
        </details>
        <div id="app"></div>
    </div>

    <script type="module">
        import { h, Component, render } from "preact";
        let appName = "00app.js";
        if (location.search.includes("app=")) {
            appName = new URLSearchParams(location.search).get("app");
        }
        const { App } = await import(`./dist/${appName}`)
        render(h(App, null, null), document.querySelector("#app"));
    </script>
</body>

</html>

## Makefile
SHELL = bash

serve:
	esbuild --serve=8080 --servedir=. --outdir=dist --tsconfig=deno.json *.tsx
gen:
	esbuild --outdir=dist --tsconfig=deno.json *.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>
	</>);
	}
	import { h, Fragment } from 'preact';
	import { useState } from 'preact/hooks';
	import { signal } from '@preact/signals';
	import type { ComponentChildren } from 'preact';


	const count = signal(0);

	export const App = () => {
	return (<>
	<h1>hello</h1>
	<button onClick={() => count.value++}>click me {count.value}</button>
	</>);
	}
	{
	"tasks": {
	"dev": "deno run --watch main.ts"
	},
	"imports": {
	"preact": "npm:preact@10.18.1",
	"preact/hooks": "npm:preact@10.18.1/hooks",
	"@preact/signals": "npm:@preact/signals@1.2.1"
	},
	"compilerOptions": {
	"lib": [
	"es2022",
	"dom"
	],
	"jsxFactory": "h",
	"jsxFragmentFactory": "Fragment"
	}
	}
	{
	"version": "3",
	"packages": {
	"specifiers": {
	"npm:@preact/signals@1.2.1": "npm:@preact/signals@1.2.1_preact@10.18.1",
	"npm:preact@10.18.1": "npm:preact@10.18.1"
	},
	"npm": {
	"@preact/signals-core@1.5.0": {
	"integrity": "sha512-U2diO1Z4i1n2IoFgMYmRdHWGObNrcuTRxyNEn7deSq2cru0vj0583HYQZHsAqcs7FE+hQyX3mjIV7LAfHCvy8w==",
	"dependencies": {}
	},
	"@preact/signals@1.2.1_preact@10.18.1": {
	"integrity": "sha512-hRPvp1C2ooDzOHqfnhdpHgoIFDbYFAXLhoid3+jSItuPPD/J0r/UsiWKv/8ZO/oEhjRaP0M5niuRYsWqmY2GEA==",
	"dependencies": {
	"@preact/signals-core": "@preact/signals-core@1.5.0",
	"preact": "preact@10.18.1"
	}
	},
	"preact@10.18.1": {
	"integrity": "sha512-mKUD7RRkQQM6s7Rkmi7IFkoEHjuFqRQUaXamO61E6Nn7vqF/bo7EZCmSyrUnp2UWHw0O7XjZ2eeXis+m7tf4lg==",
	"dependencies": {}
	}
	}
	},
	"remote": {}
	}
	<!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/",
	"@preact/signals": "https://esm.sh/@preact/signals@1.2.1",
	"./dist/": "./dist/"
	}
	}
	</script>
	</head>

	<body>
	<div class="container">
	<details>
	<summary>examples</summary>
	<li><a href="./?app=00app.js">00app.js</a></li>
	<li><a href="./?app=01app.js">01app.js</a></li>
	</details>
	<div id="app"></div>
	</div>

	<script type="module">
	import { h, Component, render } from "preact";
	let appName = "00app.js";
	if (location.search.includes("app=")) {
	appName = new URLSearchParams(location.search).get("app");
	}
	const { App } = await import(`./dist/${appName}`)
	render(h(App, null, null), document.querySelector("#app"));
	</script>
	</body>

	</html>
	SHELL = bash

	serve:
	esbuild --serve=8080 --servedir=. --outdir=dist --tsconfig=deno.json *.tsx
	gen:
	esbuild --outdir=dist --tsconfig=deno.json *.tsx