fix: optimize transform of external

.gitignore

@@ -199,4 +199,6 @@ web/
 config/
 
 # private info
-private.key
+private.key
+
+.idea/

package.json

@@ -9,6 +9,11 @@
     "lint": "eslint src",
     "prepare": "husky"
   },
+  "peerDependencies": {
+    "primevue": "^4.2.5",
+    "vue": "^3.5.13",
+    "vue-i18n": "^9.14.3"
+  },
   "devDependencies": {
     "@types/lodash": "^4.17.9",
     "@types/markdown-it": "^14.1.2",
@@ -38,9 +43,6 @@
     "lodash": "^4.17.21",
     "markdown-it": "^14.1.0",
     "markdown-it-metadata-block": "^1.0.6",
-    "primevue": "^4.0.7",
-    "vue": "^3.5.6",
-    "vue-i18n": "^9.14.0",
     "yaml": "^2.6.0"
   },
   "lint-staged": {

vite-plugin-transform-imports.js

@@ -0,0 +1,106 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+const parsePrimeVueMap = () => {
+  const root = process.cwd()
+  const primevueFilePath = resolve(root, 'node_modules/primevue/index.mjs')
+  const primevue = readFileSync(primevueFilePath, 'utf-8')
+  const nameExportRegex =
+    /export\s*{\s*default\s*as\s*(?<name>\w+)\s*}\s*from\s*['"](?<subpackage>primevue\/\S*)['"];?/g
+  const matches = primevue.matchAll(nameExportRegex)
+  const map = {}
+  for (const match of matches) {
+    map[match.groups.subpackage] = match.groups.name
+  }
+  return map
+}
+
+/**
+ *
+ * @returns {import('vite').Plugin}
+ */
+export default function customTransformImports() {
+  const externals = [
+    {
+      pattern: 'vue',
+      global: 'Vue',
+      subpackageMap: {},
+    },
+    {
+      pattern: /^primevue\/?.*$/,
+      global: 'PrimeVue',
+      subpackageMap: parsePrimeVueMap(),
+    },
+    {
+      pattern: 'vue-i18n',
+      global: 'VueI18n',
+      subpackageMap: {},
+    },
+  ]
+
+  return {
+    name: 'custom-transform-imports',
+    enforce: 'post',
+    config() {
+      return {
+        build: {
+          rollupOptions: {
+            external: externals.map((o) => o.pattern),
+          },
+        },
+      }
+    },
+    renderChunk(code) {
+      let transformedCode = code
+
+      const toString = (value) => {
+        if (value instanceof RegExp) {
+          return value.source.replace(/^\^|\$$/g, '')
+        }
+        return value
+      }
+
+      for (const external of externals) {
+        const { pattern, global, subpackageMap } = external
+
+        const importRegexp = new RegExp(
+          `import\\s+([^;]*?)\\s+from\\s+["'](${toString(pattern)})["'];?`,
+          'gi',
+        )
+        transformedCode = transformedCode.replace(
+          importRegexp,
+          (_, importedContent, packageName) => {
+            const result = []
+
+            const namedImportRegexp = /,?\s*(?<named>{[^;]*?})/g
+            const namedImports = importedContent.matchAll(namedImportRegexp)
+            for (const m of namedImports) {
+              const named = m.groups.named
+              const aliasNamed = named.replace(/\s+as\s+/g, ': ')
+              result.push(`const ${aliasNamed} = window.${global};`)
+            }
+
+            const defaultImport = importedContent
+              .replace(namedImportRegexp, '')
+              .trim()
+
+            if (defaultImport) {
+              const subpackageName = subpackageMap[packageName]
+              if (subpackageName) {
+                result.push(
+                  `const ${defaultImport} = window.${global}.${subpackageName};`,
+                )
+              } else {
+                result.push(`const ${defaultImport} = window.${global};`)
+              }
+            }
+
+            return result.join('\n')
+          },
+        )
+      }
+
+      return transformedCode
+    },
+  }
+}

vite.config.ts

@@ -2,6 +2,7 @@ import vue from '@vitejs/plugin-vue'
 import fs from 'node:fs'
 import path from 'node:path'
 import { defineConfig, Plugin } from 'vite'
+import transformImports from './vite-plugin-transform-imports'
 
 function css(): Plugin {
   return {
@@ -108,7 +109,14 @@ function createWebVersion(): Plugin {
 }
 
 export default defineConfig({
-  plugins: [vue(), css(), output(), dev(), createWebVersion()],
+  plugins: [
+    vue(),
+    css(),
+    output(),
+    dev(),
+    createWebVersion(),
+    transformImports(),
+  ],
 
   build: {
     outDir: 'web',
@@ -119,13 +127,6 @@ export default defineConfig({
       // Disabling tree-shaking
       // Prevent vite remove unused exports
       treeshake: true,
-      output: {
-        manualChunks(id) {
-          if (id.includes('primevue')) {
-            return 'primevue'
-          }
-        },
-      },
     },
     chunkSizeWarningLimit: 1024,
   },