@hubspot/ui-extensions 0.11.0 → 0.11.1

package/dist/__synced__/types/components/index.synced.d.ts

@@ -1,38 +1,38 @@
-export type { AlertProps } from './alert.synced';
-export type { ButtonProps, LoadingButtonProps } from './button.synced';
-export type { ButtonRowProps } from './button-row.synced';
-export type { CardProps } from './card.synced';
-export type { ChartProps, LineChartProps, BarChartProps } from './chart.synced';
-export type { DescriptionListProps, DescriptionListItemProps, } from './description-list.synced';
-export type { DividerProps } from './divider.synced';
-export type { EmptyStateProps } from './empty-state.synced';
-export type { ErrorStateProps } from './error-state.synced';
-export type { HeadingProps } from './heading.synced';
-export type { FormProps } from './form.synced';
-export type { IconProps } from './icon.synced';
-export type { IllustrationProps } from './illustration.synced';
-export type { IframeProps } from './iframe.synced';
-export type { ImageProps } from './image.synced';
-export type { InputProps, TextAreaProps, TextareaProps, NumberInputProps, DateInputProps, StepperInputProps, SearchInputProps, TimeInputProps, CurrencyInputProps, } from './inputs.synced';
-export type { StackProps, FlexProps, BoxProps, InlineProps, AutoGridProps, } from './layouts.synced';
-export type { LinkProps } from './link.synced';
-export type { ListProps } from './list.synced';
-export type { LoadingSpinnerProps } from './loading-spinner.synced';
-export type { ModalProps, ModalBodyProps, ModalFooterProps } from './modal.synced';
-export type { ProgressBarProps } from './progress-bar.synced';
-export type { PanelProps, PanelFooterProps, PanelBodyProps, PanelSectionProps, } from './panel.synced';
-export type { SelectProps, MultiSelectProps } from './selects.synced';
-export type { StatisticsProps, StatisticsItemProps, StatisticsTrendProps, } from './statistics.synced';
-export type { StatusTagProps } from './status-tag.synced';
-export type { StepIndicatorProps } from './step-indicator.synced';
-export type { TableProps, TableElementProps, TableCellProps, TableHeaderProps, } from './table.synced';
-export type { TabsProps, TabProps } from './tabs.synced';
-export type { TagProps } from './tag.synced';
-export type { TextProps } from './text.synced';
-export type { TileProps } from './tile.synced';
-export type { ToggleProps } from './toggle.synced';
-export type { CheckboxProps, RadioButtonProps, ToggleGroupProps, CheckboxListProps, RadioButtonListProps, } from './toggleInputs.synced';
-export type { AccordionProps } from './accordion.synced';
-export type { DropdownProps, DropdownButtonItemProps } from './dropdown.synced';
-export type { TooltipProps } from './tooltip.synced';
-export type { HeaderActionsProps, HeaderActionButtonProps, } from './app-home-header-actions.synced';
+export type * from './accordion.synced';
+export type * from './alert.synced';
+export type * from './app-home-header-actions.synced';
+export type * from './button-row.synced';
+export type * from './button.synced';
+export type * from './card.synced';
+export type * from './chart.synced';
+export type * from './description-list.synced';
+export type * from './divider.synced';
+export type * from './dropdown.synced';
+export type * from './empty-state.synced';
+export type * from './error-state.synced';
+export type * from './form.synced';
+export type * from './heading.synced';
+export type * from './icon.synced';
+export type * from './iframe.synced';
+export type * from './illustration.synced';
+export type * from './image.synced';
+export type * from './inputs.synced';
+export type * from './layouts.synced';
+export type * from './link.synced';
+export type * from './list.synced';
+export type * from './loading-spinner.synced';
+export type * from './modal.synced';
+export type * from './panel.synced';
+export type * from './progress-bar.synced';
+export type * from './selects.synced';
+export type * from './statistics.synced';
+export type * from './status-tag.synced';
+export type * from './step-indicator.synced';
+export type * from './table.synced';
+export type * from './tabs.synced';
+export type * from './tag.synced';
+export type * from './text.synced';
+export type * from './tile.synced';
+export type * from './toggle.synced';
+export type * from './toggleInputs.synced';
+export type * from './tooltip.synced';

