#203 applies additional changes for Vite migration

.gitignore

@@ -5,6 +5,7 @@
 .eslintcache
 .stylelintcache
 report.*.json
+/stats/
 
 # IntelliJ project files
 .idea

README.md

@@ -869,14 +869,17 @@ 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
+* [ ] `manifest.json` uses a different format than before. Compatible with Pimcore/Java?
 * [ ] Update storybook to use vite config.
 * [ ] Check if "style only components" from `src/setup/components.ts` works as expected.
 * [ ] Try to add README content to styleguide index page again.
 * [ ] Apply new ESLint rules to valantic config.
 * [ ] Remove webpack scripts from package.json.
-* [ ] Remove webpack config.
+* [ ] Remove webpack config & dependencies.
+* [ ] Try to remove `core-js/stable` import from main.ts.
 * [ ] Should there be basic styles for form elements (if no class applied)?
 * [ ] cmd + click in PhpStorm leads to Interface instead of implementation.
+* [ ] Update README
 
 ## Roadmap
 * [ ] Implement dual build (ES5/ES2015+)

package.json

@@ -17,14 +17,16 @@
     "test": "npm run lint && npm run jest; exit 0;",
     "build": "vite build",
     "build:w": "NODE_ENV=production webpack --mode production",
-    "build:profile": "NODE_ENV=production webpack --mode production --profile",
+    "build:profile": "npm run build -- --mode='profile'",
+    "build:profile:w": "NODE_ENV=production webpack --mode production --profile",
     "build:watch": "NODE_ENV=production webpack --mode production --watch",
     "build:icons": "svg-sprite --config .svg-sprite.json src/assets/icons/*.svg",
     "serve": "vite preview",
     "lint-staged": "lint-staged",
     "prepare": "husky install",
     "storybook": "start-storybook -p 6006",
