DOM-Safe Wrapper Hoisting

Design a helper that wraps a base UI component and returns a new component. The wrapper should copy meaningful static metadata from non-intrinsic components so the wrapper behaves like the original, but it must not attempt any static copying when the base component is provided as an intrinsic string (e.g., "div" or "button").

Capabilities

Hoist statics for components

• Wrapping a functional component that exposes a custom static field (e.g., role = "admin") yields a wrapper that renders the original output and preserves that static on the wrapper so downstream code can read it. @test

Ignore intrinsic string bases

• Wrapping an intrinsic tag such as "button" yields a wrapper that renders the element correctly but leaves the wrapper’s own statics untouched, ensuring no statics from the string source are copied. @test

Implementation

@generates

API

import React from "react";

/**
 * Returns a wrapper component that renders the provided base component while preserving static metadata
 * from non-intrinsic bases.
 *
 * @param {React.ComponentType | string} baseComponent - Component or intrinsic tag to wrap.
 * @param {string} [label] - Optional suffix to include in the wrapper display name.
 * @returns {React.ComponentType} A wrapper component that mirrors the base component's render output.
 */
export function createDomSafeWrapper(baseComponent, label);

Dependencies { .dependencies }

hoist-non-react-statics { .dependency }

Copies non-React static properties between components while respecting React-reserved statics. @satisfied-by