35 lines
2.3 KiB
TypeScript
35 lines
2.3 KiB
TypeScript
import { defineConfig, type Plugin } from 'vite'
|
|
import vue from '@vitejs/plugin-vue'
|
|
import tailwindcss from '@tailwindcss/vite'
|
|
|
|
const GUARD_MARKER = '[dodo:vue-guard]'
|
|
|
|
// vuejs/core#5184/#8146: a stale component vnode that never mounted (component === null)
|
|
// reaches processComponent -> updateComponent -> shouldUpdateComponent and crashes on
|
|
// `component.emitsOptions`. Detect it here and self-heal with a clean remount instead,
|
|
// logging the component pair so the next production occurrence names itself in console.
|
|
function vueNullComponentGuard(): Plugin {
|
|
return {
|
|
name: 'dodo:vue-null-component-guard',
|
|
enforce: 'pre',
|
|
transform(code, id) {
|
|
if (!id.includes('runtime-core.esm-bundler.js')) return null
|
|
const header = code.indexOf('const processComponent = ')
|
|
if (header < 0) throw new Error(`${GUARD_MARKER} processComponent not found in runtime-core — Vue internals changed, update the guard anchor`)
|
|
const anchor = code.indexOf('if (n1 == null) {', header)
|
|
if (anchor < 0 || anchor - header > 400) throw new Error(`${GUARD_MARKER} mount-branch anchor not found — update the guard anchor`)
|
|
if (code.slice(header, anchor).includes(GUARD_MARKER)) return null
|
|
const inject = `if (n1 != null && n1.component == null) {\n try { const nm = (x) => (x && (x.name || x.__name)) || (typeof x === "string" ? x : typeof x === "symbol" ? (x.description || "symbol") : "?"); console.error("${GUARD_MARKER} never-mounted component vnode — self-healing remount", { oldType: nm(n1.type), newType: nm(n2.type), oldKey: n1.key, newKey: n2.key, el: !!n1.el, oldChildren: Array.isArray(n1.children) ? n1.children.map((c) => nm(c.type)) : String(n1.children).slice(0, 60) }); } catch (e) {}\n n1 = null;\n }\n `
|
|
return { code: code.slice(0, anchor) + inject + code.slice(anchor), map: null }
|
|
},
|
|
}
|
|
}
|
|
|
|
export default defineConfig({
|
|
plugins: [vue(), tailwindcss(), vueNullComponentGuard()],
|
|
// Serve vue through the normal transform pipeline so the guard applies in dev too.
|
|
optimizeDeps: { exclude: ['vue', '@vue/runtime-dom', '@vue/runtime-core', '@vue/reactivity', '@vue/shared'] },
|
|
server: { proxy: { '/api': 'http://localhost:8781', '/health': 'http://localhost:8781' } },
|
|
test: { environment: 'jsdom', setupFiles: ['./vitest.setup.ts'] },
|
|
})
|