feat(html_analyze): implement noSyncScripts

Author: Netail

crates/biome_html_analyze/src/lint/nursery.rs

@@ -3,10 +3,11 @@
 //! Generated file, do not edit by hand, see `xtask/codegen`
 
 use biome_analyze::declare_lint_group;
+pub mod no_sync_scripts;
 pub mod use_vue_valid_v_bind;
 pub mod use_vue_valid_v_else;
 pub mod use_vue_valid_v_else_if;
 pub mod use_vue_valid_v_html;
 pub mod use_vue_valid_v_if;
 pub mod use_vue_valid_v_on;
-declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: use_vue_valid_v_bind :: UseVueValidVBind , self :: use_vue_valid_v_else :: UseVueValidVElse , self :: use_vue_valid_v_else_if :: UseVueValidVElseIf , self :: use_vue_valid_v_html :: UseVueValidVHtml , self :: use_vue_valid_v_if :: UseVueValidVIf , self :: use_vue_valid_v_on :: UseVueValidVOn ,] } }
+declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: no_sync_scripts :: NoSyncScripts , self :: use_vue_valid_v_bind :: UseVueValidVBind , self :: use_vue_valid_v_else :: UseVueValidVElse , self :: use_vue_valid_v_else_if :: UseVueValidVElseIf , self :: use_vue_valid_v_html :: UseVueValidVHtml , self :: use_vue_valid_v_if :: UseVueValidVIf , self :: use_vue_valid_v_on :: UseVueValidVOn ,] } }

crates/biome_html_analyze/src/lint/nursery/no_sync_scripts.rs

@@ -0,0 +1,79 @@
+use biome_analyze::{
+    Ast, Rule, RuleDiagnostic, RuleSource, context::RuleContext, declare_lint_rule,
+};
+use biome_console::markup;
+use biome_html_syntax::HtmlOpeningElement;
+use biome_rowan::AstNode;
+use biome_rule_options::no_sync_scripts::NoSyncScriptsOptions;
+
+declare_lint_rule! {
+    /// Prevent the usage of synchronous scripts.
+    ///
+    /// A synchronous script can impact your webpage performance, read more on how to [Efficiently load third-party JavaScript](https://web.dev/articles/efficiently-load-third-party-javascript).
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```html,expect_diagnostic
+    /// <script src=""></script>
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```html
+    /// <script src="" async></script>
+    /// <script src="" defer></script>
+    /// ```
+    ///
+    pub NoSyncScripts {
+        version: "next",
+        name: "noSyncScripts",
+        language: "html",
+        recommended: false,
+        sources: &[RuleSource::EslintNext("no-sync-scripts").same()],
+    }
+}
+
+impl Rule for NoSyncScripts {
+    type Query = Ast<HtmlOpeningElement>;
+    type State = ();
+    type Signals = Option<Self::State>;
+    type Options = NoSyncScriptsOptions;
+
+    fn run(ctx: &RuleContext<Self>) -> Option<Self::State> {
+        let binding = ctx.query();
+
+        let name = binding.name().ok()?;
+        let value_token = name.value_token().ok()?;
+        if value_token.text_trimmed() != "script" {
+            return None;
+        }
+
+        let attributes = binding.attributes();
+        if attributes.find_by_name("src").is_none()
+            || attributes.find_by_name("async").is_some()
+            || attributes.find_by_name("defer").is_some()
+        {
+            return None;
+        }
+
+        Some(())
+    }
+
+    fn diagnostic(ctx: &RuleContext<Self>, _state: &Self::State) -> Option<RuleDiagnostic> {
+        let node = ctx.query();
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                node.range(),
+                markup! {
+                    "Unexpected synchronous script."
+                },
+            )
+            .note(markup! {
+                "Synchronous scripts can impact your webpage performance. Add the \"async\" or \"defer\" attribute."
+            }),
+        )
+    }
+}

crates/biome_html_analyze/tests/specs/nursery/noSyncScripts/invalid.html

@@ -0,0 +1 @@
+<script src=""></script>