package/dist/__synced__/types/index.synced.d.ts

@@ -1,8 +1,8 @@
-export * from './components/index.synced';
-export * from './actions.synced';
-export * from './context.synced';
-export * from './crm.synced';
-export * from './extension-points.synced';
-export * from './http-requests.synced';
-export * from './reactions.synced';
+export type * from './components/index.synced';
+export type * from './actions.synced';
+export type * from './context.synced';
+export type * from './crm.synced';
+export type * from './extension-points.synced';
+export type * from './http-requests.synced';
+export type * from './reactions.synced';
 export * from './shared.synced';

package/dist/__synced__/types/index.synced.js

@@ -1,9 +1 @@
-// Do not manually update this file, changes will be autogenerated by our scripts based on: ui-extensions-remote-renderer/static/js/types/index.ts
-export * from './components/index.synced';
-export * from './actions.synced';
-export * from './context.synced';
-export * from './crm.synced';
-export * from './extension-points.synced';
-export * from './http-requests.synced';
-export * from './reactions.synced';
-export * from './shared.synced';
+export * from './shared.synced'; // NOTE: `shared.ts` has some exported classes so we can't use `export type` for now

package/dist/__synced__/types/shared.synced.d.ts

@@ -1,5 +1,4 @@
-import { RemoteFragment } from '@remote-ui/core';
-import type { ReactElement, ComponentType } from 'react';
+import type { ReactElement, ComponentType, ReactNode } from 'react';
 export type UnknownComponentProps = Record<string, any>;
 /**
  * Represents a HubSpot-provided React component.
@@ -22,7 +21,7 @@ export declare class FormSubmitExtensionEvent<V> extends ExtensionEvent {
     constructor(value: V, event: Event);
 }
 export type OverlayComponentProps = {
-    overlay?: RemoteFragment;
+    overlay?: ReactNode;
 };
 export type HrefOptions = {
     url: string;

package/dist/__synced__/utils/remote-component-registry.synced.d.ts

@@ -0,0 +1,80 @@
+import { HubSpotReactComponent, HubSpotReactFragmentProp, UnknownComponentProps } from '../types/shared.synced';
+/**
+ * Options for creating a remote React component.
+ */
+interface CreateRemoteComponentOptions<TProps extends UnknownComponentProps = UnknownComponentProps> {
+    /**
+     * An array of prop names that are allowed to be used as fragment props.
+     */
+    fragmentProps?: ComponentFragmentPropName<TProps>[];
+}
+/**
+ * Options for creating a remote React component.
+ */
+interface CreateRemoteCompoundComponentOptions<TProps extends UnknownComponentProps, TCompoundComponentProps> {
+    /**
+     * An array of prop names that are allowed to be used as fragment props.
+     */
+    fragmentProps?: ComponentFragmentPropName<TProps>[];
+    compoundComponentProperties: TCompoundComponentProps;
+}
+/**
+ * Utility type for filtering out all of the prop names where the value is a ReactNode (excluding primitives).
+ * We use this to know which props are allowed to be used as fragment props.
+ */
+type ComponentFragmentPropName<TProps extends UnknownComponentProps> = {
+    [K in keyof TProps]: HubSpotReactFragmentProp extends Required<TProps>[K] ? K : never;
+}[keyof TProps & string];
+/**
+ * Represents a registry of HubSpot-provided React components that is used internally by the UI extensions SDK.
+ */
+export interface RemoteComponentRegistry {
+    /**
+     * Creates a new remote React component and registers it with the registry.
+     *
+     * @param componentName The name of the component to create and register.
+     * @param options The options for the remote React component.
+     * @returns The remote React component that can be used as a React component.
+     */
+    createAndRegisterRemoteReactComponent: <TProps extends UnknownComponentProps>(componentName: string, options?: CreateRemoteComponentOptions<TProps>) => HubSpotReactComponent<TProps>;
+    /**
+     * Creates a new remote compound React component and registers it with the registry. A compound component is a component that is
+     * composed of multiple components attached to a single component function.
+     *
+     * @param componentName The name of the component to create and register.
+     * @param options The options for the remote compound React component.
+     * @returns The remote compound React component that can be used as a React component.
+     */
+    createAndRegisterRemoteCompoundReactComponent: <TProps extends UnknownComponentProps, TCompoundComponentProps>(componentName: string, options: CreateRemoteCompoundComponentOptions<TProps, TCompoundComponentProps>) => HubSpotReactComponent<TProps> & TCompoundComponentProps;
+    /**
+     * Returns the name of a HubSpot-provided React component.
+     *
+     * @param component The React component to get the name of.
+     * @returns The name of the HubSpot-provided React component.
+     */
+    getComponentName: (component: HubSpotReactComponent<any>) => string | null;
+    /**
+     * Returns true if the given component name is allowed to be used in HubSpot.
+     *
+     * @param name The name of the component to check if it is allowed to be used in HubSpot.
+     * @returns `true` if the given component name is allowed to be used in HubSpot.
+     */
+    isAllowedComponentName: (name: string) => boolean;
+    /**
+     * Returns true if the given prop name is a fragment prop for the given component name.
+     *
+     * @param componentName The name of the component to check if the prop is a fragment prop for.
+     * @param propName The name of the prop to check if it is a fragment prop.
+     * @returns `true` if the prop name is a fragment prop for the given component name.
+     */
+    isComponentFragmentProp: (componentName: string, propName: string) => boolean;
+    /**
+     * Returns the names of the fragment props for a given component name.
+     *
+     * @param componentName The name of the component to get the fragment props for.
+     * @returns The names of the fragment props for the given component name.
+     */
+    getComponentFragmentPropNames: (componentName: string) => string[];
+}
+export declare const createRemoteComponentRegistry: () => RemoteComponentRegistry;
+export {};

