First commit for the ES Module changes

KolCrooks · Oct 5, 2020 · b2567f3 · b2567f3
1 parent 7b03340
commit b2567f3
Show file tree

Hide file tree

Showing 19 changed files with 31,450 additions and 170 deletions.
diff --git a/.eslint-imports.js → .eslint-imports.cjs b/.eslint-imports.js → .eslint-imports.cjs
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,6 +1,8 @@
-const path = require('path');
-const PATHS = require('../config/paths');
-require('dotenv').config({
+import path from 'path';
+import PATHS from '../config/paths';
+
+import { config } from 'dotenv';
+config({
   path: path.join(PATHS.root, '.env')
 });
 
@@ -10,81 +12,80 @@ const DEPENDENCY_REGEX = BUILD_FOR_IE11
   ? /node_modules/
   : /node_modules\/(@ui5\/webcomponents(-(base|core|fiori|icons|theme-base))?|lit-html)\//;
 
-module.exports = {
-  stories: ['../docs/**/*.stories.mdx', '../packages/**/*.stories.@(tsx|jsx|mdx)'],
-  addons: [
-    '@storybook/addon-toolbars',
-    '@storybook/addon-docs',
-    '@storybook/addon-controls',
-    '@storybook/addon-actions'
-  ],
-  webpack: async (config, { configType }) => {
-    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-    // You can change the configuration based on that.
-    // 'PRODUCTION' is used when building the static version of storybook.
+export const stories = ['../docs/**/*.stories.mdx', '../packages/**/*.stories.@(tsx|jsx|mdx)'];
 
-    config.module.rules.push({
-      test: /assets\/.*\.json$/,
-      use: 'file-loader',
-      type: 'javascript/auto'
-    });
+export const addons = [
+  '@storybook/addon-toolbars',
+  '@storybook/addon-docs',
+  '@storybook/addon-controls',
+  '@storybook/addon-actions'
+];
+export async function webpack(config, { configType }) {
+  // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+  // You can change the configuration based on that.
+  // 'PRODUCTION' is used when building the static version of storybook.
 
-    if (configType === 'PRODUCTION' || BUILD_FOR_IE11) {
-      config.module.rules.push({
-        test: /\.(js|mjs)$/,
-        include: DEPENDENCY_REGEX,
-        loader: 'babel-loader',
-        options: {
-          sourceType: 'unambiguous',
-          babelrc: false,
-          configFile: false,
-          compact: false,
-          presets: [
-            [
-              '@babel/preset-env',
-              {
-                // Allow importing core-js in entrypoint and use browserlist to select polyfills
-                useBuiltIns: 'entry',
-                // Set the corejs version we are using to avoid warnings in console
-                // This will need to change once we upgrade to corejs@3
-                corejs: 3,
-                // Do not transform modules to CJS
-                modules: false,
-                // Exclude transforms that make all code slower
-                exclude: ['transform-typeof-symbol']
-              }
-            ]
-          ],
-          plugins: [
-            [
-              '@babel/plugin-transform-runtime',
-              {
-                version: require('@babel/runtime/package.json').version,
-                useESModules: true
-              }
-            ]
-          ],
-          cacheDirectory: true,
-          cacheCompression: false,
+  config.module.rules.push({
+    test: /assets\/.*\.json$/,
+    use: 'file-loader',
+    type: 'javascript/auto'
+  });
 
-          // If an error happens in a package, it's possible to be
-          // because it was compiled. Thus, we don't want the browser
-          // debugger to show the original code. Instead, the code
-          // being evaluated would be much more helpful.
-          sourceMaps: false
-        }
-      });
-    }
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      '@shared': path.join(PATHS.root, 'shared'),
-      '@ui5/webcomponents-react/dist': path.join(PATHS.root, 'packages', 'main', 'dist'),
-      '@ui5/webcomponents-react': path.join(PATHS.root, 'packages', 'main', 'src'),
-      '@ui5/webcomponents-react-charts': path.join(PATHS.root, 'packages', 'charts', 'src'),
-      '@ui5/webcomponents-react-base/types': path.join(PATHS.root, 'packages', 'base', 'types'),
-      '@ui5/webcomponents-react-base': path.join(PATHS.root, 'packages', 'base', 'src')
-    };
+  if (configType === 'PRODUCTION' || BUILD_FOR_IE11) {
+    config.module.rules.push({
+      test: /\.(js|mjs)$/,
+      include: DEPENDENCY_REGEX,
+      loader: 'babel-loader',
+      options: {
+        sourceType: 'unambiguous',
+        babelrc: false,
+        configFile: false,
+        compact: false,
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              // Allow importing core-js in entrypoint and use browserlist to select polyfills
+              useBuiltIns: 'entry',
+              // Set the corejs version we are using to avoid warnings in console
+              // This will need to change once we upgrade to corejs@3
+              corejs: 3,
+              // Do not transform modules to CJS
+              modules: false,
+              // Exclude transforms that make all code slower
+              exclude: ['transform-typeof-symbol']
+            }
+          ]
+        ],
+        plugins: [
+          [
+            '@babel/plugin-transform-runtime',
+            {
+              version: require('@babel/runtime/package.json').version,
+              useESModules: true
+            }
+          ]
+        ],
+        cacheDirectory: true,
+        cacheCompression: false,
 
-    return config;
+        // If an error happens in a package, it's possible to be
+        // because it was compiled. Thus, we don't want the browser
+        // debugger to show the original code. Instead, the code
+        // being evaluated would be much more helpful.
+        sourceMaps: false
+      }
+    });
   }
-};
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    '@shared': path.join(PATHS.root, 'shared'),
+    '@ui5/webcomponents-react/dist': path.join(PATHS.root, 'packages', 'main', 'dist'),
+    '@ui5/webcomponents-react': path.join(PATHS.root, 'packages', 'main', 'src'),
+    '@ui5/webcomponents-react-charts': path.join(PATHS.root, 'packages', 'charts', 'src'),
+    '@ui5/webcomponents-react-base/types': path.join(PATHS.root, 'packages', 'base', 'types'),
+    '@ui5/webcomponents-react-base': path.join(PATHS.root, 'packages', 'base', 'src')
+  };
+
+  return config;
+}
diff --git a/babel.config.js → babel.config.cjs b/babel.config.js → babel.config.cjs
diff --git a/config/jest.config.js b/config/jest.config.js
@@ -1,6 +1,6 @@
-const PATHS = require('./paths');
+import PATHS from './paths.js';
 
-module.exports = {
+export default {
   rootDir: PATHS.root,
   coverageDirectory: 'coverage',
   coverageReporters: ['lcov', 'text'],

diff --git a/config/paths.js b/config/paths.js
@@ -1,4 +1,4 @@
-const path = require('path');
+import path from 'path';
 
 const root = path.resolve(__dirname, '..');
 const PATHS = {
@@ -13,4 +13,4 @@ const PATHS = {
   packages: path.join(root, 'packages')
 };
 
-module.exports = PATHS;
+export default PATHS;