Feature/203 vite

.eslintignore

@@ -1,7 +1,8 @@
 /dist/
-/*.js
-/*.ts
-/test/unit/coverage/
+#/*.js
+#/*.ts
+#/test/unit/coverage/
 /node_modules/
-/blueprints
-/src/setup/lib
+#/blueprints
+#/src/setup/lib
+!.storybook

.eslintrc.js

@@ -2,48 +2,90 @@
 module.exports = {
   root: true,
   parserOptions: {
-    requireConfigFile: false, // Fixes an exception on sub folder eslintrc.js files
-    parser: '@typescript-eslint/parser', // Don't use on upper scope as documented by ESLint. The Vue plugin already defines itself as parser.
+    requireConfigFile: false,
+    // Fixes an exception on sub folder eslintrc.js files
+    parser: '@typescript-eslint/parser',
+    // Don't use on upper scope as documented by ESLint. The Vue plugin already defines itself as parser.
     sourceType: 'module',
   },
   env: {
     browser: true,
   },
   extends: [
     'valantic/vue3',
-    '@vue/typescript'
+    '@vue/typescript',
+    'plugin:storybook/recommended',
   ],
   // Uses eslint-import-resolver-webpack
   settings: {
-    'import/resolver': 'webpack',
+    'import/resolver': {
+      vite: {
+        configPath: './vite.config.ts',
+      },
+    },
   },
   globals: {
-    'google': 'readonly' // Fixes `no-undef` for `google` namespace. (types are loaded by `@types/google.maps`)
+    google: 'readonly', // Fixes `no-undef` for `google` namespace. (types are loaded by `@types/google.maps`)
   },
   // add your custom rules here
   rules: {
     'vue/no-unsupported-features': ['error', {
-      version: ">= 3.2",
+      version: '>= 3.2',
     }],
-
     // Fix and enable again
     'import/extensions': 'off',
     'vue/require-emit-validator': 'off',
-
     // TODO: move to eslint-config-valantic
-    "@typescript-eslint/no-empty-interface": [
-      "error",
-      {
-        "allowSingleExtends": true,
-      },
-    ],
+    'space-before-function-paren': ['error', {
+      anonymous: 'never',
+      named: 'never',
+      asyncArrow: 'always',
+    }],
+    'max-lines': ['error', {
+      max: 1000,
+      skipBlankLines: true,
+      skipComments: true,
+    }],
+    '@typescript-eslint/no-empty-interface': ['error', {
+      allowSingleExtends: true,
+    }],
+    'no-undefined': 'off', // Conflicts with 'undefined' fallback of TypeScript definitions.
+    '@typescript-eslint/explicit-function-return-type': ['error', {
+      allowTypedFunctionExpressions: true,
+    }],
   },
-  overrides: [
-    {
-      'files': ['tests/**/*.*'],
-      'rules': {
-        'vue/require-name-property': 'off'
-      }
-    }
-  ]
+  overrides: [{
+    files: ['tests/**/*.*'],
+    env: {
+      jest: true,
+    },
+    rules: {
+      'vue/require-name-property': 'off',
+    },
+  }, {
+    files: ['blueprints/**/*.*'],
+    env: {
+      jest: true, // Is required because of unit test blueprint.
+
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'off',
+      // Allow unused variables in blueprints.
+      '@typescript-eslint/no-empty-interface': 'off', // Allow empty interfaces in blueprints.
+      '@typescript-eslint/explicit-function-return-type': 'off',
+
+    },
+  }, {
+    files: ['src/styleguide/**/*.*'],
+    rules: {
+      'vue/no-bare-strings-in-template': 'off',
+      'vue/multi-word-component-names': 'off',
+      'vue/match-component-file-name': 'off',
+    },
+  }, {
+    files: ['src/stories/**/*.*'],
+    rules: {
+      '@typescript-eslint/explicit-function-return-type': 'off',
+    },
+  }],
 };

.gitignore

@@ -4,7 +4,6 @@
 .LSOverride
 .eslintcache
 .stylelintcache
-report.*.json
 
 # IntelliJ project files
 .idea
@@ -25,5 +24,6 @@ npm-debug.log
 .nvmrc
 
 # Project
-/storybook-static/
 .env
+/stats/
+report.*.json

.husky/pre-push

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run jest
+npm run test

.lintstagedrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  '*.{js,ts,vue}': [
+    () => 'vue-tsc --noEmit',
+    'eslint --config .eslintrc.fix.js --fix',
+  ],
+  '*.{css,vue,scss}': [
+    'stylelint --config .stylelintrc.fix.js --fix',
+  ],
+};

.storybook/main.ts

