fix: optimize transform of external

vite-plugin-transform-imports.js

@@ -1,233 +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 primeVueMap = {
+  const externals = [
-    'config': 'Config',
+    {
-
+      pattern: 'vue',
-    'button': 'Button',
+      global: 'Vue',
-    'dialog': 'Dialog',
+      subpackageMap: {},
-    'dropdown': 'Dropdown',
+    },
-    'datatable': 'DataTable',
+    {
-    'inputtext': 'InputText',
+      pattern: /^primevue\/?.*$/,
-    'calendar': 'Calendar',
+      global: 'PrimeVue',
-    'checkbox': 'Checkbox',
+      subpackageMap: parsePrimeVueMap(),
-    'radiobutton': 'RadioButton',
+    },
-    'textarea': 'Textarea',
+    {
-    'toast': 'Toast',
+      pattern: 'vue-i18n',
-    'panel': 'Panel',
+      global: 'VueI18n',
-    'menu': 'Menu',
+      subpackageMap: {},
-    'tabview': 'TabView',
+    },
-    'tabpanel': 'TabPanel',
+  ]
-    'accordion': 'Accordion',
-    'accordiontab': 'AccordionTab',
-    'card': 'Card',
-    'chart': 'Chart',
-    'confirmdialog': 'ConfirmDialog',
-    'toolbar': 'Toolbar',
-    'paginator': 'Paginator',
-    'fieldset': 'Fieldset',
-    'splitter': 'Splitter',
-    'splitterpanel': 'SplitterPanel',
-    'slider': 'Slider',
-    'message': 'Message',
-    'avatar': 'Avatar',
-    'badge': 'Badge',
-    'chip': 'Chip',
-    'divider': 'Divider',
-    'progressbar': 'ProgressBar',
-    'progressspinner': 'ProgressSpinner',
-    'tag': 'Tag',
-    'skeleton': 'Skeleton',
-    'contextmenu': 'ContextMenu',
-
-    'toastservice': 'ToastService',
-    'confirmationservice': 'ConfirmationService',
-    'dialogservice': 'DialogService',
-
-    'styleclass': 'StyleClass',
-    'ripple': 'Ripple',
-    'tooltip': 'Tooltip',
-  };
-
-  function capitalize(str) {
-    if (!str) return '';
-    return str.charAt(0).toUpperCase() + str.slice(1);
-  }
-
-  function parseNamedImportItems(importItemsStr) {
-    if (!importItemsStr) return '';
-    return importItemsStr
-      .split(',')
-      .map(item => {
-        item = item.trim();
-        if (item.includes(' as ')) {
-          const [original, alias] = item.split(' as ').map(s => s.trim());
-          return `${original}: ${alias}`;
-        }
-        return item;
-      })
-      .join(', ');
-  }
 
   return {
     name: 'custom-transform-imports',
     enforce: 'post',
+    config() {
+      return {
+        build: {
+          rollupOptions: {
+            external: externals.map((o) => o.pattern),
+          },
+        },
+      }
+    },
     renderChunk(code) {
-      let transformedCode = code;
+      let transformedCode = code
 
-      transformedCode = transformedCode.replace(
+      const toString = (value) => {
-        /import\s*{\s*([\s\S]*?)\s*}\s*from\s*["']vue["'];?/g,
+        if (value instanceof RegExp) {
-        (match, importItems) => {
+          return value.source.replace(/^\^|\$$/g, '')
-          const processedItems = parseNamedImportItems(importItems);
-          return `const { ${processedItems} } = window.Vue;`;
         }
-      );
+        return value
+      }
 
-      transformedCode = transformedCode.replace(
+      for (const external of externals) {
-        /import\s+([A-Za-z0-9$_]+)\s+from\s*["']vue["'];?/g,
+        const { pattern, global, subpackageMap } = external
-        (match, defaultImportName) => {
-          if (match.includes('{') && match.indexOf('{') < match.indexOf('from')) return match;
-          return `const ${defaultImportName} = window.Vue;`;
-        }
-      );
 
-      transformedCode = transformedCode.replace(
+        const importRegexp = new RegExp(
-        /import\s+([A-Za-z0-9$_]+)\s*,\s*{\s*([\s\S]*?)\s*}\s*from\s*["']primevue\/config["'];?/g,
+          `import\\s+([^;]*?)\\s+from\\s+["'](${toString(pattern)})["'];?`,
-        (match, defaultConfigImport, namedConfigImports) => {
+          'gi',
-          const itemsStr = parseNamedImportItems(namedConfigImports);
+        )
-          const itemsArray = itemsStr.split(',').map(s => s.trim());
+        transformedCode = transformedCode.replace(
+          importRegexp,
+          (_, importedContent, packageName) => {
+            const result = []
 
-          const fromConfig = [];
+            const namedImportRegexp = /,?\s*(?<named>{[^;]*?})/g
-          const fromRoot = [];
+            const namedImports = importedContent.matchAll(namedImportRegexp)
-
+            for (const m of namedImports) {
-          itemsArray.forEach(item => {
+              const named = m.groups.named
-            const originalName = item.includes(':') ? item.split(':')[0].trim() : item;
+              const aliasNamed = named.replace(/\s+as\s+/g, ': ')
-            if (originalName === 'usePrimeVue') {
+              result.push(`const ${aliasNamed} = window.${global};`)
-              fromRoot.push(item);
-            } else {
-              fromConfig.push(item);
             }
-          });
 
-          let result = '';
+            const defaultImport = importedContent
-          if (fromRoot.length > 0) {
+              .replace(namedImportRegexp, '')
-            result += `const { ${fromRoot.join(', ')} } = window.PrimeVue;\n`;
+              .trim()
-          }
-          if (fromConfig.length > 0) {
-            result += `const { ${fromConfig.join(', ')} } = window.PrimeVue.Config;\n`;
-          }
-          result += `const ${defaultConfigImport} = window.PrimeVue.Config;`;
-          return result;
-        }
-      );
 
-      transformedCode = transformedCode.replace(
+            if (defaultImport) {
-        /import\s*{\s*([\s\S]*?)\s*}\s*from\s*["']primevue\/config["'];?/g,
+              const subpackageName = subpackageMap[packageName]
-        (match, importItems) => {
+              if (subpackageName) {
-          if (match.trim().startsWith('import PrimeVue,')) return match;
+                result.push(
-
+                  `const ${defaultImport} = window.${global}.${subpackageName};`,
-          const itemsStr = parseNamedImportItems(importItems);
+                )
-          const itemsArray = itemsStr.split(',').map(s => s.trim());
+              } else {
-
+                result.push(`const ${defaultImport} = window.${global};`)
-          const fromConfig = [];
+              }
-          const fromRoot = [];
-
-          itemsArray.forEach(item => {
-            const originalName = item.includes(':') ? item.split(':')[0].trim() : item;
-            if (originalName === 'usePrimeVue') {
-              fromRoot.push(item);
-            } else {
-              fromConfig.push(item);
             }
-          });
 
-          let result = '';
+            return result.join('\n')
-          if (fromRoot.length > 0) {
+          },
-            result += `const { ${fromRoot.join(', ')} } = window.PrimeVue;\n`;
+        )
-          }
+      }
-          if (fromConfig.length > 0) {
-            result += `const { ${fromConfig.join(', ')} } = window.PrimeVue.Config;\n`;
-          }
-          return result.trim();
-        }
-      );
 
-      transformedCode = transformedCode.replace(
+      return transformedCode
-        /import\s+([A-Za-z0-9$_]+)\s+from\s*["']primevue\/config["'];?/g,
+    },
-        (match, defaultImportName) => {
+  }
-          if (match.includes('{') && match.indexOf('{') < match.indexOf('from')) return match;
+}
-          return `const ${defaultImportName} = window.PrimeVue.Config;`;
-        }
-      );
-
-      transformedCode = transformedCode.replace(
-        /import\s+(?:{\s*([\s\S]*?)\s*}|([A-Za-z0-9$_]+))\s+from\s*["']primevue\/([^"']+)["'];?/g,
-        (match, namedImportItems, defaultImportName, path) => {
-          const pathKey = path.toLowerCase();
-
-          if (pathKey === 'config') return match;
-
-          if (namedImportItems) {
-            const processedItems = parseNamedImportItems(namedImportItems);
-
-            if (pathKey.startsWith('use')) {
-              return `const { ${processedItems} } = window.PrimeVue;`;
-            }
-            else {
-              const globalNameSuffix = primeVueMap[pathKey] || capitalize(pathKey);
-              return `const { ${processedItems} } = window.PrimeVue.${globalNameSuffix};`;
-            }
-          }
-          else if (defaultImportName) {
-            const globalNameSuffix = primeVueMap[pathKey] || capitalize(pathKey);
-
-            return `const ${defaultImportName} = window.PrimeVue.${globalNameSuffix};`;
-          }
-          return match;
-        }
-      );
-
-      transformedCode = transformedCode.replace(
-        /import\s+([A-Za-z0-9$_]+)\s*,\s*{\s*([\s\S]*?)\s*}\s*from\s*["']primevue["'];?/g,
-        (match, defaultImport, namedImports) => {
-          const processedNamed = parseNamedImportItems(namedImports);
-
-          return `const { ${processedNamed} } = window.PrimeVue;\nconst ${defaultImport} = window.PrimeVue;`;
-        }
-      );
-
-      transformedCode = transformedCode.replace(
-        /import\s*{\s*([\s\S]*?)\s*}\s*from\s*["']primevue["'](?!.*\/);?/g,
-        (match, importItems) => {
-          const processedItems = parseNamedImportItems(importItems);
-          return `const { ${processedItems} } = window.PrimeVue;`;
-        }
-      );
-
-      transformedCode = transformedCode.replace(
-        /import\s+([A-Za-z0-9$_]+)\s+from\s*["']primevue["'](?!.*\/);?/g,
-        (match, defaultImportName) => {
-          if (match.includes('{') && match.indexOf('{') < match.indexOf('from')) return match;
-
-          return `const ${defaultImportName} = window.PrimeVue;`;
-        }
-      );
-
-      transformedCode = transformedCode.replace(
-        /import\s*{\s*([\s\S]*?)\s*}\s*from\s*["']vue-i18n["'];?/g,
-        (match, importItems) => {
-          const processedItems = parseNamedImportItems(importItems);
-          return `const { ${processedItems} } = window.VueI18n;`;
-        }
-      );
-
-      transformedCode = transformedCode.replace(
-        /import\s+([A-Za-z0-9$_]+)\s+from\s*["']vue-i18n["'];?/g,
-        (match, defaultImportName) => {
-          if (match.includes('{') && match.indexOf('{') < match.indexOf('from')) return match;
-          return `const ${defaultImportName} = window.VueI18n;`;
-        }
-      );
-
-      return transformedCode;
-    }
-  };
-}

vite.config.ts

@@ -109,7 +109,14 @@ function createWebVersion(): Plugin {
 }
 
 export default defineConfig({
-  plugins: [vue(), css(), output(), dev(), createWebVersion(), transformImports()],
+  plugins: [
+    vue(),
+    css(),
+    output(),
+    dev(),
+    createWebVersion(),
+    transformImports(),
+  ],
 
   build: {
     outDir: 'web',
@@ -120,13 +127,6 @@ export default defineConfig({
       // Disabling tree-shaking
       // Prevent vite remove unused exports
       treeshake: true,
-      external: [
-          'vue',
-          /^primevue($|\/)/,
-          "vue-i18n"
-      ],
-      output: {
-      },
     },
     chunkSizeWarningLimit: 1024,
   },