Upgrade to 4.0.0 breaks custom template for typescript

[avkonst]

💬 Questions and Help

I used the following template to generate react typescript component using svgr 3.1.0. It generates the component with type safe properties and passes tsc and tslint of my project:

module.exports = (code, config, state) => {
    return `// WARNING: the file is auto generated from ./${state.componentName}.svg file by svgr\n\n` +
           `import * as React from 'react';\n\n` +
           `// tslint:disable\n` +
           `const ${state.componentName} = (props: React.SVGProps<SVGSVGElement>) => ${code}\n` +
           `export default ${state.componentName}`;
}

After upgrade to svgr 4.0.0 I have attempted to come up with babel template.ast code which would generate the same content, but it seems it is impossible, What ast template should I use to achieve exactly the same what I had before?

PS:
If svg looks like this:

<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="41.214 45.499 1367.256 1366.624" width="1367.256" height="1366.624"><g><path d=" M 789.386 1407.316 C 923.333 1392.633 1028.648 1353.011 1129.427 1279.384 C 1204.04 1224.873 1240.814 1177.23 1263.37 1105.852 C 1274.268 1071.363 1275.368 1001.653 1265.542 968.117 C 1233.805 859.799 1145.802 781.419 1060.56 763.051 C 975.317 744.683 924.553 752.782 894.904 762.954 C 862.63 774.027 847.631 782.789 827.942 802.067 C 811.809 817.865 807.16 820.299 789.056 822.427 C 763.141 825.472 733.802 836.93 716.18 850.887 C 690.968 870.855 669.051 925.34 678.859 943.667 C 681.141 947.929 694.71 957.31 709.013 964.513 C 758.528 989.449 779.535 1017.234 779.468 1057.703 C 779.355 1126.96 711.483 1178.554 620.722 1178.378 C 531.309 1178.205 440.701 1131.135 351.397 1038.467 C 293.307 978.188 259.205 922.072 234.166 845.553 C 213.259 781.663 205.565 751.54 205.491 672.363 C 205.425 602.025 209.638 588.808 225.339 518.273 C 240.385 450.679 276.53 366.932 317.713 304.244 C 392.804 189.943 486.397 115.549 606.404 74.771 C 652.992 58.941 661.365 55.102 658.702 50.793 C 647.739 33.054 524.184 62.263 437.124 103.174 C 275.165 179.283 154.002 309.513 85.786 480.805 C 34.223 610.279 26.862 774.686 66.502 911.477 C 100.103 1027.426 163.554 1132.911 249.506 1215.713 C 309.622 1273.626 360.256 1308.723 435.165 1344.405 C 507.229 1378.731 576.354 1398.014 660.382 1407.23 C 719.706 1413.736 730.745 1413.743 789.386 1407.314 L 789.386 1407.316 Z " fill="rgb(48,122,202)"/><path d=" M 1403.083 808.417 C 1410.388 770.239 1410.241 681.846 1402.783 627.351 C 1369.128 381.447 1208.135 176.613 979.909 89.322 C 888.615 54.405 815.174 50.389 756.715 77.118 C 661.551 120.629 640.177 243.798 715.916 312.224 C 747.308 340.584 799.346 360.851 835.395 358.755 C 856.742 357.515 856.901 357.362 867.116 328.372 C 881.427 287.756 908.51 272.049 963.733 272.339 C 1064.27 272.866 1184.773 345.661 1259.061 450.744 C 1333.453 555.973 1372.568 662.819 1382.368 787.572 C 1387.539 853.399 1393.357 859.254 1403.084 808.417 L 1403.083 808.417 Z " fill="rgb(48,122,202)"/><path d=" M 606.107 858.621 C 618.228 854.331 635.222 846.674 643.871 841.605 C 661.459 831.297 680.162 811.085 676.939 805.869 C 673.849 800.87 657.323 801.777 636.524 808.086 C 612.623 815.337 556.362 815.217 528.098 807.855 C 481.032 795.596 432.217 759.133 402.132 713.764 C 339.993 620.057 337.413 496.429 395.167 379.949 C 449.136 271.101 520.069 187.816 616.641 119.909 C 640.38 103.217 648.503 91.448 636.287 91.448 C 627.858 91.448 590.672 109.746 561.809 128.094 C 450.788 198.672 354.829 316.204 312.867 433.003 Q 289.749 497.352 283.537 590.275 Q 282.06 644.61 298.309 693.406 C 314.559 742.202 329.551 765.395 357.414 794.85 C 390.465 829.788 440.824 857.827 485.105 865.945 C 514.809 871.391 581.417 867.359 606.107 858.621 L 606.107 858.621 Z " fill="rgb(14,37,61)"/><path d=" M 1347.733 730.065 C 1343.689 713.787 1342.646 700.708 1337.067 683.2 C 1323.652 641.106 1303.316 594.931 1291.6 572.8 C 1265.598 523.683 1252.185 503.172 1212.8 462 C 1173.415 420.828 1158.198 408.286 1120 386.652 C 1065.762 355.935 1026.85 340.8 986.512 340.8 C 946.947 340.8 932.8 351.629 932.8 367.372 C 932.8 377.731 937.746 393.358 963.733 402.8 C 1010.506 419.793 1030.2 403.544 1120 456.8 C 1167.277 484.838 1196.799 508.505 1219.302 533.8 C 1239.542 556.551 1274.904 593.67 1291.6 627.351 C 1326.858 698.478 1329.067 713.467 1337.067 749 C 1345.067 784.533 1349 816.053 1354 822.427 Q 1359 828.8 1356.8 799.894 Q 1355.546 761.511 1347.733 730.065 Z " fill="rgb(14,37,61)"/></g></svg>

