chore(build): build time improvements (#352)

.flowconfig

@@ -1,9 +1,21 @@
 [ignore]
 .*/node_modules/.*
 !.*/node_modules/@tef-novum/.*
-<PROJECT_ROOT>/playroom/.*
-<PROJECT_ROOT>/.storybook/.*
-<PROJECT_ROOT>/scripts/dts-to-flow/overrides
+<PROJECT_ROOT>/playroom
+<PROJECT_ROOT>/.storybook
+<PROJECT_ROOT>/src
+<PROJECT_ROOT>/dist
+<PROJECT_ROOT>/dist-es
+<PROJECT_ROOT>/examples
+<PROJECT_ROOT>/public
+<PROJECT_ROOT>/doc
+<PROJECT_ROOT>/reports
+<PROJECT_ROOT>/scripts
+<PROJECT_ROOT>/css
+<PROJECT_ROOT>/packages
+<PROJECT_ROOT>/codemods
+<PROJECT_ROOT>/img
+<PROJECT_ROOT>/.github
 
 [include]
 

.storybook/main.js

@@ -1,5 +1,22 @@
 const path = require('path');
 
+const replaceBabelWithSwc = (config) => {
+    // Replace default webpack babel-loader with swc-loader
+    config.module.rules.forEach((rule) => {
+        if (rule.use) {
+            rule.use = rule.use.map((loaderConfig) => {
+                if (loaderConfig.loader && loaderConfig.loader.includes('babel-loader')) {
+                    return {
+                        loader: require.resolve('swc-loader'),
+                    };
+                }
+                return loaderConfig;
+            });
+        }
+    });
+    return config;
+};
+
 module.exports = {
     stories: ['./welcome-story.js', '../src/**/__stories__/*-story.tsx'],
     addons: [
@@ -27,7 +44,11 @@ module.exports = {
             ...config.watchOptions,
             ignored: [/node_modules/, /__tests__/, /__acceptance_tests__/, /__screenshot_tests__/],
         };
-        return config;
+
+        return replaceBabelWithSwc(config);
+    },
+    managerWebpack: async (config) => {
+        return replaceBabelWithSwc(config);
     },
     typescript: {
         // workaround for https://github.com/storybookjs/storybook/issues/15067

.swcrc

@@ -0,0 +1,11 @@
+{
+    "env": {
+        "coreJs": 3
+    },
+    "jsc": {
+        "parser": {
+            "syntax": "typescript",
+            "tsx": true
+        }
+    }
+}

README.md

@@ -102,7 +102,6 @@ Start prototyping interfaces with Mistica components in the
 - `yarn lint`: check codestyle
 - `yarn ts-check`: check static types
 - `yarn build`: build package
-- `yarn watch`: build package and watch for changes
 - `yarn storybook`: starts storybook
 - `yarn playroom`: starts playroom
 

flow-defs/form-context.js.flow

@@ -2,20 +2,26 @@
 
 import * as React from "react";
 export type FormStatus = "filling" | "sending";
-export type FormErrors = { [name: string]: string | void, ... };
+export type FormErrors = {
+  [name: string]: string | void,
+};
 export type FieldValidator = (value: any, rawValue: string) => string | void;
 export type FieldRegistration = {
   input?: HTMLInputElement | HTMLSelectElement | null,
   validator?: FieldValidator,
   focusableElement?: HTMLDivElement | HTMLSelectElement | null,
 };
 declare type Context = {
-  rawValues: { [name: string]: any, ... },
+  rawValues: {
+    [name: string]: any,
+  },
   setRawValue: (param: {
     +name: string,
     +value: any,
   }) => void,
-  values: { [name: string]: any, ... },
+  values: {
+    [name: string]: any,
+  },
   setValue: (param: {
     +name: string,
     +value: any,

flow-defs/form.js.flow

@@ -2,7 +2,9 @@
 
 import * as React from "react";
 import type { FormErrors } from "./form-context";
-declare type FormValues = { [name: string]: any, ... };
+declare type FormValues = {
+  [name: string]: any,
+};
 declare type FormProps = {
   id?: string,
   onSubmit: (values: FormValues, rawValues: FormValues) => Promise<void> | void,

flow-defs/text-field-base.js.flow

@@ -83,7 +83,9 @@ declare type TextFieldBaseProps = {|
   onBlur?: (event: SyntheticFocusEvent<>) => void,
   onFocus?: (event: SyntheticFocusEvent<>) => void,
   onKeyDown?: (event: SyntheticKeyboardEvent<>) => void,
-  inputProps?: { [name: string]: string | number | void, ... },
+  inputProps?: {
+    [name: string]: string | number | void,
+  },
   inputComponent?: React.ComponentType<any>,
   shrinkLabel?: boolean,
   focus?: boolean,

flow-defs/text-link.js.flow

@@ -6,7 +6,9 @@ declare type CommonProps = {|
   children?: React.Node,
   className?: string,
   style?: CssStyle,
-  classes?: { [className: string]: string, ... },
+  classes?: {
+    [className: string]: string,
+  },
   small?: boolean,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
 

flow-defs/utils/types.js.flow

@@ -6,6 +6,7 @@ export type TrackingEvent = {
   +action: string,
   +label?: string,
   +value?: number,
-  ...
 };
-export type DataAttributes = { [name: string]: string | number | boolean | void, ... };
+export type DataAttributes = {
+  [name: string]: string | number | boolean | void,
+};

jest.base.config.js

@@ -1,4 +1,6 @@
 /* eslint-disable filenames/match-regex */
+const fs = require('fs');
+const swcConfig = JSON.parse(fs.readFileSync(`${__dirname}/.swcrc`, 'utf-8'));
 
 module.exports = {
     // Automatically restore mock state between every test
@@ -8,5 +10,8 @@ module.exports = {
         '!**/node_modules/**',
         '!**/__*__/**', // ignore tests, acceptance, stories, etc
     ],
+    transform: {
+        '^.+\\.(t|j)sx?$': ['@swc/jest', {...swcConfig, sourceMaps: 'inline'}],
+    },
     coverageReporters: ['json-summary', 'lcov'],
 };

package.json

@@ -21,18 +21,14 @@
         "prettier-check": "prettier --check \"**/*.js\" \"**/*.tsx\" \"**/*.ts\" \"**/*.json\"",
         "lint": "eslint --report-unused-disable-directives .",
         "ts-check": "tsc --project tsconfig.json --noEmit",
-        "prebuild": "yarn clean",
-        "build": "node scripts/build.js",
-        "postbuild": "yarn gen-ts-defs && yarn gen-flow-defs && node scripts/size-stats",
-        "watch": "node scripts/watch.js",
+        "build": "yarn clean && node scripts/build.js",
         "clean": "rimraf dist && rimraf dist-es && rimraf dist-ts && rimraf node_modules/.cache",
         "ci": "yarn lint && yarn prettier-check && yarn circular-dependencies && yarn build && yarn storybook-static && yarn test --ci && yarn test-acceptance --ci",
         "prepublishOnly": "node scripts/prepublish-only.js",
         "prepack": "yarn build",
         "storybook": "start-storybook -p 6006",
         "playroom": "playroom start",
         "gen-ts-defs": "rimraf dist-ts && tsc --project tsconfig.production.json --emitDeclarationOnly && cp -r dist-ts/src/* dist && rimraf dist-ts",
-        "gen-flow-defs": "node scripts/dts-to-flow && yarn flow check",
         "now-build": "yarn storybook-static && ./node_modules/.bin/playroom build && cp img/favicon.ico public/",
         "storybook-static": "rimraf public && yarn build-storybook -o public --quiet",
         "up-chromium": "docker-compose up -d chromium",
@@ -55,18 +51,6 @@
         "@actions/github": "^5.0.0",
         "@axe-core/puppeteer": "^4.2.1",
         "@azure/storage-blob": "^12.5.0",
-        "@babel/cli": "^7.14.3",
-        "@babel/core": "^7.14.3",
-        "@babel/parser": "^7.14.4",
-        "@babel/plugin-proposal-class-properties": "^7.13.0",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.2",
-        "@babel/plugin-proposal-optional-chaining": "^7.14.2",
-        "@babel/plugin-transform-modules-commonjs": "^7.14.0",
-        "@babel/plugin-transform-property-literals": "^7.12.13",
-        "@babel/preset-env": "^7.14.4",
-        "@babel/preset-react": "^7.13.13",
-        "@babel/preset-typescript": "^7.13.0",
-        "@babel/traverse": "^7.14.2",
         "@semantic-release/changelog": "^5.0.1",
         "@semantic-release/git": "^9.0.0",
         "@storybook/addon-actions": "6.3.0-beta.5",
@@ -79,6 +63,9 @@
         "@storybook/components": "6.3.0-beta.5",
         "@storybook/react": "6.3.0-beta.5",
         "@storybook/theming": "6.3.0-beta.5",
+        "@swc/cli": "^0.1.51",
+        "@swc/core": "^1.2.93",
+        "@swc/jest": "^0.2.4",
         "@telefonica/eslint-plugin-async-await": "^1.1.0",
         "@telefonica/eslint-plugin-react-element-interface": "^1.0.0",
         "@telefonica/prettier-config": "^1.1.0",
@@ -99,10 +86,6 @@
         "@typescript-eslint/parser": "^4.26.0",
         "axe-html-reporter": "^2.2.2",
         "babel-eslint": "^10.1.0",
-        "babel-loader": "^8.2.2",
-        "babel-plugin-lodash": "^3.3.4",
-        "babel-plugin-transform-class-properties": "^6.24.1",
-        "babel-plugin-typescript-to-proptypes": "^1.4.2",
         "cpx": "^1.5.0",
         "cross-env": "^7.0.3",
         "detect-port": "^1.3.0",
@@ -141,6 +124,7 @@
         "rimraf": "3.0.1",
         "semantic-release": "^17.4.3",
         "static-server": "^2.2.1",
+        "swc-loader": "^0.1.15",
         "typescript": "^4.3.2",
         "webpack": "4",
         "webpack-dev-server": "^3.11.2"

playroom.config.js

@@ -43,12 +43,7 @@ const config = {
                     ],
                     use: [
                         {
-                            loader: 'babel-loader',
-                            options: {
-                                babelrc: true,
-                                configFile: './.babelrc',
-                                plugins: ['babel-plugin-typescript-to-proptypes'],
-                            },
+                            loader: 'swc-loader',
                         },
                     ],
                 },

scripts/build.js

@@ -1,18 +1,43 @@
-const util = require('util');
-const exec = util.promisify(require('child_process').exec);
-
-const ignore = [
-    '"**/test-utils/**"',
-    '"**/__acceptance_tests__/**"',
-    '"**/__screenshot_tests__/**"',
-    '"**/__tests__/**"',
-    '"**/__stories__/**"',
-    '"**/__type_tests__/**"',
-]
-    .flatMap((patter) => ['--ignore', patter])
-    .join(' ');
+const childProcess = require('child_process');
+const rimraf = require('rimraf');
+const execSync = childProcess.execSync;
+const dtsToFlow = require('./dts-to-flow');
+const genSizeStats = require('./size-stats');
+
+const run = (command) => {
+    execSync(command, {stdio: 'inherit'});
+};
+
+const compile = () => {
+    run(`yarn swc src --out-dir dist-es --extensions .tsx`);
+
+    [
+        '__tests__',
+        '__acceptance_tests__',
+        '__screenshot_tests__',
+        '__type_tests__',
+        '__stories__',
+        'test-utils',
+    ].forEach((dirName) => {
+        rimraf.sync(`dist-es/${dirName}`);
+    });
+
+    run(`yarn swc dist-es --out-dir dist -C module.type=commonjs`);
+};
 
 (async () => {
-    await exec(`yarn babel src --extensions .tsx --out-dir dist-es ${ignore}`);
-    await exec(`yarn babel --plugins @babel/plugin-transform-modules-commonjs dist-es --out-dir dist`);
+    console.log('\nCompile:');
+    compile();
+
+    console.log('\nGenerate TS defs:');
+    run('yarn gen-ts-defs');
+
+    console.log('\nGenerate Flow defs:');
+    await dtsToFlow();
+
+    console.log('\nFlow check:');
+    run('yarn flow check');
+
+    console.log('\nGenerate size stats:');
+    await genSizeStats();
 })();