feat(js_analyze): implement noSyncScripts

Author: Netail

.changeset/icy-bags-sleep.md

@@ -0,0 +1,18 @@
+---
+"@biomejs/biome": patch
+---
+
+Added the nursery rule [`noSyncScripts`](https://biomejs.dev/linter/rules/no-sync-scripts/). Prevent the usage of synchronous scripts.
+
+**Invalid:**
+
+```jsx
+<script src="https://third-party-script.js" />
+```
+
+**Valid:**
+
+```jsx
+<script src="https://third-party-script.js" async />
+<script src="https://third-party-script.js" defer />
+```

crates/biome_cli/src/execute/migrate/eslint_any_rule_to_biome.rs

@@ -181,6 +181,7 @@ define_categories! {
     "lint/nursery/noParametersOnlyUsedInRecursion": "https://biomejs.dev/linter/rules/no-parameters-only-used-in-recursion",
     "lint/nursery/noReactForwardRef": "https://biomejs.dev/linter/rules/no-react-forward-ref",
     "lint/nursery/noShadow": "https://biomejs.dev/linter/rules/no-shadow",
+    "lint/nursery/noSyncScripts": "https://biomejs.dev/linter/rules/no-sync-scripts",
     "lint/nursery/noUnknownAttribute": "https://biomejs.dev/linter/rules/no-unknown-attribute",
     "lint/nursery/noUnnecessaryConditions": "https://biomejs.dev/linter/rules/no-unnecessary-conditions",
     "lint/nursery/noUnresolvedImports": "https://biomejs.dev/linter/rules/no-unresolved-imports",

crates/biome_configuration/src/analyzer/linter/rules.rs

@@ -16,6 +16,7 @@ pub mod no_next_async_client_component;
 pub mod no_parameters_only_used_in_recursion;
 pub mod no_react_forward_ref;
 pub mod no_shadow;
+pub mod no_sync_scripts;
 pub mod no_unknown_attribute;
 pub mod no_unnecessary_conditions;
 pub mod no_unresolved_imports;
@@ -38,4 +39,4 @@ pub mod use_sorted_classes;
 pub mod use_spread;
 pub mod use_vue_define_macros_order;
 pub mod use_vue_multi_word_component_names;
-declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: no_continue :: NoContinue , self :: no_deprecated_imports :: NoDeprecatedImports , self :: no_empty_source :: NoEmptySource , self :: no_floating_promises :: NoFloatingPromises , self :: no_for_in :: NoForIn , self :: no_import_cycles :: NoImportCycles , self :: no_increment_decrement :: NoIncrementDecrement , self :: no_jsx_literals :: NoJsxLiterals , self :: no_misused_promises :: NoMisusedPromises , self :: no_next_async_client_component :: NoNextAsyncClientComponent , self :: no_parameters_only_used_in_recursion :: NoParametersOnlyUsedInRecursion , self :: no_react_forward_ref :: NoReactForwardRef , self :: no_shadow :: NoShadow , self :: no_unknown_attribute :: NoUnknownAttribute , self :: no_unnecessary_conditions :: NoUnnecessaryConditions , self :: no_unresolved_imports :: NoUnresolvedImports , self :: no_unused_expressions :: NoUnusedExpressions , self :: no_useless_catch_binding :: NoUselessCatchBinding , self :: no_useless_undefined :: NoUselessUndefined , self :: no_vue_data_object_declaration :: NoVueDataObjectDeclaration , self :: no_vue_duplicate_keys :: NoVueDuplicateKeys , self :: no_vue_reserved_keys :: NoVueReservedKeys , self :: no_vue_reserved_props :: NoVueReservedProps , self :: use_array_sort_compare :: UseArraySortCompare , self :: use_consistent_arrow_return :: UseConsistentArrowReturn , self :: use_exhaustive_switch_cases :: UseExhaustiveSwitchCases , self :: use_explicit_type :: UseExplicitType , self :: use_find :: UseFind , self :: use_max_params :: UseMaxParams , self :: use_qwik_method_usage :: UseQwikMethodUsage , self :: use_qwik_valid_lexical_scope :: UseQwikValidLexicalScope , self :: use_sorted_classes :: UseSortedClasses , self :: use_spread :: UseSpread , self :: use_vue_define_macros_order :: UseVueDefineMacrosOrder , self :: use_vue_multi_word_component_names :: UseVueMultiWordComponentNames ,] } }
+declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: no_continue :: NoContinue , self :: no_deprecated_imports :: NoDeprecatedImports , self :: no_empty_source :: NoEmptySource , self :: no_floating_promises :: NoFloatingPromises , self :: no_for_in :: NoForIn , self :: no_import_cycles :: NoImportCycles , self :: no_increment_decrement :: NoIncrementDecrement , self :: no_jsx_literals :: NoJsxLiterals , self :: no_misused_promises :: NoMisusedPromises , self :: no_next_async_client_component :: NoNextAsyncClientComponent , self :: no_parameters_only_used_in_recursion :: NoParametersOnlyUsedInRecursion , self :: no_react_forward_ref :: NoReactForwardRef , self :: no_shadow :: NoShadow , self :: no_sync_scripts :: NoSyncScripts , self :: no_unknown_attribute :: NoUnknownAttribute , self :: no_unnecessary_conditions :: NoUnnecessaryConditions , self :: no_unresolved_imports :: NoUnresolvedImports , self :: no_unused_expressions :: NoUnusedExpressions , self :: no_useless_catch_binding :: NoUselessCatchBinding , self :: no_useless_undefined :: NoUselessUndefined , self :: no_vue_data_object_declaration :: NoVueDataObjectDeclaration , self :: no_vue_duplicate_keys :: NoVueDuplicateKeys , self :: no_vue_reserved_keys :: NoVueReservedKeys , self :: no_vue_reserved_props :: NoVueReservedProps , self :: use_array_sort_compare :: UseArraySortCompare , self :: use_consistent_arrow_return :: UseConsistentArrowReturn , self :: use_exhaustive_switch_cases :: UseExhaustiveSwitchCases , self :: use_explicit_type :: UseExplicitType , self :: use_find :: UseFind , self :: use_max_params :: UseMaxParams , self :: use_qwik_method_usage :: UseQwikMethodUsage , self :: use_qwik_valid_lexical_scope :: UseQwikValidLexicalScope , self :: use_sorted_classes :: UseSortedClasses , self :: use_spread :: UseSpread , self :: use_vue_define_macros_order :: UseVueDefineMacrosOrder , self :: use_vue_multi_word_component_names :: UseVueMultiWordComponentNames ,] } }

