Slide 1

Slide 1 text

Contributing to Deno is fun! pixiv Inc. 森内建太 petamoriken 2023.10.20

Slide 2

Slide 2 text

2 自己紹介 ● Web エンジニア ● ECMAScript や WHATWG を追うのが好き ● よく仕様についての記事を書いています petamoriken プロダクト支援本部 課題解決部(福岡)

Slide 3

Slide 3 text

3

Slide 4

Slide 4 text

4 目次 ● Deno の構成 ● Deno 内部の JavaScript ● primordials.js について ● コントリビュート手順 ● プルリクエストの具体例

Slide 5

Slide 5 text

5 Deno の構成 ● Cargo (Rust) ワークスペースで管理されている ● https://github.com/denoland/deno ○ cli コマンドライン ○ runtime 実行部分 ○ ext Web 標準 API、FFI、Node.js 互換レイヤーなど ● https://github.com/denoland/deno_core ○ core V8、JS と Rust を仲介する部分 (ops) など

Slide 6

Slide 6 text

6 Deno 内部の JavaScript ● Deno API のインターフェースは JavaScript で実装されている ○ Web 標準 API、Node.js 互換レイヤーなど ○ ファイルシステム、ネットワークなど外界とのやり取りは  Rust ● 実行時に都度テキストとして読み込むと時間がかかる 👉 V8 スナップショット機能で JavaScript と ops の初期化処理を高速化

Slide 7

Slide 7 text

pub fn create_runtime_snapshot(snapshot_path: PathBuf) { let fs = std::sync::Arc::new(deno_fs::RealFs); let mut extensions: Vec = vec![ deno_webidl::deno_webidl::init_ops_and_esm(), deno_console::deno_console::init_ops_and_esm(), deno_url::deno_url::init_ops_and_esm(), deno_web::deno_web::init_ops_and_esm::( Default::default(), Default::default(), ), // ... ]; 7 deno/runtime/build.rs

Slide 8

Slide 8 text

function quoteString(string, ctx) { const quote = ArrayPrototypeFind( ctx.quotes, (c) => !StringPrototypeIncludes(string, c), ) ?? ctx.quotes[0]; const escapePattern = new SafeRegExp(`(?=[${quote}\\\\])`, "g"); string = StringPrototypeReplace(string, escapePattern, "\\"); if (ctx.escapeSequences) { string = replaceEscapeSequences(string); } return `${quote}${string}${quote}`; } 8 deno/ext/console/01_console.js

Slide 9

Slide 9 text

9 primordials.js について ● プロトタイプ汚染されても問題なく内部コードが実行できるようするためのもの ○ deno_core/core/00_primordials.js で提供される ● CI で dlint prefer-primordials ルールでチェックされる // NG ["foo", "bar"].include("foo"); // OK const { ArrayPrototypeInclude } = window.__bootstrap.primordials; ArrayPrototypeInclude(["foo", "bar"], "foo");

Slide 10

Slide 10 text

10 コントリビュート手順 1. イシューを見つける ● good first issue ラベルが付いているものが取っつきやすいです 2. 取り組むことを宣言する 3. プルリクエストを作成する ● わからない箇所は Discord や日本コミュニティ Slack などで気軽に聞いて👌 ● 見てもらう前に cargo test ./ tools/format.js ./tools/lint.js を 実行して CI を通す くわしくはコントリビュートガイドへ https://docs.deno.com/runtime/manual/references/contributing/

Slide 11

Slide 11 text

11 プルリクエストの具体例 ● feat(console): Display cause errors in console #12462