Merge pull request #90 from cloudblue/feature/LITE-29730-migrate-to-esm-and-from-webpack-to-vite

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

Author: arnaugiralt

.eslintrc.js renamed to .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/babel.config.js

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

components/jest.config.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({