val 0.4.0

An arbitrary precision calculator language
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

import type { AstNode as AstNodeType, Range } from '@/lib/types';
import { ChevronDown, ChevronRight } from 'lucide-react';
import React, { memo, useCallback } from 'react';

interface AstNodeProps {
  expandedNodes: Set<AstNodeType>;
  level: number;
  node: AstNodeType;
  onHighlightChange: (range: Range | undefined) => void;
  toggleExpand: (node: AstNodeType) => void;
}

export const AstNode: React.FC<AstNodeProps> = memo(
  ({ expandedNodes, level, node, onHighlightChange, toggleExpand }) => {
    const hasChildren = node.children && node.children.length > 0;
    const isExpanded = expandedNodes.has(node);
    const isValidRange = node.range.start < node.range.end;

    const handleMouseEnter = useCallback(() => {
      if (isValidRange) {
        onHighlightChange(node.range);
      }
    }, [isValidRange, node.range, onHighlightChange]);

    const handleMouseLeave = useCallback(() => {
      onHighlightChange(undefined);
    }, [onHighlightChange]);

    const toggleExpanded = useCallback(() => {
      if (hasChildren) {
        toggleExpand(node);
      }
    }, [hasChildren, node, toggleExpand]);

    return (
      <>
        <div
          className='flex cursor-pointer items-center py-1 font-mono text-sm whitespace-nowrap transition-colors hover:bg-blue-50'
          onClick={toggleExpanded}
          onMouseLeave={handleMouseLeave}
          onMouseEnter={handleMouseEnter}
          style={{ paddingLeft: `${level * 16 + 4}px` }}
        >
          <span className='mr-1 flex w-4 justify-center'>
            {hasChildren ? (
              isExpanded ? (
                <ChevronDown size={14} />
              ) : (
                <ChevronRight size={14} />
              )
            ) : (
              <span className='w-4'></span>
            )}
          </span>

          <span>{node.kind}</span>

          <span className='ml-2 text-xs text-gray-500'>
            [{node.range.start}: {node.range.end}]{!isValidRange && ' (empty)'}
          </span>
        </div>

        {isExpanded &&
          hasChildren &&
          node.children.map((child, index) => (
            <AstNode
              key={`${child.kind}-${index}`}
              node={child}
              level={level + 1}
              expandedNodes={expandedNodes}
              toggleExpand={toggleExpand}
              onHighlightChange={onHighlightChange}
            />
          ))}
      </>
    );
  }
);

AstNode.displayName = 'AstNode';