Feature/lite 29730 migrate to esm and from webpack to vite

.eslintrc.js → .eslintrc.cjs

@@ -17,6 +17,7 @@ module.exports = {
     'plugin:storybook/recommended',
     'prettier',
     '@vue/eslint-config-prettier/skip-formatting',
+    'plugin:vitest-globals/recommended',
   ],
 
   plugins: ['vue'],
@@ -34,21 +35,15 @@ module.exports = {
     'vue/attribute-hyphenation': ['error', 'never'],
   },
 
-  overrides: [
-    // Config for unit tests
-    {
-      files: ['*.spec.js'],
-      plugins: ['jest'],
-      extends: ['plugin:jest/recommended', 'plugin:jest-formatting/strict'],
-      env: {
-        jest: true,
-        'jest/globals': true,
-      },
-      globals: {
-        global: 'writable',
-      },
-    },
+  env: {
+    'vitest-globals/env': true,
+  },
 
+  parserOptions: {
+    ecmaVersion: 'latest',
+  },
+
+  overrides: [
     // Config for files that run in node env (config files, etc)
     {
       files: ['*.config.js', '.eslintrc.js'],

.gitignore

@@ -13,6 +13,8 @@ dist-ssr
 coverage
 *.local
 
+/test/report.json
+
 /cypress/videos/
 /cypress/screenshots/
 

.storybook/main.js

@@ -1,6 +1,4 @@
-const path = require('node:path');
-
-module.exports = {
+export default {
   stories: [
     '../components/src/**/*.stories.@(js|jsx|ts|tsx|vue)',
     '../components/src/stories/**/*.mdx',
@@ -12,56 +10,22 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    '@storybook/addon-designs',
-    'storybook-vue-addon',
-    'storybook-addon-vue-mdx',
+    { name: '@storybook/addon-designs', options: { renderTarget: 'tab' } },
   ],
 
   framework: {
-    name: '@storybook/vue3-webpack5',
-    options: {},
+    name: '@storybook/vue3-vite',
+    options: {
+      builder: {
+        viteConfigPath: './components/vite.config.js',
+      },
+    },
   },
 
   features: {
     interactionsDebugger: true,
   },
 
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.svg/,
-      type: 'asset/source',
-      loader: 'svgo-loader',
-      options: {
-        configFile: require.resolve('../components/svgo.config.js'),
-      },
-    });
-
-    // Find Vue webpack rule and update its options to work with custom elements
-    const vueRule = config.module.rules.find((rule) => rule.test?.toString() === '/\\.vue$/');
-    vueRule.options = {
-      ...vueRule.options,
-      customElement: true,
-      compilerOptions: {
-        isCustomElement: (tag) => tag.startsWith('ui-'),
-      },
-    };
-
-    config.module.rules.push({
-      test: /\.styl(us)$/,
-      use: ['vue-style-loader', 'css-loader', 'stylus-loader'],
-    });
-
-    config.resolve.alias = {
-      vue: path.resolve(__dirname, '../node_modules/vue/dist/vue.esm-bundler.js'),
-      '~core': path.resolve(__dirname, '../components/src/core'),
-      '~widgets': path.resolve(__dirname, '../components/src/widgets'),
-      '~constants': path.resolve(__dirname, '../components/src/constants'),
-      '~composables': path.resolve(__dirname, '../components/src/composables'),
-    };
-
-    return config;
-  },
-
   docs: {
     autodocs: true,
   },

.storybook/manager.js

@@ -1,5 +1,4 @@
-import { addons } from '@storybook/addons';
-import { themes } from '@storybook/theming';
+import { addons } from '@storybook/manager-api';
 import cloudBlueTheme from './CloudBlueTheme';
 
 addons.setConfig({

.storybook/preview.js

@@ -1,7 +1,7 @@
 import './global-styles.css';
+import './stories.css';
 
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,

.storybook/stories.css

@@ -0,0 +1,17 @@
+.sb-all-icons {
+  margin-top: 24px;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.sb-icon-wrapper {
+  width: calc(33% - 10px);
+  margin-bottom: 20px;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+}
+.sb-icon {
+  margin-right: 4px;
+}

components/src/composables/validation.spec.js

@@ -11,7 +11,7 @@ describe('validation composables', () => {
 
     beforeEach(() => {
       model = ref('');
-      rule = jest.fn().mockReturnValue(true);
+      rule = vi.fn().mockReturnValue(true);
       rules = [rule];
     });
 

components/src/core/injector/core/Core.spec.js

@@ -24,7 +24,7 @@ describe('Core', () => {
       [{ test: 123 }, null],
       [null, { test: 123 }],
     ])('should do nothing while $state is %j and data is %j', (state, data) => {
-      global.Object.keys = jest.fn(Object.keys);
+      global.Object.keys = vi.fn(Object.keys);
       core.state = state;
       core.assign(data);
 
@@ -53,7 +53,7 @@ describe('Core', () => {
       };
 
       core.watchers = {
-        test: [jest.fn()],
+        test: [vi.fn()],
       };
 
       core.assign({
@@ -71,7 +71,7 @@ describe('Core', () => {
       };
 
       core.watchers = {
-        '*': [jest.fn()],
+        '*': [vi.fn()],
       };
 
       core.assign({

components/src/core/injector/core/injectorFactory.spec.js

@@ -1,16 +1,16 @@
 import injectorFactory from './injectorFactory';
 import { processRoute } from '~core/router';
 
-jest.mock('~core/router', () => ({
-  processRoute: jest.fn().mockReturnValue('processRouteMockedReturnValue'),
+vi.mock('~core/router', () => ({
+  processRoute: vi.fn().mockReturnValue('processRouteMockedReturnValue'),
 }));
 
 describe('injectorFactory', () => {
   describe('#watch()', () => {
     it('should add callback as new watcher for passed property', () => {
       const core = { watchers: {}, state: { foo: 'bar' } };
       const injector = injectorFactory(core);
-      const cb = jest.fn();
+      const cb = vi.fn();
 
       injector.watch('foo', cb);
       core.watchers.foo[0]();
@@ -21,7 +21,7 @@ describe('injectorFactory', () => {
     it('should add immediate callback call', () => {
       const core = { watchers: {}, state: { foo: 'bar' } };
       const injector = injectorFactory(core);
-      const cb = jest.fn();
+      const cb = vi.fn();
 
       injector.watch('foo', cb, { immediate: true });
 
@@ -31,7 +31,7 @@ describe('injectorFactory', () => {
     it('should add immediate callback call with "*" key', () => {
       const core = { watchers: {}, state: { foo: 'bar' } };
       const injector = injectorFactory(core);
-      const cb = jest.fn();
+      const cb = vi.fn();
 
       injector.watch('*', cb, { immediate: true });
 
@@ -45,7 +45,7 @@ describe('injectorFactory', () => {
       };
 
       const injector = injectorFactory(core);
-      const cb = jest.fn();
+      const cb = vi.fn();
 
       injector.watch('foo', cb);
       core.watchers.foo[1]();
@@ -60,7 +60,7 @@ describe('injectorFactory', () => {
       };
 
       const injector = injectorFactory(core);
-      const cb = jest.fn();
+      const cb = vi.fn();
 
       injector.watch(cb);
       core.watchers['*'][0]();
@@ -74,10 +74,10 @@ describe('injectorFactory', () => {
     let commit;
 
     beforeEach(() => {
-      global.window.top.postMessage = jest.fn();
+      global.window.top.postMessage = vi.fn();
 
       core = {
-        assign: jest.fn(),
+        assign: vi.fn(),
         id: 'XXX',
         state: {
           foo: 'bar',
@@ -124,7 +124,7 @@ describe('injectorFactory', () => {
 
   describe('#emit()', () => {
     beforeEach(() => {
-      global.window.top.postMessage = jest.fn();
+      global.window.top.postMessage = vi.fn();
     });
 
     it('should emit proper event', () => {
@@ -173,7 +173,7 @@ describe('injectorFactory', () => {
   describe('#listen()', () => {
     it('should put provided callback to proper listeners', () => {
       const core = { listeners: {} };
-      const cb = jest.fn();
+      const cb = vi.fn();
       injectorFactory(core).listen('foo', cb);
       core.listeners.foo();
 
@@ -187,7 +187,7 @@ describe('injectorFactory', () => {
 
     beforeEach(() => {
       injector = injectorFactory({});
-      injectorEmitSpy = jest.spyOn(injector, 'emit');
+      injectorEmitSpy = vi.spyOn(injector, 'emit');
     });
 
     it('calls processRoute with the given arguments', () => {

components/src/core/injector/core/launcher.spec.js

@@ -1,7 +1,7 @@
 import launch from './launcher';
 
-const resizeObserverCtorSpy = jest.fn();
-const resizeObserverObserveSpy = jest.fn();
+const resizeObserverCtorSpy = vi.fn();
+const resizeObserverObserveSpy = vi.fn();
 const resizeObserverEntriesStub = [
   {
     contentRect: {
@@ -30,20 +30,18 @@ describe('$init', () => {
   let init;
 
   beforeEach(() => {
-    global.window.addEventListener = jest.fn();
+    global.window.addEventListener = vi.fn();
     global.window.name = 'XXX';
-    global.crypto = {
-      getRandomValues: jest.fn(() => ['abc']),
-    };
+    global.crypto.getRandomValues = vi.fn(() => ['abc']);
 
     injector = {
-      listen: jest.fn(),
-      emit: jest.fn(),
+      listen: vi.fn(),
+      emit: vi.fn(),
     };
 
     core = {
-      size: jest.fn(() => 'SIZE'),
-      assign: jest.fn(),
+      size: vi.fn(() => 'SIZE'),
+      assign: vi.fn(),
     };
 
     init = () => launch(injector, core);
@@ -163,7 +161,7 @@ describe('$init', () => {
         },
       };
 
-      core.listeners = { test: jest.fn() };
+      core.listeners = { test: vi.fn() };
       handler({ data });
 
       expect(core.listeners.test).toHaveBeenCalledWith('TEST', data);