Preact

fresh v3 (alphaバージョン) について 以前にfreshframework Organizationへの移行についてアナウンスされました。 その後、現在はfresh v3の開発が進められているようです (https://discord.com/channels/684898665143206084/991511118524715139/1536792238133346424)。nextブランチで開発が行われているようです (現時点での最新コミット: 119581a) fresh v2との比較 fresh v2との比較についてはfresh2-comparison.mdで詳細に解説されています。 esbuildサポートを廃止してVite 8+Nitroベースで再実装することで、全体的に軽量化が図られているようです。これに伴い、Deno DeployだけでなくNode.jsやCloudflare Workersなどでも動作されるように改善されるようです。パッケージもjsrではなくnpmに公開されています (@frsh/fresh) また、シグナルのサポートの改善や、fresh v2ではサポートされていないイベントリスナーのハイドレーション、Navigation APIをベースにPartialの再実装なども検討されているようです。 現在の実装状況について TODO.mdで実装状況が公開されています。まだalphaバージョンであるため、未実装の機能などがいくつかありそうです。

Deno v2.8.3 Deno v2.8.3がリリースされています。 deno compile deno compileに--exclude-unused-npmオプションが追加されています (#34741)。実行可能ファイルの作成時にアプリケーションにおいてimportされていないnpmパッケージを実行可能ファイルから除外してくれるようです。Deno v2.8.2で実装されたdeno compile --bundleと同様に、実行可能ファイルのサイズの削減が期待されそうです。 また、deno compileで--watchがサポートされています (#34860) deno x deno xコマンドに--ignore-scriptsオプションが追加されています (#34952)。このオプションに引数を指定しない場合、すべてのnpmパッケージのライフサイクルスクリプトが無効化されます。引数が指定された場合、指定されたnpmパッケージに対してのみライフサイクルスクリプトの実行が無効化されます。 deno lsp 以下の改善が実施されています: Deno.test()に対するDebug code lens がサポートされています (#34742) textDocument/codeAction: Deno.test()に対するignore/onlyオプションのトグルがサポートされています (#34861) deno.jsonのimportMapで指定されたImport mapファイルに対する診断がサポートされています (#34864) LSPがdeno doc --lint及びdeno publish --dry-run相当の診断を実施してくれるように改善されています。JSRパッケージ中の各エントリーポイントにおける公開APIのJSDocコメントや型定義について検査してくれます (#34733, #34740) deno test --doc deno test --docがコードブロック中のshebangを解釈してくれるように改善されています。shebangで指定されたパーミッションフラグに基づいてDeno.test()のpermissionsオプションが自動で設定されます (#35052) deno fmt json.trailingCommasオプションが追加されています (#33383) { "fmt": { "json.trailingCommas": "jsonc" } } deno add deno addやdeno updateなどの各種依存関係管理用のコマンドで--env-fileオプションがサポートされています (#34843)。.envでDENO_AUTH_TOKENSが定義されているようなケースなどが想定されています。...

はじめに Fresh v2.3がリリースされました。 この記事では主な変更点などについて解説します。 View Transition API View Transition APIのサポートが行われています (#3708) Partialの仕組みと統合されており、f-client-navによってクライアントナビゲーションが有効化されている要素に対してf-view-transitionを指定することで、Partialによる画面遷移に対してdocument.startViewTransition()が自動で適用されます。 もしブラウザーがView Transition APIをサポートしていない場合は、今まで通り通常のPartialによる画面遷移にフォールバックされます。 不要なJavaScript依存の排除 (Zero JavaScript by Default) アプリケーションがIsland及びPartialのどちらにも依存していない場合、本番ビルドがJavaScriptコードへ依存しないように改善されています (#3696) これによりFresh v1の頃と同様に、必要でなければJavaScriptコードがブラウザーに送信されなくなります。 WebSocketサポート FreshにWebSocketの公式サポートが追加されています (#3774) App#ws()メソッドが追加されており、WebSocket用のエンドポイントを定義することができます。またContext#upgrade()メソッドも追加されており、より柔軟にWebSocket向けのエンドポイントを実装することも可能です。 Islandに対するTemporalのサポート Islandコンポーネントのpropsに対するTemporal関連のオブジェクトの指定がサポートされています (#3701) なおTemporal APIについてはDeno v2.7にて安定化されています。 ipFilter()ミドルウェア @fresh/coreパッケージにipFilter()が追加されています (#3035) @std/net/unstable-ipのmatchSubnets()をベースに実装されており、指定されたCIDR表記に基づいてアクセス制限を掛けることができます。 csp() - リクエストごとのnonceの生成がサポート csp()ミドルウェアにuseNonceオプションが追加されています (#3709) このオプションにtrueが設定された場合、FreshはSSRごとに一意なnonceを生成し、各種インライン<script>や<style>に設定した上で、Content-Security-Policyヘッダーの各種ディレクティブに対してunsafe-inlineではなくnonce-<nonce>を設定してくれます。 trustProxyオプション AppにtrustProxyオプションが追加されています (#3757) このオプションにtrue が指定されると、ContextオブジェクトのurlプロパティーがX-Forwarded-Proto及びX-Forwarded-Hostヘッダーを考慮して設定されます。 複数静的ディレクトリのサポート staticDirオプションで配列の指定がサポートされています (#3759) Viteプラグイン (@fresh/plugin-vite) においてstaticDirオプションで配列が指定された場合、最初の要素 (ディレクトリ) がViteのpublicDirオプションに指定され、それ以外はFreshの開発サーバーから配信されるようです。 フォームに対する_freshIndicatorのサポート Partialが適用されたformまたはbutton[type=submit]要素に対して、ref経由で_freshIndicator属性にSignalを設定しておくことで、該当のフォームがsubmitされる際に_freshIndicatorに設定されたSignalが自動的にtrueに更新されます (#3753)。これにより該当のSignalの値を元にローディングのアニメーションを表示することなどが可能です。 @fresh/init - deno createのサポート @fresh/initパッケージでdeno createコマンドによるプロジェクトの作成がサポートされています (#3706, #3746) これによりdeno create jsr@fresh/initコマンドでプロジェクトが作成できます。...

Deno v2.1.7 Deno v2.1.7がリリースされています。 v2.1.6で発生していたWorkerに関する問題の修正 v2.1.6においてWorkerの使用時にDenoがパニックすることがあった問題が修正されています (#27741) deno install -g --configに関する挙動の変更 deno install -gで--configが指定された際に、指定された設定ファイルに含まれるimportMapが無視されるよう挙動が変更されています (#27744) deno install -gで--import-mapと--configが併用された際に、意図せぬ動作をすることの防止が目的のようです。 Node.js互換性の改善 node:crypto Decipherでaes-256-gcmまたはaes-128-gcmを使用している際に、finalメソッドにおいて認証タグのチェックが行われるように改善されています (#27733) node:fs/promises FileHandleにdatasync()とsync()メソッドが追加されています (#27677) node:http ClientRequestが保持するsocketにおいてエラーが発生した際に、そのClientRequestオブジェクトでerrorイベントが発火されるよう改善されています (#27678) node:tls connect()でECONNRESETエラーが起きることのある問題が修正されています (#27707) deno_stdのリリース deno_stdのリリースが行われています (release-2025.01.22) @std/async@1.0.10 @std/async@1.0.10がリリースされています。 @std/async/unstable-wait-forが追加 waitFor (@std/async/unstable-wait-for)という新しい実験的APIが追加されています。predicateが満たされるまで待機してくれます。 import { waitFor } from "jsr:@std/async@1.0.10/unstable-wait-for"; // ... await waitFor( () => task.isFinished(), // predicate 5_000, // timeout ); @std/fs@1.0.10 @std/fs@1.0.10がリリースされています。 Node.js向けサポートの改善 @std/fsのNode.jsサポート向けに、以下のモジュールが追加されています: @std/fs/unstable-symlink (symlink()とsymlinkSync()が提供されます) @std/fs/unstable-chmod (chmod()とchmodSync()が提供されます) @std/fs/unstable-read-dir @std/assert@1....

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がリリースされました。 この記事では主な変更点などについて解説します。 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....

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

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を記述せずに非同期でのデータの取得とコンポーネントのレンダリングが行えるようになります。...

fresh v1.2がリリースされました。 この記事では主な変更点などについて解説します。 このリリースに合わせて、PreactのメンテナーであるMarvin Hagemeister氏がDeno社に入社されたことが発表されています。これからMarvin Hagemeister氏を中心に、フルタイムでFreshの開発が進められていくことが計画されているようです。 アップデートについて freshはアップデート用のスクリプト(update.ts)を提供しています。 以下のコマンドを実行すると、v1.2へアップデートすることができます。 $ deno run -A -r https://fresh.deno.dev/update . また、このバージョン以降からinit.ts (freshのプロジェクト初期化用のスクリプト)で作成したプロジェクトでは、deno task updateでもfreshをアップデートすることができます。 Islandコンポーネントに関する改善 props.childrenのサポート Islandコンポーネントでprops.childrenがサポートされました。 import type { PageProps } from "$fresh/server.ts"; import Collapse from "../islands/Collapse.tsx"; function Content() { return <div>foobar</div>; } export default function Index(props: PageProps) { return ( <Collapse> <Content /> </Collapse> ); } またIslandコンポーネントをネストすることもできます。 export default function Index(props: PageProps) { return ( <Collapse> <Collapse> <Content /> </Collapse> </Collapse> ); } 制限として、children以外のpropsにコンポーネントを渡すことはまだサポートされていません。...