Added webpack typescript preset configuration

[smol-honk]

Summary

Should offer support for #354 and #473. I originally tried to use the webpack loader with NextJS and TypeScript. I consistently got a SyntaxError when I had {typescript: true} in the options. This PR adds the @babel/preset-typescript preset if the typescript option is enabled. It also automatically sets the preset-typescript options to { allowNamespaces: true, allExtensions: true, isTSX: true } which enables processing the .svg extension as typescript.

A bug I've noticed that I haven't fixed is if you have a separate config file .svgrrc.js the options object in the webpack loader will be empty. I'll take a look into that if I have enough time!

The additional changes in other files are due to me running yarn format on the repo.

Test plan

Added an additional test case to the webpack package's index.test.js to include {typescript: true}.

I also tested that it fixes the SyntaxError in my NextJS project by doing an npm pack and installing the local tar package.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/gregberge/svgr/D1tGEaXVuEttFu4vVG73u9ghFtvJ
✅ Preview: https://svgr-git-fork-smol-honk-fix-webpack-ts-compilation-gregberge.vercel.app

[codecov]

Codecov Report

Merging #573 (77045d5) into main (7e890a9) will decrease coverage by 3.65%.
The diff coverage is 100.00%.

❗ Current head 77045d5 differs from pull request most recent head 87ca373. Consider uploading reports for the commit 87ca373 to get more accurate results

@@            Coverage Diff             @@
##             main     #573      +/-   ##
==========================================
- Coverage   90.89%   87.23%   -3.66%     
==========================================
  Files          31       31              
  Lines        1076      572     -504     
  Branches      325      161     -164     
==========================================
- Hits          978      499     -479     
+ Misses         92       58      -34     
- Partials        6       15       +9     

Impacted Files	Coverage Δ
...s/babel-plugin-transform-svg-component/src/util.js	100.00% <100.00%> (+7.38%)	⬆️
packages/webpack/src/index.js	95.83% <100.00%> (ø)
.../hast-util-to-babel-ast/src/stringToObjectStyle.js	0.00% <0.00%> (-67.40%)	⬇️
packages/plugin-svgo/src/index.js	66.66% <0.00%> (-33.34%)	⬇️
packages/plugin-svgo/src/config.js	76.19% <0.00%> (-23.81%)	⬇️
...el-plugin-replace-jsx-attribute-value/src/index.js	68.75% <0.00%> (-19.49%)	⬇️
packages/hast-util-to-babel-ast/src/one.js	71.42% <0.00%> (-16.08%)	⬇️
packages/hast-util-to-babel-ast/src/handlers.js	69.56% <0.00%> (-13.42%)	⬇️
...ckages/babel-plugin-svg-em-dimensions/src/index.js	93.75% <0.00%> (-6.25%)	⬇️
packages/babel-preset/src/index.js	93.54% <0.00%> (-5.01%)	⬇️
... and 25 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7e890a9...87ca373. Read the comment docs.

[TheElegantCoding]

any example or doc of this ? i use this in my nextjs config and don't get eny type help

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,

  webpack(config) 
  {
    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
    config.module.rules.push({
      test: /\.svg$/,
      use: [ { 
            loader: '@svgr/webpack', options: { 
            icon: true,      
            typescript: true,
            ext: 'tsx', 
      } } ],
    });

    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
    return config;
  }
};

module.exports = nextConfig;