preact を１ファイルで確認して試行錯誤する環境をnodeに依存せず作りたい

podhmo

以下のような気持ちで

なるべく依存を増やさない
gistなどで共有し易い形で
手元で動かしやすい形で

具体的にはnpmに依存したくない。buildをしたくない。というのを理想として手間を減らしていく。

podhmo

現状の完成品は https://zenn.dev/podhmo/scraps/4a20ad0e96aef8#comment-969caec296cb01

podhmo

現状は以下のような感じ。型だけはpackage.jsonに依存しちゃったほうが楽かもしれない。

esbuildにだけ依存
残りは全部CDN経由にしてimport mapとブラウザ側でのimportを利用

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

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

都度htmlファイルが必要になるのがめんどくさい。

podhmo

esbuildを--outdirで起動してやれば都度ディレクトリ毎にMakefileを書く必要はないかも？

podhmo

そうやって作ったのがこれ。

podhmo

型のimportだけはnpmに依存してしまいたくなる -> denoのnpmサポートで行けない？
staticなimport宣言ではなく import()関数の方を使えない？

podhmo

import() を使ってhtmlを一つで済ませる？

例えばquerystringでapp=00app.jsと書いてあげられるようにする。

podhmo

    <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>

podhmo

そうやって作ったのがこれ

podhmo

denoのnpmサポートを使って型定義を持ってこれない？

現状preactだけなのでnpm installしてもそうnode_modulesが膨らまないし型定義が観られると便利なので型をimportするためにnpmに依存してしまっている。それならいっそviteとかを使っても良いのでは？HMR便利だしと思ったりするし alias tree="tree --gitignore" としておけばあまり困らない気もする。

とはいえどうせならnode.jsから離れたい

podhmo

deno init でdeno.jsonを作る

00app.tsxの先頭を以下のように書き換え

import { h, Fragment } from 'npm:preact';
import { useState} from 'npm:preact/hooks';
import type { ComponentChildren } from 'npm:preact';

deno cacheを実行する

$ deno cache *.tsx

podhmo

📝 ブラウザのimportmapが npm:<package> を上手くハンドリングできないみたいなのでhtml側とdeno.json側の両方でimportmapを記述する。

podhmo

deno.jsonにtsconfigのオプションが渡せるのでesbuildにtsconfigとしてdeno.jsonを渡すようにする。

podhmo

そうしてできたのがこれ

podhmo

strict: true?

これをつけたいかどうかは悩みどころ。ビルドが失敗するわけではないのでつけちゃっても良い気もする。
書いては捨てるコードなので型が必須かというとそうでもないのだけれど後で見返した時にわかりやすい型はあると嬉しい。

podhmo

tsconfig options

jsx の pserveが正しいかは謎。
libのオプションも正しいかは謎。

podhmo

これの意味を把握した方が良いかも？targetとか指定した方が良い？

podhmo

denoに一本化できる？

Makefileをdeno.jsonのtaskにかける？
esbuildはdeno run npm:esbuildで実行できる？

podhmo

deno.jsonの変更はできそう。

{
  "tasks": {
    "dev": "esbuild --serve=8080 --servedir=. --outdir=dist --tsconfig=deno.json *.tsx",
    "gen": "esbuild --outdir=dist --tsconfig=deno.json *.tsx"
  }
}

これは deno task dev とかで実行できる。

podhmo

deno run npm:esbuild で実行できるかとおもいきや --serve のオプションが機能しないみたい。あと、deno.lockがわりと増える。悲しい。

↑のようなnode scriptが実行されるみたい

podhmo

数字のincrementがめんどくさい

    <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");
            if (appName.search(/^\d+$/) !== -1) { // short hand e.g. ?app=03
                appName = appName + "app.js";
            }
        }
        const { App } = await import(`./dist/${appName}`)
        render(h(App, null, null), document.querySelector("#app"));
    </script>

podhmo

より全部盛りのreactの方法