TypeScriptとDocumentaion tests / Documentation tests with TypeScript

Transcript

1. TypeScriptとDocumentation tests ssssota
2. だれ • ssssota • 冨川宗太郎 • {"x": "ssssotaro", "github": "ssssota"} • JSのビルド周りのツールチェーンに関心がある
3. Documentation testsとは /// ``` /// let result = doccomments::add(2, 3); /// assert_eq!(result, 5); /// ``` pub fn add(a: i32, b: i32) -> i32 { a + b } ↑はRustのドキュメントに書いてあるもの 最近のJSエンジニアはRustが必修と聞いているのでみなさんご存知。 コード内(外)のドキュメントに記述されたコードを実行することで ドキュメントの信頼性を担保する。
4. JSのDocumentation tests • Supabase CEO作 https://github.com/kiwicopple/doctest-js • azu氏 作 https://github.com/azu/power-doctest • https://github.com/davidchambers/doctest いずれもJavaScriptにサポートが限定される。 （3つ目はなぜかCoffeeScriptサポートがある） TypeScriptのファイルでもDocumentation testsしたい！
5. 作った https://github.com/ssssota/doc-vitest Vitest向けのプラグインとして作ることでTypeScriptのトランスパイルは Vite(esbuild)に、テスト周りのCLI,assertionはVitestに全乗っかり。 /** * @import.meta.vitest * ```ts * expect(add(1, 2)).toBe(3); * assert(add(3, 4) === 7); * ``` */ export function add(a: number, b: number) { return a + b; }
6. 仕組み(変換) /** * @import.meta.vitest * ```ts:1+2=3 * expect(add(1, 2)).toBe(3); * ``` */ export function add(a: number, b: number) { return a + b; } /** * @import.meta.vitest * ```ts:1+2=3 * expect(add(1, 2)).toBe(3); * ``` */ export function add(a: number, b: number) { return a + b; } if (import.meta.vitest) { const {assert,...} = import.meta.vitest; import.meta.vitest.test("1+2=3", async()=>{ expect(add(1, 2)).toBe(3); }); }
7. 仕組み(Vitest) Vitest用プラグインと書いたが正確にはVite用プラグイン。Vitestからの実行時に のみ変換が有効化される VitestのIn-Source Testingと呼ばれる機能で追記されたテストが実行される In-source Testingでは変換前の時点で import.meta.vitest の記述があるファイル だけを実行対象にするので @import.meta.vitest という記述が必要だった テスト対象を抜き出せばOKなので、Markdown内のコードブロックもサポートし ている
8. おわりに JavaScriptの開発では至る所でコード変換されている。 （トランスパイル、バンドル、ミニファイ、Svelte/Vueコンポーネント、、、） webpackやViteのプラグインはUnpluginというライブラリで結構簡単に作れる。 みんなもコード変換しまくろう！