My component looks like this with svgr 3.1.0 and the above template:

// WARNING: the file is auto generated from ./SvgLogo.svg file by svgr

import * as React from 'react';

// tslint:disable
const SvgLogo = (props: React.SVGProps<SVGSVGElement>) => <svg style={{"isolation":"isolate"}} viewBox="41.214 45.499 1367.256 1366.624" width="1em" height="1em" {...props}>
  <path d="M789.386 1407.316c133.947-14.683 239.262-54.305 340.041-127.932 74.613-54.511 111.387-102.154 133.943-173.532 10.898-34.489 11.998-104.199 2.172-137.735-31.737-108.318-119.74-186.698-204.982-205.066-85.243-18.368-136.007-10.269-165.656-.097-32.274 11.073-47.273 19.835-66.962 39.113-16.133 15.798-20.782 18.232-38.886 20.36-25.915 3.045-55.254 14.503-72.876 28.46-25.212 19.968-47.129 74.453-37.321 92.78 2.282 4.262 15.851 13.643 30.154 20.846 49.515 24.936 70.522 52.721 70.455 93.19-.113 69.257-67.985 120.851-158.746 120.675-89.413-.173-180.021-47.243-269.325-139.911-58.09-60.279-92.192-116.395-117.231-192.914-20.907-63.89-28.601-94.013-28.675-173.19-.066-70.338 4.147-83.555 19.848-154.09 15.046-67.594 51.191-151.341 92.374-214.029 75.091-114.301 168.684-188.695 288.691-229.473 46.588-15.83 54.961-19.669 52.298-23.978-10.963-17.739-134.518 11.47-221.578 52.381-161.959 76.109-283.122 206.339-351.338 377.631-51.563 129.474-58.924 293.881-19.284 430.672 33.601 115.949 97.052 221.434 183.004 304.236 60.116 57.913 110.75 93.01 185.659 128.692 72.064 34.326 141.189 53.609 225.217 62.825 59.324 6.506 70.363 6.513 129.004.084v.002z" fill="#307ACA" />
  <path d="M1403.083 808.417c7.305-38.178 7.158-126.571-.3-181.066-33.655-245.904-194.648-450.738-422.874-538.029-91.294-34.917-164.735-38.933-223.194-12.204-95.164 43.511-116.538 166.68-40.799 235.106 31.392 28.36 83.43 48.627 119.479 46.531 21.347-1.24 21.506-1.393 31.721-30.383 14.311-40.616 41.394-56.323 96.617-56.033 100.537.527 221.04 73.322 295.328 178.405 74.392 105.229 113.507 212.075 123.307 336.828 5.171 65.827 10.989 71.682 20.716 20.845h-.001z" fill="#307ACA" />
  <path d="M606.107 858.621c12.121-4.29 29.115-11.947 37.764-17.016 17.588-10.308 36.291-30.52 33.068-35.736-3.09-4.999-19.616-4.092-40.415 2.217-23.901 7.251-80.162 7.131-108.426-.231-47.066-12.259-95.881-48.722-125.966-94.091-62.139-93.707-64.719-217.335-6.965-333.815 53.969-108.848 124.902-192.133 221.474-260.04 23.739-16.692 31.862-28.461 19.646-28.461-8.429 0-45.615 18.298-74.478 36.646-111.021 70.578-206.98 188.11-248.942 304.909q-23.118 64.349-29.33 157.272-1.477 54.335 14.772 103.131c16.25 48.796 31.242 71.989 59.105 101.444 33.051 34.938 83.41 62.977 127.691 71.095 29.704 5.446 96.312 1.414 121.002-7.324zM1347.733 730.065c-4.044-16.278-5.087-29.357-10.666-46.865-13.415-42.094-33.751-88.269-45.467-110.4-26.002-49.117-39.415-69.628-78.8-110.8s-54.602-53.714-92.8-75.348c-54.238-30.717-93.15-45.852-133.488-45.852-39.565 0-53.712 10.829-53.712 26.572 0 10.359 4.946 25.986 30.933 35.428 46.773 16.993 66.467.744 156.267 54 47.277 28.038 76.799 51.705 99.302 77 20.24 22.751 55.602 59.87 72.298 93.551 35.258 71.127 37.467 86.116 45.467 121.649S1349 816.053 1354 822.427q5 6.373 2.8-22.533-1.254-38.383-9.067-69.829z" fill="#0E253D" />