crates/biome_configuration/src/generated/domain_selector.rs

@@ -0,0 +1,124 @@
+use biome_analyze::{
+    Ast, Rule, RuleDiagnostic, RuleDomain, RuleSource, context::RuleContext, declare_lint_rule,
+};
+use biome_console::markup;
+use biome_js_syntax::{
+    AnyJsxElementName, JsxAttributeList, JsxOpeningElement, JsxSelfClosingElement,
+};
+use biome_rowan::{AstNode, declare_node_union};
+use biome_rule_options::no_sync_scripts::NoSyncScriptsOptions;
+
+declare_lint_rule! {
+    /// Prevent the usage of synchronous scripts.
+    ///
+    /// A synchronous script which 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
+    ///
+    /// ```jsx,expect_diagnostic
+    /// const Invalid = () => <script src="https://third-party-script.js" />;
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```jsx
+    /// const Valid = () => {
+    ///   return (
+    ///     <>
+    ///       <script src="https://third-party-script.js" async />
+    ///       <script src="https://third-party-script.js" defer />
+    ///     </>
+    ///   );
+    /// }
+    /// ```
+    ///
+    /// #### Next.js
+    ///
+    /// ```jsx
+    /// import Script from 'next/script'
+    ///
+    /// const Valid = () => <Script src="https://third-party-script.js" />;
+    /// ```
+    ///
+    pub NoSyncScripts {
+        version: "next",
+        name: "noSyncScripts",
+        language: "js",
+        recommended: false,
+        sources: &[RuleSource::EslintNext("no-sync-scripts").same()],
+        domains: &[RuleDomain::React, RuleDomain::Next],
+    }
+}
+
+declare_node_union! {
+    pub NoSyncScriptsQuery =
+        JsxOpeningElement
+        | JsxSelfClosingElement
+}
+
+fn validate_name(node: &AnyJsxElementName) -> Option<()> {
+    let name = node.as_jsx_name()?;
+    let value_token = name.value_token().ok()?;
+
+    if value_token.text_trimmed() == "script" {
+        return Some(());
+    }
+
+    None
+}
+
+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() {
+        return None;
+    }
+
+    Some(())
+}
+
+impl Rule for NoSyncScripts {
+    type Query = Ast<NoSyncScriptsQuery>;
+    type State = ();
+    type Signals = Option<Self::State>;
+    type Options = NoSyncScriptsOptions;
+
+    fn run(ctx: &RuleContext<Self>) -> Self::Signals {
+        let binding = ctx.query();
+
+        match binding {
+            NoSyncScriptsQuery::JsxOpeningElement(node) => {
+                let name = node.name().ok()?;
+                validate_name(&name)?;
+
+                let attributes = node.attributes();
+                validate_attributes(&attributes)
+            }
+            NoSyncScriptsQuery::JsxSelfClosingElement(node) => {
+                let name = node.name().ok()?;
+                validate_name(&name)?;
+
+                let attributes = node.attributes();
+                validate_attributes(&attributes)
+            }
+        }
+    }
+
+    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, or replace with NextJS' Script component."
+            }),
+        )
+    }
+}

crates/biome_diagnostics_categories/src/categories.rs

@@ -0,0 +1,3 @@
+const Invalid = () => {
+	return <script src="" />
+}

crates/biome_js_analyze/src/lint/nursery.rs

@@ -0,0 +1,28 @@
+---
+source: crates/biome_js_analyze/tests/spec_tests.rs
+expression: invalid.jsx
+---
+# Input
+```jsx
+const Invalid = () => {
+	return <script src="" />
+}
+
+```
+
+# Diagnostics
+```
+invalid.jsx:2:9 lint/nursery/noSyncScripts ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Unexpected synchronous script.
+  
+    1 │ const Invalid = () => {
+  > 2 │ 	return <script src="" />
+      │ 	       ^^^^^^^^^^^^^^^^^
+    3 │ }
+    4 │ 
+  
+  i Synchronous scripts can impact your webpage performance. Add the "async" or "defer" attribute, or replace with NextJS' Script component.
+  
+
+```

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

@@ -0,0 +1,16 @@
+/* should not generate diagnostics */
+const Valid1 = () => {
+	return <noscript />
+}
+
+const Valid2 = () => {
+	return <script />
+}
+
+const Valid3 = () => {
+	return <script src="" async />
+}
+
+const Valid4 = () => {
+	return <script src="" defer />
+}