chore: convert dev scripts to ESM modules (#720)

[ci skip]

.eslint-imports.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  extends: ['plugin:import/errors', 'plugin:import/warnings', 'plugin:import/typescript'],
+  rules: {
+    '@typescript-eslint/no-unused-vars': 0,
+    '@typescript-eslint/ban-types': 0,
+    'import/order': [
+      'error',
+      {
+        'newlines-between': 'never',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true
+        }
+      }
+    ],
+    'import/no-duplicates': 2
+  }
+};

.storybook/main.js → .storybook/main.cjs

@@ -1,7 +1,8 @@
 const path = require('path');
-const PATHS = require('../config/paths');
+
+const root = path.resolve(__dirname, '..');
 require('dotenv').config({
-  path: path.join(PATHS.root, '.env')
+  path: path.join(root, '.env')
 });
 
 const BUILD_FOR_IE11 = process.env.UI5_WEBCOMPONENTS_FOR_REACT_BUILD_IE11 === 'true';
@@ -77,12 +78,12 @@ module.exports = {
     }
     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')
+      '@shared': path.join(root, 'shared'),
+      '@ui5/webcomponents-react/dist': path.join(root, 'packages', 'main', 'dist'),
+      '@ui5/webcomponents-react': path.join(root, 'packages', 'main', 'src'),
+      '@ui5/webcomponents-react-charts': path.join(root, 'packages', 'charts', 'src'),
+      '@ui5/webcomponents-react-base/types': path.join(root, 'packages', 'base', 'types'),
+      '@ui5/webcomponents-react-base': path.join(root, 'packages', 'base', 'src')
     };
 
     return config;

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'],

config/jestsetup.ts

@@ -1,5 +1,5 @@
-import contentLoaderSerializer from '@shared/tests/serializer/content-loader-serializer.js';
-import jssSerializer from '@shared/tests/serializer/jss-snapshot-serializer';
+import contentLoaderSerializer from '@shared/tests/serializer/content-loader-serializer.cjs';
+import jssSerializer from '@shared/tests/serializer/jss-snapshot-serializer.cjs';
 import '@testing-library/jest-dom';
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
@@ -27,11 +27,17 @@ expect.addSnapshotSerializer(
   createSerializer({
     map: (el) => {
       // @ts-ignore
-      el.node && el.node.attribs && el.node.attribs.theme && delete el.node.attribs.theme;
+      el.node &&
+        el.node.attribs &&
+        el.node.attribs.theme &&
+        delete el.node.attribs.theme;
       // @ts-ignore
-      el.node && el.node.attribs && el.node.attribs.classes && delete el.node.attribs.classes;
+      el.node &&
+        el.node.attribs &&
+        el.node.attribs.classes &&
+        delete el.node.attribs.classes;
       return el;
-    }
+    },
   })
 );
 expect.addSnapshotSerializer(jssSerializer);
@@ -48,8 +54,8 @@ export const setupMatchMedia = () => {
       removeListener: jest.fn(), // deprecated
       addEventListener: jest.fn(),
       removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn()
-    }))
+      dispatchEvent: jest.fn(),
+    })),
   });
 };
 

config/paths.js

@@ -1,4 +1,9 @@
-const path = require('path');
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 const root = path.resolve(__dirname, '..');
 const PATHS = {
@@ -10,7 +15,7 @@ const PATHS = {
   coverage: path.join(root, 'coverage'),
   nycOutput: path.join(root, '.nyc_output'),
   nodeModules: path.join(root, 'node_modules'),
-  packages: path.join(root, 'packages')
+  packages: path.join(root, 'packages'),
 };
 
-module.exports = PATHS;
+export default PATHS;

package.json

@@ -13,7 +13,7 @@
     "pretest": "rimraf coverage && lerna run build:i18n",
     "test": "jest --config=config/jest.config.js --coverage",
     "clean": "lerna run clean --stream && rimraf coverage",
-    "prettier:all": "prettier --write --config ./prettier.config.js \"packages/**/*.{ts,tsx,mdx}\"",
+    "prettier:all": "prettier --write --config ./prettier.config.cjs \"packages/**/*.{ts,tsx,mdx}\"",
     "lint": "eslint packages",
     "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
     "deploy:storybook": "lerna run build:i18n && storybook-to-ghpages --ci"
@@ -108,7 +108,8 @@
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,mdx}": [
-      "prettier -config ./prettier.config.js --write"
+      "prettier -config ./prettier.config.cjs --write"
     ]
-  }
+  },
+  "type": "module"
 }

packages/base/package.json