package/dist/__synced__/utils/remote-component-registry.synced.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Do not manually update this file, changes will be autogenerated by our scripts based on: ui-extensions-remote-renderer/static/js/utils/remote-component-registry.tsx
+import { createRemoteReactComponent } from '@remote-ui/react';
+export const createRemoteComponentRegistry = () => {
+    const componentMetadataLookup = new Map();
+    const componentNameByComponentMap = new Map();
+    const registerComponent = (component, componentName, fragmentProps) => {
+        componentNameByComponentMap.set(component, componentName);
+        componentMetadataLookup.set(componentName, {
+            fragmentPropsSet: new Set(fragmentProps),
+            fragmentPropsArray: fragmentProps,
+        });
+        return component;
+    };
+    return {
+        getComponentName: (component) => {
+            const componentName = componentNameByComponentMap.get(component);
+            if (!componentName) {
+                return null;
+            }
+            return componentName;
+        },
+        isAllowedComponentName: (componentName) => {
+            return componentMetadataLookup.has(componentName);
+        },
+        isComponentFragmentProp: (componentName, propName) => {
+            const componentMetadata = componentMetadataLookup.get(componentName);
+            if (!componentMetadata) {
+                return false;
+            }
+            return componentMetadata.fragmentPropsSet.has(propName);
+        },
+        getComponentFragmentPropNames: (componentName) => {
+            const componentMetadata = componentMetadataLookup.get(componentName);
+            if (!componentMetadata) {
+                return [];
+            }
+            const { fragmentPropsArray } = componentMetadata;
+            return fragmentPropsArray;
+        },
+        createAndRegisterRemoteReactComponent: (componentName, options = {}) => {
+            const { fragmentProps = [] } = options;
+            const remoteReactComponent = createRemoteReactComponent(componentName, {
+                fragmentProps: fragmentProps,
+            });
+            return registerComponent(remoteReactComponent, componentName, fragmentProps);
+        },
+        createAndRegisterRemoteCompoundReactComponent: (componentName, options) => {
+            const { fragmentProps = [] } = options;
+            const RemoteComponentType = createRemoteReactComponent(componentName, {
+                fragmentProps,
+            });
+            // We can only attach properties to a function component type, so we need to check if the remote component type is a function.
+            // If the remote component type is not a function, we need to wrap it in a function component.
+            const CompoundFunctionComponentType = typeof RemoteComponentType === 'function'
+                ? RemoteComponentType
+                : (props) => (_jsx(RemoteComponentType, { ...props }));
+            // Attach the compound component properties to the function component that we will be returning.
+            Object.assign(CompoundFunctionComponentType, options.compoundComponentProperties);
+            // Register the compound function component with the registry and return it.
+            return registerComponent(CompoundFunctionComponentType, componentName, fragmentProps);
+        },
+    };
+};

