|
| 1 | +use biome_analyze::{ |
| 2 | + Rule, RuleDiagnostic, RuleDomain, RuleSource, context::RuleContext, declare_lint_rule, |
| 3 | +}; |
| 4 | +use biome_console::markup; |
| 5 | +use biome_diagnostics::Severity; |
| 6 | +use biome_js_syntax::{ |
| 7 | + AnyJsExpression, AnyJsxAttribute, JsObjectExpression, JsVariableDeclarator, JsxElement, |
| 8 | + jsx_ext::AnyJsxElement, |
| 9 | +}; |
| 10 | +use biome_rowan::{AstNode, AstNodeList, TextRange, TokenText}; |
| 11 | +use biome_rule_options::use_inline_script_id::UseInlineScriptIdOptions; |
| 12 | +use rustc_hash::FxHashSet; |
| 13 | + |
| 14 | +use crate::{ |
| 15 | + nextjs::{NextUtility, is_next_import}, |
| 16 | + services::semantic::Semantic, |
| 17 | +}; |
| 18 | + |
| 19 | +declare_lint_rule! { |
| 20 | + /// Enforce `id` attribute on `next/script` components with inline content or `dangerouslySetInnerHTML`. |
| 21 | + /// |
| 22 | + /// Using inline scripts or `dangerouslySetInnerHTML` in `next/script` components requires an `id` attribute to ensure that Next.js can track and optimize them correctly. |
| 23 | + /// |
| 24 | + /// ## Examples |
| 25 | + /// |
| 26 | + /// ### Invalid |
| 27 | + /// |
| 28 | + /// ```jsx,expect_diagnostic |
| 29 | + /// import Script from 'next/script' |
| 30 | + /// |
| 31 | + /// export default function Page() { |
| 32 | + /// return ( |
| 33 | + /// <Script>{`console.log('Hello world!');`}</Script> |
| 34 | + /// ) |
| 35 | + /// } |
| 36 | + /// ``` |
| 37 | + /// |
| 38 | + /// ```jsx,expect_diagnostic |
| 39 | + /// import Script from 'next/script' |
| 40 | + /// |
| 41 | + /// export default function Page() { |
| 42 | + /// return ( |
| 43 | + /// <Script dangerouslySetInnerHTML={{ __html: `console.log('Hello world!');` }} /> |
| 44 | + /// ) |
| 45 | + /// } |
| 46 | + /// ``` |
| 47 | + /// |
| 48 | + /// ### Valid |
| 49 | + /// ```jsx |
| 50 | + /// import Script from 'next/script' |
| 51 | + /// |
| 52 | + /// export default function Page() { |
| 53 | + /// return ( |
| 54 | + /// <Script id="my-script">{`console.log('Hello world!');`}</Script> |
| 55 | + /// ) |
| 56 | + /// } |
| 57 | + /// ``` |
| 58 | + /// |
| 59 | + /// ```jsx |
| 60 | + /// import Script from 'next/script' |
| 61 | + /// |
| 62 | + /// export default function Page() { |
| 63 | + /// return ( |
| 64 | + /// <Script id="my-script" dangerouslySetInnerHTML={{ __html: `console.log('Hello world!');` }} /> |
| 65 | + /// ) |
| 66 | + /// } |
| 67 | + /// ``` |
| 68 | + /// |
| 69 | + pub UseInlineScriptId { |
| 70 | + version: "next", |
| 71 | + name: "useInlineScriptId", |
| 72 | + language: "jsx", |
| 73 | + sources: &[RuleSource::EslintNext("inline-script-id").same()], |
| 74 | + recommended: true, |
| 75 | + severity: Severity::Error, |
| 76 | + domains: &[RuleDomain::Next], |
| 77 | + } |
| 78 | +} |
| 79 | + |
| 80 | +impl Rule for UseInlineScriptId { |
| 81 | + type Query = Semantic<AnyJsxElement>; |
| 82 | + type State = TextRange; |
| 83 | + type Signals = Option<Self::State>; |
| 84 | + type Options = UseInlineScriptIdOptions; |
| 85 | + |
| 86 | + fn run(ctx: &RuleContext<Self>) -> Self::Signals { |
| 87 | + let jsx_element = ctx.query(); |
| 88 | + |
| 89 | + let semantic_model = ctx.model(); |
| 90 | + let reference = jsx_element.name().ok()?; |
| 91 | + let reference = reference.as_jsx_reference_identifier()?; |
| 92 | + let binding = semantic_model.binding(reference)?; |
| 93 | + if !is_next_import(&binding, NextUtility::Script) { |
| 94 | + return None; |
| 95 | + } |
| 96 | + |
| 97 | + let mut attribute_names = FxHashSet::default(); |
| 98 | + for attribute in jsx_element.attributes() { |
| 99 | + match attribute { |
| 100 | + AnyJsxAttribute::JsxAttribute(a) => { |
| 101 | + if let Ok(name_value) = a.name_value_token() { |
| 102 | + let name = name_value.token_text(); |
| 103 | + attribute_names.insert(name); |
| 104 | + } |
| 105 | + } |
| 106 | + AnyJsxAttribute::JsxSpreadAttribute(spread) => { |
| 107 | + if let Ok(argument) = spread.argument() { |
| 108 | + match argument { |
| 109 | + AnyJsExpression::JsObjectExpression(obj_expr) => { |
| 110 | + collect_property_names(&obj_expr, &mut attribute_names)?; |
| 111 | + } |
| 112 | + AnyJsExpression::JsIdentifierExpression(ident_expr) => { |
| 113 | + if let Ok(reference) = ident_expr.name() |
| 114 | + && let Some(binding) = semantic_model.binding(&reference) |
| 115 | + && let Some(declarator) = binding |
| 116 | + .syntax() |
| 117 | + .ancestors() |
| 118 | + .find_map(JsVariableDeclarator::cast) |
| 119 | + && let Some(initializer) = declarator.initializer() |
| 120 | + && let Ok(expression) = initializer.expression() |
| 121 | + && let AnyJsExpression::JsObjectExpression(obj_expr) = |
| 122 | + expression |
| 123 | + { |
| 124 | + collect_property_names(&obj_expr, &mut attribute_names)?; |
| 125 | + } |
| 126 | + } |
| 127 | + _ => {} |
| 128 | + } |
| 129 | + } |
| 130 | + } |
| 131 | + _ => {} |
| 132 | + } |
| 133 | + } |
| 134 | + |
| 135 | + let has_children = jsx_element |
| 136 | + .parent::<JsxElement>() |
| 137 | + .is_some_and(|parent| !parent.children().is_empty()); |
| 138 | + if (has_children || attribute_names.contains("dangerouslySetInnerHTML")) |
| 139 | + && !attribute_names.contains("id") |
| 140 | + { |
| 141 | + return Some(jsx_element.range()); |
| 142 | + } |
| 143 | + |
| 144 | + None |
| 145 | + } |
| 146 | + |
| 147 | + fn diagnostic(_ctx: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> { |
| 148 | + Some( |
| 149 | + RuleDiagnostic::new( |
| 150 | + rule_category!(), |
| 151 | + state, |
| 152 | + markup! { |
| 153 | + ""<Emphasis>"next/script"</Emphasis>" components have inline content or `dangerouslySetInnerHTML` without "<Emphasis>"id"</Emphasis>" attribute." |
| 154 | + }, |
| 155 | + ) |
| 156 | + .note(markup!( |
| 157 | + "Next.js requires "<Emphasis>"id"</Emphasis>" attribute to track and optimize inline scripts. Without it, performance issues may occur." |
| 158 | + )) |
| 159 | + .note(markup! { |
| 160 | + "See the "<Hyperlink href="https://nextjs.org/docs/messages/inline-script-id">"Next.js docs"</Hyperlink>" for more details." |
| 161 | + }) |
| 162 | + ) |
| 163 | + } |
| 164 | +} |
| 165 | + |
| 166 | +fn collect_property_names( |
| 167 | + obj_expr: &JsObjectExpression, |
| 168 | + set: &mut FxHashSet<TokenText>, |
| 169 | +) -> Option<()> { |
| 170 | + for member in obj_expr.members() { |
| 171 | + let member = member.ok()?; |
| 172 | + if let Some(property_member) = member.as_js_property_object_member() |
| 173 | + && let Some(name) = property_member.name().ok().and_then(|n| n.name()) |
| 174 | + { |
| 175 | + set.insert(name); |
| 176 | + } else if let Some(shorthand) = member.as_js_shorthand_property_object_member() |
| 177 | + && let Some(name) = shorthand.name().ok().and_then(|n| n.name().ok()) |
| 178 | + { |
| 179 | + set.insert(name); |
| 180 | + } |
| 181 | + } |
| 182 | + Some(()) |
| 183 | +} |
![autofix-ci[bot]](https://avatars.githubusercontent.com/in/243519?v=4&size=40){kind=avatar}
0 commit comments