fresh

fresh v1.6がリリースされました。 この記事では主な変更点などについて解説します。 Tailwind CSSの公式サポート fresh公式でTailwind CSSのサポートが導入されました。 Tailwind CSSプラグイン (plugins/tailwind.ts)が追加されています。 // fresh.config.ts import { defineConfig } from "$fresh/server.ts"; import tailwind from "$fresh/plugins/tailwind.ts"; export default defineConfig({ plugins: [tailwind()], }); 本番環境での利用について このTailwind CSSプラグインをDeno Deployで利用する場合は、事前ビルドとの併用が必須になるためご注意ください。 このプラグインを導入した状態でdeno task buildを実行すると、_fresh/staticにCSSファイルが生成されるため、Deno Deployではこちらが利用される想定です。(_fresh/staticについては後述します。また、本番ビルド時に生成されるCSSファイルはcssnanoで最適化されます) 新規プロジェクトへの導入について freshのinit.tsでプロジェクトを初期化する際に、Tailwind CSSの有効化がサポートされています。 既存プロジェクトへの導入方法 deno.jsonで公式で推奨されるバージョンのTailwind CSSを読み込むよう設定します。 ($fresh/src/dev/imports.ts) { "imports": { // ... 省略 ... "tailwindcss": "npm:tailwindcss@3.3.5", "tailwindcss/": "npm:/tailwindcss@3.3.5/", "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js" }, // ... 省略 ....

Deno v1.38がリリースされました。 この記事では主な変更点などについて解説します。 deno doc deno doc --lint deno docコマンドで--lintオプションがサポートされました。 $ deno doc --lint mod.ts Missing JS documentation comment. at file:///home/uki00a/ghq/github.com/uki00a/some-project/mod.ts:12:3 このオプションを指定すると、DenoはAPIドキュメントを出力する前に、各APIを検査します。そして以下のようなAPIが検出された場合、APIドキュメントを出力せずにエラーを表示します。 exportされているAPIにJSDocコメントが書かれていない場合 (Missing JS documentation comment.) exportされているAPIの戻り値の型定義が省略されている場合 (Missing return type.) exportされている型のプロパティがexportされていない型を参照している場合 (Type 'foo' references type 'Bar' which is not exported from a root module.) このエラーが発生した場合、そのexportされていない型に@internalを指定することでエラーを抑止できます deno doc --html deno docでAPIドキュメントのHTML形式での出力がサポートされました。 --htmlを指定すると、docsディレクトリにHTMLが出力されます。 $ deno doc --html --name=fresh-testing-library mod.ts Written 261 files to "./docs/" docs/index.htmlを開くことで作成されたAPIドキュメントを閲覧できます。...

fresh v1.5.2 fresh v1.5.2がリリースされています。 <a>要素のアクセシビリティに関する改善 fresh v1.5で<a>にdata-current/data-ancestorを付与する機能が入りました。 このリリースではさらに<a>に対してaria-current属性も設定されるように改善されています。 aria-current=page: data-currentが付与される場合、この属性も一緒に付与されます。 aria-current=true: data-ancestorが付与される場合、この属性も一緒に付与されます。 https://github.com/denoland/fresh/pull/1915 devサーバとブラウザとのやり取りがWebSocketベースで行われるように devサーバとブラウザとのやり取りがEventSourceベースからWebSocketベースへ移行されているようです。 Firefoxにおいて接続が切れてしまうことのある問題(#1765)の解消や将来的なHMRのサポートなどを視野に入れた変更のようです。(後述) https://github.com/denoland/fresh/pull/1943 https://github.com/denoland/fresh/pull/1944 DenoでのHMRのサポートについて Deno本体にHMRをサポートするためのPRが作成されています。 feat: deno run –unstable-hmr (#20876) まだ正式に入るかどうかはわからないものの、HMRを有効化するための--unstable-hmrオプションの導入や、ファイル変更時にCustomEvent経由で通知をすることなどが検討されているようです。