@@ -0,0 +1,36 @@
+/* eslint-disable import/no-import-module-exports */
+import { UserConfig, mergeConfig, UserConfigExport } from 'vite';
+import { alias } from '../vite.config';
+
+module.exports = {
+  stories: [ // @see https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+    '../src/stories/**/*.stories.mdx', // Currently not supported because of a bug in the vite builder. @see https://github.com/storybookjs/builder-vite/pull/556
+    {
+      directory: '../src/stories/elements/',
+      titlePrefix: 'Elements/',
+      files: '*.stories.js',
+    },
+    {
+      directory: '../src/stories/components/',
+      titlePrefix: 'Components/',
+      files: '*.stories.@(js|jsx|ts|tsx)',
+    },
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-scss',
+  ],
+  framework: '@storybook/vue3',
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  staticDirs: ['../static'],
+  async viteFinal(config: UserConfig): Promise<UserConfigExport> {
+    return mergeConfig(config, {
+      resolve: {
+        alias,
+      },
+    });
+  },
+};

.storybook/preview.js → .storybook/preview.ts

@@ -1,20 +1,18 @@
+/* eslint-disable import/prefer-default-export */
 import '../src/setup/scss/themes/theme-01.scss';
-import '@/setup/styles.scss'
+import '../src/setup/styles.scss';
 import { app } from '@storybook/vue3';
 import vuePlugins from '../src/setup/plugins';
 
 // @see https://storybook.js.org/docs/vue/writing-stories/decorators#context-for-mocking
-vuePlugins.forEach(([plugin, pluginOptions]) => {
-  app.use(plugin, pluginOptions);
-});
-
+vuePlugins.forEach(({ plugin, options }) => app.use(plugin, options));
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};

.svg-sprite.json

@@ -2,14 +2,15 @@
   "dest": "src/assets/",
   "shape": {
     "spacing": {
-      "box": "icon"
+      "box": "content"
     }
   },
   "mode": {
     "stack": {
       "sprite": "icons.svg",
       "bust": false,
-      "dest": "."
+      "dest": ".",
+      "rootviewbox": false
     }
   }
 }

README.md

@@ -867,10 +867,23 @@ package.json:
 }
 ```
 
+## Vite integration todos
+* [ ] Check again, why we need to use `.value` on some vue-i18n properties (e.g. i18n.global.locale.value). Source: https://vue-i18n.intlify.dev/guide/advanced/lazy.html#lazy-loading
+* [ ] Check if module polyfill is required: https://vitejs.dev/config/build-options.html#build-modulepreload
+* [ ] CSS Prefixing
+* [ ] Apply new ESLint rules to valantic config.
+* [ ] Should there be basic styles for form elements (if no class applied)?
+* [ ] cmd + click in PhpStorm leads to Interface instead of implementation.
+* [ ] Update README
+* [ ] Check "Vite Inspect"
+* [ ] Refactor storybook stories to TS.
+* [ ] @typescript-eslint still required?
+* [ ] Update package.md
+
 ## Roadmap
 * [ ] Implement dual build (ES5/ES2015+)
 * [ ] Add 'dangerous' flag for components that use v-html in Storybook.
-* [ ] Add 'development' flag for components in Storybook.
+* [ ] Add 'development' flag for components in Storybook.
 * [ ] Add custom elements option to the "initial data" section.
 
 ## License

babel.config.js

@@ -2,15 +2,8 @@ module.exports = {
   presets: [
     ['@babel/preset-env', {
       useBuiltIns: 'entry',
-      corejs: 3.8
+      corejs: 3.8,
     }],
+    '@babel/preset-typescript',
   ],
-  plugins: [
-    '@babel/plugin-syntax-dynamic-import',
-  ],
-  env: {
-    test: {
-      plugins: ['transform-require-context']
-    }
-  }
 };

blueprints/c-component.test.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect } from 'vitest';
 import { mount } from '@vue/test-utils';
 import component from '@/components/c-component'; // TODO: Update source
 
@@ -7,13 +8,10 @@ describe('component | c-component', () => { // TODO: update title
   });
 
   it('renders (has bem block name on wrapper element)', () => {
-
     const wrapper = mount(component, {
       global: {
-        // remove if not needed
-        plugins: [],
-        // remove if not needed
-        props: {}
+        plugins: [], // remove if not needed
+        props: {}, // remove if not needed
       },
     });
 

blueprints/pinia-store.ts

@@ -17,9 +17,9 @@ interface IMyStoreActions { // TODO: update <MyStore>.
   // Add types for the store actions.
 }
 
-export interface IMyStore {} // TODO: update <MyStore>.
+export type TMyStoreStore = Store<string, IMyStoreState, IMyStoreGetters, IMyStoreActions>;
 
-const storeName: string = 'MyStore'; // TODO: update <MyStore>.
+const storeName = 'MyStore'; // TODO: update <MyStore>.
 
 export default defineStore<typeof storeName, IMyStoreState, IMyStoreGetters, IMyStoreActions>(storeName, {
   state: (): IMyStoreState => ({}),

blueprints/plugin.test.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect } from 'vitest';
 import plugin from '@/plugins/plugin'; // TODO: update source
 
 describe('plugin | plugin', () => { // TODO: update title

index.html

@@ -4,7 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <title>Vue template</title>
+
   <script>
+    // Initial data demo
     window.initialData = {
       session: {},
       breadcrumb: {},
@@ -33,6 +35,8 @@
     ];
      */
   </script>
+
+  <script type="module" src="/src/main.ts" defer></script>
 </head>
 <body>
   <div id="app">