Update and configure babel to be able to use latest js syntax in code and deps

- Configure @vue/cli-plugin-babel in vue.config.js to transpile dependencies with js
  syntax too modern for our webpack version via transpileDependencies. This makes
  @vue/cli-plugin-babel process the listed dependencies with the babel-loader webpack
  loader. This now allows to use modern language features like optional chaining.
- Similarly, process code and dependencies via manually set-up babel-loader in
  storybook's webpack.config.js, that processes ts and js files, similar to the
  babel-loader set-up by @vue/cli-plugin-babel and @vue/cli-plugin-typescrit, which
  can be checked via "env build=mainnet yarn vue-cli-service inspect --mode production"
- Dependencies that should be processed, must be listed in transpileDependencies in
  vue.config.js and storybook's webpack.config.js.
- To support the latest js syntax, we update @babel/preset-env to the latest version
  by updating @vue/cli-plugin-babel to the latest available 4.x version compatible
  with webpack 4.
- Also update core-js for the latest polyfills to be available to babel.
- Finally, also update @vue/cli-plugin-typescript and @vue/cli-service to be in line
  with @vue/cli-plugin-babel.

Author: danimoh

.storybook/webpack.config.js

@@ -1,10 +1,34 @@
+const path = require('path');
+
 // Fix build for Node version with OpenSSL 3
 const crypto = require('crypto');
 const origCreateHash = crypto.createHash;
 crypto.createHash = (alg, opts) => {
     return origCreateHash(alg === 'md4' ? 'md5' : alg, opts);
 };
 
+// Process source files and specified dependencies by babel to be able to use more modern js syntax than supported by
+// our Webpack version. Should be kept in sync with transpileDependencies in vue.config.js
+const transpileDependencies = [];
+const babel = {
+    loader: require.resolve('babel-loader'),
+    // By default, options from babel.config.js are used. If you're encountering issues with some syntax not being
+    // transpiled sufficiently, experiment with different @vue/babel-preset-app or @babel/preset-env options. As this is
+    // only for a demo page, the resulting file size by code being transpiled too aggressively or too many polyfills
+    // being included, doesn't really matter.
+    // options: {
+    //     presets: [
+    //         ['@babel/preset-env', {
+    //             targets: { node: 14 },
+    //             // useBuiltIns: 'usage',
+    //             // corejs: '3.37',
+    //             // include: ["@babel/plugin-transform-logical-assignment-operators"],
+    //             debug: true,
+    //         }]
+    //     ],
+    // },
+};
+
 module.exports = (storybookBaseConfig, env, config) => {
     // Save and remove default SVG rule to add a custom one below
     const svgRule = config.module.rules.find(rule => rule.test.toString().includes('svg'));
@@ -17,11 +41,13 @@ module.exports = (storybookBaseConfig, env, config) => {
             ...config.module,
             rules: [...config.module.rules, {
                 test: /\.tsx?$/,
-                loader: require.resolve('ts-loader'),
-                options: {
-                    appendTsSuffixTo: [/\.vue$/],
-                    transpileOnly: true
-                }
+                use: [babel, {
+                    loader: require.resolve('ts-loader'),
+                    options: {
+                        appendTsSuffixTo: [/\.vue$/],
+                        transpileOnly: true
+                    }
+                }]
             }, {
                 test: svgRule.test,
                 oneOf: [{
@@ -34,6 +60,13 @@ module.exports = (storybookBaseConfig, env, config) => {
                     loader: svgRule.loader,
                     options: svgRule.options
                 }],
+            }, {
+                test: /\.(?:js|mjs|cjs)$/,
+                include: [
+                    'src', // Process js files in src, basically index.stories.js
+                    ...transpileDependencies.map((dependency) => path.join('node_modules', dependency)),
+                ].map((dependency) => path.join(__dirname, '..', dependency)),
+                ...babel,
             }]
         },
         resolve: {

package.json

@@ -37,11 +37,11 @@
     "@storybook/addon-links": "^4.0.0-alpha.14",
     "@storybook/addon-viewport": "^4.0.0-alpha.14",
     "@storybook/vue": "^4.0.0-alpha.14",
-    "@vue/cli-plugin-babel": "~4.2.2",
-    "@vue/cli-plugin-typescript": "~4.2.2",
-    "@vue/cli-service": "~4.2.2",
+    "@vue/cli-plugin-babel": "~4.5.19",
+    "@vue/cli-plugin-typescript": "~4.5.19",
+    "@vue/cli-service": "~4.5.19",
     "@vue/compiler-dom": "^3.2.45",
-    "core-js": "^3.6.4",
+    "core-js": "^3.37.1",
     "file-loader": "^3.0.1",
     "moment": "^2.29.4",
     "rimraf": "^3.0.2",

vue.config.js

@@ -94,4 +94,12 @@ const chainWebpack = config => {
         .end();
 }
 
-module.exports = { configureWebpack, chainWebpack };
+module.exports = {
+  configureWebpack,
+  chainWebpack,
+  // Add dependencies here which should be transpiled by babel-loader via @vue/cli-plugin-babel. This is needed as our
+  // Webpack version is too old to process some modern js syntax in the listed dependencies. Should be kept in sync with
+  // transpileDependencies in storybook's webpack.config.js.
+  // When changing to Webpack 5, some or all can probably be removed.
+  transpileDependencies: [],
+};