Skip to content

Commit d05b17e

Browse files
yeonjuanyeonjuan
authored
Add website (#14)
1 parent d33746d commit d05b17e

20 files changed

+5225
-1
lines changed

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
coverage
33
yarn.lock
44
dist
5+
website

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ ES HTML Parser is an HTML parser that generates an abstract syntax tree similar
1414

1515
This project began as a fork of [hyntax](https://github.com/mykolaharmash/hyntax) and is developed to follow [ESTree](https://github.com/estree/estree)-like ast specification.
1616

17+
See [online demo](https://yeonjuan.github.io/es-html-parser/).
18+
1719
## Table of Contents
1820

1921
- [Install](#install)

‎tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
"esModuleInterop": true,
77
"forceConsistentCasingInFileNames": true,
88
"rootDir": "src"
9-
}
9+
},
10+
"exclude": ["website"]
1011
}

‎website/.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dist

‎website/.eslintrc.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
module.exports = {
2+
root: true,
3+
plugins: ["@html-eslint", "@typescript-eslint"],
4+
overrides: [
5+
{
6+
files: ["*.html"],
7+
parser: "@html-eslint/parser",
8+
extends: ["plugin:@html-eslint/recommended"],
9+
rules: {
10+
"@html-eslint/indent": ["error", 2],
11+
},
12+
},
13+
{
14+
files: ["**/*.tsx", "**/*.ts"],
15+
parser: "@typescript-eslint/parser",
16+
extends: ["plugin:@typescript-eslint/recommended"],
17+
},
18+
{
19+
files: ["**/*.js"],
20+
parser: "esprima",
21+
extends: ["eslint:recommended"],
22+
env: {
23+
node: true,
24+
},
25+
},
26+
],
27+
};

‎website/.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.html

‎website/babe.config.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/preset-env", "@babel/preset-react"]
3+
}

‎website/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>Demo - ES HTML Parser</title>
7+
<meta name="description" content="ES HTML Parser demo">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
</body>
13+
</html>

‎website/package.json‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"name": "website",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"license": "MIT",
6+
"private": true,
7+
"scripts": {
8+
"lint:fix": "eslint . --fix",
9+
"build": "webpack --mode production",
10+
"dev": "webpack-dev-server --open --mode development --hot",
11+
"deploy": "yarn build && gh-pages -d dist"
12+
},
13+
"dependencies": {
14+
"lodash": "^4.17.21",
15+
"monaco-editor": "^0.31.1",
16+
"react": "^18.2.0",
17+
"react-dom": "^18.2.0",
18+
"react-json-view": "^1.21.3",
19+
"styled-components": "^5.3.5"
20+
},
21+
"devDependencies": {
22+
"@babel/core": "^7.19.1",
23+
"@babel/preset-env": "^7.19.1",
24+
"@babel/preset-react": "^7.18.6",
25+
"@html-eslint/eslint-plugin": "^0.14.1",
26+
"@html-eslint/parser": "^0.14.0",
27+
"@types/lodash": "^4.14.185",
28+
"@types/react": "^18.0.20",
29+
"@types/react-dom": "^18.0.6",
30+
"@types/react-monaco-editor": "^0.16.0",
31+
"@types/styled-components": "^5.1.26",
32+
"@typescript-eslint/eslint-plugin": "^5.37.0",
33+
"@typescript-eslint/parser": "^5.37.0",
34+
"babel-loader": "^8.2.5",
35+
"css-loader": "^6.7.1",
36+
"es-html-parser": "file:../",
37+
"eslint": "^8.23.1",
38+
"html-webpack-plugin": "^5.5.0",
39+
"monaco-editor-webpack-plugin": "^6.0.0",
40+
"style-loader": "^3.3.1",
41+
"ts-loader": "^9.3.1",
42+
"webpack": "^5.74.0",
43+
"webpack-cli": "^4.10.0",
44+
"webpack-dev-server": "^4.11.0",
45+
"gh-pages": "^3.1.0"
46+
}
47+
}

‎website/src/app.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { useCallback, useEffect, useState } from "react";
2+
import { HTMLEditor } from "./components/html-editor";
3+
import { Header } from "./components/header";
4+
import { Main } from "./components/main";
5+
import { Panel } from "./components/panel";
6+
import { ASTViewer } from "./components/ast-viewer";
7+
import styled from "styled-components";
8+
import "./styles/reset.css";
9+
import { ParseResult, parse } from "es-html-parser";
10+
import debounce from "lodash/debounce";
11+
12+
const DEFAULT_HTML = `<html>
13+
<head>
14+
<title>Hello</title>
15+
</head>
16+
<body>
17+
<button> Click me </button>
18+
</body>
19+
</html>`;
20+
21+
export const App = () => {
22+
const [html, setHtml] = useState(DEFAULT_HTML);
23+
const [parseResult, setParseResult] = useState<ParseResult | null>({
24+
ast: null,
25+
tokens: [],
26+
});
27+
28+
const parseAndUpdateAST = useCallback(
29+
debounce((html: string) => {
30+
const result = parse(html);
31+
setParseResult(result);
32+
}, 500),
33+
[]
34+
);
35+
useEffect(() => parseAndUpdateAST(html), [html]);
36+
37+
return (
38+
<Layout>
39+
<Header />
40+
<Main>
41+
<Panel title="HTML" width="40%">
42+
<HTMLEditor value={html} onDidMount={setHtml} onChange={setHtml} />
43+
</Panel>
44+
<Panel title="AST" width="60%">
45+
<ASTViewer parseResult={parseResult} />
46+
</Panel>
47+
</Main>
48+
</Layout>
49+
);
50+
};
51+
52+
const Layout = styled.div`
53+
display: flex;
54+
flex-direction: column;
55+
height: 100vh;
56+
overflow: hidden;
57+
`;

0 commit comments

Comments
 (0)