Skip to content

Commit df2feea

Browse files
webfilteredwebfiltered
committed
Revert "Export vue new (#3966)" (#4050)
1 parent 5d87cf4 commit df2feea

File tree

4 files changed

+101
-117
lines changed

4 files changed

+101
-117
lines changed

‎build/plugins/addElementVnodeExportPlugin.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Plugin } from 'vite'
2+
3+
/**
4+
* Vite plugin that adds an alias export for Vue's createBaseVNode as createElementVNode.
5+
*
6+
* This plugin addresses compatibility issues where some components or libraries
7+
* might be using the older createElementVNode function name instead of createBaseVNode.
8+
* It modifies the Vue vendor chunk during build to add the alias export.
9+
*
10+
* @returns {Plugin} A Vite plugin that modifies the Vue vendor chunk exports
11+
*/
12+
export function addElementVnodeExportPlugin(): Plugin {
13+
return {
14+
name: 'add-element-vnode-export-plugin',
15+
16+
renderChunk(code, chunk, _options) {
17+
if (chunk.name.startsWith('vendor-vue')) {
18+
const exportRegex = /(export\s*\{)([^}]*)(\}\s*;?\s*)$/
19+
const match = code.match(exportRegex)
20+
21+
if (match) {
22+
const existingExports = match[2].trim()
23+
const exportsArray = existingExports
24+
.split(',')
25+
.map((e) => e.trim())
26+
.filter(Boolean)
27+
28+
const hasCreateBaseVNode = exportsArray.some((e) =>
29+
e.startsWith('createBaseVNode')
30+
)
31+
const hasCreateElementVNode = exportsArray.some((e) =>
32+
e.includes('createElementVNode')
33+
)
34+
35+
if (hasCreateBaseVNode && !hasCreateElementVNode) {
36+
const newExportStatement = `${match[1]} ${existingExports ? existingExports + ',' : ''} createBaseVNode as createElementVNode ${match[3]}`
37+
const newCode = code.replace(exportRegex, newExportStatement)
38+
39+
console.log(
40+
`[add-element-vnode-export-plugin] Added 'createBaseVNode as createElementVNode' export to vendor-vue chunk.`
41+
)
42+
43+
return { code: newCode, map: null }
44+
} else if (!hasCreateBaseVNode) {
45+
console.warn(
46+
`[add-element-vnode-export-plugin] Warning: 'createBaseVNode' not found in exports of vendor-vue chunk. Cannot add alias.`
47+
)
48+
}
49+
} else {
50+
console.warn(
51+
`[add-element-vnode-export-plugin] Warning: Could not find expected export block format in vendor-vue chunk.`
52+
)
53+
}
54+
}
55+
56+
return null
57+
}
58+
}
59+
}

‎build/plugins/generateImportMapPlugin.ts‎

Lines changed: 32 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,9 @@
1-
import glob from 'fast-glob'
2-
import fs from 'fs-extra'
3-
import { dirname, join } from 'node:path'
4-
import { HtmlTagDescriptor, Plugin, normalizePath } from 'vite'
1+
import type { OutputOptions } from 'rollup'
2+
import { HtmlTagDescriptor, Plugin } from 'vite'
53

