From c70a06519120d7c75bbf54e2d4ef02f0582034b9 Mon Sep 17 00:00:00 2001
From: kaykdm <34934746+kaykdm@users.noreply.github.com>
Date: Sun, 14 Jan 2024 02:47:32 +0900
Subject: [PATCH] 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
---
crates/oxc_linter/src/rules.rs | 2 +
.../src/rules/nextjs/no_head_element.rs | 171 ++++++++++++++++++
.../src/snapshots/no_head_element.snap | 23 +++
3 files changed, 196 insertions(+)
create mode 100644 crates/oxc_linter/src/rules/nextjs/no_head_element.rs
create mode 100644 crates/oxc_linter/src/snapshots/no_head_element.snap
diff --git a/crates/oxc_linter/src/rules.rs b/crates/oxc_linter/src/rules.rs
index 8e08161b7..8357eb0b5 100644
--- a/crates/oxc_linter/src/rules.rs
+++ b/crates/oxc_linter/src/rules.rs
@@ -284,6 +284,7 @@ mod nextjs {
pub mod no_assign_module_variable;
pub mod no_async_client_component;
pub mod no_css_tags;
+ pub mod no_head_element;
pub mod no_head_import_in_document;
pub mod no_img_element;
pub mod no_script_component_in_head;
@@ -543,6 +544,7 @@ oxc_macros::declare_all_lint_rules! {
nextjs::no_assign_module_variable,
nextjs::no_async_client_component,
nextjs::no_css_tags,
+ nextjs::no_head_element,
nextjs::no_head_import_in_document,
nextjs::no_img_element,
nextjs::no_script_component_in_head,
diff --git a/crates/oxc_linter/src/rules/nextjs/no_head_element.rs b/crates/oxc_linter/src/rules/nextjs/no_head_element.rs
new file mode 100644
index 000000000..6811475fc
--- /dev/null
+++ b/crates/oxc_linter/src/rules/nextjs/no_head_element.rs
@@ -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 `` element. Use `` 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 `` 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 (
+
+
+
My page title
+
+
+ );
+ }
+ }
+ ",
+ None,
+ None,
+ Some(PathBuf::from("pages/index.js")),
+ ),
+ (
+ r"import Head from 'next/head';
+
+ export class MyComponent {
+ render() {
+ return (
+
+
+
My page title
+
+
+ );
+ }
+ }
+ ",
+ None,
+ None,
+ Some(PathBuf::from("pages/index.tsx")),
+ ),
+ (
+ r"
+ export default function Layout({ children }) {
+ return (
+
+
+ layout
+
+ {children}
+
+ );
+ }
+ ",
+ None,
+ None,
+ Some(PathBuf::from("./app/layout.js")),
+ ),
+ (
+ r"
+ export default function Layout({ children }) {
+ return (
+
+
+ layout
+
+ {children}
+
+ );
+ }
+ ",
+ None,
+ None,
+ Some(PathBuf::from("./app/layout.js")),
+ ),
+ ];
+
+ let fail = vec![
+ (
+ r"
+ export class MyComponent {
+ render() {
+ return (
+
+
+
My page title
+
+
+ );
+ }
+ }",
+ None,
+ None,
+ Some(PathBuf::from("./pages/index.js")),
+ ),
+ (
+ r"import Head from 'next/head';
+
+ export class MyComponent {
+ render() {
+ return (
+
+
+
My page title
+
+
+ My page title
+
+
+ );
+ }
+ }",
+ None,
+ None,
+ Some(PathBuf::from("pages/index.tsx")),
+ ),
+ ];
+
+ Tester::new(NoHeadElement::NAME, pass, fail).test_and_snapshot();
+}
diff --git a/crates/oxc_linter/src/snapshots/no_head_element.snap b/crates/oxc_linter/src/snapshots/no_head_element.snap
new file mode 100644
index 000000000..42ed7b563
--- /dev/null
+++ b/crates/oxc_linter/src/snapshots/no_head_element.snap
@@ -0,0 +1,23 @@
+---
+source: crates/oxc_linter/src/tester.rs
+expression: no_head_element
+---
+ ⚠ eslint-plugin-next(no-head-element): Do not use `` element. Use ` ` from `next/head` instead.
+ ╭─[no_head_element.tsx:5:1]
+ 5 │