Deno Freshプロジェクトの初期コードを読む

Deno Freshプロジェクトの初期コードを読む

denoland/freshで生成されるコードを読む daiiz 2022/7/9
deno本体の最新仕様のキャッチアップも必要そう

deno.json
tasksとimportMapを定義している

import_map.json
インポートするたびにURLを書くのが面倒なのでここでショートハンドを定義している
コード中で $fresh/dev.ts のように参照しているのを確認できる
json
Copied!
{
"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.

Powered by Helpfeel