refactor: move vite config and shared plugins to config (#4069)

schogges · web-flow · commit 27c29e45dee8 · 2025-07-11T13:57:47.000+02:00
Moves the common parts of the vite config to a base config exposed by
the config package. The different configs don't depend on each other
anymore but each extends the base config individually. Also the common
plugin configs are moved to the config package and each vite config
imports the plugin configs. Also as the `vite.config.development` just
imported and reexported the production config, I have removed it.

---------

Signed-off-by: schogges &lt;moritz.fleck@konghq.com&gt;
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/config/package.json b/packages/config/package.json
@@ -59,6 +59,7 @@
     "vitepress": "^2.0.0-alpha.8",
     "vitest": "^3.2.4",
     "vue-tsc": "^2.2.12",
+    "@types/markdown-it": "^14.1.2",
     "deepmerge": "^4.3.1",
     "js-yaml": "^4.1.0"
   }
diff --git a/packages/config/src/mk/build.mk b/packages/config/src/mk/build.mk
@@ -11,7 +11,7 @@ build/preview: VITE ?= $(shell $(MAKE) resolve/bin BIN=vite)
 build/preview:
 	@$(VITE) \
 			--configLoader runner \
-			-c ./vite.config.development.ts \
+			-c ./vite.config.production.ts \
 			--mode preview \
 			build
 
diff --git a/packages/config/src/mk/run.mk b/packages/config/src/mk/run.mk
@@ -3,7 +3,7 @@
 .run: install
 	@$(VITE) \
 		--configLoader runner \
-		-c ./vite.config.development.ts
+		-c ./vite.config.production.ts
 
 .PHONY: .run/docs
 .run/docs: VITEPRESS ?= $(shell $(MAKE) resolve/bin BIN=vitepress)
diff --git a/packages/config/src/vite/config/index.ts b/packages/config/src/vite/config/index.ts
@@ -0,0 +1,2 @@
+export * from './vite.config.base'
+export * from './utils'
diff --git a/packages/config/src/vite/config/utils.ts b/packages/config/src/vite/config/utils.ts
diff --git a/packages/config/src/vite/config/vite.config.base.ts b/packages/config/src/vite/config/vite.config.base.ts
@@ -0,0 +1,54 @@
+/// <reference types="vitest/config" />
+import path from 'node:path'
+
+import { hoistUseStatements } from '.'
+import type { UserConfig, UserConfigFn } from 'vite'
+
+
+export const defineConfig: UserConfigFn = () => ({
+  base: './',
+  server: {
+    port: 8080,
+  },
+  resolve: {
+    alias: {
+      /**
+       * Used to import files using, for example, '@/api/kumaApi'.
+       */
+      '@': path.resolve(process.cwd(), 'src'),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: hoistUseStatements(`
+            @use "@kong/design-tokens/tokens/scss/variables" as *;
+          `),
+        api: 'modern-compiler',
+      },
+    },
+  },
+
+  test: {
+    globals: false,
+    environment: 'jsdom',
+    setupFiles: [
+      path.resolve(process.cwd(), './test-support/main.ts'),
+    ],
+    deps: {
+      optimizer: {
+        web: {
+          // https://github.com/vitest-dev/vitest/issues/4074
+          exclude: ['vue'],
+        },
+      },
+    },
+    include: [
+      '**/src/**/*.spec.ts',
+    ],
+    exclude: [
+      '**/dist/**',
+      '**/node_modules/**',
+    ],
+  },
+}) satisfies UserConfig
diff --git a/packages/config/src/vite/index.ts b/packages/config/src/vite/index.ts
@@ -1 +1,2 @@
 export * from './plugins'
+export * from './config'
diff --git a/packages/config/src/vite/plugins/index.ts b/packages/config/src/vite/plugins/index.ts
@@ -1 +1,2 @@
 export * from './server'
+export * from './plugins'
diff --git a/packages/config/src/vite/plugins/plugins.ts b/packages/config/src/vite/plugins/plugins.ts
@@ -0,0 +1,39 @@
+import { DEFAULT_SCHEMA, Type } from 'js-yaml'
+import markdown from 'markdown-it'
+
+export const yamlLoaderPluginConfig = () => {
+  const md = markdown(
+    {
+      html: true,
+    },
+  )
+  return { 
+    schema: DEFAULT_SCHEMA.extend(
+      new Type('tag:yaml.org,2002:text/markdown', {
+        kind: 'scalar',
+        construct: (data) => {
+        // We only currently use !!text/markdown within yaml for out locales/i18n text
+        // for which we use FormatJS under the hood. FormatJS requires you to escape any XML/HTML looking
+        // things, plus ICU '{' and '}', hence this replace.
+        // If we ever need !!text/markdown for anything else we should do something like !!text/icu+markdown
+          const str = md.render(data)
+
+          return str.replace(/</g, "'<'")
+            .replace(/%7B/g, '{')
+            .replace(/%7D/g, '}')
+        },
+      }),
+    ),
+  }
+}
+
+export const vuePluginConfig = () => ({
+  template: {
+    compilerOptions: {
+      whitespace: 'preserve' as const,
+      isCustomElement: (item: string) => [
+        'search',
+      ].includes(item),
+    },
+  },
+})
diff --git a/packages/config/tsconfig.json b/packages/config/tsconfig.json
@@ -6,6 +6,7 @@
     "module": "preserve",
     "target": "esnext",
     "skipLibCheck": true,
+    "noEmit": true,
     "types": [
       "node",
       "cypress"
diff --git a/packages/kuma-gui/.vitepress/vite.config.ts b/packages/kuma-gui/.vitepress/vite.config.ts
@@ -5,8 +5,7 @@ import { whyframe } from '@whyframe/core'
 import { whyframeVue } from '@whyframe/vue'
 import { DEFAULT_SCHEMA, Type } from 'js-yaml'
 import { fileURLToPath, URL } from 'node:url'
-import { hoistUseStatements } from '../dev-utilities/hoistUseStatements'
-import { kumaIndexHtmlVars } from "@kumahq/config/vite" 
+import { kumaIndexHtmlVars, hoistUseStatements } from "@kumahq/config/vite" 
 
 export default defineConfig({
   plugins: [
diff --git a/packages/kuma-gui/test-support/main.ts b/packages/kuma-gui/test-support/main.ts
@@ -10,7 +10,7 @@ import { services as application, TOKENS as APPLICATION } from '@/app/applicatio
 import { TOKENS } from '@/app/kuma'
 import { services as vue, TOKENS as VUE } from '@/app/vue'
 
-(async () => {
+;(async () => {
   const $ = {
     ...VUE,
     ...APPLICATION,
diff --git a/packages/kuma-gui/vite.config.development.ts b/packages/kuma-gui/vite.config.development.ts
diff --git a/packages/kuma-gui/vite.config.preview.ts b/packages/kuma-gui/vite.config.preview.ts
@@ -3,17 +3,17 @@ import { defineConfig } from 'vite'
 
 import type { UserConfigFn } from 'vite'
 
-export const config = (): UserConfigFn => () => {
+export const config: UserConfigFn = () => {
   return {
+    preview: {
+      port: 5681,
+    },
     plugins: [
       replicateKumaServer({
         template: './dist/gui/index.html',
       }),
     ],
-    preview: {
-      port: 5681,
-    },
   }
 }
 
-export default defineConfig(config())
+export default defineConfig(config)
diff --git a/packages/kuma-gui/vite.config.production.ts b/packages/kuma-gui/vite.config.production.ts
@@ -1,109 +1,30 @@
-import { replicateKumaServer } from '@kumahq/config/vite'
+import { replicateKumaServer, defineConfig as defineBaseConfig, yamlLoaderPluginConfig, vuePluginConfig } from '@kumahq/config/vite'
 import fakeApi from '@kumahq/fake-api/vite'
 import yamlLoader from '@modyfi/vite-plugin-yaml'
 import vue from '@vitejs/plugin-vue'
-import { DEFAULT_SCHEMA, Type } from 'js-yaml'
-import markdown from 'markdown-it'
-import { fileURLToPath, URL } from 'url'
-import { defineConfig } from 'vite'
+import { defineConfig, mergeConfig } from 'vite'
 import svgLoader from 'vite-svg-loader'
 
-import { hoistUseStatements } from './dev-utilities/hoistUseStatements'
 import { dependencies } from './src/test-support'
 import { fs } from './src/test-support/mocks/fs'
-import type { UserConfigFn } from 'vite'
+import type { UserConfig, UserConfigFn } from 'vite'
 // https://vitejs.dev/config/
 
 export const config: UserConfigFn = () => {
-  const md = markdown(
-    {
-      html: true,
-    },
-  )
   return {
-    base: './',
-    server: {
-      port: 8080,
-    },
     plugins: [
-      replicateKumaServer(),
-      vue({
-        template: {
-          compilerOptions: {
-            whitespace: 'preserve',
-            isCustomElement: (item) => [
-              'search',
-            ].includes(item),
-          },
-        },
-      }),
-      fakeApi({
-        dependencies,
-        fs,
-      }),
+      vue(vuePluginConfig()),
+      yamlLoader(yamlLoaderPluginConfig()),
       svgLoader(),
-      yamlLoader(
-        {
-          schema: DEFAULT_SCHEMA.extend(
-            new Type('tag:yaml.org,2002:text/markdown', {
-              kind: 'scalar',
-              construct: (data) => {
-                // We only currently use !!text/markdown within yaml for out locales/i18n text
-                // for which we use FormatJS under the hood. FormatJS requires you to escape any XML/HTML looking
-                // things, plus ICU '{' and '}', hence this replace.
-                // If we ever need !!text/markdown for anything else we should do something like !!text/icu+markdown
-                const str = md.render(data)
-
-                return str.replace(/</g, "'<'")
-                  .replace(/%7B/g, '{')
-                  .replace(/%7D/g, '}')
-              },
-            }),
-          ),
-        },
-      ),
+      replicateKumaServer(),
+      fakeApi({ dependencies, fs }),
     ],
-    resolve: {
-      alias: {
-        /**
-         * Used to import files using, for example, '@/api/kumaApi'.
-         */
-        '@': fileURLToPath(new URL('./src', import.meta.url)),
-      },
-    },
-    css: {
-      preprocessorOptions: {
-        scss: {
-          additionalData: hoistUseStatements(`
-            @use "@kong/design-tokens/tokens/scss/variables" as *;
-          `),
-          api: 'modern-compiler',
-        },
-      },
-    },
-
-    test: {
-      globals: false,
-      environment: 'jsdom',
-      setupFiles: [
-        './test-support/main.ts',
-      ],
-      deps: {
-        optimizer: {
-          web: {
-            // https://github.com/vitest-dev/vitest/issues/4074
-            exclude: ['vue'],
-          },
-        },
-      },
-      include: [
-        '**/src/**/*.spec.ts',
-      ],
-      exclude: [
-        '**/dist/**',
-        '**/node_modules/**',
-      ],
-    },
-  }
+  } satisfies UserConfig
 }
-export default defineConfig(config)
+
+export default defineConfig((env) =>
+  mergeConfig(
+    defineBaseConfig(env),
+    config(env),
+  ),
+)

Original file line number	Diff line number	Diff line change
`@@ -59,6 +59,7 @@`
`59`	`59`	`"vitepress": "^2.0.0-alpha.8",`
`60`	`60`	`"vitest": "^3.2.4",`
`61`	`61`	`"vue-tsc": "^2.2.12",`
	`62`	`+ "@types/markdown-it": "^14.1.2",`
`62`	`63`	`"deepmerge": "^4.3.1",`
`63`	`64`	`"js-yaml": "^4.1.0"`
`64`	`65`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from './vite.config.base'`
	`2`	`+export * from './utils'`
Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export * from './plugins'`
	`2`	`+export * from './config'`
Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export * from './server'`
	`2`	`+export * from './plugins'`