feat: add html-eslint/parser explorer (#99)

yeonjuan · nzakas · lumirlumir · web-flow · commit 66e21a6ac3fd · 2025-05-13T23:05:09.000+09:00
Co-authored-by: Nicholas C. Zakas &lt;nicholas@humanwhocodes.com&gt;
Co-authored-by: 루밀LuMir &lt;rpfos@naver.com&gt;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-markdown": "^6.2.5",
@@ -43,6 +44,7 @@
     "@eslint/js": "^9.9.0",
     "@eslint/json": "^0.12.0",
     "@eslint/markdown": "^6.4.0",
+    "@html-eslint/eslint-plugin": "^0.40.3",
     "@lezer/highlight": "^1.2.1",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-dialog": "^1.1.1",
diff --git a/public/languages/html.svg b/public/languages/html.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <title>HTML5 Logo Badge</title>
+  <path fill="#E34F26" d="M71,460 L30,0 481,0 440,460 255,512"/>
+  <path fill="#EF652A" d="M256,472 L405,431 440,37 256,37"/>
+  <path fill="#EBEBEB" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/>
+  <path fill="#FFF" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>
+</svg>
diff --git a/src/components/ast/html-ast-tree-item.tsx b/src/components/ast/html-ast-tree-item.tsx
@@ -0,0 +1,52 @@
+import {
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { TreeEntry } from "../tree-entry";
+import type { FC } from "react";
+import { cn } from "@/lib/utils";
+
+type ASTNode = {
+	readonly type: string;
+	readonly [key: string]: unknown;
+};
+
+export type HtmlAstTreeItemProperties = {
+	readonly index: number;
+	readonly data: ASTNode;
+	readonly esqueryMatchedNodes: ASTNode[];
+};
+
+export const HtmlAstTreeItem: FC<HtmlAstTreeItemProperties> = ({
+	data,
+	index,
+	esqueryMatchedNodes,
+}) => {
+	const isEsqueryMatchedNode = esqueryMatchedNodes.includes(data);
+
+	return (
+		<AccordionItem
+			value={`${index}-${data.type}`}
+			className={cn(
+				"border border-card rounded-lg overflow-hidden",
+				isEsqueryMatchedNode && "border-primary border-4",
+			)}
+		>
+			<AccordionTrigger className="text-sm bg-card px-4 py-3 capitalize">
+				{data.type}
+			</AccordionTrigger>
+			<AccordionContent className="p-4 border-t">
+				<div className="space-y-1">
+					{Object.entries(data).map(item => (
+						<TreeEntry
+							key={item[0]}
+							data={item}
+							esqueryMatchedNodes={esqueryMatchedNodes}
+						/>
+					))}
+				</div>
+			</AccordionContent>
+		</AccordionItem>
+	);
+};
diff --git a/src/components/ast/html-ast.tsx b/src/components/ast/html-ast.tsx
@@ -0,0 +1,44 @@
+import { Accordion } from "@/components/ui/accordion";
+import { Editor } from "@/components/editor";
+import { useAST } from "@/hooks/use-ast";
+import { useExplorer } from "@/hooks/use-explorer";
+import {
+	HtmlAstTreeItem,
+	type HtmlAstTreeItemProperties,
+} from "./html-ast-tree-item";
+import type { FC } from "react";
+import { parseError } from "@/lib/parse-error";
+import { ErrorState } from "../error-boundary";
+
+export const HtmlAst: FC = () => {
+	const result = useAST();
+	const { viewModes } = useExplorer();
+	const { astView } = viewModes;
+
+	if (!result.ok) {
+		const message = parseError(result.errors[0]);
+		return <ErrorState message={message} />;
+	}
+
+	const ast = JSON.stringify(result.ast, null, 2);
+
+	if (astView === "tree") {
+		return (
+			<Accordion
+				type="multiple"
+				className="px-8 pb-4 font-mono space-y-3 min-w-max"
+				defaultValue={["0-Program"]}
+			>
+				<HtmlAstTreeItem
+					data={result.ast as HtmlAstTreeItemProperties["data"]}
+					index={0}
+					esqueryMatchedNodes={
+						result.esqueryMatchedNodes as HtmlAstTreeItemProperties["esqueryMatchedNodes"]
+					}
+				/>
+			</Accordion>
+		);
+	}
+
+	return <Editor readOnly value={ast} />;
+};
diff --git a/src/components/ast/index.tsx b/src/components/ast/index.tsx
@@ -5,6 +5,7 @@ import { JavascriptAst } from "./javascript-ast";
 import { JsonAst } from "./json-ast";
 import { CssAst } from "./css-ast";
 import { MarkdownAst } from "./markdown-ast";
+import { HtmlAst } from "./html-ast";
 import type { FC } from "react";
 
 export const Ast: FC = () => {
@@ -17,6 +18,8 @@ export const Ast: FC = () => {
 			return <JsonAst />;
 		case "css":
 			return <CssAst />;
+		case "html":
+			return <HtmlAst />;
 		default:
 			return <JavascriptAst />;
 	}
diff --git a/src/components/editor.tsx b/src/components/editor.tsx
@@ -7,6 +7,7 @@ import { json } from "@codemirror/lang-json";
 import { javascript } from "@codemirror/lang-javascript";
 import { markdown } from "@codemirror/lang-markdown";
 import { css } from "@codemirror/lang-css";
+import { html } from "@codemirror/lang-html";
 import { EditorView } from "@codemirror/view";
 import { EditorState } from "@codemirror/state";
 import clsx from "clsx";
@@ -27,6 +28,7 @@ const languageExtensions: Record<string, (isJSX?: boolean) => LanguageSupport> =
 		json: () => json(),
 		markdown: () => markdown(),
 		css: () => css(),
+		html: () => html(),
 	};
 
 type EditorProperties = {
diff --git a/src/components/options.tsx b/src/components/options.tsx
@@ -181,6 +181,10 @@ const JavaScriptPanel = () => {
 	);
 };
 
+const HTMLPanel: React.FC = () => {
+	return <></>;
+};
+
 const Panel = ({ language }: { language: string }) => {
 	switch (language) {
 		case "json":
@@ -189,6 +193,8 @@ const Panel = ({ language }: { language: string }) => {
 			return <MarkdownPanel />;
 		case "css":
 			return <CssPanel />;
+		case "html":
+			return <HTMLPanel />;
 		default:
 			return <JavaScriptPanel />;
 	}
diff --git a/src/hooks/use-ast.ts b/src/hooks/use-ast.ts
@@ -3,6 +3,7 @@ import type { Node as EstreeNode } from "estree";
 import css from "@eslint/css";
 import json from "@eslint/json";
 import markdown from "@eslint/markdown";
+import html from "@html-eslint/eslint-plugin";
 import esquery from "esquery";
 import { useExplorer } from "@/hooks/use-explorer";
 import { assertIsUnreachable } from "@/lib/utils";
@@ -86,6 +87,17 @@ export function useAST() {
 			break;
 		}
 
+		case "html": {
+			const language = html.languages.html;
+			astParseResult = language.parse({
+				body: code.html,
+				path: "",
+				physicalPath: "",
+				bom: false,
+			});
+			break;
+		}
+
 		default: {
 			assertIsUnreachable(language);
 		}
diff --git a/src/hooks/use-explorer.ts b/src/hooks/use-explorer.ts
@@ -17,7 +17,7 @@ import {
 } from "../lib/const";
 export type SourceType = Exclude<Options["sourceType"], undefined>;
 export type Version = Exclude<Options["ecmaVersion"], undefined>;
-export type Language = "javascript" | "json" | "markdown" | "css";
+export type Language = "javascript" | "json" | "markdown" | "css" | "html";
 export type JsonMode = "json" | "jsonc" | "json5";
 export type MarkdownMode = "commonmark" | "gfm";
 export type MarkdownFrontmatter = "off" | "yaml" | "toml";
@@ -28,6 +28,7 @@ export type Code = {
 	json: string;
 	markdown: string;
 	css: string;
+	html: string;
 };
 export type JsOptions = {
 	parser: string;
diff --git a/src/lib/const.ts b/src/lib/const.ts
@@ -38,6 +38,11 @@ export const languages = [
 		label: "CSS",
 		icon: "/languages/css.svg",
 	},
+	{
+		value: "html",
+		label: "HTML",
+		icon: "/languages/html.svg",
+	},
 ];
 
 export const parsers = [
@@ -376,11 +381,36 @@ p {
 	margin: 1em 0;
 }`.trim();
 
+export const defaultHtmlCode = `
+<!DOCTYPE html>
+<!--
+Type or paste some HTML here to learn more about
+the static analysis that ESLint can do for you.
+
+The tabs are:
+
+- AST - The Abstract Syntax Tree of the code, which can
+be useful to understand the structure of the code. You
+can view this structure as JSON or in a tree format.
+-->
+
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>HTML</title>
+    </head>
+    <body>
+        <p>Text</p>
+    </body>
+</html>
+`.trim();
+
 export const defaultCode: Code = {
 	javascript: defaultJsCode,
 	json: defaultJsonCode,
 	markdown: defaultMarkdownCode,
 	css: defaultCssCode,
+	html: defaultHtmlCode,
 };
 
 export const defaultJsOptions: JsOptions = {
diff --git a/src/lib/convert-nodes-to-ranges.ts b/src/lib/convert-nodes-to-ranges.ts
@@ -18,6 +18,11 @@ export function convertNodesToRanges(
 					node.loc.start.offset,
 					node.loc.end.offset,
 				] satisfies HighlightedRange;
+			} else if (isNodeWithRange(node)) {
+				return [
+					node.range[0],
+					node.range[1],
+				] satisfies HighlightedRange;
 			}
 		})
 		.filter(range => range !== undefined);
@@ -42,6 +47,10 @@ type PositionElem = {
 	offset: number;
 };
 
+type NodeWithRange = {
+	range: [number, number];
+};
+
 function isNodeWithStartEnd(node: unknown): node is NodeWithStartEnd {
 	return (
 		typeof node === "object" &&
@@ -92,3 +101,15 @@ function isNodeWithLoc(node: unknown): node is NodeWithLoc {
 		typeof node.loc.end.offset === "number"
 	);
 }
+
+function isNodeWithRange(node: unknown): node is NodeWithRange {
+	return (
+		typeof node === "object" &&
+		node !== null &&
+		"range" in node &&
+		Array.isArray(node.range) &&
+		node.range.length === 2 &&
+		typeof node.range[0] === "number" &&
+		typeof node.range[1] === "number"
+	);
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -9,6 +9,9 @@ export default defineConfig({
 			"@": path.resolve(__dirname, "src"),
 		},
 	},
+	optimizeDeps: {
+		include: ["@html-eslint/eslint-plugin"],
+	},
 	build: {
 		outDir: "build",
 	},
