Deep dive into Biome in JSConf 2023

The video included in the slides can be accessed here
https://web.archive.org/web/20230328125908/https://rome.tools/blog/2022/11/08/rome-10/

Transcript

1. Deep dive into Biome
2. Who am I？ Daiki Nishikawa (GitHub: @nissy-dev X: @nissy_dev) Frontend engineer at Cybozu, Inc. Replace frontend using Next.js App Router I like coding rust 🦀 (also like eating 🦀) Core contributor of Biome
3. Today’s talk is … Know what is Biome Understand the difference between Biome and other tools Feel close to Rust code showing linter code
5. What is Biome? Provide toolchains for web development Currently, focus on linter and formatter Language support: JS, TS, JSON and JSONC Biome is the fork of Rome by community The members of Rome are laid off Rome isn’t maintained anymore
6. Latest update Release Intellij plugin 🆕 Add new 15 lint rules 🏛 Establish project governance 🚀 Start working CSS parser
7. Governance Welcome to more contributors Join three new maintainers Collect funds from community Open Collective GitHub Sponsor Start thinking about roadmap
8. CSS Support Working CSS parser Formatter and linter will come next year
9. Who use Biome…?
11. A. Vercel Ant Design Unleash Tamagui … and you?
12. Why use Biome?
13. Advantages 🚀 Fast: Built with Rust ✅ Simple: Zero configuration to get started 🔋 Batteries Included: First class support for TS and JSX … is this all?
14. Error resilience! 0:00
15. Let's look into the internals of parser! From the viewpoint of error resilience
16. General parser
17. Biome parser Don’t convert code to AST directly Return AST even if the syntax is invalid
18. Green Tree・Red Tree Green Tree Immutable tree Node has syntax kind and text length Include all information about code Red Tree Mutable tree Computed from Green Tree Node has APIs to manipulate trees Example of Green Tree ( const a = 1; ) ` ` 1: JS_DIRECTIVE_LIST@0..0 2: JS_MODULE_ITEM_LIST@0..12 0: JS_VARIABLE_STATEMENT@0..12 0: JS_VARIABLE_DECLARATION@0..11 0: (empty) 1: CONST_KW@0..6 "const" [] [Whitespace(" 2: JS_VARIABLE_DECLARATOR_LIST@6..11 0: JS_VARIABLE_DECLARATOR@6..11 0: JS_IDENTIFIER_BINDING@6..8 0: IDENT@6..8 "a" [] [Whitespace(" 1: (empty) 2: JS_INITIALIZER_CLAUSE@8..11 0: EQ@8..10 "=" [] [Whitespace(" ") 1: JS_NUMBER_LITERAL_EXPRESSION@10. 0: JS_NUMBER_LITERAL@10..11 "1" [ 1: SEMICOLON@11..12 ";" [] [] 3: EOF@12..12 "" [] []
19. Cast Red Tree to AST Traverse Red Tree and cast to AST AST is defined by DSL incompatible with estree Example of AST ( const a = 1; ) ` ` JsVariableStatement { declaration: JsVariableDeclaration { await_token: missing (optional), kind: CONST_KW@0..6 "const" [] [Whitespace( declarators: JsVariableDeclaratorList [ JsVariableDeclarator { id: JsIdentifierBinding { name_token: IDENT@6..8 "a" [] [Whites }, variable_annotation: missing (optional) initializer: JsInitializerClause { eq_token: EQ@8..10 "=" [] [Whitespace expression: JsNumberLiteralExpression value_token: JS_NUMBER_LITERAL@10.. }, }, }, ] }
20. Handling invalid syntax Allow missing fields Use bogus node A custom node for invalid syntax Example of AST ( function} ) ` ` items: JsModuleItemList [ JsFunctionDeclaration { async_token: missing (optional), function_token: FUNCTION_KW@0..8 "function" star_token: missing (optional), id: missing (required), type_parameters: missing (optional), parameters: missing (required), return_type_annotation: missing (optional), body: missing (required), }, JsBogusStatement { items: [ R_CURLY@8..9 "}" [] [], ], }, ],
21. Handling invalid syntax Allow missing fields Use bogus node A custom node for invalid syntax Example of AST ( function} ) ` ` id: missing (required), type_parameters: missing (optional), parameters: missing (required), return_type_annotation: missing (optional), body: missing (required), items: JsModuleItemList [ JsFunctionDeclaration { async_token: missing (optional), function_token: FUNCTION_KW@0..8 "function" star_token: missing (optional), }, JsBogusStatement { items: [ R_CURLY@8..9 "}" [] [], ], }, ],
22. Handling invalid syntax Allow missing fields Use bogus node A custom node for invalid syntax Example of AST ( function} ) ` ` JsBogusStatement { items: [ R_CURLY@8..9 "}" [] [], ], }, items: JsModuleItemList [ JsFunctionDeclaration { async_token: missing (optional), function_token: FUNCTION_KW@0..8 "function" star_token: missing (optional), id: missing (required), type_parameters: missing (optional), parameters: missing (required), return_type_annotation: missing (optional), body: missing (required), }, ],
23. Red-Green Tree (lossless syntax tree) Great error resilience Fully recoverable Created by C# compiler team rust-analyzer and swift also use Biome use the forked Rowan Rowan: A library for red-green tree used in rust-analyzer
24. Our parser is based on Red-Green Tree! This is why everything is from scratch Existing AST-based parser tools can't be used
25. Next, let's look into our linter code! According to the difference of our parser our linter is also different...?
26. Example: enforce-foo-bar All const variables named "foo" are assigned the string literal "bar" This is covered in ESLint’s custom rule tutorial // show error! const foo = "foo123"; ↓ // expected const foo = "bar";
27. ESLint implementation create(context) { return { // Performs action in the function on every variable declarator VariableDeclarator(node) { // Check if a `const` variable declaration if (node.parent.kind === "const") { // Check if variable name is `foo` if (node.id.type === "Identifier" && node.id.name === "foo") { // Check if value of variable is "bar" if (node.init && node.init.type === "Literal" && node.init.value !== "bar") { // report error context.report({ ... }); } } } } } }
28. Biome implementation impl Rule for EnforceFooBar { // define the AST node which visitor enter type Query = Ast<JsVariableDeclarator>; type State = (); // The main logic for linter // - return Some(()) when to report error // - return None **when not** to report error fn run(ctx: &RuleContext<Self>) -> Option<Self::State> { let node = ctx.query(); let parent = node .parent::<JsVariableDeclaratorList>()? .parent::<JsVariableDeclaration>()?; ... } }
29. Biome implementation // define the AST node which visitor enter type Query = Ast<JsVariableDeclarator>; impl Rule for EnforceFooBar { type State = (); // The main logic for linter // - return Some(()) when to report error // - return None **when not** to report error fn run(ctx: &RuleContext<Self>) -> Option<Self::State> { let node = ctx.query(); let parent = node .parent::<JsVariableDeclaratorList>()? .parent::<JsVariableDeclaration>()?; ... } }
30. Biome implementation // The main logic for linter // - return Some(()) when to report error // - return None **when not** to report error fn run(ctx: &RuleContext<Self>) -> Option<Self::State> { let node = ctx.query(); let parent = node .parent::<JsVariableDeclaratorList>()? .parent::<JsVariableDeclaration>()?; ... } } impl Rule for EnforceFooBar { // define the AST node which visitor enter type Query = Ast<JsVariableDeclarator>; type State = ();
31. Biome implementation impl Rule for EnforceFooBar { // define the AST node which visitor enter type Query = Ast<JsVariableDeclarator>; type State = (); // The main logic for linter // - return Some(()) when to report error // - return None **when not** to report error fn run(ctx: &RuleContext<Self>) -> Option<Self::State> { let node = ctx.query(); let parent = node .parent::<JsVariableDeclaratorList>()? .parent::<JsVariableDeclaration>()?; ... } }
32. Biome implementation fn run(ctx: &RuleContext<Self>) -> Option<Self::State> { ... // check if a `const` variable declaration if parent.is_const() { // Check if variable name is `foo` if node.id().ok()?.text() == "foo" { // Check if value of variable is "bar" let init_exp = node.initializer()?.expression().ok()?; let literal_exp = init_exp.as_any_js_literal_expression()?; if literal_exp.as_static_value()?.text() != "bar" { // Report error to Biome // The details of error message is implemented by "diagnostic" method return Some(()); } } } None }
33. Biome implementation // check if a `const` variable declaration if parent.is_const() { // Check if variable name is `foo` if node.id().ok()?.text() == "foo" { fn run(ctx: &RuleContext<Self>) -> Option<Self::State> { ... // Check if value of variable is "bar" let init_exp = node.initializer()?.expression().ok()?; let literal_exp = init_exp.as_any_js_literal_expression()?; if literal_exp.as_static_value()?.text() != "bar" { // Report error to Biome // The details of error message is implemented by "diagnostic" method return Some(()); } } } None }
34. Biome implementation // Check if value of variable is "bar" let init_exp = node.initializer()?.expression().ok()?; let literal_exp = init_exp.as_any_js_literal_expression()?; if literal_exp.as_static_value()?.text() != "bar" { // Report error to Biome // The details of error message is implemented by "diagnostic" method return Some(()); } fn run(ctx: &RuleContext<Self>) -> Option<Self::State> { ... // check if a `const` variable declaration if parent.is_const() { // Check if variable name is `foo` if node.id().ok()?.text() == "foo" { } } None }
35. Biome implementation fn run(ctx: &RuleContext<Self>) -> Option<Self::State> { ... // check if a `const` variable declaration if parent.is_const() { // Check if variable name is `foo` if node.id().ok()?.text() == "foo" { // Check if value of variable is "bar" let init_exp = node.initializer()?.expression().ok()?; let literal_exp = init_exp.as_any_js_literal_expression()?; if literal_exp.as_static_value()?.text() != "bar" { // Report error to Biome // The details of error message is implemented by "diagnostic" method return Some(()); } } } None }
36. Comparison impl Rule for EnforceFooBar { type Query = Ast<JsVariableDeclarator>; type State = (); fn run(ctx: &RuleContext<Self>) -> Option<Self::State> { let node = ctx.query(); let parent = node .parent::<JsVariableDeclaratorList>()? .parent::<JsVariableDeclaration>()?; if parent.is_const() { if node.id().ok()?.text() == "foo" { let init_exp = node.initializer()?.expression().ok()?; let literal_exp = init_exp.as_any_js_literal_expression()?; if literal_exp.as_static_value()?.text() != "bar" { return Some(()); } } } None } }
37. The code is similar than I expected It is not necessary to know Rust and Biome in depth from the beginning
38. Did you feel more familiar with Biome? Welcome to your contribution! Learning new languages is fun!
39. References biomejs.dev Announcing Biome Announcing Rome v10 Rowan Syntax in rust-analyzer Rome will be written in Rust 🦀 Rust Dublin October 2023 - Biome