Spike build/tests with SWC

.eslintrc.js

@@ -16,7 +16,7 @@ module.exports = {
   rules: {
     // -- TYPESCRIPT
     '@typescript-eslint/camelcase': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/naming-convention': [
       'error',
       { selector: 'variableLike', format: ['camelCase', 'UPPER_CASE', 'StrictPascalCase'] },

etc/jest/config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  rootDir: '../../src',
+  transform: {
+    '^.+\\.(t|j)sx?$': ['@swc/jest'],
+    '^.+\\.css$': '<rootDir>/../etc/jest/cssTransform.js',
+    '^(?!.*\\.(mjs|cjs|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/rollup/config.js

@@ -4,10 +4,10 @@ import pkg from '../../package.json';
 // Plugins
 import customResolveOptions from '@rollup/plugin-node-resolve';
 import url from '@rollup/plugin-url';
-import babel from '@rollup/plugin-babel';
+import swc from 'rollup-plugin-swc';
 import commonjs from '@rollup/plugin-commonjs';
 import { terser } from 'rollup-plugin-terser';
-import postcss from 'rollup-plugin-postcss';
+import styles from 'rollup-plugin-styles';
 
 const extensions = ['.ts', '.tsx', '.js', '.json'];
 
@@ -32,11 +32,14 @@ export default {
   external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
   plugins: [
     customResolveOptions({ extensions }),
-    babel({
-      presets: [['react-app', { flow: false, typescript: true, absoluteRuntime: false }]],
-      babelHelpers: 'runtime',
-      extensions,
-      exclude: 'node_modules',
+    styles(),
+    swc({
+      jsc: {
+        parser: {
+          syntax: 'typescript',
+          tsx: true,
+        },
+      },
     }),
     commonjs({
       include: /node_modules/,
@@ -47,6 +50,5 @@ export default {
       emitFiles: true, // defaults to true
     }),
     terser(),
-    postcss({ minimize: true }),
   ],
 };

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

@@ -23,7 +23,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": "pnpm format --write",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
@@ -32,9 +32,9 @@
     "release": "semantic-release -e ./etc/semantic-release/config.js --no-ci"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/react-fontawesome": "^0.1.11",
-    "@tippyjs/react": "^4.1.0",
+    "@tippyjs/react": "^4.2.0",
     "@types/classnames": "^2.2.10",
     "@types/react-headroom": "^2.2.1",
     "@types/react-modal": "^3.10.6",
@@ -47,7 +47,7 @@
     "react-headroom": "^3.0.0",
     "react-modal": "^3.11.2",
     "styled-normalize": "^8.0.7",
-    "tippy.js": "^6.2.6",
+    "tippy.js": "^6.2.7",
     "util-deprecate": "^1.0.2"
   },
   "peerDependencies": {
@@ -59,58 +59,64 @@
     "typescript": ">=3.x <4"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.1",
+    "@babel/core": "^7.12.3",
     "@babel/runtime": "7.10.4",
     "@commitlint/cli": "8.3.5",
     "@commitlint/config-conventional": "8.3.4",
     "@fortawesome/free-solid-svg-icons": "5.13.1",
-    "@rollup/plugin-babel": "5.0.4",
     "@rollup/plugin-commonjs": "12.0.0",
     "@rollup/plugin-node-resolve": "8.1.0",
     "@rollup/plugin-url": "5.0.1",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.0",
-    "@testing-library/jest-dom": "5.11.0",
-    "@testing-library/react": "10.4.5",
+    "@swc/cli": "^0.1.27",
+    "@swc/core": "^1.2.36",
+    "@swc/jest": "^0.1.2",
+    "@testing-library/dom": "^7.26.3",
+    "@testing-library/jest-dom": "5.11.4",
+    "@testing-library/react": "11.1.0",
     "@testing-library/react-hooks": "3.3.0",
-    "@types/jest": "^26.0.10",
-    "@types/jest-axe": "^3.5.0",
+    "@types/jest": "^26.0.15",
+    "@types/jest-axe": "^3.5.1",
     "@types/lodash.throttle": "4.1.6",
     "@types/node": "12.12.45",
     "@types/react": "16.9.35",
     "@types/react-dom": "16.9.8",
-    "@types/styled-components": "^5.1.2",
-    "@typescript-eslint/eslint-plugin": "2.34.0",
-    "@typescript-eslint/parser": "2.34.0",
-    "babel-preset-react-app": "^9.1.2",
+    "@types/styled-components": "^5.1.4",
+    "@typescript-eslint/eslint-plugin": "4.5.0",
+    "@typescript-eslint/parser": "4.5.0",
+    "camelcase": "^6.1.0",
     "commitizen": "4.1.2",
+    "css-loader": "^4.3.0",
     "cz-conventional-changelog": "3.2.0",
-    "eslint": "6.8.0",
+    "eslint": "^7.11.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.6.0",
     "jest-axe": "3.3.0",
-    "jest-environment-jsdom-sixteen": "1.0.3",
     "jest-junit": "10.0.0",
-    "jest-styled-components": "6.3.4",
+    "jest-styled-components": "7.0.3",
     "lint-staged": "10.2.11",
-    "pnpm": "5",
+    "pnpm": "^5.9.3",
     "prettier": "2.0.5",
     "react": "16.13.1",
     "react-docgen-typescript": "1.18.0",
     "react-dom": "16.13.1",
-    "react-scripts": "^3.4.3",
-    "react-styleguidist": "11.0.8",
+    "react-styleguidist": "11.1.0",
     "react-test-renderer": "16.13.1",
     "rollup": "2.21.0",
-    "rollup-plugin-postcss": "3.1.2",
+    "rollup-plugin-styles": "^3.11.0",
+    "rollup-plugin-swc": "^0.1.4",
     "rollup-plugin-terser": "6.1.0",
     "semantic-release": "17.1.1",
-    "styled-components": "4.4.1",
+    "style-loader": "^1.3.0",
+    "styled-components": "5.2.0",
+    "swc-loader": "^0.1.12",
     "typescript": "3.9.6",
-    "webpack": "4.42.0",
-    "webpack-dev-server": "3.11.0"
+    "url-loader": "^4.1.1",
+    "webpack": "^4.44.2"
   },
   "browserslist": [
     "cover 95% in GB",
@@ -119,11 +125,6 @@
     "not ios <11",
     "not dead"
   ],
-  "jest": {
-    "collectCoverageFrom": [
-      "src/components/**/*.{ts,tsx}"
-    ]
-  },
   "husky": {
     "hooks": {
       "pre-push": "pnpm typecheck && pnpm lint && pnpm test -- --watchAll=false",