-    "build:storybook": "build-storybook"
+    "build:storybook": "build-storybook",
+    "profile": "rollup-plugin-visualizer"
   },
   "webpack": {
     "buildPath": "dist",
@@ -134,6 +136,7 @@
     "postcss-html": "~1.5.0",
     "postcss-loader": "~7.0.1",
     "postcss-scss": "~4.0.5",
+    "rollup-plugin-visualizer": "~5.9.0",
     "sass": "~1.55.0",
     "sass-loader": "~13.1.0",
     "stylelint": "~14.14.0",

src/main.ts

@@ -9,20 +9,22 @@ import api from '@/stores/plugins/api';
 import options from '@/setup/options';
 import plugins from '@/setup/plugins';
 
-const styleguideOptions = import.meta.env.MODE !== 'production'
-  ? import.meta.glob('@/setup/styleguide.options.ts', { eager: true })['/src/setup/styleguide.options.ts']
-  : null;
+const vuePlugins = plugins;
+const pinia = createPinia();
+let vueOptions = options;
+
+if (import.meta.env.DEV) {
+  const styleguideOptions = await import('@/setup/styleguide.ts');
 
-const vueOptions = import.meta.env.MODE !== 'production'
-  ? { ...options, ...styleguideOptions.options }
-  : options;
+  vueOptions = {
+    ...vueOptions,
+    ...styleguideOptions.options,
+  };
 
-const vuePlugins = import.meta.env.MODE !== 'production'
-  ? [...plugins, ...styleguideOptions.plugins]
-  : plugins;
+  vuePlugins.push(...styleguideOptions.plugins);
+}
 
 const app = createApp(vueOptions);
-const pinia = createPinia();
 
 pinia.use(api);
 

src/plugins/google-tag-manager.ts

@@ -64,7 +64,7 @@ export interface IGtm {
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  interface Window { dataLayer: Record<string, any>[]; }
+  interface Window { dataLayer: Record<string, unknown>[]; }
 }
 
 /**
@@ -80,7 +80,7 @@ const plugin: Plugin = {
     /**
      * Push a new event to the dataLayer.
      */
-    function push(payload: object) {
+    function push(payload: Record<string, unknown>) {
       if (window.dataLayer && window.dataLayer.push) {
         window.dataLayer.push(payload);
 

src/setup/styleguide.ts

@@ -0,0 +1,2 @@
+export { default as options } from './styleguide/options';
+export { default as plugins } from './styleguide/plugins';

src/setup/styleguide/options.ts

@@ -0,0 +1,9 @@
+import app from '@/styleguide/components/app.vue';
+import '@/styleguide/api/browser';
+
+export default {
+  template: '<app />',
+  components: {
+    app,
+  },
+};

src/setup/styleguide/plugins.ts

@@ -0,0 +1,11 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import styleguideRoutes from './routes';
+
+const router = createRouter({
+  routes: styleguideRoutes,
+  history: createWebHistory(),
+});
+
+export default [
+  [router],
+];

src/shims-vue.d.ts

@@ -1,6 +1,7 @@
-/* eslint-disable */
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  import type { DefineComponent } from 'vue';
+
+  const component: DefineComponent<{}, {}, any>; // eslint-disable-line
+
+  export default component;
 }

src/stores/breadcrumb.ts

@@ -54,8 +54,11 @@ export default defineStore<typeof storeName, IBreadcrumbState, IBreadcrumbGetter
       items: [],
     };
 
-    if (import.meta.env.MODE !== 'production') {
-      state.items = require('../styleguide/mock-data/initial-data/breadcrumbs').default; // eslint-disable-line global-require, @typescript-eslint/no-var-requires
+    if (import.meta.env.DEV) {
+      const breadcrumbsModule = import.meta
+        .glob('@/styleguide/mock-data/initial-data/breadcrumbs', { eager: true });
+
+      state.items = breadcrumbsModule['@/styleguide/mock-data/initial-data/breadcrumbs'] as IBreadcrumbItem[];
     }
 
     if (Array.isArray(initialData.items)) {

src/styleguide/components/s-demo-settings.vue

@@ -2,7 +2,11 @@
   <ul :class="b()">
     <li :class="b('item')">
       <s-html-validation />
-      <e-checkbox v-model="loggedIn" variant="toggle">
+      <e-checkbox v-model="loggedIn"
+                  variant="toggle"
+                  name="logged-in"
+                  value
+      >
         Logged in
       </e-checkbox>
     </li>

src/styleguide/components/s-html-validation.vue

@@ -1,5 +1,9 @@
 <template>
-  <e-checkbox v-model="enabled" variant="toggle">
+  <e-checkbox v-model="enabled"
+              variant="toggle"
+              name="html-validation"
+              value
+  >
     HTML validation
   </e-checkbox>
 </template>

src/types/initial-data.ts → src/types/index.d.ts

@@ -1,3 +1,5 @@
+import 'vite/client'; // Was required to make TS aware of Vite's 'import.meta' property.
+
 export interface IInitialData {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;

vite.config.ts

@@ -1,18 +1,69 @@
-import { defineConfig } from 'vite';
+import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import vue from '@vitejs/plugin-vue'
 import path from 'path';
+import { webpack } from './package.json'; // TODO: rename config property in package.json.
+import { visualizer } from 'rollup-plugin-visualizer';
 
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src/'),
-    }
-  },
-  define: {
-    // Was required to get rid of esm build warning for Vue-i18n.
-    // @see https://vue-i18n.intlify.dev/guide/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags
-    __VUE_I18N_FULL_INSTALL__: true,
-    __VUE_I18N_LEGACY_API__: false,
-  },
+export default defineConfig(({ command, mode }) => {
+  const config = {
+    plugins: [
+      vue(),
+      splitVendorChunkPlugin(),
+    ],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src/'),
+      }
+    },
+    define: {
+      // Was required to get rid of esm build warning for Vue-i18n.
+      // @see https://vue-i18n.intlify.dev/guide/advanced/optimization.html#reduce-bundle-size-with-feature-build-flags
+      __VUE_I18N_FULL_INSTALL__: true,
+      __VUE_I18N_LEGACY_API__: false,
+    },
+  }
+
+  switch(command) {
+    case 'build': // @see https://vitejs.dev/config/build-options.html
+      config.base = webpack.productionPath; // TODO: rename to buildBase.
+      config.build = {
+        outDir: webpack.buildPath, // TODO: rename to 'buildOutDir'
+        assetsDir: webpack.outputAssetsFolder, // TODO: rename to 'buildAssetsDir'.
+        assetsInlineLimit: 0, // TODO: check if it makes sense to increase this value.
+        manifest: true,
+        emptyOutDir: true,
+        copyPublicDir: true,
+        // TODO: watch?
+        rollupOptions: {
+          output: {
+            assetFileNames: (assetInfo) => {
+              const extType = assetInfo.name.split('.').at(1);
+              let path = 'assets'
+
+              if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
+                path += '/img';
+              } else if (/css|sass|scss/i.test(extType)) {
+                path += '/css';
+              } else if (/woff|woff2|eot|ttf|otf/i.test(extType)) {
+                path += '/fonts';
+              }
+
+              return `${path}/[name][extname]`;
+            },
+          }
+        },
+      }
+
+      if (mode === 'profile') {
+        config.plugins.push(
+          visualizer({ // NOTE: the sizes reported by this plugin relate to the source, not build size... @see https://github.com/btd/rollup-plugin-visualizer/issues/96
+            filename: "./stats/index.html",
+            open: true,
+            template: 'treemap',
+          })
+        )
+      }
+  }
+
+  return config;
 });