うるおいらんど

Deno Fresh のアップデート

作成日
更新日

Freshは、複数の独立してバージョン管理され、リリースされているコンポーネントから構成されています。

また、一部のプラグインには独自の依存関係があり、それらも独立してアップデートできます。

これらのコンポーネントは基本的に独立してアップデート可能ですが、Freshの特定のバージョンは、依存関係の特定のバージョンを必要とする場合があります。これについては、以下にドキュメント化されています。

依存関係のバージョンを確認し 、互換性を確保しながらアップデートすることが推奨されます。

Fresh version Preact preact-render-to-string Deno
1.0.0-1.0.2 >=10.8.1 <11.0.0 >=5.2.0 <6.0.0 >= 1.23.0
1.1.0-1.1.5 >=10.8.1 <11.0.0 >=5.2.0 <6.0.0 >= 1.25.0
1.2.0 >=10.15.0 <11.0.0 >=6.1.0 >= 1.25.0

依存関係のアップデート

依存関係をアップデートするには、次の2つの方法があります。

  1. Freshアップデーターを使用して、プロジェクトの依存関係を更新する。
  2. deno.jsonファイル内の依存関係バージョンを手動で更新する。

自動アップデーター

自動アップデーターは、コマンドラインツールで、プロジェクトのdeno.jsonファイルを最新バージョンのFreshとその依存関係にアップデートします。また、プロジェクトのコードを最新のFreshプロジェクトに推奨されるパターンに更新するためのコードモッドも含まれている場合があります。

自動アップデーターを実行するには、プロジェクトのルートディレクトリで次のコマンドを実行します。

$ deno run -A -r https://fresh.deno.dev/update

実行後、プロジェクトに加えられる変更内容を確認するプロンプトが表示されます。

手動での依存関係のアップデート

プロジェクトの依存関係を手動で更新するには、プロジェクトディレクトリのルートにあるdeno.jsonファイルを編集します。依存関係のバージョンは、このファイル内のURLにエンコードされています。例えば、Freshのバージョンを1.0.2から1.1.3に更新し、Preactを最新バージョンにアップデートする手順は以下の通りです。

deno.json
  {
    "imports": {
-     "$fresh/": "https://deno.land/x/fresh@1.0.2/",
+     "$fresh/": "https://deno.land/x/fresh@1.1.5/",

-     "preact": "https://esm.sh/preact@10.8.1",
-     "preact/": "https://esm.sh/preact@10.8.1/",
+     "preact": "https://esm.sh/preact@10.11.0",
+     "preact/": "https://esm.sh/preact@10.11.0/",

-     "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.0",
+     "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.1.0",

      "twind": "https://esm.sh/twind@0.16.17",
      "twind/": "https://esm.sh/twind@0.16.17/"
    }
  }
  • Fresh: バージョン1.1.3に更新。
  • Preact: 最新バージョンに更新するために、@latestを使用。

手動でバージョンを変更した後、プロジェクトを再実行して、依存関係が正しく更新されていることを確認してください。

自動アップデートチェック

Freshは、CI環境外で実行されている場合、定期的に新しいバージョンが利用可能かどうかをチェックします。このチェックは1日1回行われますが、FRESH_NO_UPDATE_CHECK=true環境変数を設定することで無効化することができます。

Code mods

Code modsは、Freshプロジェクトの最新の推奨パターンにコードを更新するために実行できる小さなスクリプトです。Code modsは、自動アップデーターを通じて実行できます。ただし、Code modsがすべてのケースをカバーできない場合があるため、一部のコードは手動で更新する必要があるかもしれません。このセクションでは、現在利用可能なCode modsについて説明します。

クラシカルJSX -> 自動JSX

  • このコードモッドは、Freshバージョン1.1.0以上でのみ利用可能です。

従来のJSX変換（/** @jsx h */プラグマに依存する方法）は、FreshプロジェクトでJSXを使用する推奨方法ではなくなりました。代わりに、バージョン 1.1.0以降、Freshプロジェクトでは、JSXプラグマやPreactのインポートが不要な自動JSX変換を使用する必要があります。

- /** @jsx h */
- import { h } from "preact";

  export default function Page() {
    return <div>Hello world!</div>;
  }

コードモッドは、あなたのdeno.jsonファイルを更新し、自動JSX変換を有効にするための関連するコンパイラオプションを含めます。その後、プロジェクト全体をスキャンし、/** @jsx h */プラグマおよびimport { h } from "preact"ステートメントを削除します。

クラシックTwind -> Twindプラグイン

このCode modsは、Fresh 1.1.0以降でのみ利用可能です。

Freshバージョン1.1.0では、FreshでTwindを使用するための新しいプラグインが導入されました。このプラグインは、以前の生のTwind統合よりも使いやすくなっています。

このコードモッドは、プロジェクトを新しいTwindプラグインに移行します。main.tsファイルを更新してTwindプラグインをインポートし、plugins配列に追加します。また、tw関数の多くの不要な使用や、不要なTwindのインポートを削除するためにファイルを更新します。コードモッドはほとんどのケースに対応しますが、一部のコードは手動で更新する必要があるかもしれません。さらに、カスタム設定を使用している場合は、twind.config.tsを手動で更新する必要があります。

サイトアイコン
公開日
更新日