⬅️ Back to Table of Contents

📄 PropertyValue.tsx

📊 Analysis Summary

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

📚 Table of Contents

• Imports
• JSX Elements
• Functions
• Interfaces

🛠️ File Location:

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

📦 Imports

Name	Source
Link	@docusaurus/Link
useMemo	react
useState	react
React	react
styles	./ASTViewer.module.css
objType	./utils

---

JSX Elements

Component	Type	Props	Children
span	element	className={model.className}	{!expand ? ${model.shortValue}... : model.value}, {' '},
Link	component	className={styles.propEllipsis}, href="#read-more", onClick={(e): void => {
e.preventDefault();
setExpand(expand => !expand);
}}	{!expand ? '(read more)' : '(read less)'}
span	element	className={model.className}	{model.value}

---

Functions

getSimpleModel(data: unknown): SimpleModel

Code

function getSimpleModel(data: unknown): SimpleModel {
  if (typeof data === 'string') {
    const value = JSON.stringify(data);
    return {
      className: styles.propString,
      shortValue: value.length > 250 ? value.substring(0, 200) : undefined,
      value,
    };
  }
  if (typeof data === 'number') {
    return {
      className: styles.propNumber,
      value: String(data),
    };
  }
  if (typeof data === 'bigint') {
    return {
      className: styles.propNumber,
      value: `${data}n`,
    };
  }
  if (data instanceof RegExp) {
    return {
      className: styles.propRegExp,
      value: String(data),
    };
  }
  if (data == null) {
    return {
      className: styles.propEmpty,
      value: String(data),
    };
  }
  if (typeof data === 'boolean') {
    return {
      className: styles.propBoolean,
      value: data ? 'true' : 'false',
    };
  }
  if (data instanceof Error) {
    return {
      className: styles.propError,
      value: `Error: ${data.message}`,
    };
  }
  return {
    className: styles.propClass,
    value: objType(data),
  };
}

• Parameters:
• data: unknown
• Return Type: SimpleModel
• Calls:
• JSON.stringify
• value.substring
• String
• objType (from ./utils)

PropertyValue({ value }: PropertyValueProps): React.JSX.Element

Code

function PropertyValue({ value }: PropertyValueProps): React.JSX.Element {
  const [expand, setExpand] = useState(false);

  const model = useMemo(() => getSimpleModel(value), [value]);

  if (model.shortValue) {
    return (
      <span className={model.className}>
        {!expand ? `${model.shortValue}...` : model.value}{' '}
        <Link
          className={styles.propEllipsis}
          href="#read-more"
          onClick={(e): void => {
            e.preventDefault();
            setExpand(expand => !expand);
          }}
        >
          {!expand ? '(read more)' : '(read less)'}
        </Link>
      </span>
    );
  }

  return <span className={model.className}>{model.value}</span>;
}

• Parameters:
• { value }: PropertyValueProps
• Return Type: React.JSX.Element
• Calls:
• useState (from react)
• useMemo (from react)
• getSimpleModel
• e.preventDefault
• setExpand

---

Interfaces

PropertyValueProps

Interface Code

export interface PropertyValueProps {
  readonly value: unknown;
}

Properties

Name	Type	Optional	Description
value	unknown	✗

SimpleModel

Interface Code

interface SimpleModel {
  readonly className: string;
  readonly shortValue?: string;
  readonly value: string;
}

Properties

Name	Type	Optional	Description
className	string	✗
shortValue	string	✓
value	string	✗

---