Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

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

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

  • avatar