Deno v1.41

Deno v1.41がリリースされました。 この記事では主な変更点などについて解説します。 Deno API Deno.FsFile Deno.FsFileにisTerminalとsetRawメソッドが追加されています。 Deno.isattyは非推奨化されているため、Deno.FsFileやDeno.stdinなどのisTerminalメソッドへの移行が推奨されます。 Deno.ConnectTlsOptions Deno.ConnectTlsOptionsにcertとkeyオプションが追加されています。 これに伴い、Deno.ConnectTlsOptionsのcertChainとprivateKeyは非推奨化されているため、新しく追加されたこれらへの移行が推奨されます。 破壊的変更 Deno.DatagramConnとDeno.HttpClientからridプロパティが削除されました。 Deno.CreateHttpClientOptionsのcertChainがcert、privateKeyがkeyにリネームされました。 パッケージシステム パッケージシステム (deno publish)に関してもいくつか改善が行われています。 ⚠️ jsr:に関しては、現在はwaitlistが公開されている段階で、まだ正式には利用できません。 deno lint deno lintにno-slow-typesルールが導入されています (#22430) このルールはdeno.jsonにname, version, 及びexportsフィールドが定義されている場合、自動で有効化されるようです。 このルールが有効化されている場合、fast checkが実行されるようです。 型チェックに関する改善 deno publishの実行時に型チェックが実行されるように変更されています (#22506) デフォルトではローカルモジュールに対してのみfast checkが行われるようです。--allow-slow-typesを指定するとfast checkではなく通常の型チェックが行われるようです また、fast checkに関しては、deno lintなどのコマンドと同様にSQLiteをベースにキャッシュの仕組みが導入されており、型チェックがより効率化されています。(#22485) deno lsp deno lspでjsr:URL向けにimportの補完が実装されています (#22462) deno compile v1.40.5でdeno compile向けの軽量バイナリであるdenortが再導入されています。 Deno v1.41ではstripコマンドを実行することでdenortバイナリがさらに軽量化されています。Deno公式のリリースポストによると、今後、deno compileをする際に特定の機能のみを有効化したカスタムビルドをサポートすることで、さらにバイナリを軽量化することなども検討されているようです。 その他には、deno compileでdeno.jsonのcompilerOptionsなどが効かない問題が修正されています。 deno info deno infoコマンドを実行した際もロックファイル(deno.lock)が生成されるように挙動が改善されています。 Node.js互換性 影響が大きそうな内容として、process.envからパーミッションが与えられていない環境変数にアクセスしようとした際に、パーミッションプロンプトが表示されるように挙動が変更されています。 それ以外には、node:testではDenoのテストサニタイザーの仕組みが無効化されています。 参考 https://github.com/denoland/deno/releases/tag/v1.41.0 Deno 1.41: smaller deno compile binaries

February 25, 2024

Deno v1.40

Deno v1.40がリリースされました。 この記事では主な変更点などについて解説します。 Temporalサポート DenoでTemporal がサポートされました。利用するには--unstable-temporalの指定が必要です。 Temporal.Now.instant(); 今のところTemporalのサポートはv2での安定化が検討されているようです。 Decorators proposal (stage 3)のサポート ⚠️ V8でまだサポートされていない関係で.jsファイルではまだ動作しないようなためご注意 (.tsなどのトランスパイルされるファイルでのみ動作します) TypeScript v5で導入されたDecorators (stage 3)がDenoでもサポートされました。 これに伴い、今までデフォルトで有効化されていたTypeScriptのexperimentalDecoratorsは無効化されたため、もし利用したい場合はdeno.jsonで明示的に有効化する必要があります。 { "compilerOptions": { "experimentalDecorators": true } } TypeScript5で導入されたStage 3のDecoratorを眺めてみる | 豆蔵デベロッパーサイト deno.json importsでnpm:URLのマッピングを定義する際の挙動の改善 npmパッケージが提供するサブパスの読み込みに関する挙動が改善されています。 例えば、deno.jsonでImport Mapsを定義しておき、npm:なしでmswとmsw/nodeを読み込みたい場面があったとします。 import { http, HttpResponse } from "msw"; import { setupServer } from "msw/node"; const server = setupServer( http.get(`${location.origin}/api/user`, () => HttpResponse.json({ id: 1, name: "foo", })), ); この場合、v1....

January 28, 2024

Deno v1.39

Deno v1.39がリリースされました。 この記事では主な変更点などについて解説します。 WebGPU APIの再導入 Deno v1.32で削除されたWebGPU APIが再導入されました。 利用するにはdeno.jsonでunstable: ["webgpu"]を指定するか--unstable-webgpuオプションの指定が必要です。 { "unstable": ["webgpu"] } 以下のリポジトリではWebGPU APIに関する使用例が公開されています。 https://github.com/denoland/webgpu-examples また、この追加に合わせて、deno_stdにもWebGPU API向けのユーティリティが追加されています。(std/webgpu) deno coverage サマリー/HTMLレポーターの追加 deno coverageコマンドにサマリーレポーターとHTMLレポーターが追加されました。 サマリーレポーターは新しくdeno coverageコマンドのデフォルトで使用されるレポーターとして設定されていて、以下のような形式でレポートが出力されます。 $ deno coverage ./coverage ----------------------------------------------------------- File | Branch % | Line % | ----------------------------------------------------------- demo/components/Button.tsx | 100.0 | 0.0 | demo/fresh.gen.ts | 100.0 | 100.0 | ... 省略 ... internal/test_utils/mod.ts | 100.0 | 100.0 | server.ts | 83....

December 17, 2023

fresh v1.6

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" }, // ... 省略 ....

December 3, 2023

Deno v1.38

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ドキュメントを閲覧できます。...

November 5, 2023

fresh v1.5

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

October 15, 2023

Deno v1.37

Deno v1.37がリリースされました。 この記事では主な変更点などについて解説します。 実験的なパッケージマネージャが実装 (jsr:URL) ⚠️この機能は実験的機能のようなので、今後、大きな変更が入る可能性があります。 ⚠️また、パッケージレジストリがまだ公開されていないため、この機能はまだ利用できない状態のようです。 Deno本体に実験的なパッケージマネージャーが実装されています。 具体的には、以下のようにjsr:形式のURLを記述することで、Denoがパッケージレジストリと連携してsemverの解決などを行いつつ、パッケージのインストールなどを自動で行ってくれるようです。 import { foo } from "jsr:@foo/some_pkg@1/mod.ts"; 例えば、この場合、@foo/some_pkgパッケージに関するsemverの解決を行うために、まずhttps://${DENO_REGISTRY_URL}/@foo/some_pkg/meta.jsonの問い合わせを行い、その内容を元にどのバージョンをインストールすべきか判断されるようです。 従来のhttps:やnpm:形式のパッケージと同様に、npm installなどのコマンドの実行は不要で、スクリプトの実行時にDenoが必要に応じてパッケージをインストールしてくれます。 また、パッケージのインストール元レジストリはDENO_REGISTRY_URL環境変数で変更可能なようです。 ここからは推測になりますが、この機能は、元々、導入される予定であったdeno:URLに相当する機能だと思われます。 Deno本体がレジストリと連携してsemver解決を行うことで、依存関係の重複問題などを解消しようというのがこの機能の狙いだと思われます。 feat(unstable): package manager #20517 Built-in support for semvered specifiers on the deno.land/x registry #17495 deno jupyter Deno本体にJupyter Kernelが実装されました。 以下のコマンドを実行すると、Deno Kernelがインストールされているかどうかを確認できます。 $ deno jupyter --unstable ℹ️ Deno kernel is not yet installed, run `deno jupyter --unstable --install` to set it up もしインストールされていなければ、以下のコマンドでインストールできます。...

September 24, 2023

fresh v1.4

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

August 20, 2023

Deno v1.36

Deno v1.36がリリースされました。 この記事では主な変更点などについて解説します。 --deny-*オプション --deny-*という新しいオプションが導入されました。このオプションにより、Denoに対して特定の操作のみを明示的に拒否させることができます。 例えば、以下の場合、Denoにwrite権限のみを拒否させています。 $ deno run --allow-all --deny-write main.js このように--allow-*オプションと--deny-*オプションは併用することが可能で、その場合、--deny-*オプションの方が優先されます。 また、--deny-*には--allow-*と同様に、リスト形式で対象を指定することもできます。 $ deno run --allow-read --deny-read=README.md main.js 上記の場合、./README.mdへの読み込みのみが拒否され、それ以外のファイルの読み込みは許可されます。 { const content = await Deno.readTextFile("Makefile"); // => OK console.info(content); } { const content = await Deno.readTextFile("README.md"); // => PermissionDenied console.info(content); } deno_modulesディレクトリの導入 ⚠️この機能はまだunstableという扱いのため、今後、機能などに変更が入る可能性があります。 また、現在、deno_modulesをvendorにリネームするPRも作成されており、今後ディレクトリやオプションなどの名前が変わる可能性も高そうです。 feat(unstable): rename deno_modules to vendor #20065 deno.jsonにdenoModulesDirという新しいオプションが導入されました。 このオプションにtrueを設定すると、リモートモジュールがdeno_modulesというディレクトリにダウンロードされるように挙動が変更されます。 { "denoModulesDir": true } この状態でスクリプトを実行すると、依存しているリモートモジュールがdeno_modulesに保存されます。 import { blue } from "https://deno....

August 6, 2023

fresh v1.3

fresh v1.3がリリースされました。 この記事では主な変更点などについて解説します。 非同期Routeコンポーネント 非同期Routeコンポーネントがサポートされました。 例えばデータベースや外部のAPIなどから非同期に取得したデータをRouteコンポーネントに渡すためには、今までは以下のようにhandlerを定義する必要がありました。 // routes/users/[id].tsx import type { Handlers, PageProps } from "$fresh/server.ts"; export const handler: Handlers<Data> = { async GET(req, ctx) { const user = await findUserByID(ctx.params.id); if (user == null) { return ctx.renderNotFound(); } const resp = await ctx.render(user); return resp; }, }; export default async function User(props: PageProps<User>) { return <UserDetail user={props.data} />; } 非同期Routeコンポーネントを利用することで、handlerを記述せずに非同期でのデータの取得とコンポーネントのレンダリングが行えるようになります。...

July 23, 2023