Denoばた会議 Monthly 第25回

Deno v1.39

WebGPU APIの再導入

Deno v1.32で削除されたWebGPU APIがunstable APIとして再導入されました。

{
  "unstable": ["webgpu"]
}

これに合わせてstd/webgpuも追加されています。

deno coverage: HTMLレポーター

HTML形式でレポートを出力できます。

$ deno coverage --html ./coverage
HTML coverage report has been generated at file:///path/to/project/coverage/html/index.html

生成されたレポートはブラウザで閲覧できます。

$ xdg-open coverage/html/index.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.3 |   90.3 |
-----------------------------------------------------------
 All files                            |     82.2 |   72.3 |

Deno v1.38までのフォーマットで出力したい場合は、--detailedオプションを指定する必要があります。

deno compileでBYONMがサポート

# (1) npmで依存パッケージをインストールしておきます
$ npm i chalk@5.3.0

$ cat index.js
import chalk from 'chalk';

console.info(chalk.bold(chalk.green('foobar')));

# (2) npmでインストールされたパッケージに依存するスクリプトをコンパイルできます
$ deno compile --unstable-byonm --output=sample index.js
Compile file:///path/to/project/index.js to sample

$ ./sample 
foobar

sloppy imports (--unstable-sloppy-imports)

sloppy importsを有効化すると、以下のような形式でモジュールをimportできます。

// (1) 拡張子なしでのimport
import { add } from './add';

// (2) ディレクトリを指定したimport
import { foo } from './subdir';

// (3) `.ts`モジュールを`.js`拡張子でimport
import { sleep } from './subdir/sleep.js';

deno_stdのアップデート

std/expect

Jest互換なexpect()APIが提供されます。

import { expect } from "https://deno.land/std@0.210.0/expect/mod.ts";
import { describe, it } from "https://deno.land/std@0.210.0/testing/bdd.ts"

describe("add", () => {
  it("returns sum of numbers", () => {
    const expected = 6;
    const actual = add(1, 2, 3);
    expect(actual).toBe(expected);
  });
});

std/cli

コマンドライン引数の解析やスピナーなどのCLI関連のユーティリティなどが提供されます。

import { Spinner } from "https://deno.land/std@0.210.0/cli/spinner.ts";

const spinner = new Spinner({ message: "Loading..." });
spinner.start();
try {
  await doSomething();
} finally {
  spinner.stop();
}

fresh v1.6

Tailwind CSSが公式でサポート (1)

deno.jsonでTailwind CSSに関するマッピングを定義しておきます。

// deno.json
{
  "imports": {
    // ... 省略 ...
    "tailwindcss": "npm:tailwindcss@3.3.5",
    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js"
  },
  // ... 省略 ...
}

Tailwind CSSが公式でサポート (2)

Tailwind CSSの設定を用意します。

// tailwind.config.ts
import type { Config } from "tailwindcss";

export default {
  content: [
    "{routes,islands}/**/*.{ts,tsx}",
  ],
} as Config;

Tailwind CSSが公式でサポート (3)

static/styles.cssを用意します。

/* 必要に応じてカスタマイズします... */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind CSSが公式でサポート (4)

static/styles.cssを読み込むように設定しておきます。

// routes/_app.tsx
import { PageProps } from "$fresh/server.ts";

export default function App({ Component }: PageProps) {
  return (
    <html>
      <head>
        <link rel="stylesheet" href="/styles.css" />
        {/* ...省略... */}
      </head>
      {/* ...省略... */
    </html>
  );
}

Tailwind CSSが公式でサポート (5)

Tailwind CSSプラグインを有効化します。

// fresh.config.ts
import { defineConfig } from "$fresh/server.ts";

import tailwind from "$fresh/plugins/tailwind.ts";

export default defineConfig({
  plugins: [tailwind()],
});

FreshContextの導入

HandlerやMiddlewareHandlerなどのctx引数に渡される型がFreshContextに変更されています。

合わせて、以下の各型もFreshContextをベースに再定義されています。(RouteContext以外は非推奨化されています。)

プラグインからのIslandコンポーネントの提供がサポート

import type { Plugin } from "$fresh/server.ts";

const counterPlugin: Plugin = {
  name: "counter",
  // `islands`で指定されたコンポーネントはIslandとして認識されます。
  islands: {
    baseLocation: "https://deno.land/x/fresh@1.6.0/demo/islands/",
    paths: ["./islands/Counter.tsx"]
  }
};

_fresh/staticのサポート

_fresh/staticに置かれたファイルはstatic/ディレクトリに置かれたファイルよりも優先して配信されます。

先述のTailwind CSSプラグインは、事前ビルド(deno task build)の実行時に_fresh/staticへビルド後のCSSファイルを出力します。