react-with-hoc
Version:
Work with React and HOCs (Higher-Order Components)
42 lines • 5.15 kB
JavaScript
import React from "react";
import { componentDisplayName } from "../utils/componentDisplayName";
/**
* creates an empty component with a given display name for debugging the component tree
*
* @example
* const Component = withDisplayName('SomeName')(Example);
* <Component {...props} />
* // is equivalent to
* <SomeName> // this is just a Fragment with displayName property as `SomeName`
* <Example {...props} />
* </SomeName>
*
* @example
* withDisplayName('SomeName')(Example);
* // or
* withDisplayName('SomeName', Example);
* // or
* withDisplayName((Component) => 'SomeName.' + componentDisplayName.get(Component))(Example);
* // or
* withHocs([withDisplayName('SomeName')])(Example);
*/
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export function withDisplayName(...args) {
if (args.length === 2) {
const displayName = typeof args[0] === "function" ? args[0](args[1]) : args[0];
const Component = args[1];
const Ret = props => {
return /*#__PURE__*/React.createElement(Component, {
...props
});
};
componentDisplayName.set(displayName, Ret);
return Ret;
}
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
return Component => {
return withDisplayName(args[0], Component);
};
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsImNvbXBvbmVudERpc3BsYXlOYW1lIiwid2l0aERpc3BsYXlOYW1lIiwiYXJncyIsImxlbmd0aCIsImRpc3BsYXlOYW1lIiwiQ29tcG9uZW50IiwiUmV0IiwicHJvcHMiLCJjcmVhdGVFbGVtZW50Iiwic2V0Il0sInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2hvY3Mvd2l0aERpc3BsYXlOYW1lLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgQ29tcG9uZW50VHlwZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgY29tcG9uZW50RGlzcGxheU5hbWUgfSBmcm9tIFwiLi4vdXRpbHMvY29tcG9uZW50RGlzcGxheU5hbWVcIjtcblxuZXhwb3J0IGZ1bmN0aW9uIHdpdGhEaXNwbGF5TmFtZTxUIGV4dGVuZHMgQ29tcG9uZW50VHlwZTxhbnk+PihcbiAgbmFtZTogKENvbXBvbmVudDogVCkgPT4gc3RyaW5nLFxuKTogKGNvbXBvbmVudDogVCkgPT4gVDtcbmV4cG9ydCBmdW5jdGlvbiB3aXRoRGlzcGxheU5hbWU8VCBleHRlbmRzIENvbXBvbmVudFR5cGU8YW55Pj4oXG4gIG5hbWU6IChDb21wb25lbnQ6IFQpID0+IHN0cmluZyxcbiAgQ29tcG9uZW50OiBULFxuKTogVDtcbmV4cG9ydCBmdW5jdGlvbiB3aXRoRGlzcGxheU5hbWUoXG4gIG5hbWU6IHN0cmluZyxcbik6IDxUIGV4dGVuZHMgQ29tcG9uZW50VHlwZTxhbnk+Pihjb21wb25lbnQ6IFQpID0+IFQ7XG5leHBvcnQgZnVuY3Rpb24gd2l0aERpc3BsYXlOYW1lPFQgZXh0ZW5kcyBDb21wb25lbnRUeXBlPGFueT4+KFxuICBuYW1lOiBzdHJpbmcsXG4gIGNvbXBvbmVudDogVCxcbik6IFQ7XG5cbi8qKlxuICogY3JlYXRlcyBhbiBlbXB0eSBjb21wb25lbnQgd2l0aCBhIGdpdmVuIGRpc3BsYXkgbmFtZSBmb3IgZGVidWdnaW5nIHRoZSBjb21wb25lbnQgdHJlZVxuICpcbiAqIEBleGFtcGxlXG4gKiBjb25zdCBDb21wb25lbnQgPSB3aXRoRGlzcGxheU5hbWUoJ1NvbWVOYW1lJykoRXhhbXBsZSk7XG4gKiA8Q29tcG9uZW50IHsuLi5wcm9wc30gLz5cbiAqIC8vIGlzIGVxdWl2YWxlbnQgdG9cbiAqIDxTb21lTmFtZT4gLy8gdGhpcyBpcyBqdXN0IGEgRnJhZ21lbnQgd2l0aCBkaXNwbGF5TmFtZSBwcm9wZXJ0eSBhcyBgU29tZU5hbWVgXG4gKiAgIDxFeGFtcGxlIHsuLi5wcm9wc30gLz5cbiAqIDwvU29tZU5hbWU+XG4gKlxuICogQGV4YW1wbGVcbiAqIHdpdGhEaXNwbGF5TmFtZSgnU29tZU5hbWUnKShFeGFtcGxlKTtcbiAqIC8vIG9yXG4gKiB3aXRoRGlzcGxheU5hbWUoJ1NvbWVOYW1lJywgRXhhbXBsZSk7XG4gKiAvLyBvclxuICogd2l0aERpc3BsYXlOYW1lKChDb21wb25lbnQpID0+ICdTb21lTmFtZS4nICsgY29tcG9uZW50RGlzcGxheU5hbWUuZ2V0KENvbXBvbmVudCkpKEV4YW1wbGUpO1xuICogLy8gb3JcbiAqIHdpdGhIb2NzKFt3aXRoRGlzcGxheU5hbWUoJ1NvbWVOYW1lJyldKShFeGFtcGxlKTtcbiAqL1xuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9leHBsaWNpdC1mdW5jdGlvbi1yZXR1cm4tdHlwZVxuZXhwb3J0IGZ1bmN0aW9uIHdpdGhEaXNwbGF5TmFtZSguLi5hcmdzOiBhbnlbXSkge1xuICBpZiAoYXJncy5sZW5ndGggPT09IDIpIHtcbiAgICBjb25zdCBkaXNwbGF5TmFtZSA9XG4gICAgICB0eXBlb2YgYXJnc1swXSA9PT0gXCJmdW5jdGlvblwiID8gYXJnc1swXShhcmdzWzFdKSA6IGFyZ3NbMF07XG4gICAgY29uc3QgQ29tcG9uZW50ID0gYXJnc1sxXTtcbiAgICBjb25zdCBSZXQ6IGFueSA9IChwcm9wczogYW55KSA9PiB7XG4gICAgICByZXR1cm4gPENvbXBvbmVudCB7Li4ucHJvcHN9IC8+O1xuICAgIH07XG4gICAgY29tcG9uZW50RGlzcGxheU5hbWUuc2V0KGRpc3BsYXlOYW1lLCBSZXQpO1xuICAgIHJldHVybiBSZXQ7XG4gIH1cbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9leHBsaWNpdC1mdW5jdGlvbi1yZXR1cm4tdHlwZVxuICByZXR1cm4gKENvbXBvbmVudDogYW55KSA9PiB7XG4gICAgcmV0dXJuIHdpdGhEaXNwbGF5TmFtZShhcmdzWzBdLCBDb21wb25lbnQpO1xuICB9O1xufVxuIl0sIm1hcHBpbmdzIjoiQUFBQSxPQUFPQSxLQUFLLE1BQXlCLE9BQU87QUFDNUMsU0FBU0Msb0JBQW9CLFFBQVEsK0JBQStCO0FBaUJwRTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxPQUFPLFNBQVNDLGVBQWVBLENBQUMsR0FBR0MsSUFBVyxFQUFFO0VBQzlDLElBQUlBLElBQUksQ0FBQ0MsTUFBTSxLQUFLLENBQUMsRUFBRTtJQUNyQixNQUFNQyxXQUFXLEdBQ2YsT0FBT0YsSUFBSSxDQUFDLENBQUMsQ0FBQyxLQUFLLFVBQVUsR0FBR0EsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDQSxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBR0EsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUM1RCxNQUFNRyxTQUFTLEdBQUdILElBQUksQ0FBQyxDQUFDLENBQUM7SUFDekIsTUFBTUksR0FBUSxHQUFJQyxLQUFVLElBQUs7TUFDL0Isb0JBQU9SLEtBQUEsQ0FBQVMsYUFBQSxDQUFDSCxTQUFTO1FBQUEsR0FBS0U7TUFBSyxDQUFHLENBQUM7SUFDakMsQ0FBQztJQUNEUCxvQkFBb0IsQ0FBQ1MsR0FBRyxDQUFDTCxXQUFXLEVBQUVFLEdBQUcsQ0FBQztJQUMxQyxPQUFPQSxHQUFHO0VBQ1o7RUFDQTtFQUNBLE9BQVFELFNBQWMsSUFBSztJQUN6QixPQUFPSixlQUFlLENBQUNDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRUcsU0FBUyxDQUFDO0VBQzVDLENBQUM7QUFDSCJ9
//# sourceMappingURL=withDisplayName.js.map