@ts-delight/inject-display-name.macro
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    About

    Babel Macro to inject display name into dynamically constructed components

    import classToComponent from "@ts-delight/class-to-component";
    import {style} from "typestyle";
     
    // Before:
    const Container = classToComponent(style({ display: 'block' }));
                  //    ^
                  //    |_______ Creates a react component
     
    // If we see in react-dev-tools, the name shown for this component will be 
    // ClassToComponent(div) which can be confusing if we have many such generated components.

    We can fix this by either passing a displayName to the component API (if supported):

    const Container = classToComponent({
      class: style({ display: 'block' }),
      displayName: 'Container'
    })

    Or assigning the displayName ourselves:

    Container.displayName = 'Container';

    But both of these options require duplication of code. So instead we can use this macro:

    import injectDN from "@ts-delight/inject-display-name.macro";
     
    const Container = injectDN(classToComponent(style({ display: 'block' })));

    Which will automatically inject a statement (at build time) like:

    Container.displayName = 'Container';

    where the display name matches the variable the component is assigned to.

    It also works with default exports:

    // CustomContainer.js
    import injectDN from "@ts-delight/inject-display-name.macro";
    import classToComponent from "class-to-component";
    import {style} from "typestyle";
     
    export default injectDN(classToComponent(style({ display: 'block' })));

    Which will be transformed to:

    import injectDN from "@ts-delight/inject-display-name.macro";
    import classToComponent from "@ts-delight/class-to-component";
    import {style} from "typestyle";
     
    const CustomContainer = injectDN(classToComponent(style({ display: 'block' })));
    CustomContainer.displayName = 'CustomContainer';
    export default CustomContainer;

    Here both the display name and the constant name is derived from the name of the file.

    Installation

    This utility is implemented as a babel-macro.

    Refer babel's setup instructions to learn how to setup your project to use babel for compilation.

    1. Install babel-plugin-macros and inject-display-name.macro:
    npm install --save-dev babel-plugin-macros @ts-delight/inject-display-name.macro
    1. Add babel-plugin-macros to .babelrc (if not already preset):
    // .babelrc
     
    module.exports = {
      presets: [
        // ... other presets
      ],
      plugins: [
        'babel-plugin-macros'    // <-- REQUIRED
        // ... other plugins
      ],
    };

    Usage with TypeScript

    TypeScript definitions are provided within this package.

    License

    MIT

    Install

    npm i @ts-delight/inject-display-name.macro

    DownloadsWeekly Downloads

    0

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    12.7 kB

    Total Files

    12

    Last publish

    Collaborators

    • lorefnon