6-
interface ImportMapSource {
4+
interface VendorLibrary {
75
name: string
8-
pattern: string | RegExp
9-
entry: string
10-
recursiveDependence?: boolean
11-
override?: Record<string, Partial<ImportMapSource>>
12-
}
13-
14-
const parseDeps = (root: string, pkg: string) => {
15-
const pkgPath = join(root, 'node_modules', pkg, 'package.json')
16-
if (fs.existsSync(pkgPath)) {
17-
const content = fs.readFileSync(pkgPath, 'utf-8')
18-
const pkg = JSON.parse(content)
19-
return Object.keys(pkg.dependencies || {})
20-
}
21-
return []
6+
pattern: RegExp
227
}
238

249
/**
@@ -38,89 +23,53 @@ const parseDeps = (root: string, pkg: string) => {
3823
* @returns {Plugin} A Vite plugin that generates and injects an import map
3924
*/
4025
export function generateImportMapPlugin(
41-
importMapSources: ImportMapSource[]
26+
vendorLibraries: VendorLibrary[]
4227
): Plugin {
4328
const importMapEntries: Record<string, string> = {}
44-
const resolvedImportMapSources: Map<string, ImportMapSource> = new Map()
45-
const assetDir = 'assets/lib'
46-
let root: string
4729

4830
return {
4931
name: 'generate-import-map-plugin',
5032

5133
// Configure manual chunks during the build process
5234
configResolved(config) {
53-
root = config.root
54-
5535
if (config.build) {
5636
// Ensure rollupOptions exists
5737
if (!config.build.rollupOptions) {
5838
config.build.rollupOptions = {}
5939
}
6040

61-
for (const source of importMapSources) {
62-
resolvedImportMapSources.set(source.name, source)
63-
if (source.recursiveDependence) {
64-
const deps = parseDeps(root, source.name)
65-
66-
while (deps.length) {
67-
const dep = deps.shift()!
68-
const depSource = Object.assign({}, source, {
69-
name: dep,
70-
pattern: dep,
71-
...source.override?.[dep]
72-
})
73-
resolvedImportMapSources.set(depSource.name, depSource)
74-
75-
const _deps = parseDeps(root, depSource.name)
76-
deps.unshift(..._deps)
41+
const outputOptions: OutputOptions = {
42+
manualChunks: (id: string) => {
43+
for (const lib of vendorLibraries) {
44+
if (lib.pattern.test(id)) {
45+
return `vendor-${lib.name}`
46+
}
7747
}
78-
}
79-
}
80-
81-
const external: (string | RegExp)[] = []
82-
for (const [, source] of resolvedImportMapSources) {
83-
external.push(source.pattern)
48+
return null
49+
},
50+
// Disable minification of internal exports to preserve function names
51+
minifyInternalExports: false
8452
}
85-
config.build.rollupOptions.external = external
53+
config.build.rollupOptions.output = outputOptions
8654
}
8755
},
8856

89-
generateBundle(_options) {
90-
for (const [, source] of resolvedImportMapSources) {
91-
if (source.entry) {
92-
const moduleFile = join(source.name, source.entry)
93-
const sourceFile = join(root, 'node_modules', moduleFile)
94-
const targetFile = join(root, 'dist', assetDir, moduleFile)
95-
96-
importMapEntries[source.name] =
97-
'./' + normalizePath(join(assetDir, moduleFile))
98-
99-
const targetDir = dirname(targetFile)
100-
if (!fs.existsSync(targetDir)) {
101-
fs.mkdirSync(targetDir, { recursive: true })
102-
}
103-
fs.copyFileSync(sourceFile, targetFile)
104-
}
105-
106-
if (source.recursiveDependence) {
107-
const files = glob.sync(['**/*.{js,mjs}'], {
108-
cwd: join(root, 'node_modules', source.name)
109-
})
110-
111-
for (const file of files) {
112-
const moduleFile = join(source.name, file)
113-
const sourceFile = join(root, 'node_modules', moduleFile)
114-
const targetFile = join(root, 'dist', assetDir, moduleFile)
115-
116-
importMapEntries[normalizePath(join(source.name, dirname(file)))] =
117-
'./' + normalizePath(join(assetDir, moduleFile))
118-
119-
const targetDir = dirname(targetFile)
120-
if (!fs.existsSync(targetDir)) {
121-
fs.mkdirSync(targetDir, { recursive: true })
122-
}
123-
fs.copyFileSync(sourceFile, targetFile)
57+
generateBundle(_options, bundle) {
58+
for (const fileName in bundle) {
59+
const chunk = bundle[fileName]
60+
if (chunk.type === 'chunk' && !chunk.isEntry) {
61+
// Find matching vendor library by chunk name
62+
const vendorLib = vendorLibraries.find(
63+
(lib) => chunk.name === `vendor-${lib.name}`
64+
)
65+
66+
if (vendorLib) {
67+
const relativePath = `./${chunk.fileName.replace(/\\/g, '/')}`
68+
importMapEntries[vendorLib.name] = relativePath
69+
70+
console.log(
71+
`[ImportMap Plugin] Found chunk: ${chunk.name} -> Mapped '${vendorLib.name}' to '${relativePath}'`
72+
)
12473
}
12574
}
12675
}

‎build/plugins/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
export { addElementVnodeExportPlugin } from './addElementVnodeExportPlugin'
12
export { comfyAPIPlugin } from './comfyAPIPlugin'
23
export { generateImportMapPlugin } from './generateImportMapPlugin'

‎vite.config.mts‎

Lines changed: 9 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ import { createHtmlPlugin } from 'vite-plugin-html'
88
import vueDevTools from 'vite-plugin-vue-devtools'
99
import type { UserConfigExport } from 'vitest/config'
1010

11-
import { comfyAPIPlugin, generateImportMapPlugin } from './build/plugins'
11+
import {
12+
addElementVnodeExportPlugin,
13+
comfyAPIPlugin,
14+
generateImportMapPlugin
15+
} from './build/plugins'
1216

1317
dotenv.config()
1418

@@ -73,40 +77,11 @@ export default defineConfig({
7377
: [vue()]),
7478
comfyAPIPlugin(IS_DEV),
7579
generateImportMapPlugin([
76-
{
77-
name: 'vue',
78-
pattern: 'vue',
79-
entry: './dist/vue.esm-browser.prod.js'
80-
},
81-
{
82-
name: 'vue-i18n',
83-
pattern: 'vue-i18n',
84-
entry: './dist/vue-i18n.esm-browser.prod.js'
85-
},
86-
{
87-
name: 'primevue',
88-
pattern: /^primevue\/?.*/,
89-
entry: './index.mjs',
90-
recursiveDependence: true
91-
},
92-
{
93-
name: '@primevue/themes',
94-
pattern: /^@primevue\/themes\/?.*/,
95-
entry: './index.mjs',
96-
recursiveDependence: true
97-
},
98-
{
99-
name: '@primevue/forms',
100-
pattern: /^@primevue\/forms\/?.*/,
101-
entry: './index.mjs',
102-
recursiveDependence: true,
103-
override: {
104-
'@primeuix/forms': {
105-
entry: ''
106-
}
107-
}
108-
}
80+
{ name: 'vue', pattern: /[\\/]node_modules[\\/]vue[\\/]/ },
81+
{ name: 'primevue', pattern: /[\\/]node_modules[\\/]primevue[\\/]/ },
82+
{ name: 'vue-i18n', pattern: /[\\/]node_modules[\\/]vue-i18n[\\/]/ }
10983
]),
84+
addElementVnodeExportPlugin(),
11085

11186
Icons({
11287
compiler: 'vue3'

0 commit comments

Comments
 (0)