>()
+ `,
+ files
+ )
+ expect(props).toStrictEqual({
+ foo: ['String']
+ })
+ })
+ })
+
describe('external type imports', () => {
test('relative ts', () => {
const files = {
@@ -478,6 +561,36 @@ describe('resolveType', () => {
expect(deps && [...deps]).toStrictEqual(Object.keys(files))
})
+ test.runIf(process.platform === 'win32')('relative ts on Windows', () => {
+ const files = {
+ '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',
+ 'C:\\Test\\FolderB\\buz.ts': 'export type Z = { buz: string }'
+ }
+ const { props, deps } = resolve(
+ `
+ import { P } from './foo'
+ import { Y as PP } from './bar'
+ import { Z as PPP } from '../FolderB/buz'
+ defineProps()
+ `,
+ files,
+ {},
+ 'C:\\Test\\FolderA\\Test.vue'
+ )
+ expect(props).toStrictEqual({
+ foo: ['Number'],
+ bar: ['String'],
+ buz: ['String']
+ })
+ expect(deps && [...deps].map(normalize)).toStrictEqual(
+ Object.keys(files).map(normalize)
+ )
+ })
+
// #8244
test('utility type in external file', () => {
const files = {
@@ -898,19 +1011,20 @@ describe('resolveType', () => {
function resolve(
code: string,
files: Record = {},
- options?: Partial
+ options?: Partial,
+ sourceFileName: string = '/Test.vue'
) {
const { descriptor } = parse(``, {
- filename: '/Test.vue'
+ filename: sourceFileName
})
const ctx = new ScriptCompileContext(descriptor, {
id: 'test',
fs: {
fileExists(file) {
- return !!files[file]
+ return !!(files[file] ?? files[normalize(file)])
},
readFile(file) {
- return files[file]
+ return files[file] ?? files[normalize(file)]
}
},
...options
diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
index b33dabfd2..66fc201f5 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/__tests__/compileTemplate.spec.ts b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
index b471b67c9..9026a7e90 100644
--- a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
@@ -60,6 +60,33 @@ body
expect(result.errors.length).toBe(0)
})
+test('preprocess pug with indents and blank lines', () => {
+ const template = parse(
+ `
+
+ body
+ h1 The next line contains four spaces.
+
+ div.container
+ p The next line is empty.
+ p This is the last line.
+
+`,
+ { filename: 'example.vue', sourceMap: true }
+ ).descriptor.template as SFCTemplateBlock
+
+ const result = compile({
+ filename: 'example.vue',
+ source: template.content,
+ preprocessLang: template.lang
+ })
+
+ expect(result.errors.length).toBe(0)
+ expect(result.source).toBe(
+ 'The next line contains four spaces.
This is the last line.
'
+ )
+})
+
test('warn missing preprocessor', () => {
const template = parse(`hi\n`, {
filename: 'example.vue',
diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index 5b01d73d7..9fb72d7ad 100644
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -272,5 +272,73 @@ describe('CSS vars injection', () => {
`export default {\n setup(__props, { expose: __expose }) {\n __expose();\n\n_useCssVars(_ctx => ({\n "xxxxxxxx-background": (_unref(background))\n}))`
)
})
+
+ describe('skip codegen in SSR', () => {
+ test('script setup, inline', () => {
+ const { content } = compileSFCScript(
+ `\n` +
+ ``,
+ {
+ inlineTemplate: true,
+ templateOptions: {
+ ssr: true
+ }
+ }
+ )
+ expect(content).not.toMatch(`_useCssVars`)
+ })
+
+ // #6926
+ test('script, non-inline', () => {
+ const { content } = compileSFCScript(
+ `\n` +
+ ``,
+ {
+ inlineTemplate: false,
+ templateOptions: {
+ ssr: true
+ }
+ }
+ )
+ expect(content).not.toMatch(`_useCssVars`)
+ })
+
+ test('normal script', () => {
+ const { content } = compileSFCScript(
+ `\n` +
+ ``,
+ {
+ templateOptions: {
+ ssr: true
+ }
+ }
+ )
+ expect(content).not.toMatch(`_useCssVars`)
+ })
+ })
})
})
diff --git a/packages/compiler-sfc/__tests__/parse.spec.ts b/packages/compiler-sfc/__tests__/parse.spec.ts
index c7a17ab17..ae362da02 100644
--- a/packages/compiler-sfc/__tests__/parse.spec.ts
+++ b/packages/compiler-sfc/__tests__/parse.spec.ts
@@ -34,6 +34,26 @@ describe('compiler:sfc', () => {
})
})
+ test('template block with lang + indent', () => {
+ // Padding determines how many blank lines will there be before the style block
+ const padding = Math.round(Math.random() * 10)
+ const template = parse(
+ `${'\n'.repeat(padding)}
+ h1 foo
+ div bar
+ span baz
+\n`
+ ).descriptor.template!
+
+ expect(template.map).not.toBeUndefined()
+
+ const consumer = new SourceMapConsumer(template.map!)
+ consumer.eachMapping(mapping => {
+ expect(mapping.originalLine - mapping.generatedLine).toBe(padding)
+ expect(mapping.originalColumn - mapping.generatedColumn).toBe(2)
+ })
+ })
+
test('custom block', () => {
const padding = Math.round(Math.random() * 10)
const custom = parse(
diff --git a/packages/compiler-sfc/package.json b/packages/compiler-sfc/package.json
index 4ce570e57..134dfb4b7 100644
--- a/packages/compiler-sfc/package.json
+++ b/packages/compiler-sfc/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/compiler-sfc",
- "version": "3.3.5",
+ "version": "3.3.9",
"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.5",
- "@vue/compiler-dom": "3.3.5",
- "@vue/compiler-ssr": "3.3.5",
- "@vue/reactivity-transform": "3.3.5",
- "@vue/shared": "3.3.5",
+ "@babel/parser": "^7.23.4",
+ "@vue/compiler-core": "workspace:*",
+ "@vue/compiler-dom": "workspace:*",
+ "@vue/compiler-ssr": "workspace:*",
+ "@vue/reactivity-transform": "workspace:*",
+ "@vue/shared": "workspace:*",
"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.4",
"@vue/consolidate": "^0.17.3",
"hash-sum": "^2.0.0",
- "lru-cache": "^10.0.1",
+ "lru-cache": "^10.1.0",
"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/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index cfcc607c7..9a05d3b32 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -765,7 +765,7 @@ export function compileScript(
if (
sfc.cssVars.length &&
// no need to do this when targeting SSR
- !(options.inlineTemplate && options.templateOptions?.ssr)
+ !options.templateOptions?.ssr
) {
ctx.helperImports.add(CSS_VARS_HELPER)
ctx.helperImports.add('unref')
@@ -1172,8 +1172,8 @@ function walkObjectPattern(
const type = isDefineCall
? BindingTypes.SETUP_CONST
: isConst
- ? BindingTypes.SETUP_MAYBE_REF
- : BindingTypes.SETUP_LET
+ ? BindingTypes.SETUP_MAYBE_REF
+ : BindingTypes.SETUP_LET
registerBinding(bindings, p.key, type)
} else {
walkPattern(p.value, bindings, isConst, isDefineCall)
@@ -1208,8 +1208,8 @@ function walkPattern(
const type = isDefineCall
? BindingTypes.SETUP_CONST
: isConst
- ? BindingTypes.SETUP_MAYBE_REF
- : BindingTypes.SETUP_LET
+ ? BindingTypes.SETUP_MAYBE_REF
+ : BindingTypes.SETUP_LET
registerBinding(bindings, node, type)
} else if (node.type === 'RestElement') {
// argument can only be identifier when destructuring
@@ -1224,8 +1224,8 @@ function walkPattern(
const type = isDefineCall
? BindingTypes.SETUP_CONST
: isConst
- ? BindingTypes.SETUP_MAYBE_REF
- : BindingTypes.SETUP_LET
+ ? BindingTypes.SETUP_MAYBE_REF
+ : BindingTypes.SETUP_LET
registerBinding(bindings, node.left, type)
} else {
walkPattern(node.left, bindings, isConst)
diff --git a/packages/compiler-sfc/src/compileTemplate.ts b/packages/compiler-sfc/src/compileTemplate.ts
index fbd100c97..8b1adea8e 100644
--- a/packages/compiler-sfc/src/compileTemplate.ts
+++ b/packages/compiler-sfc/src/compileTemplate.ts
@@ -124,8 +124,8 @@ export function compileTemplate(
? preprocessCustomRequire
? preprocessCustomRequire(preprocessLang)
: __ESM_BROWSER__
- ? undefined
- : consolidate[preprocessLang as keyof typeof consolidate]
+ ? undefined
+ : consolidate[preprocessLang as keyof typeof consolidate]
: false
if (preprocessor) {
try {
@@ -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 76b4900d4..c63e302e0 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/parse.ts b/packages/compiler-sfc/src/parse.ts
index da8cf6d86..60ee4b654 100644
--- a/packages/compiler-sfc/src/parse.ts
+++ b/packages/compiler-sfc/src/parse.ts
@@ -253,19 +253,31 @@ export function parse(
}
}
+ // dedent pug/jade templates
+ let templateColumnOffset = 0
+ if (
+ descriptor.template &&
+ (descriptor.template.lang === 'pug' || descriptor.template.lang === 'jade')
+ ) {
+ ;[descriptor.template.content, templateColumnOffset] = dedent(
+ descriptor.template.content
+ )
+ }
+
if (sourceMap) {
- const genMap = (block: SFCBlock | null) => {
+ const genMap = (block: SFCBlock | null, columnOffset = 0) => {
if (block && !block.src) {
block.map = generateSourceMap(
filename,
source,
block.content,
sourceRoot,
- !pad || block.type === 'template' ? block.loc.start.line - 1 : 0
+ !pad || block.type === 'template' ? block.loc.start.line - 1 : 0,
+ columnOffset
)
}
}
- genMap(descriptor.template)
+ genMap(descriptor.template, templateColumnOffset)
genMap(descriptor.script)
descriptor.styles.forEach(genMap)
descriptor.customBlocks.forEach(genMap)
@@ -369,7 +381,8 @@ function generateSourceMap(
source: string,
generated: string,
sourceRoot: string,
- lineOffset: number
+ lineOffset: number,
+ columnOffset: number
): RawSourceMap {
const map = new SourceMapGenerator({
file: filename.replace(/\\/g, '/'),
@@ -386,7 +399,7 @@ function generateSourceMap(
source: filename,
original: {
line: originalLine,
- column: i
+ column: i + columnOffset
},
generated: {
line: generatedLine,
@@ -466,3 +479,31 @@ export function hmrShouldReload(
return false
}
+
+/**
+ * Dedent a string.
+ *
+ * This removes any whitespace that is common to all lines in the string from
+ * each line in the string.
+ */
+function dedent(s: string): [string, number] {
+ const lines = s.split('\n')
+ const minIndent = lines.reduce(function (minIndent, line) {
+ if (line.trim() === '') {
+ return minIndent
+ }
+ const indent = line.match(/^\s*/)?.[0]?.length || 0
+ return Math.min(indent, minIndent)
+ }, Infinity)
+ if (minIndent === 0) {
+ return [s, minIndent]
+ }
+ return [
+ lines
+ .map(function (line) {
+ return line.slice(minIndent)
+ })
+ .join('\n'),
+ minIndent
+ ]
+}
diff --git a/packages/compiler-sfc/src/script/context.ts b/packages/compiler-sfc/src/script/context.ts
index 5fe09d28a..b05b8d910 100644
--- a/packages/compiler-sfc/src/script/context.ts
+++ b/packages/compiler-sfc/src/script/context.ts
@@ -53,7 +53,7 @@ export class ScriptCompileContext {
emitDecl: Node | undefined
// defineModel
- modelDecls: Record = {}
+ modelDecls: Record = Object.create(null)
// defineOptions
optionsRuntimeDecl: Node | undefined
@@ -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/defineEmits.ts b/packages/compiler-sfc/src/script/defineEmits.ts
index 69ca8c074..052f772a9 100644
--- a/packages/compiler-sfc/src/script/defineEmits.ts
+++ b/packages/compiler-sfc/src/script/defineEmits.ts
@@ -63,7 +63,9 @@ export function genRuntimeEmits(ctx: ScriptCompileContext): string | undefined {
.map(n => JSON.stringify(`update:${n}`))
.join(', ')}]`
emitsDecl = emitsDecl
- ? `${ctx.helper('mergeModels')}(${emitsDecl}, ${modelEmitsDecl})`
+ ? `/*#__PURE__*/${ctx.helper(
+ 'mergeModels'
+ )}(${emitsDecl}, ${modelEmitsDecl})`
: modelEmitsDecl
}
return emitsDecl
diff --git a/packages/compiler-sfc/src/script/defineProps.ts b/packages/compiler-sfc/src/script/defineProps.ts
index 5004e314d..0d35cdd77 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}${
@@ -144,7 +144,7 @@ export function genRuntimeProps(ctx: ScriptCompileContext): string | undefined {
)
}
if (defaults.length) {
- propsDecls = `${ctx.helper(
+ propsDecls = `/*#__PURE__*/${ctx.helper(
`mergeDefaults`
)}(${propsDecls}, {\n ${defaults.join(',\n ')}\n})`
}
@@ -156,7 +156,9 @@ export function genRuntimeProps(ctx: ScriptCompileContext): string | undefined {
const modelsDecls = genModelProps(ctx)
if (propsDecls && modelsDecls) {
- return `${ctx.helper('mergeModels')}(${propsDecls}, ${modelsDecls})`
+ return `/*#__PURE__*/${ctx.helper(
+ 'mergeModels'
+ )}(${propsDecls}, ${modelsDecls})`
} else {
return modelsDecls || propsDecls
}
@@ -184,9 +186,9 @@ function genRuntimePropsFromTypes(ctx: ScriptCompileContext) {
${propStrings.join(',\n ')}\n }`
if (ctx.propsRuntimeDefaults && !hasStaticDefaults) {
- propsDecls = `${ctx.helper('mergeDefaults')}(${propsDecls}, ${ctx.getString(
- ctx.propsRuntimeDefaults
- )})`
+ propsDecls = `/*#__PURE__*/${ctx.helper(
+ 'mergeDefaults'
+ )}(${propsDecls}, ${ctx.getString(ctx.propsRuntimeDefaults)})`
}
return propsDecls
@@ -251,7 +253,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 f3c3932d8..34e95f191 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/normalScript.ts b/packages/compiler-sfc/src/script/normalScript.ts
index 76b25c663..d0f161342 100644
--- a/packages/compiler-sfc/src/script/normalScript.ts
+++ b/packages/compiler-sfc/src/script/normalScript.ts
@@ -55,7 +55,7 @@ export function processNormalScript(
const s = new MagicString(content)
rewriteDefaultAST(scriptAst.body, s, defaultVar)
content = s.toString()
- if (cssVars.length) {
+ if (cssVars.length && !ctx.options.templateOptions?.ssr) {
content += genNormalScriptCssVarsCode(
cssVars,
bindings,
diff --git a/packages/compiler-sfc/src/script/resolveType.ts b/packages/compiler-sfc/src/script/resolveType.ts
index 58e04d664..143c09733 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
@@ -117,7 +118,8 @@ interface ResolvedElements {
export function resolveTypeElements(
ctx: TypeResolveContext,
node: Node & MaybeWithScope & { _resolvedElements?: ResolvedElements },
- scope?: TypeScope
+ scope?: TypeScope,
+ typeParameters?: Record
): ResolvedElements {
if (node._resolvedElements) {
return node._resolvedElements
@@ -125,30 +127,37 @@ export function resolveTypeElements(
return (node._resolvedElements = innerResolveTypeElements(
ctx,
node,
- node._ownerScope || scope || ctxToScope(ctx)
+ node._ownerScope || scope || ctxToScope(ctx),
+ typeParameters
))
}
function innerResolveTypeElements(
ctx: TypeResolveContext,
node: Node,
- scope: TypeScope
+ scope: TypeScope,
+ typeParameters?: Record
): ResolvedElements {
switch (node.type) {
case 'TSTypeLiteral':
- return typeElementsToMap(ctx, node.members, scope)
+ return typeElementsToMap(ctx, node.members, scope, typeParameters)
case 'TSInterfaceDeclaration':
- return resolveInterfaceMembers(ctx, node, scope)
+ return resolveInterfaceMembers(ctx, node, scope, typeParameters)
case 'TSTypeAliasDeclaration':
case 'TSParenthesizedType':
- return resolveTypeElements(ctx, node.typeAnnotation, scope)
+ return resolveTypeElements(
+ ctx,
+ node.typeAnnotation,
+ scope,
+ typeParameters
+ )
case 'TSFunctionType': {
return { props: {}, calls: [node] }
}
case 'TSUnionType':
case 'TSIntersectionType':
return mergeElements(
- node.types.map(t => resolveTypeElements(ctx, t, scope)),
+ node.types.map(t => resolveTypeElements(ctx, t, scope, typeParameters)),
node.type
)
case 'TSMappedType':
@@ -170,20 +179,57 @@ function innerResolveTypeElements(
scope.imports[typeName]?.source === 'vue'
) {
return resolveExtractPropTypes(
- resolveTypeElements(ctx, node.typeParameters.params[0], scope),
+ resolveTypeElements(
+ ctx,
+ node.typeParameters.params[0],
+ scope,
+ typeParameters
+ ),
scope
)
}
const resolved = resolveTypeReference(ctx, node, scope)
if (resolved) {
- return resolveTypeElements(ctx, resolved, resolved._ownerScope)
+ const typeParams: Record = Object.create(null)
+ if (
+ (resolved.type === 'TSTypeAliasDeclaration' ||
+ resolved.type === 'TSInterfaceDeclaration') &&
+ resolved.typeParameters &&
+ node.typeParameters
+ ) {
+ resolved.typeParameters.params.forEach((p, i) => {
+ let param = typeParameters && typeParameters[p.name]
+ if (!param) param = node.typeParameters!.params[i]
+ typeParams[p.name] = param
+ })
+ }
+ return resolveTypeElements(
+ ctx,
+ resolved,
+ resolved._ownerScope,
+ typeParams
+ )
} else {
if (typeof typeName === 'string') {
+ if (typeParameters && typeParameters[typeName]) {
+ return resolveTypeElements(
+ ctx,
+ typeParameters[typeName],
+ scope,
+ typeParameters
+ )
+ }
if (
// @ts-ignore
SupportedBuiltinsSet.has(typeName)
) {
- return resolveBuiltin(ctx, node, typeName as any, scope)
+ return resolveBuiltin(
+ ctx,
+ node,
+ typeName as any,
+ scope,
+ typeParameters
+ )
} else if (typeName === 'ReturnType' && node.typeParameters) {
// limited support, only reference types
const ret = resolveReturnType(
@@ -242,11 +288,17 @@ function innerResolveTypeElements(
function typeElementsToMap(
ctx: TypeResolveContext,
elements: TSTypeElement[],
- scope = ctxToScope(ctx)
+ scope = ctxToScope(ctx),
+ typeParameters?: Record
): ResolvedElements {
const res: ResolvedElements = { props: {} }
for (const e of elements) {
if (e.type === 'TSPropertySignature' || e.type === 'TSMethodSignature') {
+ // capture generic parameters on node's scope
+ if (typeParameters) {
+ scope = createChildScope(scope)
+ Object.assign(scope.types, typeParameters)
+ }
;(e as MaybeWithScope)._ownerScope = scope
const name = getId(e.key)
if (name && !e.computed) {
@@ -322,9 +374,15 @@ function createProperty(
function resolveInterfaceMembers(
ctx: TypeResolveContext,
node: TSInterfaceDeclaration & MaybeWithScope,
- scope: TypeScope
+ scope: TypeScope,
+ typeParameters?: Record
): ResolvedElements {
- const base = typeElementsToMap(ctx, node.body.body, node._ownerScope)
+ const base = typeElementsToMap(
+ ctx,
+ node.body.body,
+ node._ownerScope,
+ typeParameters
+ )
if (node.extends) {
for (const ext of node.extends) {
if (
@@ -334,12 +392,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, ` +
@@ -539,9 +600,15 @@ function resolveBuiltin(
ctx: TypeResolveContext,
node: TSTypeReference | TSExpressionWithTypeArguments,
name: GetSetType,
- scope: TypeScope
+ scope: TypeScope,
+ typeParameters?: Record
): ResolvedElements {
- const t = resolveTypeElements(ctx, node.typeParameters!.params[0], scope)
+ const t = resolveTypeElements(
+ ctx,
+ node.typeParameters!.params[0],
+ scope,
+ typeParameters
+ )
switch (name) {
case 'Partial': {
const res: ResolvedElements = { props: {}, calls: t.calls }
@@ -632,8 +699,8 @@ function innerResolveTypeReference(
? scope.exportedDeclares
: scope.declares
: onlyExported
- ? scope.exportedTypes
- : scope.types
+ ? scope.exportedTypes
+ : scope.types
if (lookupSource[name]) {
return lookupSource[name]
} else {
@@ -691,11 +758,11 @@ function getReferenceName(node: ReferenceTypes): string | string[] {
? node.typeName
: node.type === 'TSExpressionWithTypeArguments'
? node.expression
- : node.type === 'TSImportType'
- ? node.qualifier
- : node.type === 'TSTypeQuery'
- ? node.exprName
- : node
+ : node.type === 'TSImportType'
+ ? node.qualifier
+ : node.type === 'TSTypeQuery'
+ ? node.exprName
+ : node
if (ref?.type === 'Identifier') {
return ref.name
} else if (ref?.type === 'TSQualifiedName') {
@@ -732,7 +799,25 @@ let loadTS: (() => typeof TS) | undefined
* @private
*/
export function registerTS(_loadTS: () => typeof TS) {
- loadTS = _loadTS
+ loadTS = () => {
+ try {
+ return _loadTS()
+ } catch (err: any) {
+ if (
+ typeof err.message === 'string' &&
+ err.message.includes('Cannot find module')
+ ) {
+ throw new Error(
+ 'Failed to load TypeScript, which is required for resolving imported types. ' +
+ 'Please make sure "typescript" is installed as a project dependency.'
+ )
+ } else {
+ throw new Error(
+ 'Failed to load TypeScript for resolving imported types.'
+ )
+ }
+ }
+ }
}
type FS = NonNullable
@@ -781,7 +866,12 @@ function importSourceToScope(
scope: TypeScope,
source: string
): TypeScope {
- const fs = resolveFS(ctx)
+ let fs: FS | undefined
+ try {
+ fs = resolveFS(ctx)
+ } catch (err: any) {
+ return ctx.error(err.message, node, scope)
+ }
if (!fs) {
return ctx.error(
`No fs option provided to \`compileScript\` in non-Node environment. ` +
@@ -793,9 +883,14 @@ 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(scope.filename, '..', source)
+ const filename = joinPaths(dirname(scope.filename), source)
resolved = resolveExt(filename, fs)
} else {
// module or aliased import - use full TS resolution, only supported in Node
@@ -1064,8 +1159,8 @@ function ctxToScope(ctx: TypeResolveContext): TypeScope {
'ast' in ctx
? ctx.ast
: ctx.scriptAst
- ? [...ctx.scriptAst.body, ...ctx.scriptSetupAst!.body]
- : ctx.scriptSetupAst!.body
+ ? [...ctx.scriptAst.body, ...ctx.scriptSetupAst!.body]
+ : ctx.scriptSetupAst!.body
const scope = new TypeScope(
ctx.filename,
@@ -1088,14 +1183,7 @@ function moduleDeclToScope(
return node._resolvedChildScope
}
- const scope = new TypeScope(
- parentScope.filename,
- parentScope.source,
- parentScope.offset,
- Object.create(parentScope.imports),
- Object.create(parentScope.types),
- Object.create(parentScope.declares)
- )
+ const scope = createChildScope(parentScope)
if (node.body.type === 'TSModuleDeclaration') {
const decl = node.body as TSModuleDeclaration & WithScope
@@ -1109,6 +1197,17 @@ function moduleDeclToScope(
return (node._resolvedChildScope = scope)
}
+function createChildScope(parentScope: TypeScope) {
+ return new TypeScope(
+ parentScope.filename,
+ parentScope.source,
+ parentScope.offset,
+ Object.create(parentScope.imports),
+ Object.create(parentScope.types),
+ Object.create(parentScope.declares)
+ )
+}
+
const importExportRE = /^Import|^Export/
function recordTypes(
@@ -1247,7 +1346,7 @@ function recordType(
if (overwriteId || node.id) types[overwriteId || getId(node.id!)] = node
break
case 'TSTypeAliasDeclaration':
- types[node.id.name] = node.typeAnnotation
+ types[node.id.name] = node.typeParameters ? node : node.typeAnnotation
break
case 'TSDeclareFunction':
if (node.id) declares[node.id.name] = node
@@ -1408,6 +1507,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 42c4718e3..bc621d258 100644
--- a/packages/compiler-sfc/src/script/utils.ts
+++ b/packages/compiler-sfc/src/script/utils.ts
@@ -76,8 +76,8 @@ export function getId(node: Expression) {
return node.type === 'Identifier'
? node.name
: node.type === 'StringLiteral'
- ? node.value
- : null
+ ? node.value
+ : null
}
const identity = (str: string) => str
@@ -113,8 +113,16 @@ 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, doubleEscape: boolean) {
+ return key.replace(cssVarNameEscapeSymbolsRE, s =>
+ doubleEscape ? `\\\\${s}` : `\\${s}`
+ )
}
diff --git a/packages/compiler-sfc/src/style/cssVars.ts b/packages/compiler-sfc/src/style/cssVars.ts
index 2380959b8..cb5274bc2 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'
@@ -22,17 +22,25 @@ export function genCssVarsFromList(
): string {
return `{\n ${vars
.map(
- key => `"${isSSR ? `--` : ``}${genVarName(id, key, isProd)}": (${key})`
+ key =>
+ `"${isSSR ? `--` : ``}${genVarName(id, key, isProd, isSSR)}": (${key})`
)
.join(',\n ')}\n}`
}
-function genVarName(id: string, raw: string, isProd: boolean): string {
+function genVarName(
+ id: string,
+ raw: string,
+ isProd: boolean,
+ isSSR = false
+): string {
if (isProd) {
return hash(id + raw)
} else {
// escape ASCII Punctuation & Symbols
- return `${id}-${raw.replace(escapeSymbolsRE, s => `\\${s}`)}`
+ // #7823 need to double-escape in SSR because the attributes are rendered
+ // into an HTML string
+ return `${id}-${getEscapedCssVarName(raw, isSSR)}`
}
}
diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts
index f6e9be2fd..5394b7774 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 9391c01e3..a8ea08a53 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 000000000..319b39022
--- /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/__tests__/ssrVModel.spec.ts b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
index 5bccbcb78..f28c38d40 100644
--- a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
@@ -69,6 +69,57 @@ describe('ssr: v-model', () => {
}>\`)
}"
`)
+
+ expect(
+ compileWithWrapper(``)
+ .code
+ ).toMatchInlineSnapshot(`
+ "const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ _push(\`\`)
+ }"
+ `)
+
+ expect(
+ compileWithWrapper(`
+ `).code
+ ).toMatchInlineSnapshot(`
+ "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ _push(\`\`)
+ }"
+ `)
+
+ expect(
+ compileWithWrapper(`
+ `).code
+ ).toMatchInlineSnapshot(`
+ "const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ _push(\`\`)
+ }"
+ `)
})
test('', () => {
diff --git a/packages/compiler-ssr/package.json b/packages/compiler-ssr/package.json
index 66d69523e..59eda541b 100644
--- a/packages/compiler-ssr/package.json
+++ b/packages/compiler-ssr/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/compiler-ssr",
- "version": "3.3.5",
+ "version": "3.3.9",
"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.5",
- "@vue/compiler-dom": "3.3.5"
+ "@vue/shared": "workspace:*",
+ "@vue/compiler-dom": "workspace:*"
}
}
diff --git a/packages/compiler-ssr/src/index.ts b/packages/compiler-ssr/src/index.ts
index 1775af52b..1e5f90550 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 dc8c6a4ae..7a12cb290 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 207e9348e..e7efbe1fb 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 000000000..d09a806f7
--- /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/compiler-ssr/src/transforms/ssrVModel.ts b/packages/compiler-ssr/src/transforms/ssrVModel.ts
index bd587edcb..0c4bd1778 100644
--- a/packages/compiler-ssr/src/transforms/ssrVModel.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVModel.ts
@@ -38,6 +38,38 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
}
}
+ function processOption(plainNode: PlainElementNode) {
+ if (plainNode.tag === 'option') {
+ if (plainNode.props.findIndex(p => p.name === 'selected') === -1) {
+ const value = findValueBinding(plainNode)
+ plainNode.ssrCodegenNode!.elements.push(
+ createConditionalExpression(
+ createCallExpression(context.helper(SSR_INCLUDE_BOOLEAN_ATTR), [
+ createConditionalExpression(
+ createCallExpression(`Array.isArray`, [model]),
+ createCallExpression(context.helper(SSR_LOOSE_CONTAIN), [
+ model,
+ value
+ ]),
+ createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
+ model,
+ value
+ ])
+ )
+ ]),
+ createSimpleExpression(' selected', true),
+ createSimpleExpression('', true),
+ false /* no newline */
+ )
+ )
+ }
+ } else if (plainNode.tag === 'optgroup') {
+ plainNode.children.forEach(option =>
+ processOption(option as PlainElementNode)
+ )
+ }
+ }
+
if (node.tagType === ElementTypes.ELEMENT) {
const res: DirectiveTransformResult = { props: [] }
const defaultProps = [
@@ -130,32 +162,9 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
checkDuplicatedValue()
node.children = [createInterpolation(model, model.loc)]
} else if (node.tag === 'select') {
- node.children.forEach(option => {
- if (option.type === NodeTypes.ELEMENT) {
- const plainNode = option as PlainElementNode
- if (plainNode.props.findIndex(p => p.name === 'selected') === -1) {
- const value = findValueBinding(plainNode)
- plainNode.ssrCodegenNode!.elements.push(
- createConditionalExpression(
- createCallExpression(context.helper(SSR_INCLUDE_BOOLEAN_ATTR), [
- createConditionalExpression(
- createCallExpression(`Array.isArray`, [model]),
- createCallExpression(context.helper(SSR_LOOSE_CONTAIN), [
- model,
- value
- ]),
- createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
- model,
- value
- ])
- )
- ]),
- createSimpleExpression(' selected', true),
- createSimpleExpression('', true),
- false /* no newline */
- )
- )
- }
+ node.children.forEach(child => {
+ if (child.type === NodeTypes.ELEMENT) {
+ processOption(child as PlainElementNode)
}
})
} else {
diff --git a/packages/dts-built-test/README.md b/packages/dts-built-test/README.md
new file mode 100644
index 000000000..8191d66e3
--- /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 000000000..dca0f80fa
--- /dev/null
+++ b/packages/dts-built-test/package.json
@@ -0,0 +1,11 @@
+{
+ "name": "@vue/dts-built-test",
+ "private": true,
+ "version": "0.0.0",
+ "types": "dist/dts-built-test.d.ts",
+ "dependencies": {
+ "@vue/shared": "workspace:*",
+ "@vue/reactivity": "workspace:*",
+ "vue": "workspace:*"
+ }
+}
diff --git a/packages/dts-built-test/src/index.ts b/packages/dts-built-test/src/index.ts
new file mode 100644
index 000000000..2d9d40332
--- /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/appUse.test-d.ts b/packages/dts-test/appUse.test-d.ts
index c1bebcd53..ebfc986a7 100644
--- a/packages/dts-test/appUse.test-d.ts
+++ b/packages/dts-test/appUse.test-d.ts
@@ -1,4 +1,4 @@
-import { createApp, App, Plugin } from 'vue'
+import { createApp, App, Plugin, defineComponent } from 'vue'
const app = createApp({})
@@ -93,3 +93,15 @@ const PluginTyped: Plugin = (app, options) => {}
// @ts-expect-error: needs options
app.use(PluginTyped)
app.use(PluginTyped, { option2: 2, option3: true })
+
+// vuetify usage
+const key: string = ''
+const aliases: Record = {}
+app.component(
+ key,
+ defineComponent({
+ ...aliases[key],
+ name: key,
+ aliasName: aliases[key].name
+ })
+)
diff --git a/packages/dts-test/built.test-d.ts b/packages/dts-test/built.test-d.ts
new file mode 100644
index 000000000..8ac3e333f
--- /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 7466249e1..9c989c23b 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -11,7 +11,9 @@ import {
h,
SlotsType,
Slots,
- VNode
+ VNode,
+ withKeys,
+ withModifiers
} from 'vue'
import { describe, expectType, IsUnion } from './utils'
@@ -1472,6 +1474,37 @@ 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)
+})
+
+describe('withKeys and withModifiers as pro', () => {
+ const onKeydown = withKeys(e => {}, [''])
+ const onClick = withModifiers(e => {}, [''])
+ ;
+})
+
import {
DefineComponent,
ComponentOptionsMixin,
diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts
index 4e7cf2283..f4f238641 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/functionalComponent.test-d.tsx b/packages/dts-test/functionalComponent.test-d.tsx
index 827e8d63f..22efc5849 100644
--- a/packages/dts-test/functionalComponent.test-d.tsx
+++ b/packages/dts-test/functionalComponent.test-d.tsx
@@ -45,7 +45,7 @@ Bar.emits = {
Bar.emits = { baz: () => void 0 }
// TSX
-expectType()
+expectType( {}} />)
// @ts-expect-error
;
// @ts-expect-error
diff --git a/packages/dts-test/h.test-d.ts b/packages/dts-test/h.test-d.ts
index 5c700800e..f2e984b49 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 a6933d2dc..a6ea96bfa 100644
--- a/packages/dts-test/package.json
+++ b/packages/dts-test/package.json
@@ -1,8 +1,9 @@
{
"name": "dts-test",
"private": true,
+ "version": "0.0.0",
"dependencies": {
- "vue": "workspace:*"
- },
- "version": "3.3.5"
+ "vue": "workspace:*",
+ "@vue/dts-built-test": "workspace:*"
+ }
}
diff --git a/packages/dts-test/reactivity.test-d.ts b/packages/dts-test/reactivity.test-d.ts
index 4504f9e35..431bbafbd 100644
--- a/packages/dts-test/reactivity.test-d.ts
+++ b/packages/dts-test/reactivity.test-d.ts
@@ -62,3 +62,31 @@ describe('should unwrap tuple correctly', () => {
const reactiveTuple = reactive(tuple)
expectType>(reactiveTuple[0])
})
+
+describe('should unwrap Map correctly', () => {
+ const map = reactive(new Map>())
+ expectType>(map.get('a')!)
+
+ const map2 = reactive(new Map }>())
+ expectType(map2.get('a')!.wrap)
+
+ const wm = reactive(new WeakMap>())
+ expectType>(wm.get({})!)
+
+ const wm2 = reactive(new WeakMap }>())
+ expectType(wm2.get({})!.wrap)
+})
+
+describe('should unwrap Set correctly', () => {
+ const set = reactive(new Set>())
+ expectType>>(set)
+
+ const set2 = reactive(new Set<{ wrap: Ref }>())
+ expectType>(set2)
+
+ const ws = reactive(new WeakSet>())
+ expectType>>(ws)
+
+ const ws2 = reactive(new WeakSet<{ wrap: Ref }>())
+ expectType>(ws2)
+})
diff --git a/packages/dts-test/ref.test-d.ts b/packages/dts-test/ref.test-d.ts
index bbcde45dd..542d9d6a9 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 feb4085de..51f95c009 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 04915a967..4b4a0dbf9 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 9d727999b..cc631d37a 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 ef884997a..c68bd5aca 100644
--- a/packages/reactivity-transform/package.json
+++ b/packages/reactivity-transform/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/reactivity-transform",
- "version": "3.3.5",
+ "version": "3.3.9",
"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.5",
- "@vue/shared": "3.3.5",
+ "@babel/parser": "^7.23.4",
+ "@vue/compiler-core": "workspace:*",
+ "@vue/shared": "workspace:*",
"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.4"
}
}
diff --git a/packages/reactivity-transform/src/reactivityTransform.ts b/packages/reactivity-transform/src/reactivityTransform.ts
index 855dfbb18..596de0e12 100644
--- a/packages/reactivity-transform/src/reactivityTransform.ts
+++ b/packages/reactivity-transform/src/reactivityTransform.ts
@@ -448,8 +448,8 @@ export function transformAST(
const keyStr = isString(key)
? `'${key}'`
: key
- ? snip(key)
- : `'${nameId.name}'`
+ ? snip(key)
+ : `'${nameId.name}'`
const defaultStr = defaultValue ? `, ${snip(defaultValue)}` : ``
s.appendLeft(
call.end! + offset,
diff --git a/packages/reactivity/__tests__/effect.spec.ts b/packages/reactivity/__tests__/effect.spec.ts
index 635e6534a..e34c7b31e 100644
--- a/packages/reactivity/__tests__/effect.spec.ts
+++ b/packages/reactivity/__tests__/effect.spec.ts
@@ -243,6 +243,22 @@ describe('reactivity/effect', () => {
expect(dummy).toBe(undefined)
})
+ it('should support manipulating an array while observing symbol keyed properties', () => {
+ const key = Symbol()
+ let dummy
+ const array: any = reactive([1, 2, 3])
+ effect(() => (dummy = array[key]))
+
+ expect(dummy).toBe(undefined)
+ array.pop()
+ array.shift()
+ array.splice(0, 1)
+ expect(dummy).toBe(undefined)
+ array[key] = 'value'
+ array.length = 0
+ expect(dummy).toBe('value')
+ })
+
it('should observe function valued properties', () => {
const oldFunc = () => {}
const newFunc = () => {}
diff --git a/packages/reactivity/__tests__/readonly.spec.ts b/packages/reactivity/__tests__/readonly.spec.ts
index d0c91f0fb..448419d31 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 79d4376cc..b6736f4a5 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 5438a3deb..4e297a631 100644
--- a/packages/reactivity/package.json
+++ b/packages/reactivity/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/reactivity",
- "version": "3.3.5",
+ "version": "3.3.9",
"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.5"
+ "@vue/shared": "workspace:*"
}
}
diff --git a/packages/reactivity/src/baseHandlers.ts b/packages/reactivity/src/baseHandlers.ts
index 259b44a1e..fa7ebbb7d 100644
--- a/packages/reactivity/src/baseHandlers.ts
+++ b/packages/reactivity/src/baseHandlers.ts
@@ -108,8 +108,8 @@ class BaseReactiveHandler implements ProxyHandler {
? shallowReadonlyMap
: readonlyMap
: shallow
- ? shallowReactiveMap
- : reactiveMap
+ ? shallowReactiveMap
+ : reactiveMap
).get(target)
) {
return target
diff --git a/packages/reactivity/src/collectionHandlers.ts b/packages/reactivity/src/collectionHandlers.ts
index 1d07af3be..abf623f55 100644
--- a/packages/reactivity/src/collectionHandlers.ts
+++ b/packages/reactivity/src/collectionHandlers.ts
@@ -3,7 +3,7 @@ import { track, trigger, ITERATE_KEY, MAP_KEY_ITERATE_KEY } from './effect'
import { TrackOpTypes, TriggerOpTypes } from './operations'
import { capitalize, hasOwn, hasChanged, toRawType, isMap } from '@vue/shared'
-export type CollectionTypes = IterableCollections | WeakCollections
+type CollectionTypes = IterableCollections | WeakCollections
type IterableCollections = Map | Set
type WeakCollections = WeakMap | WeakSet
@@ -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
}
}
@@ -337,8 +341,8 @@ function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
? shallowReadonlyInstrumentations
: shallowInstrumentations
: isReadonly
- ? readonlyInstrumentations
- : mutableInstrumentations
+ ? readonlyInstrumentations
+ : mutableInstrumentations
return (
target: CollectionTypes,
diff --git a/packages/reactivity/src/effect.ts b/packages/reactivity/src/effect.ts
index bbac96a4b..c982dbd0b 100644
--- a/packages/reactivity/src/effect.ts
+++ b/packages/reactivity/src/effect.ts
@@ -1,5 +1,5 @@
import { TrackOpTypes, TriggerOpTypes } from './operations'
-import { extend, isArray, isIntegerKey, isMap } from '@vue/shared'
+import { extend, isArray, isIntegerKey, isMap, isSymbol } from '@vue/shared'
import { EffectScope, recordEffectScope } from './effectScope'
import {
createDep,
@@ -324,7 +324,7 @@ export function trigger(
} else if (key === 'length' && isArray(target)) {
const newLength = Number(newValue)
depsMap.forEach((dep, key) => {
- if (key === 'length' || key >= newLength) {
+ if (key === 'length' || (!isSymbol(key) && key >= newLength)) {
deps.push(dep)
}
})
diff --git a/packages/reactivity/src/reactive.ts b/packages/reactivity/src/reactive.ts
index 1881955cf..a5ac4c6e6 100644
--- a/packages/reactivity/src/reactive.ts
+++ b/packages/reactivity/src/reactive.ts
@@ -145,24 +145,24 @@ type Builtin = Primitive | Function | Date | Error | RegExp
export type DeepReadonly = T extends Builtin
? T
: T extends Map
- ? ReadonlyMap, DeepReadonly>
- : T extends ReadonlyMap
- ? ReadonlyMap, DeepReadonly>
- : T extends WeakMap
- ? WeakMap, DeepReadonly>
- : T extends Set
- ? ReadonlySet>
- : T extends ReadonlySet
- ? ReadonlySet>
- : T extends WeakSet
- ? WeakSet>
- : T extends Promise
- ? Promise>
- : T extends Ref
- ? Readonly>>
- : T extends {}
- ? { readonly [K in keyof T]: DeepReadonly }
- : Readonly
+ ? ReadonlyMap, DeepReadonly>
+ : T extends ReadonlyMap
+ ? ReadonlyMap, DeepReadonly>
+ : T extends WeakMap
+ ? WeakMap, DeepReadonly>
+ : T extends Set
+ ? ReadonlySet>
+ : T extends ReadonlySet
+ ? ReadonlySet>
+ : T extends WeakSet
+ ? WeakSet>
+ : T extends Promise
+ ? Promise>
+ : T extends Ref
+ ? Readonly>>
+ : T extends {}
+ ? { readonly [K in keyof T]: DeepReadonly }
+ : Readonly
/**
* Takes an object (reactive or plain) or a ref and returns a readonly proxy to
diff --git a/packages/reactivity/src/ref.ts b/packages/reactivity/src/ref.ts
index 915f57608..9f7ebdad8 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,
@@ -16,7 +17,6 @@ import {
isShallow
} from './reactive'
import type { ShallowReactiveMarker } from './reactive'
-import { CollectionTypes } from './collectionHandlers'
import { createDep, Dep } from './dep'
declare const RefSymbol: unique symbol
@@ -115,9 +115,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 +210,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 +230,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)
}
@@ -416,8 +415,8 @@ export function toRef(
): T extends () => infer R
? Readonly>
: T extends Ref
- ? T
- : Ref>
+ ? T
+ : Ref>
export function toRef(
object: T,
key: K
@@ -478,30 +477,37 @@ export type ShallowUnwrapRef = {
[K in keyof T]: T[K] extends Ref
? V // if `V` is `unknown` that means it does not extend `Ref` and is undefined
: T[K] extends Ref | undefined
- ? unknown extends V
- ? undefined
- : V | undefined
- : T[K]
+ ? unknown extends V
+ ? undefined
+ : V | undefined
+ : T[K]
}
export type UnwrapRef = T extends ShallowRef
? V
: T extends Ref
- ? UnwrapRefSimple
- : UnwrapRefSimple
+ ? UnwrapRefSimple
+ : UnwrapRefSimple
export type UnwrapRefSimple = T extends
| Function
- | CollectionTypes
| BaseTypes
| Ref
| RefUnwrapBailTypes[keyof RefUnwrapBailTypes]
| { [RawSymbol]?: true }
? T
- : T extends ReadonlyArray
- ? { [K in keyof T]: UnwrapRefSimple }
- : T extends object & { [ShallowReactiveMarker]?: never }
- ? {
- [P in keyof T]: P extends symbol ? T[P] : UnwrapRef
- }
- : T
+ : T extends Map
+ ? Map>
+ : T extends WeakMap
+ ? WeakMap>
+ : T extends Set
+ ? Set>
+ : T extends WeakSet
+ ? WeakSet>
+ : T extends ReadonlyArray
+ ? { [K in keyof T]: UnwrapRefSimple }
+ : T extends object & { [ShallowReactiveMarker]?: never }
+ ? {
+ [P in keyof T]: P extends symbol ? T[P] : UnwrapRef
+ }
+ : T
diff --git a/packages/runtime-core/__tests__/apiOptions.spec.ts b/packages/runtime-core/__tests__/apiOptions.spec.ts
index ca712e0d3..94f9db1b0 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 f24ce80b9..48fdd2888 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 89112f2ad..885e80090 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 065898048..d822a9928 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 db713a3f2..a5ec90ad7 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 d3cfd47c6..7ea607d33 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')
@@ -393,6 +397,28 @@ describe('SSR hydration', () => {
)
})
+ // #6152
+ test('Teleport (disabled + as component root)', () => {
+ const { container } = mountWithHydration(
+ 'Parent fragment
Teleport content
',
+ () => [
+ h('div', 'Parent fragment'),
+ h(() =>
+ h(Teleport, { to: 'body', disabled: true }, [
+ h('div', 'Teleport content')
+ ])
+ )
+ ]
+ )
+ expect(document.body.innerHTML).toBe('')
+ expect(container.innerHTML).toBe(
+ 'Parent fragment
Teleport content
'
+ )
+ expect(
+ `Hydration completed but contains mismatches.`
+ ).not.toHaveBeenWarned()
+ })
+
test('Teleport (as component root)', () => {
const teleportContainer = document.createElement('div')
teleportContainer.id = 'teleport4'
@@ -909,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(
'',
@@ -927,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(
'',
@@ -994,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')
@@ -1083,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 6f1d0288b..37daafa97 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
+ 