📄 `ASTViewer`¶

📊 Analysis Summary¶

Metric	Count
🔧 Functions	2
📦 Imports	10
💠 JSX Elements	3
📐 Interfaces	1

📚 Table of Contents¶

Imports
JSX Elements
Functions
Interfaces

🛠️ File Location:¶

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

📦 Imports¶

Name	Source
`useEffect`	`react`
`useMemo`	`react`
`React`	`react`
`OnHoverNodeFn`	`./types`
`CopyButton`	`../inputs/CopyButton`
`debounce`	`../lib/debounce`
`scrollIntoViewIfNeeded`	`../lib/scroll-into`
`styles`	`./ASTViewer.module.css`
`DataRender`	`./DataRenderer`
`findSelectionPath`	`./selectedRange`

JSX Elements¶

Component	Type	Props	Children
`div`	element	className={styles.list}	,
`DataRender`	component	lastElement={true}, level="ast", onHover={onHoverNode}, selectedPath={selecte...	none
`CopyButton`	component	value={model}	none

Functions¶

`tryToApplyFilter(value: T, filter: ESQuery.Selector): T | T[]`¶

Parameters:

value T
filter ESQuery.Selector

Returns: T | T[]

Calls:

window.esquery.match
console.error

Internal Comments:

// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
// @ts-expect-error - esquery requires js ast types

Code

function tryToApplyFilter<T>(value: T, filter?: ESQuery.Selector): T | T[] {
  try {
    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
    if (window.esquery && filter) {
      // @ts-expect-error - esquery requires js ast types
      return window.esquery.match(value, filter, {
        visitorKeys: window.visitorKeys,
      });
    }
  } catch (e: unknown) {
    console.error(e);
  }
  return value;
}

`ASTViewer({ cursorPosition, enableScrolli…: ASTViewerProps): React.JSX.Element`¶

Parameters:

{ cursorPosition, enableScrolling, filter, hideCopyButton, onHoverNode, showTokens, value, } ASTViewerProps

Returns: React.JSX.Element

Calls:

useMemo (from react)
tryToApplyFilter
findSelectionPath(model, cursorPosition).path.join
useEffect (from react)
debounce (from ../lib/debounce)
document.querySelector
scrollIntoViewIfNeeded (from ../lib/scroll-into)
delayed

Code

function ASTViewer({
  cursorPosition,
  enableScrolling,
  filter,
  hideCopyButton,
  onHoverNode,
  showTokens,
  value,
}: ASTViewerProps): React.JSX.Element {
  const model = useMemo(() => {
    if (filter) {
      return tryToApplyFilter(value, filter);
    }
    return value;
  }, [value, filter]);

  const selectedPath = useMemo(() => {
    if (cursorPosition == null || !model || typeof model !== 'object') {
      return 'ast';
    }
    return findSelectionPath(model, cursorPosition).path.join('.');
  }, [cursorPosition, model]);

  useEffect(() => {
    if (enableScrolling) {
      const delayed = debounce(() => {
        const htmlElement = document.querySelector(
          `div[data-level="${selectedPath}"] > a`,
        );
        if (htmlElement) {
          scrollIntoViewIfNeeded(htmlElement);
        }
      }, 100);
      delayed();
    }
  }, [selectedPath, enableScrolling]);

  return (
    <div className={styles.list}>
      <DataRender
        lastElement={true}
        level="ast"
        onHover={onHoverNode}
        selectedPath={selectedPath}
        showTokens={showTokens}
        value={model}
      />
      {!hideCopyButton && <CopyButton value={model} />}
    </div>
  );
}

Interfaces¶

`ASTViewerProps`¶

Interface Code

export interface ASTViewerProps {
  readonly cursorPosition?: number;
  readonly enableScrolling?: boolean;
  readonly filter?: ESQuery.Selector;
  readonly hideCopyButton?: boolean;
  readonly onHoverNode?: OnHoverNodeFn;
  readonly showTokens?: boolean;
  readonly value: unknown;
}

Properties¶

Name	Type	Optional	Description
`cursorPosition`	`number`	✓	not shown
`enableScrolling`	`boolean`	✓	not shown
`filter`	`ESQuery.Selector`	✓	not shown
`hideCopyButton`	`boolean`	✓	not shown
`onHoverNode`	`OnHoverNodeFn`	✓	not shown
`showTokens`	`boolean`	✓	not shown
`value`	`unknown`	✗	not shown

Generated by Syntax Scribe

📄 ASTViewer¶