feat: remove usage of babel for transforming SVGs

Author: bradenmacdonald

.eslintignore

@@ -3,3 +3,4 @@ dist/
 node_modules/
 __mocks__/
 __snapshots__/
+lib/plugins/svgr-webpack/index.js

config/webpack.dev.config.js

@@ -115,9 +115,23 @@ module.exports = merge(commonConfig, {
         ],
       },
       {
+        // Use SVGR to convert SVG to React components (when used in JSX files)
         test: /.svg(\?v=\d+\.\d+\.\d+)?$/,
         issuer: /\.jsx?$/,
-        use: ['@svgr/webpack'],
+        use: [
+          // Second, convert JSX to JS:
+          {
+            loader: 'swc-loader',
+            options: {
+              jsc: {
+                parser: { syntax: 'ecmascript', jsx: true },
+                transform: { react: { runtime: 'automatic' } },
+              },
+            },
+          },
+          // First, convert SVG to JSX:
+          { loader: path.resolve(__dirname, '../lib/plugins/svgr-webpack/index') },
+        ],
       },
       // Webpack, by default, uses the url-loader for images and fonts that are required/included by
       // files it processes, which just base64 encodes them and inlines them in the javascript

config/webpack.prod.config.js

@@ -152,9 +152,23 @@ module.exports = merge(commonConfig, {
         ],
       },
       {
+        // Use SVGR to convert SVG to React components (when used in JSX files)
         test: /.svg(\?v=\d+\.\d+\.\d+)?$/,
         issuer: /\.jsx?$/,
-        use: ['@svgr/webpack'],
+        use: [
+          // Second, convert JSX to JS:
+          {
+            loader: 'swc-loader',
+            options: {
+              jsc: {
+                parser: { syntax: 'ecmascript', jsx: true },
+                transform: { react: { runtime: 'automatic' } },
+              },
+            },
+          },
+          // First, convert SVG to JSX:
+          { loader: path.resolve(__dirname, '../lib/plugins/svgr-webpack/index') },
+        ],
       },
       // Webpack, by default, uses the url-loader for images and fonts that are required/included by
       // files it processes, which just base64 encodes them and inlines them in the javascript

lib/plugins/svgr-webpack/README.md

@@ -0,0 +1,5 @@
+Run this command to rebuild `index.js` from `index.ts`:
+
+    ../../../node_modules/.bin/tsc -p tsconfig.json
+
+If you see some error about 'prettier' not being found, you can safely ignore it.

lib/plugins/svgr-webpack/index.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Adapted from https://github.com/gregberge/svgr/blob/main/packages/webpack/src/index.ts to remove babel
+const util_1 = require("util");
+const core_1 = require("@svgr/core");
+const path_1 = require("path");
+const plugin_svgo_1 = __importDefault(require("@svgr/plugin-svgo"));
+const plugin_jsx_1 = __importDefault(require("@svgr/plugin-jsx"));
+const tranformSvg = (0, util_1.callbackify)(async (contents, options, state) => {
+    const jsCode = await (0, core_1.transform)(contents, options, state);
+    return jsCode;
+});
+function svgrLoader(contents) {
+    this.cacheable?.();
+    const callback = this.async();
+    const options = this.getOptions();
+    const previousExport = (() => {
+        if (contents.startsWith('export ')) {
+            return contents;
+        }
+        const exportMatches = contents.match(/^module.exports\s*=\s*(.*)/);
+        return exportMatches ? `export default ${exportMatches[1]}` : null;
+    })();
+    const state = {
+        caller: {
+            name: 'svgr-webpack-no-babel',
+            previousExport,
+            defaultPlugins: [plugin_svgo_1.default, plugin_jsx_1.default],
+        },
+        filePath: (0, path_1.normalize)(this.resourcePath),
+    };
+    if (!previousExport) {
+        tranformSvg(contents, options, state, callback);
+    }
+    else {
+        this.fs.readFile(this.resourcePath, (err, result) => {
+            if (err) {
+                callback(err);
+                return;
+            }
+            tranformSvg(String(result), options, state, (err2, content) => {
+                if (err2) {
+                    callback(err2);
+                    return;
+                }
+                callback(null, content);
+            });
+        });
+    }
+}
+exports.default = svgrLoader;

lib/plugins/svgr-webpack/index.ts

@@ -0,0 +1,63 @@
+// Adapted from https://github.com/gregberge/svgr/blob/main/packages/webpack/src/index.ts to remove babel
+import { callbackify } from 'util';
+import { transform, Config, State } from '@svgr/core';
+import { normalize } from 'path';
+import svgo from '@svgr/plugin-svgo';
+import jsx from '@svgr/plugin-jsx';
+import type * as webpack from 'webpack';
+
+interface LoaderOptions extends Config {
+//   babel?: boolean
+}
+
+const tranformSvg = callbackify(
+  async (contents: string, options: LoaderOptions, state: Partial<State>) => {
+    const jsCode = await transform(contents, options, state);
+    return jsCode;
+  },
+);
+
+function svgrLoader(
+  this: webpack.LoaderContext<LoaderOptions>,
+  contents: string,
+): void {
+  this.cacheable?.();
+  const callback = this.async();
+
+  const options = this.getOptions();
+
+  const previousExport = (() => {
+    if (contents.startsWith('export ')) { return contents; }
+    const exportMatches = contents.match(/^module.exports\s*=\s*(.*)/);
+    return exportMatches ? `export default ${exportMatches[1]}` : null;
+  })();
+
+  const state = {
+    caller: {
+      name: 'svgr-webpack-no-babel',
+      previousExport,
+      defaultPlugins: [svgo, jsx],
+    },
+    filePath: normalize(this.resourcePath),
+  };
+
+  if (!previousExport) {
+    tranformSvg(contents, options, state, callback);
+  } else {
+    this.fs.readFile(this.resourcePath, (err, result) => {
+      if (err) {
+        callback(err);
+        return;
+      }
+      tranformSvg(String(result), options, state, (err2, content) => {
+        if (err2) {
+          callback(err2);
+          return;
+        }
+        callback(null, content);
+      });
+    });
+  }
+}
+
+export default svgrLoader;

lib/plugins/svgr-webpack/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "rootDir": ".",
+        "outDir": ".",
+        "moduleResolution": "Node16",
+        "module": "Node16"
+    },
+    "files": ["index.ts"],
+    "include": ["index.ts"]
+}