Zenn
Open23

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

Deno
esbuild
Preact
podhmopodhmo

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

https://gist.github.com/podhmo/cbfce9cbea96126f6b3d6254402d97ee

  • 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ファイルが必要になるのがめんどくさい。

podhmopodhmo

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

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

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

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

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

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

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

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

podhmopodhmo

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
podhmopodhmo

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

podhmopodhmo

strict: true?

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

podhmopodhmo

denoに一本化できる？

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

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 とかで実行できる。

podhmopodhmo

数字の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>