package/dist/experimental/testing/internal/constants.d.ts

@@ -0,0 +1,2 @@
+import { type RenderedChildNode } from '../types';
+export declare const EMPTY_CHILDREN: RenderedChildNode[];

package/dist/experimental/testing/internal/constants.js

@@ -0,0 +1 @@
+export const EMPTY_CHILDREN = [];

package/dist/experimental/testing/internal/debug.d.ts

@@ -0,0 +1,8 @@
+import type { RenderedParentNode } from '../types';
+/**
+ * Logs a rendered node tree to the console for debugging purposes.
+ *
+ * @param parentNode The node to log.
+ * @param label Optional label to display before the node tree.
+ */
+export declare const debugLog: (parentNode: RenderedParentNode, label?: string) => never;

package/dist/experimental/testing/internal/debug.js

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * Logs a rendered node tree to the console for debugging purposes.
+ *
+ * @param parentNode The node to log.
+ * @param label Optional label to display before the node tree.
+ */
+export const debugLog = (parentNode, label) => {
+    throw new Error('Not implemented');
+};

package/dist/experimental/testing/internal/element.d.ts

@@ -0,0 +1,11 @@
+import type { UnknownComponentProps } from '../../../__synced__/types/shared.synced';
+import type { RenderedDocumentInternal, RenderedElementNodeInternal } from './types-internal';
+/**
+ * Creates a rendered element node.
+ *
+ * @param document The document that the element belongs to.
+ * @param name The name of the element.
+ * @param props The props of the element.
+ * @returns A rendered element node.
+ */
+export declare const createElementNode: (document: RenderedDocumentInternal, name: string, props: UnknownComponentProps) => RenderedElementNodeInternal;

package/dist/experimental/testing/internal/element.js

@@ -0,0 +1,67 @@
+import { RenderedNodeType } from '../types';
+import { EMPTY_CHILDREN } from './constants';
+import { debugLog } from './debug';
+import { InvalidEventFunctionError, MissingEventFunctionError } from './errors';
+import { printNode } from './print';
+import { find, findAll, findAllChildren, findChild, maybeFind, maybeFindChild, } from './query';
+/**
+ * Creates a rendered element node.
+ *
+ * @param document The document that the element belongs to.
+ * @param name The name of the element.
+ * @param props The props of the element.
+ * @returns A rendered element node.
+ */
+export const createElementNode = (document, name, props) => {
+    const elementNode = {
+        nodeType: RenderedNodeType.Element,
+        name,
+        props,
+        text: null,
+        children: EMPTY_CHILDREN,
+        document,
+        debugLog: (label) => {
+            debugLog(elementNode, label);
+        },
+        find: (targetComponent, matcher) => {
+            return find(elementNode, targetComponent, matcher);
+        },
+        findAll: (targetComponent, matcher) => {
+            return findAll(elementNode, targetComponent, matcher);
+        },
+        findChild: (targetComponent, matcher) => {
+            return findChild(elementNode, targetComponent, matcher);
+        },
+        findAllChildren: (targetComponent, matcher) => {
+            return findAllChildren(elementNode, targetComponent, matcher);
+        },
+        maybeFind: (targetComponent, matcher) => {
+            return maybeFind(elementNode, targetComponent, matcher);
+        },
+        maybeFindChild: (targetComponent, matcher) => {
+            return maybeFindChild(elementNode, targetComponent, matcher);
+        },
+        toString: () => {
+            return printNode(elementNode);
+        },
+        trigger: (eventPropName, eventArg) => {
+            const eventFunction = elementNode.props[eventPropName];
+            if (!eventFunction) {
+                throw new MissingEventFunctionError({
+                    componentName: name,
+                    eventPropName,
+                });
+            }
+            if (typeof eventFunction !== 'function') {
+                throw new InvalidEventFunctionError({
+                    componentName: name,
+                    eventPropName,
+                });
+            }
+            document.batchUpdate(() => {
+                eventFunction(eventArg);
+            });
+        },
+    };
+    return elementNode;
+};

