Add Tree MVP

Author: iddan

package.json

@@ -8,11 +8,13 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/classnames": "^2.3.1",
     "@types/esquery": "^1.0.2",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "classnames": "^2.3.1",
     "esquery": "^1.4.0",
     "monaco-editor": "^0.30.0",
     "prettier": "^2.3.2",

src/App.tsx

@@ -1,11 +1,13 @@
 import { FC, useCallback, useEffect, useState } from 'react';
-import { Node } from 'typescript';
+import { Node, ScriptKind } from 'typescript';
+import { tsquery } from '@phenomnomnominal/tsquery';
 import './index.css';
 import { queryCode } from './engine';
 import QueryEditor from './QueryEditor';
 import Code, { HighlightedInterval, HighlightedIntervals } from './Code';
 import { isSyntaxError } from './tsquery-util';
 import Header from './Header';
+import Tree from './Tree';
 
 const REG_EXPS: Record<string, RegExp> = {
   AllLineBreaks: /\n/g,
@@ -52,14 +54,18 @@ const App: FC = () => {
     }
   }, [query, code]);
 
-  // Layout
+  /** @todo move */
+  const node = tsquery.ast(code, undefined, ScriptKind.JSX);
+
   return (
     <div className="App">
       <Header />
       <h2>Query</h2>
       <QueryEditor onChange={handleQueryChange} />
       <h2>Code</h2>
       <Code highlighted={highlightedIntervals} onChange={handleCodeChange} />
+      <h2>Tree</h2>
+      {node && <Tree node={node} />}
     </div>
   );
 };

src/Tree.css

@@ -0,0 +1,36 @@
+.toggable {
+  position: relative;
+}
+
+.toggable::before {
+  content: '+';
+  color: lightgreen;
+  position: absolute;
+  left: -10px;
+}
+
+.toggable.open::before {
+  content: '-';
+  color: pink;
+}
+
+.nc {
+  color: lightblue;
+}
+
+.nc:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.nb {
+  color: orange;
+}
+
+.p {
+  color: gray;
+}
+
+.s {
+  color: lightcyan;
+}

src/Tree.tsx

@@ -0,0 +1,84 @@
+import { FC, useCallback, useState } from 'react';
+import classNames from 'classnames';
+import { Node, SyntaxKind } from 'typescript';
+import './Tree.css';
+
+const Tree: FC<{ node: Node }> = ({ node }) => {
+  return (
+    <pre>
+      <TreeNode node={node} level={0} />
+    </pre>
+  );
+};
+
+export default Tree;
+
+const TreeNode: FC<{ node: Node; level: number }> = ({ node, level }) => {
+  const [open, setOpen] = useState(false);
+  const handleClick = useCallback(() => setOpen((open) => !open), []);
+  return (
+    <>
+      <span onClick={handleClick} className={classNames('toggable', { open })}>
+        <span className="nc">{SyntaxKind[node.kind]}</span> <span className="p">{'{'}</span>
+      </span>
+      {open &&
+        Object.entries(node).map(([key, value]) => {
+          if (key === 'parent') {
+            return null;
+          }
+          return (
+            <div key={key}>
+              {'\t'.repeat(level + 1)}
+              <PropertyName name={key} />:{' '}
+              {isNode(value) ? (
+                <TreeNode node={value} level={level + 1} />
+              ) : Array.isArray(value) ? (
+                <TreeNodeArray array={value} level={level + 1} />
+              ) : (
+                <PrimitiveValue value={value} />
+              )}
+            </div>
+          );
+        })}
+      <span>
+        {open && '\t'.repeat(level)}
+        <span className="p">{'}'}</span>
+      </span>
+    </>
+  );
+};
+
+const TreeNodeArray: FC<{ array: unknown[]; level: number }> = ({ array, level }) => {
+  const [open, setOpen] = useState(true);
+  const handleClick = useCallback(() => setOpen((open) => !open), []);
+  if (!array.length) {
+    return <span className="p">[]</span>;
+  }
+  return (
+    <>
+      <span onClick={handleClick} className={classNames('toggable', { open })}>
+        <span className="p">[</span>
+      </span>
+      {open &&
+        array.map((item, i) => (
+          <div key={i}>
+            {'\t'.repeat(level + 1)}
+            {isNode(item) ? <TreeNode node={item} level={level + 1} /> : <PrimitiveValue value={item} />}
+          </div>
+        ))}
+      <span className="p">{open && '\t'.repeat(level)}]</span>
+    </>
+  );
+};
+
+const PrimitiveValue: FC<{ value: unknown }> = ({ value }) => {
+  return <span className="s">{typeof value === 'string' ? JSON.stringify(value) : String(value)}</span>;
+};
+
+const PropertyName: FC<{ name: string }> = ({ name }) => {
+  return <span className="nb">{name}</span>;
+};
+
+function isNode(value: unknown): value is Node {
+  return Boolean(value) && typeof value === 'object' && Boolean(SyntaxKind[(value as Node).kind]);
+}

yarn.lock

@@ -1802,6 +1802,13 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/classnames@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.3.1.tgz#3c2467aa0f1a93f1f021e3b9bcf938bd5dfdc0dd"
+  integrity sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==
+  dependencies:
+    classnames "*"
+
 "@types/eslint@^7.28.2":
   version "7.29.0"
   resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.29.0.tgz#e56ddc8e542815272720bb0b4ccc2aff9c3e1c78"
@@ -3390,6 +3397,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@*, classnames@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@^4.2.3:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"