Use parcel v2 bundler instead of webpack (#880)

* Use parcel v2 bundler instead of webpack

Switches the bundler, jest, and storybook to all use swc/swc-loader instead of babel.

Comparisons:

| Bundler           | Speed | index.js module size |
| ----------------- | ----- | -------------------- |
| Babel / Webpack 5 | 40s   | 1.01MB               |
| SWC / Parcel v2   | 20s   | 734KB                |

* Update package.json#scripts

.gitignore

@@ -257,4 +257,7 @@ src/server/generated
 src/client/generated
 
 # generated by @shelf/jest-mongodb
-globalConfig.json
+globalConfig.json
+
+.parcel-cache/
+storybook-static/

.proxyrc

@@ -0,0 +1,10 @@
+{
+	"/graphql": {
+		"target": "https://vaken-staging.herokuapp.com/",
+		"changeOrigin": true
+	},
+	"/api": {
+		"target": "https://vaken-staging.herokuapp.com/",
+		"changeOrigin": true
+	}
+}

.storybook/main.js

@@ -1,4 +1,14 @@
 module.exports = {
+	core: {
+		builder: 'webpack5',
+	},
 	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-	addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-actions'],
+	addons: [
+		'@storybook/addon-a11y',
+		'@storybook/addon-actions',
+		'@storybook/addon-essentials',
+		'@storybook/addon-links',
+		'@storybook/addon-storyshots',
+		'storybook-addon-swc',
+	],
 };

.storyshots/index.js

@@ -1,4 +1,3 @@
-import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
 import initStoryshots, { renderWithOptions } from '@storybook/addon-storyshots';
 
 import 'jest-styled-components';
@@ -12,7 +11,6 @@ jest.mock('@storybook/core/server', () => ({
 }));
 
 addSerializer(styleSheetSerializer);
-registerRequireContextHook();
 
 initStoryshots({
 	test: renderWithOptions({

.swcrc

@@ -0,0 +1,8 @@
+{
+	"jsc": {
+		"parser": {
+			"syntax": "typescript",
+			"tsx": true
+		}
+	}
+}

jest.config.js

@@ -1,5 +1,3 @@
-const { defaults: tsjPreset } = require('ts-jest/presets');
-
 module.exports = {
 	collectCoverage: true,
 	collectCoverageFrom: [
@@ -29,10 +27,9 @@ module.exports = {
 				'\\.(jpg|jpeg|png|gif)$': '<rootDir>/__mocks__/svgrMock.js',
 			},
 			transform: {
-				'^.+\\.jsx?$': 'babel-jest',
+				'^.+\\.(t|j)sx?$': '@swc/jest',
 				'^.+\\.css$': 'jest-transform-css',
 			},
-			preset: 'ts-jest',
 			setupFilesAfterEnv: ['./src/client/setupTests.js'],
 		},
 		{
@@ -50,7 +47,9 @@ module.exports = {
 			// we can only have one preset at a time
 			// this uses the typescript preset's transformer
 			// and mongo's preset to allow both to coeexist
-			transform: tsjPreset.transform,
+			transform: {
+				'^.+\\.(t|j)sx?$': '@swc/jest',
+			},
 			preset: '@shelf/jest-mongodb',
 		},
 		{
@@ -59,9 +58,8 @@ module.exports = {
 			testMatch: ['<rootDir>/src/common/**/*.test.ts'],
 			setupFiles: ['./__mocks__/env.js'], // eslint-disable-line import/no-extraneous-dependencies
 			transform: {
-				'^.+\\.jsx?$': 'babel-jest',
+				'^.+\\.(t|j)sx?$': '@swc/jest',
 			},
-			preset: 'ts-jest',
 			testPathIgnorePatterns: ['.eslintrc.js'],
 		},
 		{
@@ -73,9 +71,8 @@ module.exports = {
 				'\\.(jpg|jpeg|png|gif)$': '<rootDir>/__mocks__/svgrMock.js',
 			},
 			transform: {
-				'^.+\\.jsx?$': 'babel-jest',
+				'^.+\\.(t|j)sx?$': '@swc/jest',
 			},
-			preset: 'ts-jest',
 		},
 	],
 };