package/dist/experimental/testing/internal/errors.d.ts

@@ -0,0 +1,44 @@
+import { RenderedParentNode } from '../types';
+import { RenderedRootNodeInternal } from './types-internal';
+/**
+ * Thrown when trying to trigger an event that has a handler prop that is not a function.
+ */
+export declare class InvalidEventFunctionError extends Error {
+    constructor({ componentName, eventPropName, }: {
+        componentName: string;
+        eventPropName: string;
+    });
+}
+/**
+ * Thrown when trying to trigger an event that has no corresponding handler function in the props object.
+ */
+export declare class MissingEventFunctionError extends Error {
+    constructor({ componentName, eventPropName, }: {
+        componentName: string;
+        eventPropName: string;
+    });
+}
+/**
+ * Thrown when a component is not found in the rendered output.
+ */
+export declare class ComponentNotFoundError extends Error {
+    constructor({ findMethodName, parentNode, componentName, }: {
+        findMethodName: string;
+        parentNode: RenderedParentNode;
+        componentName: string;
+    });
+}
+/**
+ * Thrown when invalid components are detected in the rendered output.
+ */
+export declare class InvalidComponentsError extends Error {
+    constructor(rootNode: RenderedRootNodeInternal);
+}
+/**
+ * Thrown when the target component passed to the find operation is not a valid HubSpot-provided React component.
+ */
+export declare class FindInvalidComponentError extends Error {
+    constructor({ findMethodName }: {
+        findMethodName: string;
+    });
+}

package/dist/experimental/testing/internal/errors.js

@@ -0,0 +1,52 @@
+import { printNode } from './print';
+/**
+ * Thrown when trying to trigger an event that has a handler prop that is not a function.
+ */
+export class InvalidEventFunctionError extends Error {
+    constructor({ componentName, eventPropName, }) {
+        super(`trigger("${String(eventPropName)}", ...) failed. Event function for prop "${String(eventPropName)}" in component "${componentName}" props is not a function`);
+        this.name = 'InvalidEventFunctionError';
+    }
+}
+/**
+ * Thrown when trying to trigger an event that has no corresponding handler function in the props object.
+ */
+export class MissingEventFunctionError extends Error {
+    constructor({ componentName, eventPropName, }) {
+        super(`trigger("${String(eventPropName)}", ...) failed. Event function for prop "${String(eventPropName)}" not found in component "${componentName}" props`);
+        this.name = 'MissingEventFunctionError';
+    }
+}
+/**
+ * Thrown when a component is not found in the rendered output.
+ */
+export class ComponentNotFoundError extends Error {
+    constructor({ findMethodName, parentNode, componentName, }) {
+        super(`${findMethodName}() failed. <${componentName}> not found in rendered output: ${parentNode.toString()}`);
+        this.name = 'ComponentNotFoundError';
+    }
+}
+/**
+ * Thrown when invalid components are detected in the rendered output.
+ */
+export class InvalidComponentsError extends Error {
+    constructor(rootNode) {
+        super(`Invalid rendered output. Found invalid components (${rootNode.document
+            .getInvalidComponentNames()
+            .map((name) => `"${name}"`)
+            .join(', ')}) in rendered output: ${printNode(rootNode, {
+            markInvalidComponents: true,
+            listInvalidComponents: true,
+        })}`);
+        this.name = 'InvalidComponentsError';
+    }
+}
+/**
+ * Thrown when the target component passed to the find operation is not a valid HubSpot-provided React component.
+ */
+export class FindInvalidComponentError extends Error {
+    constructor({ findMethodName }) {
+        super(`${findMethodName}() failed. The provided target component is not a HubSpot-provided React component`);
+        this.name = 'FindInvalidComponentError';
+    }
+}

