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 fc600f1a5..5f421708a 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/package.json b/packages/compiler-sfc/package.json
index 6c28d1c7f..b253078b8 100644
--- a/packages/compiler-sfc/package.json
+++ b/packages/compiler-sfc/package.json
@@ -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.4.0-alpha.1",
- "@vue/compiler-dom": "3.4.0-alpha.1",
- "@vue/compiler-ssr": "3.4.0-alpha.1",
- "@vue/reactivity-transform": "3.4.0-alpha.1",
- "@vue/shared": "3.4.0-alpha.1",
+ "@babel/parser": "^7.23.3",
+ "@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.3",
"@vue/consolidate": "^0.17.3",
"hash-sum": "^2.0.0",
- "lru-cache": "^10.0.1",
+ "lru-cache": "^10.0.3",
"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 2a33f6993..9a05d3b32 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -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 b036619c7..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 {
diff --git a/packages/compiler-sfc/src/index.ts b/packages/compiler-sfc/src/index.ts
index c6ee60414..815af3538 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 692eab3ab..b05b8d910 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 449ed250d..c65c91c4f 100644
--- a/packages/compiler-sfc/src/script/defineProps.ts
+++ b/packages/compiler-sfc/src/script/defineProps.ts
@@ -21,7 +21,7 @@ import {
isCallOf,
unwrapTSNode,
toRuntimeTypeString,
- getEscapedKey
+ getEscapedPropName
} from './utils'
import { genModelProps } from './defineModel'
import { getObjectOrArrayExpressionKeys } from './analyzeScriptBindings'
@@ -139,7 +139,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}${
@@ -257,7 +257,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/resolveType.ts b/packages/compiler-sfc/src/script/resolveType.ts
index 12666341e..9fde5e97e 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'
export type SimpleTypeResolveOptions = Partial<
Pick<
@@ -356,12 +357,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, ` +
@@ -653,8 +657,8 @@ function innerResolveTypeReference(
? scope.exportedDeclares
: scope.declares
: onlyExported
- ? scope.exportedTypes
- : scope.types
+ ? scope.exportedTypes
+ : scope.types
if (lookupSource[name]) {
return lookupSource[name]
} else {
@@ -697,10 +701,10 @@ function getReferenceName(node: ReferenceTypes): string | string[] {
node.type === 'TSTypeReference'
? node.typeName
: node.type === 'TSExpressionWithTypeArguments'
- ? node.expression
- : node.type === 'TSImportType'
- ? node.qualifier
- : node.exprName
+ ? node.expression
+ : node.type === 'TSImportType'
+ ? node.qualifier
+ : node.exprName
if (ref?.type === 'Identifier') {
return ref.name
} else if (ref?.type === 'TSQualifiedName') {
@@ -798,7 +802,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)
@@ -1069,8 +1078,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,
@@ -1413,6 +1422,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..3cbc27026 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,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 2380959b8..9fe727bc5 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-ssr/package.json b/packages/compiler-ssr/package.json
index df467affd..28f185f4f 100644
--- a/packages/compiler-ssr/package.json
+++ b/packages/compiler-ssr/package.json
@@ -28,7 +28,7 @@
},
"homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-ssr#readme",
"dependencies": {
- "@vue/shared": "3.4.0-alpha.1",
- "@vue/compiler-dom": "3.4.0-alpha.1"
+ "@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/dts-built-test/package.json b/packages/dts-built-test/package.json
index 0a5447877..dca0f80fa 100644
--- a/packages/dts-built-test/package.json
+++ b/packages/dts-built-test/package.json
@@ -1,11 +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:*"
- },
- "version": "3.4.0-alpha.1"
+ }
}
diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index 7466249e1..b3f735dda 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -1472,6 +1472,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)
+})
+
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/package.json b/packages/dts-test/package.json
index ff3c8313e..a6ea96bfa 100644
--- a/packages/dts-test/package.json
+++ b/packages/dts-test/package.json
@@ -1,9 +1,9 @@
{
"name": "dts-test",
"private": true,
+ "version": "0.0.0",
"dependencies": {
"vue": "workspace:*",
"@vue/dts-built-test": "workspace:*"
- },
- "version": "3.4.0-alpha.1"
+ }
}
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 8e43685c5..d84e4bdd9 100644
--- a/packages/reactivity-transform/package.json
+++ b/packages/reactivity-transform/package.json
@@ -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.4.0-alpha.1",
- "@vue/shared": "3.4.0-alpha.1",
+ "@babel/parser": "^7.23.3",
+ "@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.3"
}
}
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__/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 7244b9a92..28647fd55 100644
--- a/packages/reactivity/package.json
+++ b/packages/reactivity/package.json
@@ -36,6 +36,6 @@
},
"homepage": "https://github.com/vuejs/core/tree/main/packages/reactivity#readme",
"dependencies": {
- "@vue/shared": "3.4.0-alpha.1"
+ "@vue/shared": "workspace:*"
}
}
diff --git a/packages/reactivity/src/baseHandlers.ts b/packages/reactivity/src/baseHandlers.ts
index 36e4d311b..d365b6733 100644
--- a/packages/reactivity/src/baseHandlers.ts
+++ b/packages/reactivity/src/baseHandlers.ts
@@ -109,8 +109,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 e8d99840f..9d7c1dd48 100644
--- a/packages/reactivity/src/collectionHandlers.ts
+++ b/packages/reactivity/src/collectionHandlers.ts
@@ -228,7 +228,11 @@ function createReadonlyMethod(type: TriggerOpTypes): Function {
toRaw(this)
)
}
- return type === TriggerOpTypes.DELETE ? false : this
+ return type === TriggerOpTypes.DELETE
+ ? false
+ : type === TriggerOpTypes.CLEAR
+ ? undefined
+ : this
}
}
@@ -342,8 +346,8 @@ function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
? shallowReadonlyInstrumentations
: shallowInstrumentations
: isReadonly
- ? readonlyInstrumentations
- : mutableInstrumentations
+ ? readonlyInstrumentations
+ : mutableInstrumentations
return (
target: CollectionTypes,
diff --git a/packages/reactivity/src/reactive.ts b/packages/reactivity/src/reactive.ts
index 2904c69ab..c4888f6fb 100644
--- a/packages/reactivity/src/reactive.ts
+++ b/packages/reactivity/src/reactive.ts
@@ -138,24 +138,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 5a4dd710e..705d442dc 100644
--- a/packages/reactivity/src/ref.ts
+++ b/packages/reactivity/src/ref.ts
@@ -1,3 +1,4 @@
+import type { ComputedRef } from './computed'
import {
activeEffect,
shouldTrack,
@@ -128,9 +129,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) {
@@ -224,7 +224,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
}
@@ -244,7 +244,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)
}
@@ -429,8 +429,8 @@ export function toRef(
): T extends () => infer R
? Readonly>
: T extends Ref
- ? T
- : Ref>
+ ? T
+ : Ref>
export function toRef(
object: T,
key: K
@@ -491,17 +491,17 @@ 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
@@ -512,9 +512,9 @@ export type UnwrapRefSimple = T extends
| { [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
+ ? { [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__/apiWatch.spec.ts b/packages/runtime-core/__tests__/apiWatch.spec.ts
index bddfc5ff5..1bc012bb3 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 () => {
@@ -1243,4 +1243,39 @@ describe('api: watch', () => {
expect(count.value).toBe(2)
expect(cb).toHaveBeenCalledTimes(1)
})
+
+ // #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 2e989e368..a5ec90ad7 100644
--- a/packages/runtime-core/__tests__/hmr.spec.ts
+++ b/packages/runtime-core/__tests__/hmr.spec.ts
@@ -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'
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 759804b97..7ea607d33 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -935,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(
'',
@@ -953,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(
'',
@@ -1177,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
+ 