Skip to main content

TNodeShape

reexport
interface TNodeShape<
  T extends TNodeType
> {
  attributes: Record<string, string>;
  children: readonly Array<TNode>;
  classes: Array<string>;
  displayName: string;
  domNode: null | Element;
  getReactNativeProps: () => null | ReactNativePropsSwitch;
  id: null | string;
  isUnregistered: boolean;
  markers: Readonly<Markers>;
  nodeIndex: number;
  parent: null
    | TBlock
    | TPhrasing
    | TDocument;
  styles: TStylesShape;
  tagName: null | string;
  type: T;
  getNativeStyles: () => NativeTextStyles | NativeBlockStyles;
  getWebStyles: () => Partial<WebTextFlowProperties>
    & CSSProperties
    & Partial<Pick<ViewStyle, "position">>;
  hasClass: (className: string) => boolean;
  matchContentModel: (contentModel: HTMLContentModel) => boolean;
  snapshot: (options?: Partial<TNodePrintOptions>) => string;
}
Defined in @native-html/transient-render-engine

Shared properties for all ​TNode types.

Type Parameters#

T#

Fields#

attributes#

required
attributes: Record<string, string>;

Attributes for this tag.

children#

required
children: readonly Array<TNode>;

Children of this node.

classes#

required
classes: Array<string>;

A list of classes for this node, extracted from the class attribute of the underlying ​Node.

displayName#

required
displayName: string;

Used for debugging purposes.

domNode#

required
domNode: null | Element;

Non-anonymous nodes will hold a reference to a DOM node.

getReactNativeProps#

required
getReactNativeProps: () => null | ReactNativePropsSwitch;

Get React Native View, Text or mixed View/Text props for this ​TNodeShape.

id#

required
id: null | string;

The id for this node, extracted from the id attribute of the underlying ​Node.

isUnregistered#

required
isUnregistered: boolean;

true when this tag is not a valid HTML tag and there is no custom renderer for this tag.

markers#

required
markers: Readonly<Markers>;

Markers form an abstraction in which one node provides semantic information to itself and all its descendants. For example, ins elements, which stand for "insertion" of content in the context of an edit will provide the { edits: 'ins' } marker to all its descendants.

Remarks

This attribute must be considered immutable. Never try to change it by hand, or you might update the markers of an anscestor! For performance reasons, markers instances might be shared from parent to children when they are equal.

nodeIndex#

required
nodeIndex: number;

The position of this element relatively to its parents, after hoisting and collapsing.

parent#

required
parent: null
  | TBlock
  | TPhrasing
  | TDocument;

The parent of this node before hoisting.

Remarks

"Before hoisting" implies that this parent will not match "anonymous" parents.

styles#

required
styles: TStylesShape;

TStyles for this TNode. You should not use these unless required. Use ​getNativeStyles instead.

tagName#

required
tagName: null | string;

The tag name for this node.

Remarks

Anonymous nodes generated during hoisting won't have a tag name. Also, some TText nodes don't have a tagName.

type#

required
type: T;

The type of this tnode.

Methods#

getNativeStyles#

required
getNativeStyles: () => NativeTextStyles | NativeBlockStyles;

Get own native styles.

getWebStyles#

required
getWebStyles: () => Partial<WebTextFlowProperties>
  & CSSProperties
  & Partial<Pick<ViewStyle, "position">>;

Get styles that cannot be handled by React Native.

hasClass#

required
hasClass: (className: string) => boolean;

Check if this ​TNode has the given className.

Parameters#

className

The class to check.

matchContentModel#

required
matchContentModel: (contentModel: HTMLContentModel) => boolean;

Test if the given content model matches this TNode content model.

Parameters#

contentModel

The content model to test against.

snapshot#

required
snapshot: (options?: Partial<TNodePrintOptions>) => string;

Create a JSX string representation of this node and its children.

Remarks

The snapshot is just a representation. For example, it will print href as an attribute of the TNode, while if you want to access href programatically, you'll need to access it via tnode.attributes.href.

Parameters#

options

Customize what should be displayed.