ets': BindingTypes.PROPS,
+ 'equal=sign': BindingTypes.PROPS,
+ 'question?mark': BindingTypes.PROPS,
+ 'at@sign': BindingTypes.PROPS,
+ 'square[brack]ets': BindingTypes.PROPS,
+ 'back\\slash': BindingTypes.PROPS,
+ 'ca^ret': BindingTypes.PROPS,
+ 'back`tick': BindingTypes.PROPS,
+ 'curly{bra}ces': BindingTypes.PROPS,
+ 'pi|pe': BindingTypes.PROPS,
+ 'til~de': BindingTypes.PROPS,
+ 'da-sh': BindingTypes.PROPS
+ })
+ })
})
diff --git a/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts b/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
index fc600f1a518..5f421708af0 100644
--- a/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
@@ -481,25 +481,28 @@ describe('resolveType', () => {
test.runIf(process.platform === 'win32')('relative ts on Windows', () => {
const files = {
- 'C:\\Test\\foo.ts': 'export type P = { foo: number }',
- 'C:\\Test\\bar.d.ts':
+ 'C:\\Test\\FolderA\\foo.ts': 'export type P = { foo: number }',
+ 'C:\\Test\\FolderA\\bar.d.ts':
'type X = { bar: string }; export { X as Y };' +
// verify that we can parse syntax that is only valid in d.ts
- 'export const baz: boolean'
+ 'export const baz: boolean',
+ 'C:\\Test\\FolderB\\buz.ts': 'export type Z = { buz: string }'
}
const { props, deps } = resolve(
`
import { P } from './foo'
import { Y as PP } from './bar'
- defineProps()
+ import { Z as PPP } from '../FolderB/buz'
+ defineProps
()
`,
files,
{},
- 'C:\\Test\\Test.vue'
+ 'C:\\Test\\FolderA\\Test.vue'
)
expect(props).toStrictEqual({
foo: ['Number'],
- bar: ['String']
+ bar: ['String'],
+ buz: ['String']
})
expect(deps && [...deps].map(normalize)).toStrictEqual(
Object.keys(files).map(normalize)
diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
index b33dabfd2ce..66fc201f547 100644
--- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
@@ -85,6 +85,16 @@ describe('SFC scoped CSS', () => {
".baz .qux[data-v-test] .foo .bar { color: red;
}"
`)
+ expect(compileScoped(`:is(.foo :deep(.bar)) { color: red; }`))
+ .toMatchInlineSnapshot(`
+ ":is(.foo[data-v-test] .bar) { color: red;
+ }"
+ `)
+ expect(compileScoped(`:where(.foo :deep(.bar)) { color: red; }`))
+ .toMatchInlineSnapshot(`
+ ":where(.foo[data-v-test] .bar) { color: red;
+ }"
+ `)
})
test('::v-slotted', () => {
diff --git a/packages/compiler-sfc/package.json b/packages/compiler-sfc/package.json
index 6a1fc8bba3a..4d55ffb0820 100644
--- a/packages/compiler-sfc/package.json
+++ b/packages/compiler-sfc/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/compiler-sfc",
- "version": "3.3.6",
+ "version": "3.3.8",
"description": "@vue/compiler-sfc",
"main": "dist/compiler-sfc.cjs.js",
"module": "dist/compiler-sfc.esm-browser.js",
@@ -32,27 +32,27 @@
},
"homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme",
"dependencies": {
- "@babel/parser": "^7.23.0",
- "@vue/compiler-core": "3.3.6",
- "@vue/compiler-dom": "3.3.6",
- "@vue/compiler-ssr": "3.3.6",
- "@vue/reactivity-transform": "3.3.6",
- "@vue/shared": "3.3.6",
+ "@babel/parser": "^7.23.3",
+ "@vue/compiler-core": "3.3.8",
+ "@vue/compiler-dom": "3.3.8",
+ "@vue/compiler-ssr": "3.3.8",
+ "@vue/reactivity-transform": "3.3.8",
+ "@vue/shared": "3.3.8",
"estree-walker": "^2.0.2",
"magic-string": "^0.30.5",
"postcss": "^8.4.31",
"source-map-js": "^1.0.2"
},
"devDependencies": {
- "@babel/types": "^7.23.0",
+ "@babel/types": "^7.23.3",
"@vue/consolidate": "^0.17.3",
"hash-sum": "^2.0.0",
- "lru-cache": "^10.0.1",
+ "lru-cache": "^10.0.2",
"merge-source-map": "^1.1.0",
"minimatch": "^9.0.3",
"postcss-modules": "^4.3.1",
"postcss-selector-parser": "^6.0.13",
"pug": "^3.0.2",
- "sass": "^1.69.4"
+ "sass": "^1.69.5"
}
}
diff --git a/packages/compiler-sfc/src/compileTemplate.ts b/packages/compiler-sfc/src/compileTemplate.ts
index fbd100c9784..b036619c794 100644
--- a/packages/compiler-sfc/src/compileTemplate.ts
+++ b/packages/compiler-sfc/src/compileTemplate.ts
@@ -212,6 +212,7 @@ function doCompileTemplate({
slotted,
sourceMap: true,
...compilerOptions,
+ hmr: !isProd,
nodeTransforms: nodeTransforms.concat(compilerOptions.nodeTransforms || []),
filename,
onError: e => errors.push(e),
diff --git a/packages/compiler-sfc/src/index.ts b/packages/compiler-sfc/src/index.ts
index 76b4900d46d..c63e302e0c3 100644
--- a/packages/compiler-sfc/src/index.ts
+++ b/packages/compiler-sfc/src/index.ts
@@ -1,13 +1,17 @@
export const version = __VERSION__
// API
-export { parse, parseCache } from './parse'
+export { parse } from './parse'
export { compileTemplate } from './compileTemplate'
export { compileStyle, compileStyleAsync } from './compileStyle'
export { compileScript } from './compileScript'
export { rewriteDefault, rewriteDefaultAST } from './rewriteDefault'
export { resolveTypeElements, inferRuntimeType } from './script/resolveType'
+import { SFCParseResult, parseCache as _parseCache } from './parse'
+// #9521 export parseCache as a simple map to avoid exposing LRU types
+export const parseCache = _parseCache as Map
+
// TODO remove in 3.4
export {
shouldTransform as shouldTransformRef,
diff --git a/packages/compiler-sfc/src/script/context.ts b/packages/compiler-sfc/src/script/context.ts
index 692eab3ab9e..b05b8d910ee 100644
--- a/packages/compiler-sfc/src/script/context.ts
+++ b/packages/compiler-sfc/src/script/context.ts
@@ -164,7 +164,7 @@ export function resolveParserPlugins(
}
if (lang === 'ts' || lang === 'tsx') {
plugins.push(['typescript', { dts }])
- if (!plugins.includes('decorators')) {
+ if (!userPlugins || !userPlugins.includes('decorators')) {
plugins.push('decorators-legacy')
}
}
diff --git a/packages/compiler-sfc/src/script/defineProps.ts b/packages/compiler-sfc/src/script/defineProps.ts
index 5004e314da1..9de15b92b76 100644
--- a/packages/compiler-sfc/src/script/defineProps.ts
+++ b/packages/compiler-sfc/src/script/defineProps.ts
@@ -17,7 +17,7 @@ import {
isCallOf,
unwrapTSNode,
toRuntimeTypeString,
- getEscapedKey
+ getEscapedPropName
} from './utils'
import { genModelProps } from './defineModel'
import { getObjectOrArrayExpressionKeys } from './analyzeScriptBindings'
@@ -135,7 +135,7 @@ export function genRuntimeProps(ctx: ScriptCompileContext): string | undefined {
const defaults: string[] = []
for (const key in ctx.propsDestructuredBindings) {
const d = genDestructuredDefaultValue(ctx, key)
- const finalKey = getEscapedKey(key)
+ const finalKey = getEscapedPropName(key)
if (d)
defaults.push(
`${finalKey}: ${d.valueString}${
@@ -251,7 +251,7 @@ function genRuntimePropFromType(
}
}
- const finalKey = getEscapedKey(key)
+ const finalKey = getEscapedPropName(key)
if (!ctx.options.isProd) {
return `${finalKey}: { ${concatStrings([
`type: ${toRuntimeTypeString(type)}`,
diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index f3c3932d829..34e95f1918b 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -4,6 +4,7 @@ import {
NodeTypes,
SimpleExpressionNode,
createRoot,
+ forAliasRE,
parserOptions,
transform,
walkIdentifiers
@@ -50,12 +51,14 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
if (!isBuiltInDirective(prop.name)) {
code += `,v${capitalize(camelize(prop.name))}`
}
+
+ // process dynamic directive arguments
if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) {
- code += `,${processExp(
- (prop.arg as SimpleExpressionNode).content,
- prop.name
+ code += `,${stripStrings(
+ (prop.arg as SimpleExpressionNode).content
)}`
}
+
if (prop.exp) {
code += `,${processExp(
(prop.exp as SimpleExpressionNode).content,
@@ -85,8 +88,6 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
return code
}
-const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
-
function processExp(exp: string, dir?: string): string {
if (/ as\s+\w|<.*>|:/.test(exp)) {
if (dir === 'slot') {
diff --git a/packages/compiler-sfc/src/script/resolveType.ts b/packages/compiler-sfc/src/script/resolveType.ts
index 215081dc0b7..898ec38fec2 100644
--- a/packages/compiler-sfc/src/script/resolveType.ts
+++ b/packages/compiler-sfc/src/script/resolveType.ts
@@ -39,8 +39,9 @@ import { parse as babelParse } from '@babel/parser'
import { parse } from '../parse'
import { createCache } from '../cache'
import type TS from 'typescript'
-import { extname, dirname } from 'path'
+import { extname, dirname, join } from 'path'
import { minimatch as isMatch } from 'minimatch'
+import * as process from 'process'
/**
* TypeResolveContext is compatible with ScriptCompileContext
@@ -334,12 +335,15 @@ function resolveInterfaceMembers(
continue
}
try {
- const { props } = resolveTypeElements(ctx, ext, scope)
+ const { props, calls } = resolveTypeElements(ctx, ext, scope)
for (const key in props) {
if (!hasOwn(base.props, key)) {
base.props[key] = props[key]
}
}
+ if (calls) {
+ ;(base.calls || (base.calls = [])).push(...calls)
+ }
} catch (e) {
ctx.error(
`Failed to resolve extends base type.\nIf this previously worked in 3.2, ` +
@@ -776,7 +780,12 @@ function importSourceToScope(
let resolved: string | undefined = scope.resolvedImportSources[source]
if (!resolved) {
- if (source.startsWith('.')) {
+ if (source.startsWith('..')) {
+ const osSpecificJoinFn = process.platform === 'win32' ? join : joinPaths
+
+ const filename = osSpecificJoinFn(dirname(scope.filename), source)
+ resolved = resolveExt(filename, fs)
+ } else if (source.startsWith('.')) {
// relative import - fast path
const filename = joinPaths(dirname(scope.filename), source)
resolved = resolveExt(filename, fs)
@@ -1391,6 +1400,7 @@ export function inferRuntimeType(
case 'WeakMap':
case 'Date':
case 'Promise':
+ case 'Error':
return [node.typeName.name]
// TS built-in utility types
diff --git a/packages/compiler-sfc/src/script/utils.ts b/packages/compiler-sfc/src/script/utils.ts
index 42c4718e3a8..8afadf63ee4 100644
--- a/packages/compiler-sfc/src/script/utils.ts
+++ b/packages/compiler-sfc/src/script/utils.ts
@@ -113,8 +113,14 @@ export const joinPaths = (path.posix || path).join
* key may contain symbols
* e.g. onUpdate:modelValue -> "onUpdate:modelValue"
*/
-export const escapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
+export const propNameEscapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~\-]/
-export function getEscapedKey(key: string) {
- return escapeSymbolsRE.test(key) ? JSON.stringify(key) : key
+export function getEscapedPropName(key: string) {
+ return propNameEscapeSymbolsRE.test(key) ? JSON.stringify(key) : key
+}
+
+export const cssVarNameEscapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
+
+export function getEscapedCssVarName(key: string) {
+ return key.replace(cssVarNameEscapeSymbolsRE, s => `\\${s}`)
}
diff --git a/packages/compiler-sfc/src/style/cssVars.ts b/packages/compiler-sfc/src/style/cssVars.ts
index 2380959b819..9fe727bc5dc 100644
--- a/packages/compiler-sfc/src/style/cssVars.ts
+++ b/packages/compiler-sfc/src/style/cssVars.ts
@@ -8,7 +8,7 @@ import {
BindingMetadata
} from '@vue/compiler-dom'
import { SFCDescriptor } from '../parse'
-import { escapeSymbolsRE } from '../script/utils'
+import { getEscapedCssVarName } from '../script/utils'
import { PluginCreator } from 'postcss'
import hash from 'hash-sum'
@@ -32,7 +32,7 @@ function genVarName(id: string, raw: string, isProd: boolean): string {
return hash(id + raw)
} else {
// escape ASCII Punctuation & Symbols
- return `${id}-${raw.replace(escapeSymbolsRE, s => `\\${s}`)}`
+ return `${id}-${getEscapedCssVarName(raw)}`
}
}
diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts
index f6e9be2fde7..5394b77743f 100644
--- a/packages/compiler-sfc/src/style/pluginScoped.ts
+++ b/packages/compiler-sfc/src/style/pluginScoped.ts
@@ -173,6 +173,11 @@ function rewriteSelector(
if (n.type !== 'pseudo' && n.type !== 'combinator') {
node = n
}
+
+ if (n.type === 'pseudo' && (n.value === ':is' || n.value === ':where')) {
+ rewriteSelector(id, n.nodes[0], selectorRoot, slotted)
+ shouldInject = false
+ }
})
if (node) {
diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
index 9391c01e37e..a8ea08a5349 100644
--- a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
@@ -181,11 +181,14 @@ describe('ssr: components', () => {
})
test('v-for slot', () => {
- expect(
- compile(`
- {{ msg + key + bar }}
- `).code
- ).toMatchInlineSnapshot(`
+ const { code } = compile(`
+ {{ msg + key + index + bar }}
+ `)
+ expect(code).not.toMatch(`_ctx.msg`)
+ expect(code).not.toMatch(`_ctx.key`)
+ expect(code).not.toMatch(`_ctx.index`)
+ expect(code).toMatch(`_ctx.bar`)
+ expect(code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
@@ -193,15 +196,15 @@ describe('ssr: components', () => {
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
- _renderList(_ctx.names, (key) => {
+ _renderList(_ctx.names, (key, index) => {
return {
name: key,
fn: _withCtx(({ msg }, _push, _parent, _scopeId) => {
if (_push) {
- _push(\`\${_ssrInterpolate(msg + key + _ctx.bar)}\`)
+ _push(\`\${_ssrInterpolate(msg + key + index + _ctx.bar)}\`)
} else {
return [
- _createTextVNode(_toDisplayString(msg + _ctx.key + _ctx.bar), 1 /* TEXT */)
+ _createTextVNode(_toDisplayString(msg + key + index + _ctx.bar), 1 /* TEXT */)
]
}
})
diff --git a/packages/compiler-ssr/__tests__/ssrTransition.spec.ts b/packages/compiler-ssr/__tests__/ssrTransition.spec.ts
new file mode 100644
index 00000000000..319b3902239
--- /dev/null
+++ b/packages/compiler-ssr/__tests__/ssrTransition.spec.ts
@@ -0,0 +1,25 @@
+import { compile } from '../src'
+
+describe('transition', () => {
+ test('basic', () => {
+ expect(compile(`foo
`).code)
+ .toMatchInlineSnapshot(`
+ "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ _push(\`foo\`)
+ }"
+ `)
+ })
+
+ test('with appear', () => {
+ expect(compile(`foo
`).code)
+ .toMatchInlineSnapshot(`
+ "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ _push(\`foo\`)
+ }"
+ `)
+ })
+})
diff --git a/packages/compiler-ssr/package.json b/packages/compiler-ssr/package.json
index dc4933349f0..6ba15970340 100644
--- a/packages/compiler-ssr/package.json
+++ b/packages/compiler-ssr/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/compiler-ssr",
- "version": "3.3.6",
+ "version": "3.3.8",
"description": "@vue/compiler-ssr",
"main": "dist/compiler-ssr.cjs.js",
"types": "dist/compiler-ssr.d.ts",
@@ -28,7 +28,7 @@
},
"homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-ssr#readme",
"dependencies": {
- "@vue/shared": "3.3.6",
- "@vue/compiler-dom": "3.3.6"
+ "@vue/shared": "3.3.8",
+ "@vue/compiler-dom": "3.3.8"
}
}
diff --git a/packages/compiler-ssr/src/index.ts b/packages/compiler-ssr/src/index.ts
index 1775af52bfc..1e5f9055064 100644
--- a/packages/compiler-ssr/src/index.ts
+++ b/packages/compiler-ssr/src/index.ts
@@ -72,7 +72,7 @@ export function compile(
// reusing core v-bind
bind: transformBind,
on: transformOn,
- // model and show has dedicated SSR handling
+ // model and show have dedicated SSR handling
model: ssrTransformModel,
show: ssrTransformShow,
// the following are ignored during SSR
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
index dc8c6a4ae4f..7a12cb29009 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -56,6 +56,10 @@ import {
} from './ssrTransformTransitionGroup'
import { isSymbol, isObject, isArray } from '@vue/shared'
import { buildSSRProps } from './ssrTransformElement'
+import {
+ ssrProcessTransition,
+ ssrTransformTransition
+} from './ssrTransformTransition'
// We need to construct the slot functions in the 1st pass to ensure proper
// scope tracking, but the children of each slot cannot be processed until
@@ -99,9 +103,10 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
if (isSymbol(component)) {
if (component === SUSPENSE) {
return ssrTransformSuspense(node, context)
- }
- if (component === TRANSITION_GROUP) {
+ } else if (component === TRANSITION_GROUP) {
return ssrTransformTransitionGroup(node, context)
+ } else if (component === TRANSITION) {
+ return ssrTransformTransition(node, context)
}
return // other built-in components: fallthrough
}
@@ -120,8 +125,10 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
// fallback in case the child is render-fn based). Store them in an array
// for later use.
if (clonedNode.children.length) {
- buildSlots(clonedNode, context, (props, children) => {
- vnodeBranches.push(createVNodeSlotBranch(props, children, context))
+ buildSlots(clonedNode, context, (props, vFor, children) => {
+ vnodeBranches.push(
+ createVNodeSlotBranch(props, vFor, children, context)
+ )
return createFunctionExpression(undefined)
})
}
@@ -145,7 +152,7 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
const wipEntries: WIPSlotEntry[] = []
wipMap.set(node, wipEntries)
- const buildSSRSlotFn: SlotFnBuilder = (props, children, loc) => {
+ const buildSSRSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) => {
const param0 = (props && stringifyExpression(props)) || `_`
const fn = createFunctionExpression(
[param0, `_push`, `_parent`, `_scopeId`],
@@ -216,9 +223,8 @@ export function ssrProcessComponent(
if ((parent as WIPSlotEntry).type === WIP_SLOT) {
context.pushStringPart(``)
}
- // #5351: filter out comment children inside transition
if (component === TRANSITION) {
- node.children = node.children.filter(c => c.type !== NodeTypes.COMMENT)
+ return ssrProcessTransition(node, context)
}
processChildren(node, context)
}
@@ -273,6 +279,7 @@ const vnodeDirectiveTransforms = {
function createVNodeSlotBranch(
props: ExpressionNode | undefined,
+ vForExp: ExpressionNode | undefined,
children: TemplateChildNode[],
parentContext: TransformContext
): ReturnStatement {
@@ -299,8 +306,8 @@ function createVNodeSlotBranch(
tag: 'template',
tagType: ElementTypes.TEMPLATE,
isSelfClosing: false,
- // important: provide v-slot="props" on the wrapper for proper
- // scope analysis
+ // important: provide v-slot="props" and v-for="exp" on the wrapper for
+ // proper scope analysis
props: [
{
type: NodeTypes.DIRECTIVE,
@@ -309,6 +316,14 @@ function createVNodeSlotBranch(
arg: undefined,
modifiers: [],
loc: locStub
+ },
+ {
+ type: NodeTypes.DIRECTIVE,
+ name: 'for',
+ exp: vForExp,
+ arg: undefined,
+ modifiers: [],
+ loc: locStub
}
],
children,
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts b/packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts
index 207e9348eef..e7efbe1fb73 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts
@@ -36,20 +36,24 @@ export function ssrTransformSuspense(
wipSlots: []
}
wipMap.set(node, wipEntry)
- wipEntry.slotsExp = buildSlots(node, context, (_props, children, loc) => {
- const fn = createFunctionExpression(
- [],
- undefined, // no return, assign body later
- true, // newline
- false, // suspense slots are not treated as normal slots
- loc
- )
- wipEntry.wipSlots.push({
- fn,
- children
- })
- return fn
- }).slots
+ wipEntry.slotsExp = buildSlots(
+ node,
+ context,
+ (_props, _vForExp, children, loc) => {
+ const fn = createFunctionExpression(
+ [],
+ undefined, // no return, assign body later
+ true, // newline
+ false, // suspense slots are not treated as normal slots
+ loc
+ )
+ wipEntry.wipSlots.push({
+ fn,
+ children
+ })
+ return fn
+ }
+ ).slots
}
}
}
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTransition.ts b/packages/compiler-ssr/src/transforms/ssrTransformTransition.ts
new file mode 100644
index 00000000000..d09a806f7b0
--- /dev/null
+++ b/packages/compiler-ssr/src/transforms/ssrTransformTransition.ts
@@ -0,0 +1,36 @@
+import {
+ ComponentNode,
+ findProp,
+ NodeTypes,
+ TransformContext
+} from '@vue/compiler-dom'
+import { processChildren, SSRTransformContext } from '../ssrCodegenTransform'
+
+const wipMap = new WeakMap()
+
+export function ssrTransformTransition(
+ node: ComponentNode,
+ context: TransformContext
+) {
+ return () => {
+ const appear = findProp(node, 'appear', false, true)
+ wipMap.set(node, !!appear)
+ }
+}
+
+export function ssrProcessTransition(
+ node: ComponentNode,
+ context: SSRTransformContext
+) {
+ // #5351: filter out comment children inside transition
+ node.children = node.children.filter(c => c.type !== NodeTypes.COMMENT)
+
+ const appear = wipMap.get(node)
+ if (appear) {
+ context.pushStringPart(``)
+ processChildren(node, context, false, true)
+ context.pushStringPart(``)
+ } else {
+ processChildren(node, context, false, true)
+ }
+}
diff --git a/packages/dts-built-test/README.md b/packages/dts-built-test/README.md
new file mode 100644
index 00000000000..8191d66e32e
--- /dev/null
+++ b/packages/dts-built-test/README.md
@@ -0,0 +1,5 @@
+# dts built-package test
+
+This package is private and for testing only. It is used to verify edge cases for external libraries that build their types using Vue core types - e.g. Vuetify as in [#8376](https://github.com/vuejs/core/issues/8376).
+
+When running the `build-dts` task, this package's types are built alongside other packages. Then, during `test-dts-only` it is imported and used in [`packages/dts-test/built.test-d.ts`](https://github.com/vuejs/core/blob/main/packages/dts-test/built.test-d.ts) to verify that the built types work correctly.
diff --git a/packages/dts-built-test/package.json b/packages/dts-built-test/package.json
new file mode 100644
index 00000000000..427bd9c0c4b
--- /dev/null
+++ b/packages/dts-built-test/package.json
@@ -0,0 +1,11 @@
+{
+ "name": "@vue/dts-built-test",
+ "private": true,
+ "types": "dist/dts-built-test.d.ts",
+ "dependencies": {
+ "@vue/shared": "workspace:*",
+ "@vue/reactivity": "workspace:*",
+ "vue": "workspace:*"
+ },
+ "version": "3.3.8"
+}
diff --git a/packages/dts-built-test/src/index.ts b/packages/dts-built-test/src/index.ts
new file mode 100644
index 00000000000..2d9d4033254
--- /dev/null
+++ b/packages/dts-built-test/src/index.ts
@@ -0,0 +1,12 @@
+import { defineComponent } from 'vue'
+
+const _CustomPropsNotErased = defineComponent({
+ props: {},
+ setup() {}
+})
+
+// #8376
+export const CustomPropsNotErased =
+ _CustomPropsNotErased as typeof _CustomPropsNotErased & {
+ foo: string
+ }
diff --git a/packages/dts-test/built.test-d.ts b/packages/dts-test/built.test-d.ts
new file mode 100644
index 00000000000..8ac3e333f99
--- /dev/null
+++ b/packages/dts-test/built.test-d.ts
@@ -0,0 +1,13 @@
+import { CustomPropsNotErased } from '@vue/dts-built-test'
+import { expectType, describe } from './utils'
+
+declare module 'vue' {
+ interface ComponentCustomProps {
+ custom?: number
+ }
+}
+
+// #8376 - custom props should not be erased
+describe('Custom Props not erased', () => {
+ expectType(new CustomPropsNotErased().$props.custom)
+})
diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index abb1d592e89..f19121c77fe 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -1476,6 +1476,31 @@ describe('slots', () => {
expectType(new comp2().$slots)
})
+// #5885
+describe('should work when props type is incompatible with setup returned type ', () => {
+ type SizeType = 'small' | 'big'
+ const Comp = defineComponent({
+ props: {
+ size: {
+ type: String as PropType,
+ required: true
+ }
+ },
+ setup(props) {
+ expectType(props.size)
+ return {
+ size: 1
+ }
+ }
+ })
+ type CompInstance = InstanceType
+
+ const CompA = {} as CompInstance
+ expectType(CompA)
+ expectType(CompA.size)
+ expectType(CompA.$props.size)
+})
+
// #3367 expose components types
describe('expose component types', () => {
const child = defineComponent({
diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts
index 4e7cf228372..f4f238641db 100644
--- a/packages/dts-test/defineCustomElement.test-d.ts
+++ b/packages/dts-test/defineCustomElement.test-d.ts
@@ -1,5 +1,9 @@
-import { defineCustomElement } from 'vue'
-import { expectType, describe } from './utils'
+import {
+ defineCustomElement,
+ defineComponent,
+ type VueElementConstructor
+} from 'vue'
+import { expectType, describe, test } from './utils'
describe('inject', () => {
// with object inject
@@ -62,3 +66,20 @@ describe('inject', () => {
}
})
})
+
+describe('defineCustomElement using defineComponent return type', () => {
+ test('with emits', () => {
+ const Comp1Vue = defineComponent({
+ props: {
+ a: String
+ },
+ emits: {
+ click: () => true
+ }
+ })
+ const Comp = defineCustomElement(Comp1Vue)
+ expectType(Comp)
+
+ expectType(new Comp().a)
+ })
+})
diff --git a/packages/dts-test/h.test-d.ts b/packages/dts-test/h.test-d.ts
index 5c700800e94..f2e984b49b8 100644
--- a/packages/dts-test/h.test-d.ts
+++ b/packages/dts-test/h.test-d.ts
@@ -1,6 +1,7 @@
import {
h,
defineComponent,
+ DefineComponent,
ref,
Fragment,
Teleport,
@@ -231,3 +232,18 @@ describe('resolveComponent should work', () => {
message: '1'
})
})
+
+// #5431
+describe('h should work with multiple types', () => {
+ const serializers = {
+ Paragraph: 'p',
+ Component: {} as Component,
+ DefineComponent: {} as DefineComponent
+ }
+
+ const sampleComponent = serializers['' as keyof typeof serializers]
+
+ h(sampleComponent)
+ h(sampleComponent, {})
+ h(sampleComponent, {}, [])
+})
diff --git a/packages/dts-test/package.json b/packages/dts-test/package.json
index da8424e254c..07710bcc8d5 100644
--- a/packages/dts-test/package.json
+++ b/packages/dts-test/package.json
@@ -2,7 +2,8 @@
"name": "dts-test",
"private": true,
"dependencies": {
- "vue": "workspace:*"
+ "vue": "workspace:*",
+ "@vue/dts-built-test": "workspace:*"
},
- "version": "3.3.6"
+ "version": "3.3.8"
}
diff --git a/packages/dts-test/ref.test-d.ts b/packages/dts-test/ref.test-d.ts
index bbcde45ddda..542d9d6a9ef 100644
--- a/packages/dts-test/ref.test-d.ts
+++ b/packages/dts-test/ref.test-d.ts
@@ -15,9 +15,10 @@ import {
MaybeRef,
MaybeRefOrGetter,
ComputedRef,
- computed
+ computed,
+ ShallowRef
} from 'vue'
-import { expectType, describe } from './utils'
+import { expectType, describe, IsUnion } from './utils'
function plainType(arg: number | Ref) {
// ref coercing
@@ -174,6 +175,27 @@ if (refStatus.value === 'initial') {
refStatus.value = 'invalidating'
}
+{
+ const shallow = shallowRef(1)
+ expectType>(shallow)
+ expectType>(shallow)
+}
+
+{
+ //#7852
+ type Steps = { step: '1' } | { step: '2' }
+ const shallowUnionGenParam = shallowRef({ step: '1' })
+ const shallowUnionAsCast = shallowRef({ step: '1' } as Steps)
+
+ expectType>(false)
+ expectType>(false)
+}
+
+describe('shallowRef with generic', () => {
+ const r = ref({}) as MaybeRef
+ expectType | Ref>(shallowRef(r))
+})
+
// proxyRefs: should return `reactive` directly
const r1 = reactive({
k: 'v'
diff --git a/packages/dts-test/setupHelpers.test-d.ts b/packages/dts-test/setupHelpers.test-d.ts
index feb4085dea0..51f95c00944 100644
--- a/packages/dts-test/setupHelpers.test-d.ts
+++ b/packages/dts-test/setupHelpers.test-d.ts
@@ -8,7 +8,8 @@ import {
defineSlots,
VNode,
Ref,
- defineModel
+ defineModel,
+ toRefs
} from 'vue'
import { describe, expectType } from './utils'
import { defineComponent } from 'vue'
@@ -20,6 +21,7 @@ describe('defineProps w/ type declaration', () => {
foo: string
bool?: boolean
boolAndUndefined: boolean | undefined
+ file?: File | File[]
}>()
// explicitly declared type should be refined
expectType(props.foo)
@@ -108,6 +110,7 @@ describe('defineProps w/ generic type declaration + withDefaults', (res.generic1)
expectType<{ x: T }>(res.generic2)
@@ -328,3 +335,11 @@ describe('useSlots', () => {
const slots = useSlots()
expectType(slots)
})
+
+// #6420
+describe('toRefs w/ type declaration', () => {
+ const props = defineProps<{
+ file?: File | File[]
+ }>()
+ expectType>(toRefs(props).file)
+})
diff --git a/packages/dts-test/tsx.test-d.tsx b/packages/dts-test/tsx.test-d.tsx
index 04915a9673f..4b4a0dbf9df 100644
--- a/packages/dts-test/tsx.test-d.tsx
+++ b/packages/dts-test/tsx.test-d.tsx
@@ -17,6 +17,59 @@ expectType(
)
+// allow undefined, string, object, array and nested array classes
+expectType()
+expectType()
+expectType()
+expectType()
+expectType()
+expectType()
+expectType()
+expectType(
+
+)
+expectType(
+
+)
+expectType(
+
+)
+
+// #7955
+expectType()
+
+expectType()
+
+expectType()
+
+expectType()
+
+expectType()
+
+// @ts-expect-error
+;
+
+// @ts-expect-error
+;
+
// @ts-expect-error unknown prop
;
diff --git a/packages/dts-test/watch.test-d.ts b/packages/dts-test/watch.test-d.ts
index 9d727999bcc..cc631d37acb 100644
--- a/packages/dts-test/watch.test-d.ts
+++ b/packages/dts-test/watch.test-d.ts
@@ -1,4 +1,4 @@
-import { ref, computed, watch, defineComponent } from 'vue'
+import { ref, computed, watch, defineComponent, shallowRef } from 'vue'
import { expectType } from './utils'
const source = ref('foo')
@@ -92,3 +92,17 @@ defineComponent({
)
}
})
+
+{
+ //#7852
+ type Steps = { step: '1' } | { step: '2' }
+ const shallowUnionGenParam = shallowRef({ step: '1' })
+ const shallowUnionAsCast = shallowRef({ step: '1' } as Steps)
+
+ watch(shallowUnionGenParam, value => {
+ expectType(value)
+ })
+ watch(shallowUnionAsCast, value => {
+ expectType(value)
+ })
+}
diff --git a/packages/reactivity-transform/package.json b/packages/reactivity-transform/package.json
index 887fedabc6e..48749f0bb31 100644
--- a/packages/reactivity-transform/package.json
+++ b/packages/reactivity-transform/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/reactivity-transform",
- "version": "3.3.6",
+ "version": "3.3.8",
"description": "@vue/reactivity-transform",
"main": "dist/reactivity-transform.cjs.js",
"files": [
@@ -28,14 +28,14 @@
},
"homepage": "https://github.com/vuejs/core/tree/dev/packages/reactivity-transform#readme",
"dependencies": {
- "@babel/parser": "^7.23.0",
- "@vue/compiler-core": "3.3.6",
- "@vue/shared": "3.3.6",
+ "@babel/parser": "^7.23.3",
+ "@vue/compiler-core": "3.3.8",
+ "@vue/shared": "3.3.8",
"estree-walker": "^2.0.2",
"magic-string": "^0.30.5"
},
"devDependencies": {
- "@babel/core": "^7.23.2",
- "@babel/types": "^7.23.0"
+ "@babel/core": "^7.23.3",
+ "@babel/types": "^7.23.3"
}
}
diff --git a/packages/reactivity/__tests__/readonly.spec.ts b/packages/reactivity/__tests__/readonly.spec.ts
index d0c91f0fb9f..448419d3176 100644
--- a/packages/reactivity/__tests__/readonly.spec.ts
+++ b/packages/reactivity/__tests__/readonly.spec.ts
@@ -275,6 +275,14 @@ describe('reactivity/readonly', () => {
expect(isReactive(value)).toBe(true)
}
})
+
+ test('should return undefined from Map.clear() call', () => {
+ const wrapped = readonly(new Collection())
+ expect(wrapped.clear()).toBeUndefined()
+ expect(
+ `Clear operation failed: target is readonly.`
+ ).toHaveBeenWarned()
+ })
}
})
})
@@ -332,6 +340,14 @@ describe('reactivity/readonly', () => {
expect(isReadonly(v2)).toBe(true)
}
})
+
+ test('should return undefined from Set.clear() call', () => {
+ const wrapped = readonly(new Collection())
+ expect(wrapped.clear()).toBeUndefined()
+ expect(
+ `Clear operation failed: target is readonly.`
+ ).toHaveBeenWarned()
+ })
}
})
})
diff --git a/packages/reactivity/__tests__/shallowReadonly.spec.ts b/packages/reactivity/__tests__/shallowReadonly.spec.ts
index 79d4376cc01..b6736f4a595 100644
--- a/packages/reactivity/__tests__/shallowReadonly.spec.ts
+++ b/packages/reactivity/__tests__/shallowReadonly.spec.ts
@@ -113,6 +113,12 @@ describe('reactivity/shallowReadonly', () => {
).not.toHaveBeenWarned()
})
})
+
+ test('should return undefined from Map.clear() call', () => {
+ const sroMap = shallowReadonly(new Map())
+ expect(sroMap.clear()).toBeUndefined()
+ expect(`Clear operation failed: target is readonly.`).toHaveBeenWarned()
+ })
})
describe('collection/Set', () => {
@@ -197,5 +203,11 @@ describe('reactivity/shallowReadonly', () => {
).not.toHaveBeenWarned()
})
})
+
+ test('should return undefined from Set.clear() call', () => {
+ const sroSet = shallowReadonly(new Set())
+ expect(sroSet.clear()).toBeUndefined()
+ expect(`Clear operation failed: target is readonly.`).toHaveBeenWarned()
+ })
})
})
diff --git a/packages/reactivity/package.json b/packages/reactivity/package.json
index ac49b4ec7d2..6582c7683b7 100644
--- a/packages/reactivity/package.json
+++ b/packages/reactivity/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/reactivity",
- "version": "3.3.6",
+ "version": "3.3.8",
"description": "@vue/reactivity",
"main": "index.js",
"module": "dist/reactivity.esm-bundler.js",
@@ -36,6 +36,6 @@
},
"homepage": "https://github.com/vuejs/core/tree/main/packages/reactivity#readme",
"dependencies": {
- "@vue/shared": "3.3.6"
+ "@vue/shared": "3.3.8"
}
}
diff --git a/packages/reactivity/src/collectionHandlers.ts b/packages/reactivity/src/collectionHandlers.ts
index 1d07af3be8c..fe7d13d1841 100644
--- a/packages/reactivity/src/collectionHandlers.ts
+++ b/packages/reactivity/src/collectionHandlers.ts
@@ -223,7 +223,11 @@ function createReadonlyMethod(type: TriggerOpTypes): Function {
toRaw(this)
)
}
- return type === TriggerOpTypes.DELETE ? false : this
+ return type === TriggerOpTypes.DELETE
+ ? false
+ : type === TriggerOpTypes.CLEAR
+ ? undefined
+ : this
}
}
diff --git a/packages/reactivity/src/ref.ts b/packages/reactivity/src/ref.ts
index 915f5760878..61e0bf6c13d 100644
--- a/packages/reactivity/src/ref.ts
+++ b/packages/reactivity/src/ref.ts
@@ -1,3 +1,4 @@
+import type { ComputedRef } from './computed'
import {
activeEffect,
getDepFromReactive,
@@ -115,9 +116,8 @@ export type ShallowRef = Ref & { [ShallowRefMarker]?: true }
* @param value - The "inner value" for the shallow ref.
* @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowref}
*/
-export function shallowRef(
- value: T
-): T extends Ref ? T : ShallowRef
+export function shallowRef(value: MaybeRef): Ref | ShallowRef
+export function shallowRef(value: T): T
export function shallowRef(value: T): ShallowRef
export function shallowRef(): ShallowRef
export function shallowRef(value?: unknown) {
@@ -211,7 +211,7 @@ export type MaybeRefOrGetter = MaybeRef | (() => T)
* @param ref - Ref or plain value to be converted into the plain value.
* @see {@link https://vuejs.org/api/reactivity-utilities.html#unref}
*/
-export function unref(ref: MaybeRef): T {
+export function unref(ref: MaybeRef | ComputedRef): T {
return isRef(ref) ? ref.value : ref
}
@@ -231,7 +231,7 @@ export function unref(ref: MaybeRef): T {
* @param source - A getter, an existing ref, or a non-function value.
* @see {@link https://vuejs.org/api/reactivity-utilities.html#tovalue}
*/
-export function toValue(source: MaybeRefOrGetter): T {
+export function toValue(source: MaybeRefOrGetter | ComputedRef): T {
return isFunction(source) ? source() : unref(source)
}
diff --git a/packages/runtime-core/__tests__/apiOptions.spec.ts b/packages/runtime-core/__tests__/apiOptions.spec.ts
index ca712e0d3ac..94f9db1b028 100644
--- a/packages/runtime-core/__tests__/apiOptions.spec.ts
+++ b/packages/runtime-core/__tests__/apiOptions.spec.ts
@@ -1,7 +1,7 @@
/**
* @vitest-environment jsdom
*/
-import { vi, type Mock } from 'vitest'
+import { type Mock } from 'vitest'
import {
h,
nodeOps,
diff --git a/packages/runtime-core/__tests__/apiWatch.spec.ts b/packages/runtime-core/__tests__/apiWatch.spec.ts
index f24ce80b9df..48fdd2888ec 100644
--- a/packages/runtime-core/__tests__/apiWatch.spec.ts
+++ b/packages/runtime-core/__tests__/apiWatch.spec.ts
@@ -91,7 +91,7 @@ describe('api: watch', () => {
array.push(1)
await nextTick()
expect(spy).toBeCalledTimes(1)
- expect(spy).toBeCalledWith([1], expect.anything(), expect.anything())
+ expect(spy).toBeCalledWith([1], [1], expect.anything())
})
it('should not fire if watched getter result did not change', async () => {
@@ -1205,4 +1205,39 @@ describe('api: watch', () => {
expect(countWE).toBe(3)
expect(countW).toBe(2)
})
+
+ // #5151
+ test('OnCleanup also needs to be cleaned，', async () => {
+ const spy1 = vi.fn()
+ const spy2 = vi.fn()
+ const num = ref(0)
+
+ watch(num, (value, oldValue, onCleanup) => {
+ if (value > 1) {
+ return
+ }
+ spy1()
+ onCleanup(() => {
+ // OnCleanup also needs to be cleaned
+ spy2()
+ })
+ })
+
+ num.value++
+ await nextTick()
+ expect(spy1).toHaveBeenCalledTimes(1)
+ expect(spy2).toHaveBeenCalledTimes(0)
+
+ num.value++
+ await nextTick()
+
+ expect(spy1).toHaveBeenCalledTimes(1)
+ expect(spy2).toHaveBeenCalledTimes(1)
+
+ num.value++
+ await nextTick()
+ // would not be calld when value>1
+ expect(spy1).toHaveBeenCalledTimes(1)
+ expect(spy2).toHaveBeenCalledTimes(1)
+ })
})
diff --git a/packages/runtime-core/__tests__/componentProps.spec.ts b/packages/runtime-core/__tests__/componentProps.spec.ts
index 89112f2ad49..885e80090a1 100644
--- a/packages/runtime-core/__tests__/componentProps.spec.ts
+++ b/packages/runtime-core/__tests__/componentProps.spec.ts
@@ -336,7 +336,8 @@ describe('component props', () => {
obj: { type: Object },
cls: { type: MyClass },
fn: { type: Function },
- skipCheck: { type: [Boolean, Function], skipCheck: true }
+ skipCheck: { type: [Boolean, Function], skipCheck: true },
+ empty: { type: [] }
},
setup() {
return () => null
@@ -351,7 +352,8 @@ describe('component props', () => {
obj: 'false',
cls: {},
fn: true,
- skipCheck: 'foo'
+ skipCheck: 'foo',
+ empty: [1, 2, 3]
}),
nodeOps.createElement('div')
)
@@ -379,6 +381,9 @@ describe('component props', () => {
expect(
`Invalid prop: type check failed for prop "skipCheck". Expected Boolean | Function, got String with value "foo".`
).not.toHaveBeenWarned()
+ expect(
+ `Prop type [] for prop "empty" won't match anything. Did you mean to use type Array instead?`
+ ).toHaveBeenWarned()
})
// #3495
diff --git a/packages/runtime-core/__tests__/components/Suspense.spec.ts b/packages/runtime-core/__tests__/components/Suspense.spec.ts
index 065898048c3..d822a992816 100644
--- a/packages/runtime-core/__tests__/components/Suspense.spec.ts
+++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts
@@ -17,9 +17,12 @@ import {
onUnmounted,
onErrorCaptured,
shallowRef,
+ SuspenseProps,
+ resolveDynamicComponent,
Fragment
} from '@vue/runtime-test'
import { createApp, defineComponent } from 'vue'
+import { type RawSlots } from 'packages/runtime-core/src/componentSlots'
describe('Suspense', () => {
const deps: Promise[] = []
@@ -1523,4 +1526,75 @@ describe('Suspense', () => {
expected = `outerB
innerB
`
expect(serializeInner(root)).toBe(expected)
})
+
+ describe('warnings', () => {
+ // base function to check if a combination of slots warns or not
+ function baseCheckWarn(
+ shouldWarn: boolean,
+ children: RawSlots,
+ props: SuspenseProps | null = null
+ ) {
+ const Comp = {
+ setup() {
+ return () => h(Suspense, props, children)
+ }
+ }
+
+ const root = nodeOps.createElement('div')
+ render(h(Comp), root)
+
+ if (shouldWarn) {
+ expect(` slots expect a single root node.`).toHaveBeenWarned()
+ } else {
+ expect(
+ ` slots expect a single root node.`
+ ).not.toHaveBeenWarned()
+ }
+ }
+
+ // actual function that we use in tests
+ const checkWarn = baseCheckWarn.bind(null, true)
+ const checkNoWarn = baseCheckWarn.bind(null, false)
+
+ test('does not warn on single child', async () => {
+ checkNoWarn({
+ default: h('div'),
+ fallback: h('div')
+ })
+ })
+
+ test('does not warn on null', async () => {
+ checkNoWarn({
+ default: null,
+ fallback: null
+ })
+ })
+
+ test('does not warn on ', async () => {
+ checkNoWarn({
+ default: () => [resolveDynamicComponent(null)],
+ fallback: () => null
+ })
+ })
+
+ test('does not warn on empty array', async () => {
+ checkNoWarn({
+ default: [],
+ fallback: () => []
+ })
+ })
+
+ test('warns on multiple children in default', async () => {
+ checkWarn({
+ default: [h('div'), h('div')]
+ })
+ })
+
+ test('warns on multiple children in fallback', async () => {
+ checkWarn({
+ default: h('div'),
+ fallback: [h('div'), h('div')]
+ })
+ })
+ })
})
diff --git a/packages/runtime-core/__tests__/hmr.spec.ts b/packages/runtime-core/__tests__/hmr.spec.ts
index db713a3f276..a5ec90ad7d3 100644
--- a/packages/runtime-core/__tests__/hmr.spec.ts
+++ b/packages/runtime-core/__tests__/hmr.spec.ts
@@ -20,7 +20,7 @@ const { createRecord, rerender, reload } = __VUE_HMR_RUNTIME__
registerRuntimeCompiler(compileToFunction)
function compileToFunction(template: string) {
- const { code } = baseCompile(template)
+ const { code } = baseCompile(template, { hoistStatic: true, hmr: true })
const render = new Function('Vue', code)(
runtimeTest
) as InternalRenderFunction
@@ -218,6 +218,75 @@ describe('hot module replacement', () => {
expect(deactiveSpy).toHaveBeenCalledTimes(1)
})
+ // #7121
+ test('reload KeepAlive slot in Transition', async () => {
+ const root = nodeOps.createElement('div')
+ const childId = 'test-transition-keep-alive-reload'
+ const unmountSpy = vi.fn()
+ const mountSpy = vi.fn()
+ const activeSpy = vi.fn()
+ const deactiveSpy = vi.fn()
+
+ const Child: ComponentOptions = {
+ __hmrId: childId,
+ data() {
+ return { count: 0 }
+ },
+ unmounted: unmountSpy,
+ render: compileToFunction(`{{ count }}
`)
+ }
+ createRecord(childId, Child)
+
+ const Parent: ComponentOptions = {
+ components: { Child },
+ data() {
+ return { toggle: true }
+ },
+ render: compileToFunction(
+ ``
+ )
+ }
+
+ render(h(Parent), root)
+ expect(serializeInner(root)).toBe(`0
`)
+
+ reload(childId, {
+ __hmrId: childId,
+ data() {
+ return { count: 1 }
+ },
+ mounted: mountSpy,
+ unmounted: unmountSpy,
+ activated: activeSpy,
+ deactivated: deactiveSpy,
+ render: compileToFunction(`{{ count }}
`)
+ })
+ await nextTick()
+ expect(serializeInner(root)).toBe(`1
`)
+ expect(unmountSpy).toHaveBeenCalledTimes(1)
+ expect(mountSpy).toHaveBeenCalledTimes(1)
+ expect(activeSpy).toHaveBeenCalledTimes(1)
+ expect(deactiveSpy).toHaveBeenCalledTimes(0)
+
+ // should not unmount when toggling
+ triggerEvent(root.children[1] as TestElement, 'click')
+ await nextTick()
+ expect(serializeInner(root)).toBe(``)
+ expect(unmountSpy).toHaveBeenCalledTimes(1)
+ expect(mountSpy).toHaveBeenCalledTimes(1)
+ expect(activeSpy).toHaveBeenCalledTimes(1)
+ expect(deactiveSpy).toHaveBeenCalledTimes(1)
+
+ // should not mount when toggling
+ triggerEvent(root.children[1] as TestElement, 'click')
+ await nextTick()
+ expect(serializeInner(root)).toBe(`1
`)
+ expect(unmountSpy).toHaveBeenCalledTimes(1)
+ expect(mountSpy).toHaveBeenCalledTimes(1)
+ expect(activeSpy).toHaveBeenCalledTimes(2)
+ expect(deactiveSpy).toHaveBeenCalledTimes(1)
+ })
+
test('reload class component', async () => {
const root = nodeOps.createElement('div')
const childId = 'test4-child'
@@ -567,4 +636,40 @@ describe('hot module replacement', () => {
rerender(parentId, compileToFunction(`2`))
expect(serializeInner(root)).toBe(`2`)
})
+
+ // #6978, #7138, #7114
+ test('hoisted children array inside v-for', () => {
+ const root = nodeOps.createElement('div')
+ const appId = 'test-app-id'
+ const App: ComponentOptions = {
+ __hmrId: appId,
+ render: compileToFunction(
+ `
+ 2
+ 3
`
+ )
+ }
+ createRecord(appId, App)
+
+ render(h(App), root)
+ expect(serializeInner(root)).toBe(
+ `2
3
`
+ )
+
+ // move the 3
into the 1
+ rerender(
+ appId,
+ compileToFunction(
+ `
+ 2
`
+ )
+ )
+ expect(serializeInner(root)).toBe(
+ `2
`
+ )
+ })
})
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index f0a3a9333a7..7ea607d3380 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -18,10 +18,14 @@ import {
createVNode,
withDirectives,
vModelCheckbox,
- renderSlot
+ renderSlot,
+ Transition,
+ createCommentVNode,
+ vShow
} from '@vue/runtime-dom'
import { renderToString, SSRContext } from '@vue/server-renderer'
-import { PatchFlags } from '../../shared/src'
+import { PatchFlags } from '@vue/shared'
+import { vShowOldKey } from '../../runtime-dom/src/directives/vShow'
function mountWithHydration(html: string, render: () => any) {
const container = document.createElement('div')
@@ -931,6 +935,18 @@ describe('SSR hydration', () => {
)
})
+ test('force hydrate prop with `.prop` modifier', () => {
+ const { container } = mountWithHydration(
+ '',
+ () =>
+ h('input', {
+ type: 'checkbox',
+ '.indeterminate': true
+ })
+ )
+ expect((container.firstChild! as any).indeterminate).toBe(true)
+ })
+
test('force hydrate input v-model with non-string value bindings', () => {
const { container } = mountWithHydration(
'',
@@ -949,6 +965,20 @@ describe('SSR hydration', () => {
expect((container.firstChild as any)._trueValue).toBe(true)
})
+ test('force hydrate checkbox with indeterminate', () => {
+ const { container } = mountWithHydration(
+ '',
+ () =>
+ createVNode(
+ 'input',
+ { type: 'checkbox', indeterminate: '' },
+ null,
+ PatchFlags.HOISTED
+ )
+ )
+ expect((container.firstChild as any).indeterminate).toBe(true)
+ })
+
test('force hydrate select option with non-string value bindings', () => {
const { container } = mountWithHydration(
'',
@@ -1016,6 +1046,74 @@ describe('SSR hydration', () => {
expect(`mismatch`).not.toHaveBeenWarned()
})
+ test('transition appear', () => {
+ const { vnode, container } = mountWithHydration(
+ `foo
`,
+ () =>
+ h(
+ Transition,
+ { appear: true },
+ {
+ default: () => h('div', 'foo')
+ }
+ )
+ )
+ expect(container.firstChild).toMatchInlineSnapshot(`
+
+ foo
+
+ `)
+ expect(vnode.el).toBe(container.firstChild)
+ expect(`mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('transition appear with v-if', () => {
+ const show = false
+ const { vnode, container } = mountWithHydration(
+ ``,
+ () =>
+ h(
+ Transition,
+ { appear: true },
+ {
+ default: () => (show ? h('div', 'foo') : createCommentVNode(''))
+ }
+ )
+ )
+ expect(container.firstChild).toMatchInlineSnapshot('')
+ expect(vnode.el).toBe(container.firstChild)
+ expect(`mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('transition appear with v-show', () => {
+ const show = false
+ const { vnode, container } = mountWithHydration(
+ `foo
`,
+ () =>
+ h(
+ Transition,
+ { appear: true },
+ {
+ default: () =>
+ withDirectives(createVNode('div', null, 'foo'), [[vShow, show]])
+ }
+ )
+ )
+ expect(container.firstChild).toMatchInlineSnapshot(`
+
+ foo
+
+ `)
+ expect((container.firstChild as any)[vShowOldKey]).toBe('')
+ expect(vnode.el).toBe(container.firstChild)
+ expect(`mismatch`).not.toHaveBeenWarned()
+ })
+
describe('mismatch handling', () => {
test('text node', () => {
const { container } = mountWithHydration(`foo`, () => 'bar')
@@ -1105,5 +1203,21 @@ describe('SSR hydration', () => {
expect(teleportContainer.innerHTML).toBe(`value`)
expect(`Hydration children mismatch`).toHaveBeenWarned()
})
+
+ test('comment mismatch (element)', () => {
+ const { container } = mountWithHydration(`
`, () =>
+ h('div', [createCommentVNode('hi')])
+ )
+ expect(container.innerHTML).toBe('')
+ expect(`Hydration node mismatch`).toHaveBeenWarned()
+ })
+
+ test('comment mismatch (text)', () => {
+ const { container } = mountWithHydration(`foobar
`, () =>
+ h('div', [createCommentVNode('hi')])
+ )
+ expect(container.innerHTML).toBe('')
+ expect(`Hydration node mismatch`).toHaveBeenWarned()
+ })
})
})
diff --git a/packages/runtime-core/__tests__/rendererComponent.spec.ts b/packages/runtime-core/__tests__/rendererComponent.spec.ts
index 6f1d0288b21..37daafa9725 100644
--- a/packages/runtime-core/__tests__/rendererComponent.spec.ts
+++ b/packages/runtime-core/__tests__/rendererComponent.spec.ts
@@ -354,4 +354,25 @@ describe('renderer: component', () => {
expect(serializeInner(root)).toBe(`1
`)
expect(spy).toHaveBeenCalledTimes(2)
})
+
+ it('should warn accessing `this` in a
+ 