package/dist/experimental/testing/internal/fragment.d.ts

@@ -0,0 +1,8 @@
+import type { RenderedDocumentInternal, RenderedFragmentNodeInternal } from './types-internal';
+/**
+ * Creates a rendered fragment node.
+ *
+ * @param document The document that the fragment belongs to.
+ * @returns A rendered fragment node.
+ */
+export declare const createFragmentNode: (document: RenderedDocumentInternal) => RenderedFragmentNodeInternal;

package/dist/experimental/testing/internal/fragment.js

@@ -0,0 +1,44 @@
+import { RenderedNodeType } from '../types';
+import { EMPTY_CHILDREN } from './constants';
+import { debugLog } from './debug';
+import { printNode } from './print';
+import { find, findAll, findAllChildren, findChild, maybeFind, maybeFindChild, } from './query';
+/**
+ * Creates a rendered fragment node.
+ *
+ * @param document The document that the fragment belongs to.
+ * @returns A rendered fragment node.
+ */
+export const createFragmentNode = (document) => {
+    const fragmentNode = {
+        nodeType: RenderedNodeType.Fragment,
+        text: null,
+        children: EMPTY_CHILDREN,
+        document,
+        debugLog: (label) => {
+            debugLog(fragmentNode, label);
+        },
+        find: (targetComponent, matcher) => {
+            return find(fragmentNode, targetComponent, matcher);
+        },
+        findAll: (targetComponent, matcher) => {
+            return findAll(fragmentNode, targetComponent, matcher);
+        },
+        findChild: (targetComponent, matcher) => {
+            return findChild(fragmentNode, targetComponent, matcher);
+        },
+        findAllChildren: (targetComponent, matcher) => {
+            return findAllChildren(fragmentNode, targetComponent, matcher);
+        },
+        maybeFind: (targetComponent, matcher) => {
+            return maybeFind(fragmentNode, targetComponent, matcher);
+        },
+        maybeFindChild: (targetComponent, matcher) => {
+            return maybeFindChild(fragmentNode, targetComponent, matcher);
+        },
+        toString: () => {
+            return printNode(fragmentNode);
+        },
+    };
+    return fragmentNode;
+};

package/dist/experimental/testing/internal/print.d.ts

@@ -0,0 +1,6 @@
+import type { RenderedParentNode } from '../types';
+export interface PrintOptions {
+    markInvalidComponents: boolean;
+    listInvalidComponents: boolean;
+}
+export declare const printNode: (rootNode: RenderedParentNode, options?: PrintOptions) => string;

package/dist/experimental/testing/internal/print.js