@@ -20,7 +20,7 @@
   ],
   "scripts": {
     "clean": "rimraf cjs Device hooks lib polyfill styling utils index.esm.js index.d.ts",
-    "build:rollup": "rollup -c rollup.config.js",
+    "build:rollup": "rollup -c rollup.config.mjs",
     "build:polyfills": "tsc ./src/polyfill/*.ts --outDir ./polyfill --skipLibCheck",
     "build": "npm-run-all -s build:rollup build:polyfills",
     "build:types": "tsc --declaration --emitDeclarationOnly --declarationDir . --removeComments false"

packages/base/rollup.config.mjs

@@ -0,0 +1,4 @@
+import rollupConfigFactory from '../../scripts/rollup/configFactory.js';
+
+const config = rollupConfigFactory('base');
+export default config;

packages/charts/package.json

@@ -16,7 +16,7 @@
   "sideEffects": false,
   "scripts": {
     "clean": "rimraf cjs components interfaces internal lib util index.esm.js index.d.ts config.d.ts hooks",
-    "build": "rollup -c rollup.config.js",
+    "build": "rollup -c rollup.config.mjs",
     "build:types": "tsc --declaration --emitDeclarationOnly --declarationDir . --removeComments false || exit 0"
   },
   "dependencies": {

packages/charts/rollup.config.mjs

@@ -0,0 +1,4 @@
+import rollupConfigFactory from '../../scripts/rollup/configFactory.js';
+
+const config = rollupConfigFactory('charts', ['@ui5/webcomponents', '@ui5/webcomponents-base']);
+export default config;

packages/main/package.json

@@ -23,7 +23,7 @@
   "scripts": {
     "clean": "rimraf cjs components enums interfaces internal lib webComponents index.esm.js index.d.ts dist",
     "build": "npm-run-all -s build:i18n build:rollup",
-    "build:rollup": "rollup -c rollup.config.js",
+    "build:rollup": "rollup -c rollup.config.mjs",
     "build:i18n": "npm-run-all -s build:i18n-bundles build:i18n-default build:i18n-imports build:assets",
     "build:i18n-bundles": "mkdirp dist/assets/i18n && node ../../node_modules/@ui5/webcomponents-tools/lib/i18n/toJSON.js src/i18n dist/assets/i18n",
     "build:i18n-default": "node ../../node_modules/@ui5/webcomponents-tools/lib/i18n/defaults.js src/i18n dist/assets/i18n && tsc dist/assets/i18n/i18n-defaults.js --allowJs --declaration --emitDeclarationOnly --declarationDir dist/assets/i18n",

packages/main/rollup.config.mjs

@@ -0,0 +1,3 @@
+import rollupConfigFactory from '../../scripts/rollup/configFactory.js';
+
+export default rollupConfigFactory('main', ['@ui5/webcomponents-base']);

packages/main/scripts/create-library-export.js

@@ -1,6 +1,6 @@
-const path = require('path');
-const fs = require('fs');
-const PATHS = require('../../../config/paths');
+import path from 'path';
+import fs from 'fs';
+import PATHS from '../../../config/paths.js';
 
 const LIB_BASE_PATH = path.resolve(PATHS.packages, 'main', 'src', 'lib');
 const INTERNAL_COMPONENTS = ['ScrollContext'];
@@ -33,4 +33,7 @@ fileContent += `
 };
 `;
 
-fs.writeFileSync(path.join(PATHS.packages, 'main', 'src', 'index.ts'), fileContent);
+fs.writeFileSync(
+  path.join(PATHS.packages, 'main', 'src', 'index.ts'),
+  fileContent
+);

scripts/generate-assets/index.js

@@ -1,6 +1,6 @@
-const fs = require('fs');
-const prettier = require('prettier');
-const prettierConfig = require('../../prettier.config');
+import fs from 'fs';
+import prettier from 'prettier';
+import prettierConfig from '../../prettier.config.cjs';
 // All languages present in the file system
 const files = fs.readdirSync('dist/json-imports');
 

scripts/rollup/configFactory.js

@@ -1,16 +1,17 @@
-const { nodeResolve } = require('@rollup/plugin-node-resolve');
-const commonjs = require('@rollup/plugin-commonjs');
-const { babel } = require('@rollup/plugin-babel');
-const path = require('path');
-const fs = require('fs');
-const json = require('@rollup/plugin-json');
-const micromatch = require('micromatch');
-const PATHS = require('../../config/paths');
-const { asyncCopyTo, highlightLog } = require('../utils');
-const replace = require('@rollup/plugin-replace');
-const glob = require('glob');
-const { terser } = require('rollup-plugin-terser');
-const { spawnSync } = require('child_process');
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import Babel from '@rollup/plugin-babel';
+import path from 'path';
+import fs from 'fs';
+import json from '@rollup/plugin-json';
+import micromatch from 'micromatch';
+import PATHS from '../../config/paths.js';
+import { asyncCopyTo, highlightLog } from '../utils.js';
+import replace from '@rollup/plugin-replace';
+import glob from 'glob';
+import { terser } from 'rollup-plugin-terser';
+
+const { babel } = Babel;
 
 process.env.BABEL_ENV = 'production';
 process.env.NODE_ENV = 'production';
@@ -21,30 +22,33 @@ const rollupConfigFactory = (pkgName, externals = []) => {
 
   const allFilesAndFolders = glob.sync(`${LIB_BASE_PATH}/**/*`);
 
-  const allLibFiles = allFilesAndFolders.filter((file) => fs.statSync(file).isFile());
-
+  const allLibFiles = allFilesAndFolders.filter((file) =>
+    fs.statSync(file).isFile()
+  );
   const plugins = [
     nodeResolve({
-      extensions: ['.mjs', '.js', '.json', '.node', '.jsx', '.ts', '.tsx']
+      extensions: ['.mjs', '.js', '.json', '.node', '.jsx', '.ts', '.tsx'],
     }),
     commonjs(),
     json(),
     babel({
       extensions: ['.js', '.jsx', '.ts', '.tsx'],
       babelHelpers: 'runtime',
-      configFile: path.resolve(PATHS.root, 'babel.config.js')
+      configFile: path.resolve(PATHS.root, 'babel.config.cjs'),
     }),
     // Turn __DEV__ and process.env checks into constants.
     replace({
       exclude: 'node_modules/**',
       values: {
         __DEV__: 'false',
-        'process.env.NODE_ENV': "'production'"
-      }
-    })
+        'process.env.NODE_ENV': "'production'",
+      },
+    }),
   ];
 
-  const packageJson = require(path.resolve(PKG_BASE_PATH, 'package.json'));
+  const packageJson = JSON.parse(
+    fs.readFileSync(path.resolve(PKG_BASE_PATH, 'package.json'), 'utf8')
+  );
   const externalModules = Array.from(
     new Set([
       'react',
@@ -53,25 +57,33 @@ const rollupConfigFactory = (pkgName, externals = []) => {
       packageJson.name,
       ...Object.keys(packageJson.dependencies || {}),
       ...Object.keys(packageJson.peerDependencies || {}),
-      ...externals
+      ...externals,
     ])
   );
 
   highlightLog(`Build lib folder for ${pkgName}`);
 
   console.info('Copy License');
-  fs.copyFileSync(path.resolve(PATHS.root, 'LICENSE'), path.resolve(PKG_BASE_PATH, `LICENSE`));
+  fs.copyFileSync(
+    path.resolve(PATHS.root, 'LICENSE'),
+    path.resolve(PKG_BASE_PATH, `LICENSE`)
+  );
 
   console.info('Copy index file');
-  asyncCopyTo(path.resolve(PKG_BASE_PATH, 'src', 'index.ts'), path.resolve(PKG_BASE_PATH, `index.esm.js`));
+  asyncCopyTo(
+    path.resolve(PKG_BASE_PATH, 'src', 'index.ts'),
+    path.resolve(PKG_BASE_PATH, `index.esm.js`)
+  );
 
   const external = (id) => {
     const containsThisModule = (pkg) => id === pkg || id.startsWith(pkg + '/');
     return externalModules.some(containsThisModule);
   };
   const treeshake = {
     moduleSideEffects:
-      packageJson.sideEffects === false ? false : (id) => micromatch.isMatch(id, packageJson.sideEffects)
+      packageJson.sideEffects === false
+        ? false
+        : (id) => micromatch.isMatch(id, packageJson.sideEffects),
   };
   return [
     ...allLibFiles.map((file) => ({
@@ -83,13 +95,15 @@ const rollupConfigFactory = (pkgName, externals = []) => {
           file: path.resolve(
             PKG_BASE_PATH,
             'lib',
-            file.replace(`${LIB_BASE_PATH}${path.sep}`, '').replace(/\.ts$/, '.js')
+            file
+              .replace(`${LIB_BASE_PATH}${path.sep}`, '')
+              .replace(/\.ts$/, '.js')
           ),
           format: 'es',
-          sourcemap: true
-        }
+          sourcemap: true,
+        },
       ],
-      plugins
+      plugins,
     })),
     {
       input: path.resolve(PKG_BASE_PATH, 'src', 'index.ts'),
@@ -99,16 +113,20 @@ const rollupConfigFactory = (pkgName, externals = []) => {
       output: [
         {
           file: path.resolve(PKG_BASE_PATH, 'cjs', `${pkgName}.development.js`),
-          format: 'cjs'
+          format: 'cjs',
         },
         {
-          file: path.resolve(PKG_BASE_PATH, 'cjs', `${pkgName}.production.min.js`),
+          file: path.resolve(
+            PKG_BASE_PATH,
+            'cjs',
+            `${pkgName}.production.min.js`
+          ),
           format: 'cjs',
-          plugins: [terser()]
-        }
-      ]
-    }
+          plugins: [terser()],
+        },
+      ],
+    },
   ];
 };
 
-module.exports = rollupConfigFactory;
+export default rollupConfigFactory;