Deno Freshプロジェクトの初期コードを読む
denoland/freshで生成されるコードを読む
2022/7/9
deno本体の最新仕様のキャッチアップも必要そう
deno.json
tasksとimportMapを定義している
import_map.json
インポートするたびにURLを書くのが面倒なのでここでショートハンドを定義している
コード中で
のように参照しているのを確認できるjson
{
"imports": {
"$fresh/": "https://deno.land/x/fresh@1.0.1/",
"preact": "https://esm.sh/preact@10.8.2",
"preact/": "https://esm.sh/preact@10.8.2/",
"@twind": "./utils/twind.ts"
}
}
routes/
Next.jsに似てる
[name].tsx
みたいなファイルを置くだけでルーティング定義が済むやつislands/
各componentsの実装はここに置けばよさそう
Island based client hydration for maximum interactivity.
islands/Counter.tsx
useStateを使った状態を持つpreact componentの書き方の例
fresh.gen.ts
DO NOT EDIT. This file is generated by fresh. とのこと
This file SHOULD be checked into source version control.
gitでの管理対象に含めるべきとのこと
This file is automatically updated during development when running dev.ts.
開発サーバーをしていれば自動でいい感じに更新されるらしい
manifestと呼ばれるものを定義している
routesとislandsに関する記述がある
$fresh/runtime.ts
import { IS_BROWSER } してる
export const IS_BROWSER = typeof document !== "undefined";
documentが生えているかを確認しているだけ
おまけ
twind
The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.