Spike build/tests with SWC

etc/jest/config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  rootDir: '../../src',
+  transform: {
+    '^.+\\.(t|j)sx?$': ['@swc/jest'],
+    '^.+\\.css$': '<rootDir>/../etc/jest/cssTransform.js',
+    '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': '<rootDir>/../etc/jest/fileTransform.js',
+  },
+  transformIgnorePatterns: [
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+    '^.+\\.module\\.(css|sass|scss)$',
+  ],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+};

etc/jest/cssTransform.js

@@ -0,0 +1,22 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2014-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

etc/jest/fileTransform.js

@@ -0,0 +1,40 @@
+'use strict';
+
+const path = require('path');
+const camelcase = require('camelcase');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFilename = camelcase(path.parse(filename).name, {
+        pascalCase: true,
+      });
+      const componentName = `Svg${pascalCaseFilename}`;
+      return `const React = require('react');
+      module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+          return {
+            $$typeof: Symbol.for('react.element'),
+            type: 'svg',
+            ref: ref,
+            key: null,
+            props: Object.assign({}, props, {
+              children: ${assetFilename}
+            })
+          };
+        }),
+      };`;
+    }
+
+    return `module.exports = ${assetFilename};`;
+  },
+};

etc/webpack/config.js

@@ -0,0 +1,36 @@
+/**
+ * This webpack configuration is used by react-styleguidist in the styleguide.config.js for building the website
+ * The building process of the library is done with rollup (check out /etc/rollup)
+ */
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.[t|j]sx?$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+              },
+            },
+          },
+        },
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
+        loader: 'url-loader',
+        options: {
+          limit: 8192,
+        },
+      },
+    ],
+  },
+};

package.json

@@ -22,7 +22,7 @@
     "compile:code": "rollup --config ./etc/rollup/config.js",
     "compile:clean": "rm -rf es cjs types",
     "compile:types": "tsc --p ./tsconfig.types.json",
-    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
+    "test": "jest --config etc/jest/config.js",
     "format": "prettier -l --write \"**/*.{ts,tsx,js,jsx,json,less,css,md}\"",
     "format:fix": "yarn format --write",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
@@ -64,6 +64,9 @@
     "@rollup/plugin-url": "5.0.1",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.0",
+    "@swc/cli": "^0.1.26",
+    "@swc/core": "^1.2.30",
+    "@swc/jest": "^0.1.2",
     "@testing-library/jest-dom": "5.11.0",
     "@testing-library/react": "10.4.5",
     "@testing-library/react-hooks": "3.3.0",
@@ -76,12 +79,16 @@
     "@types/styled-components": "5.1.0",
     "@typescript-eslint/eslint-plugin": "2.34.0",
     "@typescript-eslint/parser": "2.34.0",
+    "camelcase": "^6.0.0",
     "commitizen": "4.1.2",
+    "css-loader": "^4.3.0",
     "cz-conventional-changelog": "3.2.0",
+    "eslint": "^7.9.0",
     "eslint-config-prettier": "6.11.0",
     "eslint-plugin-prettier": "3.1.4",
     "eslint-plugin-react": "7.20.3",
     "husky": "4.2.5",
+    "jest": "^26.4.2",
     "jest-axe": "3.3.0",
     "jest-environment-jsdom-sixteen": "1.0.3",
     "jest-junit": "10.0.0",
@@ -91,15 +98,18 @@
     "react": "16.13.1",
     "react-docgen-typescript": "1.18.0",
     "react-dom": "16.13.1",
-    "react-scripts": "^3.4.1",
     "react-styleguidist": "11.0.8",
     "react-test-renderer": "16.13.1",
     "rollup": "2.21.0",
     "rollup-plugin-postcss": "3.1.2",
     "rollup-plugin-terser": "6.1.0",
     "semantic-release": "17.1.1",
+    "style-loader": "^1.2.1",
     "styled-components": "4.4.1",
-    "typescript": "3.9.6"
+    "swc-loader": "^0.1.12",
+    "typescript": "3.9.6",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.44.2"
   },
   "browserslist": [
     "cover 95% in GB",
@@ -108,11 +118,6 @@
     "not ios <11",
     "not dead"
   ],
-  "jest": {
-    "collectCoverageFrom": [
-      "src/components/**/*.{ts,tsx}"
-    ]
-  },
   "husky": {
     "hooks": {
       "pre-push": "yarn typecheck && yarn lint && yarn test --watchAll=false",

src/modules.d.ts

@@ -1 +1,2 @@
 declare module '*.css';
+declare module '*.svg';

styleguide.config.js

@@ -4,9 +4,6 @@ const path = require('path');
 const kleur = require('kleur');
 const webpackDevServerUtils = require('react-dev-utils/WebpackDevServerUtils');
 
-// Make react-scripts get the eslint config
-process.env.EXTEND_ESLINT = 'true';
-
 const printServerInstructions = (config) => {
   const urls = webpackDevServerUtils.prepareUrls('http', config.serverHost, config.serverPort);
   console.log(`${kleur.cyan().bold(`
@@ -167,6 +164,6 @@ module.exports = {
   printServerInstructions,
   // props table config
   usageMode: 'expand',
-
   skipComponentsWithoutExample: true,
+  webpackConfig: require('./etc/webpack/config.js'),
 };