@@ -0,0 +1,114 @@
+import { __hubSpotComponentRegistry } from '../../../__synced__/remoteComponents.synced';
+import { isRenderedElementNode, isRenderedFragmentNode, isRenderedRootNode, isRenderedTextNode, } from '../type-utils';
+const INDENT_STRING = '  ';
+const printTextNode = (node, indent, printContext) => {
+    printContext.append(`${indent}${JSON.stringify(node.text)}\n`);
+};
+const propValueToString = (value) => {
+    if (typeof value === 'function') {
+        return '={function}';
+    }
+    else if (typeof value === 'number') {
+        return `={${value}}`;
+    }
+    else if (typeof value === 'string') {
+        return `=${JSON.stringify(value)}`;
+    }
+    else if (typeof value === 'boolean') {
+        return value === true ? '' : '={false}';
+    }
+    return `={${JSON.stringify(value)}}`;
+};
+const printElementProps = (name, props, indent, printContext) => {
+    for (const [propName, propValue] of Object.entries(props)) {
+        if (__hubSpotComponentRegistry.isComponentFragmentProp(name, propName)) {
+            printContext.append(` ${propName}={`);
+            printFragmentNode(propValue, indent, printContext);
+            printContext.append(`}`);
+        }
+        else {
+            printContext.append(` ${propName}${propValueToString(propValue)}`);
+        }
+    }
+};
+const printElementStart = (node, indent, printContext) => {
+    const { name } = node;
+    printContext.append(indent);
+    printContext.append(`<${name}`);
+    if (!__hubSpotComponentRegistry.isAllowedComponentName(name)) {
+        printContext.foundInvalidComponents.add(name);
+        if (printContext.options.markInvalidComponents) {
+            printContext.append('⚠️');
+        }
+    }
+};
+const printElementNode = (node, indent, printContext) => {
+    const hasChildren = node.children.length > 0;
+    const { name, props } = node;
+    if (hasChildren) {
+        printElementStart(node, indent, printContext);
+        printElementProps(name, props, indent + INDENT_STRING, printContext);
+        printContext.append(`>\n`);
+        printChildren(node, indent + INDENT_STRING, printContext);
+        printContext.append(`${indent}</${name}>\n`);
+    }
+    else {
+        printElementStart(node, indent, printContext);
+        printElementProps(name, props, indent + INDENT_STRING, printContext);
+        printContext.append(`/>\n`);
+    }
+};
+const printChildren = (node, indent, printContext) => {
+    const { children } = node;
+    for (const child of children) {
+        if (isRenderedTextNode(child)) {
+            printTextNode(child, indent, printContext);
+        }
+        else if (isRenderedElementNode(child)) {
+            printElementNode(child, indent, printContext);
+        }
+        else {
+            throw new Error(`Illegal State. Invalid rendered node type: ${child.nodeType}`);
+        }
+    }
+};
+const DEFAULT_PRINT_OPTIONS = {
+    markInvalidComponents: true,
+    listInvalidComponents: false,
+};
+const printFragmentNode = (node, indent, printContext) => {
+    printContext.append(`<>\n`);
+    printChildren(node, indent + INDENT_STRING, printContext);
+    printContext.append(`${indent}</>`);
+};
+export const printNode = (rootNode, options = DEFAULT_PRINT_OPTIONS) => {
+    const { listInvalidComponents } = options;
+    let output = '';
+    const printContext = {
+        append: (str) => {
+            output += str;
+        },
+        options,
+        foundInvalidComponents: new Set(),
+    };
+    if (isRenderedRootNode(rootNode)) {
+        printContext.append(`<>\n`);
+        printChildren(rootNode, INDENT_STRING, printContext);
+        printContext.append(`</>`);
+    }
+    else if (isRenderedFragmentNode(rootNode)) {
+        printFragmentNode(rootNode, '', printContext);
+    }
+    else {
+        printElementNode(rootNode, '', printContext);
+    }
+    if (listInvalidComponents && printContext.foundInvalidComponents.size > 0) {
+        printContext.append(`\n⚠️  Invalid components:\n`);
+        const foundInvalidComponents = [...printContext.foundInvalidComponents];
+        foundInvalidComponents.sort();
+        for (const invalidComponentName of foundInvalidComponents) {
+            printContext.append(`- ${invalidComponentName}\n`);
+        }
+    }
+    return output.replace(/\n$/, '');
+};