mirror of
https://github.com/danbulant/oxc
synced 2026-05-24 12:21:58 +00:00
feat(linter): eslint-plugin-next: no-head-element (#2006)
Part of: https://github.com/oxc-project/oxc/issues/1929 Based on: - code: https://github.com/vercel/next.js/blob/canary/packages/eslint-plugin-next/src/rules/no-head-element.ts - test: https://github.com/vercel/next.js/blob/canary/test/unit/eslint-plugin-next/no-head-element.test.ts - doc: https://nextjs.org/docs/messages/no-head-element --------- Co-authored-by: Cameron Clark <cameron.clark@hey.com>
This commit is contained in:
kaykdm
GitHub
parent
8f0f824a6a
commit
c70a065191
3 changed files with 196 additions and 0 deletions
|
|
@ -284,6 +284,7 @@ mod nextjs {
|
||||||
pub mod no_assign_module_variable;
|
pub mod no_assign_module_variable;
|
||||||
pub mod no_async_client_component;
|
pub mod no_async_client_component;
|
||||||
pub mod no_css_tags;
|
pub mod no_css_tags;
|
||||||
|
pub mod no_head_element;
|
||||||
pub mod no_head_import_in_document;
|
pub mod no_head_import_in_document;
|
||||||
pub mod no_img_element;
|
pub mod no_img_element;
|
||||||
pub mod no_script_component_in_head;
|
pub mod no_script_component_in_head;
|
||||||
|
|
@ -543,6 +544,7 @@ oxc_macros::declare_all_lint_rules! {
|
||||||
nextjs::no_assign_module_variable,
|
nextjs::no_assign_module_variable,
|
||||||
nextjs::no_async_client_component,
|
nextjs::no_async_client_component,
|
||||||
nextjs::no_css_tags,
|
nextjs::no_css_tags,
|
||||||
|
nextjs::no_head_element,
|
||||||
nextjs::no_head_import_in_document,
|
nextjs::no_head_import_in_document,
|
||||||
nextjs::no_img_element,
|
nextjs::no_img_element,
|
||||||
nextjs::no_script_component_in_head,
|
nextjs::no_script_component_in_head,
|
||||||
|
|
|
||||||
171
crates/oxc_linter/src/rules/nextjs/no_head_element.rs
Normal file
171
crates/oxc_linter/src/rules/nextjs/no_head_element.rs
Normal file
|
|
@ -0,0 +1,171 @@
|
||||||
|
use oxc_ast::{ast::JSXElementName, AstKind};
|
||||||
|
use oxc_diagnostics::{
|
||||||
|
miette::{self, Diagnostic},
|
||||||
|
thiserror::Error,
|
||||||
|
};
|
||||||
|
use oxc_macros::declare_oxc_lint;
|
||||||
|
use oxc_span::Span;
|
||||||
|
|
||||||
|
use crate::{context::LintContext, rule::Rule, AstNode};
|
||||||
|
|
||||||
|
#[derive(Debug, Error, Diagnostic)]
|
||||||
|
#[error("eslint-plugin-next(no-head-element): Do not use `<head>` element. Use `<Head />` from `next/head` instead.")]
|
||||||
|
#[diagnostic(severity(warning), help("See https://nextjs.org/docs/messages/no-head-element"))]
|
||||||
|
struct NoHeadElementDiagnostic(#[label] pub Span);
|
||||||
|
|
||||||
|
#[derive(Debug, Default, Clone)]
|
||||||
|
pub struct NoHeadElement;
|
||||||
|
|
||||||
|
declare_oxc_lint!(
|
||||||
|
/// ### What it does
|
||||||
|
/// Prevent usage of `<head>` element.
|
||||||
|
///
|
||||||
|
/// ### Why is this bad?
|
||||||
|
///
|
||||||
|
///
|
||||||
|
/// ### Example
|
||||||
|
/// ```javascript
|
||||||
|
/// ```
|
||||||
|
NoHeadElement,
|
||||||
|
correctness
|
||||||
|
);
|
||||||
|
|
||||||
|
impl Rule for NoHeadElement {
|
||||||
|
fn run<'a>(&self, node: &AstNode<'a>, ctx: &LintContext<'a>) {
|
||||||
|
let Some(full_file_path) = ctx.file_path().to_str() else { return };
|
||||||
|
let is_in_app_dir = full_file_path.contains("app/") || full_file_path.contains("app\\");
|
||||||
|
if is_in_app_dir {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if let AstKind::JSXOpeningElement(elem) = node.kind() {
|
||||||
|
let JSXElementName::Identifier(id) = &elem.name else { return };
|
||||||
|
if id.name == "head" {
|
||||||
|
ctx.diagnostic(NoHeadElementDiagnostic(elem.span));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[test]
|
||||||
|
fn test() {
|
||||||
|
use crate::tester::Tester;
|
||||||
|
use std::path::PathBuf;
|
||||||
|
|
||||||
|
let pass = vec![
|
||||||
|
(
|
||||||
|
r"import Head from 'next/head';
|
||||||
|
|
||||||
|
export class MyComponent {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Head>
|
||||||
|
<title>My page title</title>
|
||||||
|
</Head>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
",
|
||||||
|
None,
|
||||||
|
None,
|
||||||
|
Some(PathBuf::from("pages/index.js")),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
r"import Head from 'next/head';
|
||||||
|
|
||||||
|
export class MyComponent {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Head>
|
||||||
|
<title>My page title</title>
|
||||||
|
</Head>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
",
|
||||||
|
None,
|
||||||
|
None,
|
||||||
|
Some(PathBuf::from("pages/index.tsx")),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
r"
|
||||||
|
export default function Layout({ children }) {
|
||||||
|
return (
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>layout</title>
|
||||||
|
</head>
|
||||||
|
<body>{children}</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
",
|
||||||
|
None,
|
||||||
|
None,
|
||||||
|
Some(PathBuf::from("./app/layout.js")),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
r"
|
||||||
|
export default function Layout({ children }) {
|
||||||
|
return (
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>layout</title>
|
||||||
|
</head>
|
||||||
|
<body>{children}</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
",
|
||||||
|
None,
|
||||||
|
None,
|
||||||
|
Some(PathBuf::from("./app/layout.js")),
|
||||||
|
),
|
||||||
|
];
|
||||||
|
|
||||||
|
let fail = vec![
|
||||||
|
(
|
||||||
|
r"
|
||||||
|
export class MyComponent {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<head>
|
||||||
|
<title>My page title</title>
|
||||||
|
</head>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}",
|
||||||
|
None,
|
||||||
|
None,
|
||||||
|
Some(PathBuf::from("./pages/index.js")),
|
||||||
|
),
|
||||||
|
(
|
||||||
|
r"import Head from 'next/head';
|
||||||
|
|
||||||
|
export class MyComponent {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<head>
|
||||||
|
<title>My page title</title>
|
||||||
|
</head>
|
||||||
|
<Head>
|
||||||
|
<title>My page title</title>
|
||||||
|
</Head>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}",
|
||||||
|
None,
|
||||||
|
None,
|
||||||
|
Some(PathBuf::from("pages/index.tsx")),
|
||||||
|
),
|
||||||
|
];
|
||||||
|
|
||||||
|
Tester::new(NoHeadElement::NAME, pass, fail).test_and_snapshot();
|
||||||
|
}
|
||||||
23
crates/oxc_linter/src/snapshots/no_head_element.snap
Normal file
23
crates/oxc_linter/src/snapshots/no_head_element.snap
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
---
|
||||||
|
source: crates/oxc_linter/src/tester.rs
|
||||||
|
expression: no_head_element
|
||||||
|
---
|
||||||
|
⚠ eslint-plugin-next(no-head-element): Do not use `<head>` element. Use `<Head />` from `next/head` instead.
|
||||||
|
╭─[no_head_element.tsx:5:1]
|
||||||
|
5 │ <div>
|
||||||
|
6 │ <head>
|
||||||
|
· ──────
|
||||||
|
7 │ <title>My page title</title>
|
||||||
|
╰────
|
||||||
|
help: See https://nextjs.org/docs/messages/no-head-element
|
||||||
|
|
||||||
|
⚠ eslint-plugin-next(no-head-element): Do not use `<head>` element. Use `<Head />` from `next/head` instead.
|
||||||
|
╭─[no_head_element.tsx:6:1]
|
||||||
|
6 │ <div>
|
||||||
|
7 │ <head>
|
||||||
|
· ──────
|
||||||
|
8 │ <title>My page title</title>
|
||||||
|
╰────
|
||||||
|
help: See https://nextjs.org/docs/messages/no-head-element
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in a new issue