Merge branch 'main' into types/instanceWatch

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [3.3.6](https://github.com/vuejs/core/compare/v3.3.5...v3.3.6) (2023-10-20)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** model name conflict ([#8798](https://github.com/vuejs/core/issues/8798)) ([df81da8](https://github.com/vuejs/core/commit/df81da8be97c8a1366563c7e3e01076ef02eb8f7))
+* **compiler-sfc:** support asset paths containing spaces ([#8752](https://github.com/vuejs/core/issues/8752)) ([36c99a9](https://github.com/vuejs/core/commit/36c99a9c6bb6bc306be054c3c8a85ff8ce50605a))
+* **compiler-ssr:** fix missing scopeId on server-rendered TransitionGroup ([#7557](https://github.com/vuejs/core/issues/7557)) ([61c1357](https://github.com/vuejs/core/commit/61c135742795aa5e3189a79c7dec6afa21bbc8d9)), closes [#7554](https://github.com/vuejs/core/issues/7554)
+* **compiler-ssr:** fix ssr compile error for select with non-option children ([#9442](https://github.com/vuejs/core/issues/9442)) ([cdb2e72](https://github.com/vuejs/core/commit/cdb2e725e7ea297f1f4180fb04889a3b757bc84e)), closes [#9440](https://github.com/vuejs/core/issues/9440)
+* **runtime-core:** delete stale slots which are present but undefined ([#6484](https://github.com/vuejs/core/issues/6484)) ([75b8722](https://github.com/vuejs/core/commit/75b872213574cb37e2c9e8a15f65613f867ca9a6)), closes [#9109](https://github.com/vuejs/core/issues/9109)
+* **runtime-core:** fix error when using cssvars with disabled teleport ([#7341](https://github.com/vuejs/core/issues/7341)) ([8f0472c](https://github.com/vuejs/core/commit/8f0472c9abedb337dc256143b69d8ab8759dbf5c)), closes [#7342](https://github.com/vuejs/core/issues/7342)
+* **teleport:** ensure descendent component would be unmounted correctly ([#6529](https://github.com/vuejs/core/issues/6529)) ([4162311](https://github.com/vuejs/core/commit/4162311efdb0db5ca458542e1604b19efa2fae0e)), closes [#6347](https://github.com/vuejs/core/issues/6347)
+* **types:** support contenteditable="plaintext-only" ([#8796](https://github.com/vuejs/core/issues/8796)) ([26ca89e](https://github.com/vuejs/core/commit/26ca89e5cf734fbef81e182050d2a215ec8a437b))
+
+
+### Performance Improvements
+
+* replace Map/Set with WeakMap/WeakSet ([#8549](https://github.com/vuejs/core/issues/8549)) ([712f96d](https://github.com/vuejs/core/commit/712f96d6ac4d3d984732cba448cb84624daba850))
+
+
+
 ## [3.3.5](https://github.com/vuejs/core/compare/v3.3.4...v3.3.5) (2023-10-20)
 
 

package.json

@@ -1,6 +1,6 @@
 {
  "private": true,
- "version": "3.3.5",
+ "version": "3.3.6",
  "packageManager": "pnpm@8.9.2",
  "type": "module",
  "scripts": {

packages/compiler-core/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@vue/compiler-core",
- "version": "3.3.5",
+ "version": "3.3.6",
  "description": "@vue/compiler-core",
  "main": "index.js",
  "module": "dist/compiler-core.esm-bundler.js",
@@ -33,7 +33,7 @@
  "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-core#readme",
  "dependencies": {
  "@babel/parser": "^7.23.0",
- "@vue/shared": "3.3.5",
+ "@vue/shared": "3.3.6",
  "estree-walker": "^2.0.2",
  "source-map-js": "^1.0.2"
  },

packages/compiler-dom/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@vue/compiler-dom",
- "version": "3.3.5",
+ "version": "3.3.6",
  "description": "@vue/compiler-dom",
  "main": "index.js",
  "module": "dist/compiler-dom.esm-bundler.js",
@@ -37,7 +37,7 @@
  },
  "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-dom#readme",
  "dependencies": {
- "@vue/shared": "3.3.5",
- "@vue/compiler-core": "3.3.5"
+ "@vue/shared": "3.3.6",
+ "@vue/compiler-core": "3.3.6"
  }
 }

packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts

@@ -1,3 +1,4 @@
+import { normalize } from 'node:path'
 import { Identifier } from '@babel/types'
 import { SFCScriptCompileOptions, parse } from '../../src'
 import { ScriptCompileContext } from '../../src/script/context'
@@ -478,6 +479,33 @@ describe('resolveType', () => {
  expect(deps && [...deps]).toStrictEqual(Object.keys(files))
  })
 
+ 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':
+ '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'
+ }
+ const { props, deps } = resolve(
+ `
+ import { P } from './foo'
+ import { Y as PP } from './bar'
+ defineProps<P & PP>()
+ `,
+ files,
+ {},
+ 'C:\\Test\\Test.vue'
+ )
+ expect(props).toStrictEqual({
+ foo: ['Number'],
+ bar: ['String']
+ })
+ expect(deps && [...deps].map(normalize)).toStrictEqual(
+ Object.keys(files).map(normalize)
+ )
+ })
+
  // #8244
  test('utility type in external file', () => {
  const files = {
@@ -898,19 +926,20 @@ describe('resolveType', () => {
 function resolve(
  code: string,
  files: Record<string, string> = {},
- options?: Partial<SFCScriptCompileOptions>
+ options?: Partial<SFCScriptCompileOptions>,
+ sourceFileName: string = '/Test.vue'
 ) {
  const { descriptor } = parse(`<script setup lang="ts">\n${code}\n</script>`, {
- 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

packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@vue/compiler-sfc",
- "version": "3.3.5",
+ "version": "3.3.6",
  "description": "@vue/compiler-sfc",
  "main": "dist/compiler-sfc.cjs.js",
  "module": "dist/compiler-sfc.esm-browser.js",
@@ -33,11 +33,11 @@
  "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",
+ "@vue/compiler-core": "3.3.6",
+ "@vue/compiler-dom": "3.3.6",
+ "@vue/compiler-ssr": "3.3.6",
+ "@vue/reactivity-transform": "3.3.6",
+ "@vue/shared": "3.3.6",
  "estree-walker": "^2.0.2",
  "magic-string": "^0.30.5",
  "postcss": "^8.4.31",

packages/compiler-sfc/src/script/resolveType.ts

@@ -778,7 +778,7 @@ function importSourceToScope(
  if (!resolved) {
  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

packages/compiler-ssr/__tests__/ssrVModel.spec.ts

@@ -69,6 +69,57 @@ describe('ssr: v-model', () => {
  }></option></select></div>\`)
  }"
  `)
+
+ expect(
+ compileWithWrapper(`<select multiple v-model="model"><slot/></select>`)
+ .code
+ ).toMatchInlineSnapshot(`
+ "const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ _push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple>\`)
+ _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
+ _push(\`</select></div>\`)
+ }"
+ `)
+
+ expect(
+ compileWithWrapper(`
+ <select multiple v-model="model">
+ <optgroup label="foo">
+ <option value="bar">bar</option>
+ </optgroup>
+ </select>`).code
+ ).toMatchInlineSnapshot(`
+ "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ _push(\`<div\${
+ _ssrRenderAttrs(_attrs)
+ }><select multiple><optgroup label=\\"foo\\"><option value=\\"bar\\"\${
+ (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
+ ? _ssrLooseContain(_ctx.model, \\"bar\\")
+ : _ssrLooseEqual(_ctx.model, \\"bar\\"))) ? \\" selected\\" : \\"\\"
+ }>bar</option></optgroup></select></div>\`)
+ }"
+ `)
+
+ expect(
+ compileWithWrapper(`
+ <select multiple v-model="model">
+ <optgroup label="foo">
+ <slot/>
+ </optgroup>
+ </select>`).code
+ ).toMatchInlineSnapshot(`
+ "const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ _push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple><optgroup label=\\"foo\\">\`)
+ _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
+ _push(\`</optgroup></select></div>\`)
+ }"
+ `)
  })
 
  test('<input type="radio">', () => {

packages/compiler-ssr/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@vue/compiler-ssr",
- "version": "3.3.5",
+ "version": "3.3.6",
  "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": "3.3.6",
+ "@vue/compiler-dom": "3.3.6"
  }
 }

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 {

packages/dts-test/package.json

@@ -4,5 +4,5 @@
  "dependencies": {
  "vue": "workspace:*"
  },
- "version": "3.3.5"
+ "version": "3.3.6"
 }

packages/reactivity-transform/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@vue/reactivity-transform",
- "version": "3.3.5",
+ "version": "3.3.6",
  "description": "@vue/reactivity-transform",
  "main": "dist/reactivity-transform.cjs.js",
  "files": [
@@ -29,8 +29,8 @@
  "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",
+ "@vue/compiler-core": "3.3.6",
+ "@vue/shared": "3.3.6",
  "estree-walker": "^2.0.2",
  "magic-string": "^0.30.5"
  },

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 = () => {}

packages/reactivity/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@vue/reactivity",
- "version": "3.3.5",
+ "version": "3.3.6",
  "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": "3.3.6"
  }
 }

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)
  }
  })