</svg>

export default SvgLogo

[gregberge]

OK, there is actually a bug in Babel preventing us to create types using @babel/template. I created an issue: babel/babel#8996 and provided a fix babel/babel#8997.

[nathanforce]

Is there any way around this in 4.0?

[gregberge]

@nathanforce not yet sorry..

[gregberge]

The PR has been merged, we are now waiting for a Babel release, and then we will be able to support TypeScript and Flow templates 💃

[gregberge]

Babel has been released, I added a test to valid that it is supported. I also documented it on the new website 👉 https://www.smooth-code.com/open-source/svgr/docs/typescript/

Be sure to have the latest version of @babel/types in your repository.

[avkonst]

Thanks for that. It addresses the issue partially. What about adding a comment line which disables tslint? See my example I originally posted.

…

On Sat, 24 Nov 2018, 21:48 Greg Bergé ***@***.*** wrote: Closed #226 <#226>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#226 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADyZVUMat0Wxx7OjFfMNvmck8bnm1iwEks5uyQfQgaJpZM4YTrKt> .

[gregberge]

@avkonst I think comments are ignored by default by Babel template but there is an option to enable them. You should give a look to @babel/template documentation.

[aaronmcadam]

@neoziro it looks like the types are being stripped out when following that recipe in the docs. I have @babel/types installed. Whatever type annotation I add, even any, it always gets lost. This causes a problem for me because I have noImplicityAny set to true in my TypeScript config.

Here's my template:

function template(
  { template },
  opts,
  { imports, componentName, props, jsx, exports },
) {
  const typeScriptTpl = template.smart({ plugins: ['typescript'] });
  return typeScriptTpl.ast`
    import * as React from 'react';
    const ${componentName} = (props: React.SVGProps<SVGSVGElement>) => ${jsx};
    export default ${componentName};
  `;
}

module.exports = template;

and example output

import * as React from 'react';

const SvgCamera = props => (
  <svg viewBox="0 0 512 512" {...props}>
   ...
  </svg>
);

export default SvgCamera;

I'm calling it like so:

../node_modules/.bin/svgr --ext tsx --template ./svgrTypescript.js -d ../src/alchemy/Icon/components/ ../src/alchemy/Icon/icons/

[aaronmcadam]

@neoziro nevermind, it seems using npx @svgr/cli works instead of trying to use the binary directly.