@avensia-oss/ts-transform-glitz-displayname
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    ts-transform-glitz-displayname

    Note! This transformer is currently experimental

    A TypeScript custom transformer that adds a displayName to your Glitz components, making them easier to spot in React DevTools. Theoretically this transform should also work on Styletron components.

    This transformer will essentially rewrite this:

    import { styled } from '@glitz/react';
     
    const CompactHeader = styled.div({
      backgroundColor: 'palevioletred',
    });
    const NarrowHeader = styled(CompactHeader, {
      backgroundColor: 'mediumslateblue',
    });

    To this:

    import { styled } from '@glitz/react';
     
    const CompactHeader = styled.div({
      backgroundColor: 'palevioletred',
    });
    CompactHeader.displayName = 'CompactHeader';
    const NarrowHeader = styled(CompactHeader, {
      backgroundColor: 'mediumslateblue',
    });
    NarrowHeader.displayName = 'NarrowHeader';

    WIP

    • Check if VariableStatement already has displayName after itself to avoid duplication.

    Installation

    yarn add @avensia-oss/ts-transform-glitz-displayname
    

    Options

    Usage with webpack

    Unfortunately TypeScript doesn't let you specifiy custom transformers in tsconfig.json. If you're using ts-loader with webpack you can specify it like this: https://github.com/TypeStrong/ts-loader#getcustomtransformers-----before-transformerfactory-after-transformerfactory--

    The default export of this module is a function which expects a ts.Program an returns a transformer function. Your config should look something like this:

    const glitzDisplayName = require('@avensia-oss/ts-transform-glitz-displayname');
     
    return {
      ...
      options: {
        getCustomTransformers: (program) => ({
          before: [glitzDisplayName(program, options)] // See options above
        })
      }
      ...
    };

    Install

    npm i @avensia-oss/ts-transform-glitz-displayname

    DownloadsWeekly Downloads

    21

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    8.04 kB

    Total Files

    10

    Last publish

    Collaborators

    • avensia-oss