Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit db99a86

Browse files
armano2armano2
committed
docs(website): correct issues with rendering ast
1 parent 33fe86b commit db99a86

File tree

12 files changed

+250
-184
lines changed

12 files changed

+250
-184
lines changed

‎packages/website/src/components/ASTEsViewer.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
3+
import ASTViewer, { ASTViewerBaseProps } from './ast/ASTViewer';
4+
import { isRecord } from './ast/utils';
5+
6+
function getTypeName(value: unknown): string | undefined {
7+
if (isRecord(value) && 'type' in value && value.type) {
8+
return String(value.type);
9+
}
10+
return undefined;
11+
}
12+
13+
export default function ASTEsViewer(props: ASTViewerBaseProps): JSX.Element {
14+
return <ASTViewer getTypeName={getTypeName} {...props} />;
15+
}

‎packages/website/src/components/ASTTsViewer.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
3+
import ASTViewer, { ASTViewerBaseProps } from './ast/ASTViewer';
4+
import { isRecord } from './ast/utils';
5+
6+
function getTypeName(value: unknown): string | undefined {
7+
if (
8+
isRecord(value) &&
9+
typeof value.kind === 'number' &&
10+
window.ts.SyntaxKind[value.kind]
11+
) {
12+
return String(window.ts.SyntaxKind[value.kind]);
13+
}
14+
return undefined;
15+
}
16+
17+
export default function ASTTsViewer(props: ASTViewerBaseProps): JSX.Element {
18+
return <ASTViewer getTypeName={getTypeName} ast={props.ast} />;
19+
}

‎packages/website/src/components/Playground.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@ import Loader from './layout/Loader';
88

99
import useHashState from './hooks/useHashState';
1010
import OptionsSelector from './OptionsSelector';
11-
import ASTViewer from './ast/ASTViewer';
1211
import { LoadingEditor } from './editor/LoadingEditor';
1312
import { EditorEmbed } from './editor/EditorEmbed';
1413
import { shallowEqual } from './lib/shallowEqual';
1514

15+
import ASTEsViewer from './ASTEsViewer';
16+
import ASTTsViewer from './ASTTsViewer';
17+
1618
import type { RuleDetails, SelectedRange } from './types';
1719

1820
import type { TSESTree } from '@typescript-eslint/website-eslint';
@@ -95,9 +97,15 @@ function Playground(): JSX.Element {
9597
</div>
9698
{state.showAST && (
9799
<div className={styles.astViewer}>
98-
{(tsAst && state.showAST === 'ts' && <ASTViewer ast={tsAst} />) ||
100+
{(tsAst && state.showAST === 'ts' && (
101+
<ASTTsViewer
102+
ast={tsAst}
103+
position={position}
104+
onSelectNode={updateSelectedNode}
105+
/>
106+
)) ||
99107
(esAst && (
100-
<ASTViewer
108+
<ASTEsViewer
101109
ast={esAst}
102110
position={position}
103111
onSelectNode={updateSelectedNode}

‎packages/website/src/components/ast/ASTViewer.module.css

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.list,
22
.subList,
3-
.clickable {
3+
.clickable,
4+
.propName {
45
font-family: var(--ifm-font-family-monospace);
56
background: transparent;
67
border: none;
@@ -16,10 +17,15 @@
1617
.subList {
1718
cursor: default;
1819
box-sizing: border-box;
20+
white-space: break-spaces;
1921
margin: 0;
2022
padding-left: 1.5rem;
2123
}
2224

25+
.selected {
26+
background: var(--code-line-decoration);
27+
}
28+
2329
.nonExpand,
2430
.expand {
2531
border-left: 0.1rem dashed var(--ifm-color-emphasis-200);
@@ -29,10 +35,6 @@
2935
content: '+';
3036
}
3137

32-
.selected {
33-
background: var(--code-line-decoration);
34-
}
35-
3638
.expand::before {
3739
content: '-';
3840
margin-left: -1rem;

‎packages/website/src/components/ast/ASTViewer.tsx

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,22 @@ import styles from './ASTViewer.module.css';
44
import type { TSESTree } from '@typescript-eslint/website-eslint';
55
import type { SelectedPosition, SelectedRange } from '../types';
66

7-
import { ElementObject } from './Elements';
7+
import { ComplexItem } from './Elements';
88
import type Monaco from 'monaco-editor';
9-
import { isRecord } from './selection';
9+
import { isRecord } from './utils';
1010

11-
export interface ASTViewerProps {
12-
ast: Record<string, unknown> | TSESTree.Node | string;
13-
position?: Monaco.Position | null;
14-
onSelectNode?: (node: SelectedRange | null) => void;
11+
export interface ASTViewerBaseProps {
12+
readonly ast: Record<string, unknown> | TSESTree.Node | string;
13+
readonly position?: Monaco.Position | null;
14+
readonly onSelectNode?: (node: SelectedRange | null) => void;
15+
}
16+
17+
export interface ASTViewerProps extends ASTViewerBaseProps {
18+
readonly getTypeName: (data: unknown) => string | undefined;
1519
}
1620

1721
function ASTViewer(props: ASTViewerProps): JSX.Element {
18-
const [selection, setSelection] = useState<SelectedPosition | null>(() =>
19-
props.position
20-
? {
21-
line: props.position.lineNumber,
22-
column: props.position.column - 1,
23-
}
24-
: null,
25-
);
22+
const [selection, setSelection] = useState<SelectedPosition | null>(null);
2623

2724
useEffect(() => {
2825
setSelection(
@@ -37,7 +34,8 @@ function ASTViewer(props: ASTViewerProps): JSX.Element {
3734

3835
return isRecord(props.ast) ? (
3936
<div className={styles.list}>
40-
<ElementObject
37+
<ComplexItem
38+
getTypeName={props.getTypeName}
4139
value={props.ast}
4240
level="ast"
4341
selection={selection}

0 commit comments

Comments
 (0)