Cannot add comments to a custom template

[cgreene-st]

🐛 Bug Report

Cannot add comments to certain parts of the custom template. For example:

custom-template.js

function template(
    { imports, interfaces, componentName, props, jsx, exports },
    { tpl }
) {
    return tpl`
    /**
     * DO NOT EDIT
     * 
     * This has been autogenerated by svgr
     */    
    ${imports};
    ${interfaces};
    function ${componentName}(${props}) {
        return ${jsx};
    }

    ${exports};
  `;
}

module.exports = template;

From my own testing, it looks like you can add comments to the function body but I have no idea why that would be different 🤷‍♂️ So for example, this works:

custom-template.js

function template(
    { imports, interfaces, componentName, props, jsx, exports },
    { tpl }
) {
    return tpl`
    ${imports};
    ${interfaces};
    function ${componentName}(${props}) {
      /**
       * DO NOT EDIT
       * 
       * This has been autogenerated by svgr
       */    
        return ${jsx};
    }

    ${exports};
  `;
}

module.exports = template;

To Reproduce

Steps to reproduce the behavior:

1. Create an icons dir with all your raw svgs
2. Create a custom template with a comment at the top of the file (see below)

function template(
    { imports, interfaces, componentName, props, jsx, exports },
    { tpl }
) {
    return tpl`
    /**
     * DO NOT EDIT
     * 
     * This has been autogenerated by svgr
     */    
    ${imports};
    ${interfaces};
    function ${componentName}(${props}) {
        return ${jsx};
    }

    ${exports};
  `;
}

module.exports = template;

4. Run the cli over it with the custom template

Expected behavior

Expect to see comment in the output React component file.

Link to repl or repo (highly encouraged)

I've created a draft PR to demonstrate the behaviour. #751

Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 12.4
 - CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
 - Memory: 275.66 MB / 32.00 GB
 - Shell: 5.8.1 - /bin/zsh
## Binaries:
 - Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
 - Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
 - npm: 8.12.1 - ~/dev/stui-components/node_modules/.bin/npm

[hec9527]

check your template, this function work correctly, my component template as below

const tips = require('./tips');

const template = (variables, { tpl }) => {
    return tpl`
${tips}\n

${variables.imports};

${variables.interfaces};

const ${variables.componentName} = (${variables.props}) => (
    ${variables.jsx}
);
 
${variables.exports};
`;
};

module.exports = template;

and the tips.js like this

module.exports = `
// THIS FILE IS GENERATED BY BUILD TOOL
// DO NOT EDIT IT MANUAL
`;

[hec9527]

Maybe you can change multi-line comments to single-line comments

[cgreene-st]

@hec9527 interesting! I'll have another look again but I even created a fork and got the tests failing for this test.

EDIT: https://github.com/gregberge/svgr/pull/751

[stale[bot]]

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.

[stale[bot]]

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.