Module: core/debug

This module provides helper functions for debugging AI.JSX applications.

Functions

DebugTree

▸ DebugTree(props, «destructured»): AsyncGenerator<string, Node[], unknown>

Render a tree of JSX elements as a string, yielding each step of the rendering process.

Most devs will not need to use this directly, and should use showInspector instead.

Example

   <DebugTree>
     <MyComponent />
   </DebugTree>

==>
 Frame 0: <DebugTree><MyComponent /></DebugTree>
 Frame 1: <DebugTree>the text my component resolved to</DebugTree>

Parameters

Name	Type
props	Object
props.children	Node
«destructured»	RenderContext

Returns

AsyncGenerator<string, Node[], unknown>

Defined in

ai-jsx/src/core/debug.tsx:196

---

debugRepresentation

▸ debugRepresentation(fn): Object

Creates props that associate a debug representation with an element.

Usage example:

<InvisibleComponent {...debugRepresentation((e) => e.props.children)}>
  <Foo>1</Foo>
</InvisibleComponent>

When the <InvisibleComponent> would be displayed in a DebugTree, it will be replaced with its children.

Parameters

Name	Type
fn	(element: Element<any>) => unknown

Returns

Object

Name	Type
[debugRepresentationSymbol]	(element: Element<any>) => unknown

Defined in

ai-jsx/src/core/debug.tsx:29