crates/biome_html_analyze/tests/specs/nursery/noSyncScripts/invalid.html.snap

@@ -0,0 +1,24 @@
+---
+source: crates/biome_html_analyze/tests/spec_tests.rs
+expression: invalid.html
+---
+# Input
+```html
+<script src=""></script>
+
+```
+
+# Diagnostics
+```
+invalid.html:1:1 lint/nursery/noSyncScripts ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Unexpected synchronous script.
+  
+  > 1 │ <script src=""></script>
+      │ ^^^^^^^^^^^^^^^
+    2 │ 
+  
+  i Synchronous scripts can impact your webpage performance. Add the "async" or "defer" attribute.
+  
+
+```

crates/biome_html_analyze/tests/specs/nursery/noSyncScripts/valid.html

@@ -0,0 +1,8 @@
+/* should not generate diagnostics */
+<noscript></noscript>
+
+<script></script>
+
+<script src="" async></script>
+
+<script src="" defer></script>

crates/biome_html_analyze/tests/specs/nursery/noSyncScripts/valid.html.snap

@@ -0,0 +1,16 @@
+---
+source: crates/biome_html_analyze/tests/spec_tests.rs
+expression: valid.html
+---
+# Input
+```html
+/* should not generate diagnostics */
+<noscript></noscript>
+
+<script></script>
+
+<script src="" async></script>
+
+<script src="" defer></script>
+
+```

crates/biome_html_syntax/src/attr_ext.rs

@@ -1,5 +1,8 @@
-use crate::{AnyHtmlAttributeInitializer, inner_string_text};
-use biome_rowan::Text;
+use crate::{
+    AnyHtmlAttribute, AnyHtmlAttributeInitializer, HtmlAttribute, HtmlAttributeList,
+    inner_string_text,
+};
+use biome_rowan::{AstNodeList, Text};
 
 impl AnyHtmlAttributeInitializer {
     /// Returns the string value of the attribute, if available, without quotes.
@@ -15,3 +18,17 @@ impl AnyHtmlAttributeInitializer {
         }
     }
 }
+
+impl HtmlAttributeList {
+    pub fn find_by_name(&self, name_to_lookup: &str) -> Option<HtmlAttribute> {
+        self.iter().find_map(|attribute| {
+            if let AnyHtmlAttribute::HtmlAttribute(attribute) = attribute
+                && let Ok(name) = attribute.name()
+                && name.value_token().ok()?.text_trimmed() == name_to_lookup
+            {
+                return Some(attribute);
+            }
+            None
+        })
+    }
+}

crates/biome_js_analyze/src/lint/nursery/no_sync_scripts.rs

@@ -70,9 +70,10 @@ fn validate_name(node: &AnyJsxElementName) -> Option<()> {
 }
 
 fn validate_attributes(list: &JsxAttributeList) -> Option<()> {
-    list.find_by_name("src")?;
-
-    if list.find_by_name("async").is_some() || list.find_by_name("defer").is_some() {
+    if list.find_by_name("src").is_none()
+        || list.find_by_name("async").is_some()
+        || list.find_by_name("defer").is_some()
+    {
         return None;
     }
 

justfile

@@ -144,10 +144,12 @@ test-lintrule name:
   just _touch crates/biome_json_analyze/tests/spec_tests.rs
   just _touch crates/biome_css_analyze/tests/spec_tests.rs
   just _touch crates/biome_graphql_analyze/tests/spec_tests.rs
+  just _touch crates/biome_html_analyze/tests/spec_tests.rs
   cargo test -p biome_js_analyze -- {{snakecase(name)}} --show-output
   cargo test -p biome_json_analyze -- {{snakecase(name)}} --show-output
   cargo test -p biome_css_analyze -- {{snakecase(name)}} --show-output
   cargo test -p biome_graphql_analyze -- {{snakecase(name)}} --show-output
+  cargo test -p biome_html_analyze -- {{snakecase(name)}} --show-output
 
 # Tests a lint rule. The name of the rule needs to be camel case
 test-transformation name: