fix(build): correct url encoded file names

packages/ui/build/common-config.ts

@@ -5,7 +5,8 @@ import { resolve as resolver } from 'path'
 import { chunkSplitPlugin } from 'vite-plugin-chunk-split'
 import { appendComponentCss } from './plugins/append-component-css'
 import { removeSideEffectedChunks } from './plugins/remove-side-effected-chunks'
-import { defineVitePlugin } from './types/define-vite-plugin'
+import { fixVueGenericComponentFileNames } from './plugins/fix-vue-generic-component-file-names'
+import { defineViteConfig } from './types/define-vite-config'
 
 import type { RollupOptions } from 'rollup'
 
@@ -65,7 +66,7 @@ export default function createViteConfig (format: BuildFormat) {
   const isEsm = ['es', 'esm-node'].includes(format)
   const isNode = format === 'esm-node'
 
-  const config = defineVitePlugin({
+  const config = defineViteConfig({
     resolve,
 
     build: {
@@ -97,6 +98,7 @@ export default function createViteConfig (format: BuildFormat) {
   isEsm && config.plugins.push(chunkSplitPlugin({ strategy: 'unbundle' }))
   isEsm && !isNode && config.plugins.push(appendComponentCss())
   isEsm && config.plugins.push(removeSideEffectedChunks())
+  isEsm && config.plugins.push(fixVueGenericComponentFileNames)
   config.plugins.push(componentVBindFix())
 
   if (isNode) {

packages/ui/build/plugins/fix-vue-generic-component-file-names.ts

@@ -0,0 +1,53 @@
+import { defineVitePlugin } from './../types/define-vite-plugin'
+
+/**
+ * When vue compiles file, it encode generic into file name
+ *
+ * @example
+ * VaDataTable.vue_vue_type_script_generic_Item%20extends%20Record%3Cstring%2C%20any%3E_setup_true_lang
+ *
+ * This might be helpful for compiler, but it makes file names unreadable and some bundlers may not allow encoded characters in file names.
+ * This plugin replaces encoded characters in file names and source maps with underscores.
+ */
+const GENERIC_NAME_REGEX = /.vue_vue_type_script_generic_.*_setup_true_lang/gm
+const URL_ENCODED_REGEX = /%([0-9]|[A-F]){2}/gm
+
+const replaceEncodedCharacters = (match: string) => match
+  .replace(URL_ENCODED_REGEX, '_') // Replace any encoded character with underscore
+  .replace(/_{2,}/g, '_') // Replace multiple underscores with single underscore
+
+export const fixVueGenericComponentFileNames = defineVitePlugin({
+  name: 'vuestic:fix-vue-generic-component-file-names',
+
+  generateBundle (options, bundle) {
+    Object.keys(bundle).forEach(fileName => {
+      const file = bundle[fileName]
+
+      // Replace encoded characters in generic names in source maps
+      if (file.type === 'asset' && file.fileName.endsWith('.map')) {
+        if (typeof file.source === 'string') {
+          file.source = file.source
+            .replace(GENERIC_NAME_REGEX, replaceEncodedCharacters)
+        }
+      }
+
+      // Replace encoded characters in generic names in code
+      if (file.type === 'chunk') {
+        file.code = file.code
+          .replace(GENERIC_NAME_REGEX, replaceEncodedCharacters)
+      }
+
+      // Update file name if it has encoded characters
+      if (GENERIC_NAME_REGEX.test(fileName)) {
+        const newFileName = replaceEncodedCharacters(fileName)
+
+        bundle[newFileName] = {
+          ...bundle[fileName],
+          fileName: newFileName,
+        }
+
+        delete bundle[fileName]
+      }
+    })
+  },
+})

packages/ui/build/types/define-vite-config.ts

@@ -0,0 +1,3 @@
+import { UserConfig, Plugin } from 'vite'
+
+export const defineViteConfig = <T extends UserConfig>(p: T): UserConfig & T => p

packages/ui/build/types/define-vite-plugin.ts

@@ -1,3 +1,3 @@
-import { UserConfig, Plugin } from 'vite'
+import { Plugin } from 'vite'
 
-export const defineVitePlugin = <T extends UserConfig>(p: T): UserConfig & T => p
+export const defineVitePlugin = <T extends Plugin>(p: T): Plugin & T => p