Prevent stripping of return type

[haswalt]

I've been working on a component library that builds icon components from svgs. Building the components themselves are realy simple thanks for SVGR, but i'm having some issues with typescript support.

I'm using a custom template to add my own imports and adjustments to the output:

{
      plugins: ['@svgr/plugin-jsx', '@svgr/plugin-prettier'],
      ext: 'tsx',
      typescript: true,
      native: true,
      expandProps: false,
      dimensions: false,
      prettierConfig: {
        parser: 'typescript',
      },
      replaceAttrValues: {
        white: '{fill}',
      },
      svgProps: {
        width: '{width}',
        height: '{height}',
      },
      template: (
        { template },
        opts,
        { imports, interfaces, componentName, props, jsx, exports }
      ) => {
        const plugins = ['jsx'];

        if (opts.typescript) {
          plugins.push('typescript');
        }

        const typeScriptTpl = template.smart({
          plugins,
          preserveComments: true,
          retainLines: true,
          compact: false,
        });

        return typeScriptTpl.ast`
          ${`/**
              * AUTO-GENERATED - DO NOT EDIT!
              */\n`}
          ${imports}
          import {colours} from '@haswalt/tokens';
          ${'\n'}
          import {iconSizes} from '../config';
          ${'\n'}
          ${interfaces}
          ${'\n'}
          type Props = {
            colour?: string;
            size?: 'l' | 'm' | 's'| 'xs'|'xxs';
          }
          ${'\n'}
          export const ${componentName}: React.FC<Props> = ({colour = "foreground", size = "m"}) => {
            const {width, height} = iconSizes[size];
            const fill = colours[colour];
            ${'\n'}
            return (${jsx});
          }
          ${'\n'}
          ${exports}
        `;
      },
    },

Mostly this works fine, except the return type us being stripped from the output code: React.FC<Props> and I can't get it to keep it in place. This is required to make typechecking work as the props aren't correctly typed otherwise.

[open-collective-bot]

Hey @haswalt 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use SVGR at work, you can also ask your company to sponsor us ❤️.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gregberge]

Hello @haswalt,

It is actually a babel-template bug. As a workaround I made a PR #619, that gives you a way to do it.