fresh v1.5 fresh v1.5がリリースされました。 以下に内容をまとめたため、よろしければそちらを参照いただければと思います。 fresh v1.5 Deno v1.37.2 Deno v1.37.2がリリースされました。 Deno.serve Deno.serveでUnixドメインソケットがサポートされています。(unstable) Deno.serveのpathオプションを指定することで有効化されます。 また、Deno.serveから返却されるDeno.Serverがthenableオブジェクトではなくなりました。 これにより、async関数から直接Deno.Serverをreturnできなかった問題が解消されたようです。 TransformStreamでキャンセルがサポート (cancelオプションの追加) readableがキャンセルされたタイミング または writableが中断されたタイミングでcancelオプションに指定された関数が呼ばれるようです。 TransformStream cleanup using “Transformer.cancel” (whatwg/streams#1283) deno jupyter deno.land/x/displayのDeno本体への追加 deno.land/x/displayがDeno本体に取り込まれたようです。 これにより、以下のAPIが追加されています。 Deno.jupyter.display Deno.jupyter.md Deno.jupyter.html Deno.jupyter.svg Deno.jupyter.format Deno.jupyter.broadcast Deno.jupyter.broadcastに以下のオプションが追加されています。 metadataオプション buffersオプション (バイナリデータを送信したい場合に使用できます) Deno.testのサポート deno replやdeno jupyterでDeno.testがサポートされています。 $ deno repl Deno 1.37.2 exit using ctrl+d, ctrl+c, or close() > Deno.test(function ok() {}); ok ....

fresh v1.5がリリースされました。 この記事では主な変更点などについて解説します。 Partials SPAライクなクライアントサイドでのページ遷移を実現するためにPartialsという機能が導入されました。 基本的な使い方 以下のコードを例に見てみます。 // routes/docs/[id].tsx import { Partial } from "$fresh/runtime.ts"; export default function Page({ docs, currentDoc }: { docs: Array<Doc>, currentDoc: Doc }) { return ( <> <Sidebar docs={docs} /> <Partial name="docs-main-content"> <MainContent doc={currentDoc} /> </Partial> </> ); } function Sidebar({ docs }: { docs: Array<Doc> }) { return ( <nav f-client-nav> <ul class="flex flex-col gap-2"> {docs....

Deno v1.37でリリースされそうな機能について 今週はDenoのリリースが行われていないため、おそらく次にリリースされるであろうDeno v1.37に入りそうな機能などについて紹介します。 Lockfile v3 deno.lockの新しいフォーマット(v3)が実装されています。 feat: lockfile v3 #20424 npm.specifiersがpackages.specifiersへ、npm.packagesがpackages.npmへ移動されています。 これはdeno:URLのサポートを想定した変更のようです。 TypeScript v5.2 Deno本体に搭載されたTypeScriptをv5.2にアップデートするPRがマージされています。 feat: TypeScript 5.2 #20425 ただし、usingやDecorator Metadataなどについてはv8側でサポートされるまでは使用できない状況のようです。 Import Attributes DenoにImport Attributesを実装するPRがマージされています。 feat: support import attributes #20342 // static import import data from "./data.json" with { type: "json" }; // dynamic import const data2 = await import("./data2.json", { with: { type: "json" } }); Deno Deployでnpmパッケージがサポート Deno Deployでnpmパッケージがサポートされました。Denoと同様に、npm:URL経由でnpmパッケージを読み込むことができます。 以下の公式ブログ記事では、ExpressやFastify, OpenAI APIなどの使用例が紹介されています。...

Deno v1.36.4 Deno v1.36.4がリリースされました。 Deno KV Deno KVでデータベースへのリモート接続がサポートされました。これにより、ローカルからDeno Deploy上のDeno KVデータベースへ接続ができるようになったようです。 Deno.openKvにhttp:/https:形式のURLを与えると、従来までのSQLiteベースのバックエンドは使用されず、代わりにHTTP経由でデータベースへリモート接続されます。 このリモート接続機能はDeno Deployに限らず、KV Connectというプロトコルさえ実装されていれば、任意のデータベースへ接続が可能なようです。 また、この機能を利用するには、以下の設定が必要なようです: --allow-envとallow-netオプション DENO_KV_ACCESS_TOKEN環境変数 (Deno Deployで発行した認証用アクセストークン) KV Connectプロトコルについて: 以下のページなどにドキュメントが存在します。 KV Connect Metadata Exchangeエンドポイントのレスポンスのスキーマ Data Pathエンドポイントのメッセージのフォーマット deno lsp suggest.completeFunctionCallsオプションが実装: このオプションにtrueを設定すると、関数の引数と括弧()が入力補完されます。 vscode-denoでは"deno.suggest.completeFunctionCalls": trueオプションで有効化できるようです。 { // ... "deno.suggest.completeFunctionCalls": true } テストエクスプローラーに関するバグ修正: TestContext.stepを使っていると、vscodeのテストエクスプローラー経由でテストを実行した際に、LSPがパニックしてしまう問題が修正されました。 テストエクスプローラーからテストを実行する際に、対象テストファイルからはimportしていないファイルも実行されてしまう問題が修正されました。 deno_std v0.201.0 deno_std v0.201.0がリリースされました。 std/dotenv - パーミッションに関する改善 std/dotenvでパーミッションをより厳格に設定できるように実装が改善されました。 変数展開やexportオプションを使用しない場合、--allow-envオプションの指定が不要になります。 また、変数展開やexportオプションを使用する場合のパーミッションの取り扱いも改善されています。具体的には、以下のような.envファイルを読み込む場合、--allow-env=BAZの指定のみで動作します。(今までは--allow-envによって全ての環境変数の読み込みを許可する必要がありました。) FOO=bar HOGE=piyo${BAZ} これらの変更に合わせて、restrictEnvAccessToオプションが非推奨化されています。 std/urlが追加 新規モジュールとしてstd/urlが追加されました。 URLに関する様々なユーティリティが提供されています。 import { dirname } from "https://deno....

fresh v1.4 fresh v1.4がリリースされました。 以下に内容をまとめたため、よろしければそちらを参照いただければと思います。 fresh v1.4 Deno KVでのキーの有効期限の設定について Deno.Kv#setなどのAPIでexpireInというオプションをサポートするPRが作成されています。 feat(ext/kv): key expiration #20091 このオプションを指定することで、対象のキーに対して有効期限を設定することができます。 const db = await Deno.openKv(); await db.set( ["key"], "value", { // 有効期限をミリ秒単位で指定します。 // 以下の場合、最低でも1秒後にこのキーが自動で削除されます。 expireIn: 1000 }, ); このPRはすでにマージされているため、次のDeno v1.36.2またはv1.37あたりでリリースされる可能性がありそうです。

fresh v1.4がリリースされました。 この記事では主な変更点などについて解説します。 事前ビルドのサポート Islandコンポーネントなどの事前ビルドがサポートされました。 deno task buildを実行すると、_freshディレクトリにIslandコンポーネントなどをesbuildによってバンドルした結果が出力されます。(この_freshディレクトリは.gitignoreに含めることが推奨されます。) # 1. ビルドを実行 $ deno task build # 2. _freshディレクトリが作成されます $ cat _fresh/snapshot.json サーバの起動時にfreshは自動で_freshディレクトリを探索し、見つかればそこに格納されたバンドルを利用してくれます。これによりコールドスタート時間の短縮が期待されます。 $ deno run -A main.ts Using snapshot found at /path/to/fresh-project/_fresh この事前ビルド機能はオプトイン方式によるものであり、従来どおり、ビルドステップなしでの開発やデプロイは引き続きサポートされています。ローカルでは従来どおりの方法で開発をし、本番環境にデプロイするときだけ事前ビルドを行うことも可能です。 移行について (fresh.config.ts) ※fresh v1.4以降、新規に作成したプロジェクトにおいてはこの作業は不要です。 この修正の影響により、dev.tsで使用することが想定されているdev()に変更が入っており、移行が必要になる場合がありそうです。 具体的には、まずfresh.config.tsを用意します。 import { defineConfig } from "$fresh/server.ts"; import twindv1 from "$fresh/plugins/twindv1.ts"; import twindConfig from "./twind.config.ts"; export default defineConfig({ plugins: [twindv1(twindConfig)] }); 次に、main.tsをfresh.config.tsからfreshに関する設定を読み込むように変更します。 import { start } from "$fresh/server.ts"; import manifest from "....

Deno v1.36.1 Deno v1.36.1がリリースされました。 deno_modulesディレクトリがvendorへリネーム Deno v1.36で実装されたdeno_modulesディレクトリがdeno vendorコマンドに合わせてvendorへリネームされました。 これに合わせて、deno.jsonのプロパティ名もdenoModulesDirからvendorへリネームされています。 { "imports": { "redis": "https://deno.land/x/redis@v0.29.0/mod.ts", "dax": "https://deno.land/x/dax@0.24.0/mod.ts" }, "vendor": true } このようにdeno.jsonでvendor: trueを設定することで、Denoが依存パッケージをvendorディレクトリにダウンロードするよう挙動が変更されます。 また、Deno v1.36からの大きな変更として、vendorオプションが有効化された際は、依存しているnpmパッケージもnode_modulesに自動でダウンロードされるよう挙動が変更されています。(--node-modules-dirオプションが自動で適用されるようなイメージです) この挙動を無効化したい場合、CLIオプションで--node-modules-dir=falseを指定するか、またはdeno.jsonでnodeModulesDir: falseを指定する必要があります。 deno test グローバルのsetTimeoutが置き換えられた場合、TestContext.stepが動作しなくなる問題が修正されています。(std/testing/time.tsのFakeTimeと併用できない課題があったようです) deno_std v0.198.0 deno_std v0.198.0がリリースされました。 std/path - ファイルの分割 std/path/basename.tsやstd/path/dirname.tsなど、std/pathで提供されている各APIごとにファイルが細かく分割されました。 std@0.198.0/path std@0.197.0/path deno_cache v0.5.0 deno_cacheパッケージの内部実装が、Deno本体で使用されていたグローバルキャッシュ(DENO_DIR)に関するコードをベースに再実装されたようです。 これに合わせて、deno_cache_dirという名前でクレートも公開されています。 また、Deno本体でもこのdeno_cache_dirクレートが導入されています。(#20092) これにより、今後、deno_cacheパッケージの開発がより活発になる可能性もありそうです。 https://github.com/denoland/deno_cache/releases/tag/0.5.0 Freshの2023年8〜9月のイテレーション計画 Freshの2023年8〜9月にかけてのイテレーション計画が公開されています。(2023年の7〜8月のイテレーション計画についてはこちら) August - September 2023 iteration plan #1618 現時点では、以下の実装などが進められることが検討されているようです。 SPAライクなクライアントサイドナビゲーション View transitionsのサポート