CHANGELOG.md

@@ -1,3 +1,21 @@
+## [3.2.2](https://github.com/vuejs/vue-next/compare/v3.2.1...v3.2.2) (2021-08-11)
+
+
+### Bug Fixes
+
+* **runtime-dom:** patch `textContent` on svg properly ([#4301](https://github.com/vuejs/vue-next/issues/4301)) ([e7b0a9d](https://github.com/vuejs/vue-next/commit/e7b0a9d3cffc938d3add7dcde02d0991f60c6ec9)), closes [#4296](https://github.com/vuejs/vue-next/issues/4296)
+* **server-renderer:** pipeToWebWritable CF worker compat ([2224610](https://github.com/vuejs/vue-next/commit/2224610b0b390d82d7b5436df1f78b0569a199a9)), closes [#4287](https://github.com/vuejs/vue-next/issues/4287)
+* **types:** allow symbol in JSX ReservedProps.key ([#4306](https://github.com/vuejs/vue-next/issues/4306)) ([6e5801f](https://github.com/vuejs/vue-next/commit/6e5801f8a8cc23d05817ee94fd98cb1889cc8413))
+* **types:** fix forceUpdate type ([#4302](https://github.com/vuejs/vue-next/issues/4302)) ([380608b](https://github.com/vuejs/vue-next/commit/380608bd44eb385ec085eec4355e6fdc01ca09cd))
+* **types:** fix tsx emit-mapped handler return type ([#4290](https://github.com/vuejs/vue-next/issues/4290)) ([1ce34e2](https://github.com/vuejs/vue-next/commit/1ce34e25d56e73591acc5bbe6e52ec8ef026cc6c)), closes [#4288](https://github.com/vuejs/vue-next/issues/4288)
+
+
+### Features
+
+* **sfc:** support $shallowRef ref sugar ([00b76d3](https://github.com/vuejs/vue-next/commit/00b76d3dc192138514ae6464ded34be5b0c730bb))
+
+
+
 ## [3.2.1](https://github.com/vuejs/vue-next/compare/v3.2.0...v3.2.1) (2021-08-09)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "3.2.1",
+  "version": "3.2.2",
   "workspaces": [
     "packages/*"
   ],

packages/compiler-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-core",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "@vue/compiler-core",
   "main": "index.js",
   "module": "dist/compiler-core.esm-bundler.js",
@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/vuejs/vue-next/tree/master/packages/compiler-core#readme",
   "dependencies": {
-    "@vue/shared": "3.2.1",
+    "@vue/shared": "3.2.2",
     "@babel/parser": "^7.12.0",
     "@babel/types": "^7.12.0",
     "estree-walker": "^2.0.1",

packages/compiler-dom/package.json

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

packages/compiler-dom/src/transforms/stringifyStatic.ts

@@ -183,7 +183,6 @@ function analyzeNode(node: StringifiableNode): [number, number] | false {
   let ec = node.props.length > 0 ? 1 : 0 // element w/ binding count
   let bailed = false
   const bail = (): false => {
-    debugger
     bailed = true
     return false
   }

packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefSugar.spec.ts.snap

@@ -33,16 +33,16 @@ return { a, b, c }
 }"
 `;
 
-exports[`<script setup> ref sugar $ref declarations 1`] = `
-"import { ref as _ref } from 'vue'
+exports[`<script setup> ref sugar $ref & $shallowRef declarations 1`] = `
+"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
 
 export default {
   setup(__props, { expose }) {
   expose()
 
     let foo = _ref()
     let a = _ref(1)
-    let b = _ref({
+    let b = _shallowRef({
       count: 0
     })
     let c = () => {}

packages/compiler-sfc/__tests__/compileScriptRefSugar.spec.ts

@@ -6,24 +6,26 @@ describe('<script setup> ref sugar', () => {
     return compile(src, { refSugar: true })
   }
 
-  test('$ref declarations', () => {
+  test('$ref & $shallowRef declarations', () => {
     const { content, bindings } = compileWithRefSugar(`<script setup>
     let foo = $ref()
     let a = $ref(1)
-    let b = $ref({
+    let b = $shallowRef({
       count: 0
     })
     let c = () => {}
     let d
     </script>`)
-    expect(content).toMatch(`import { ref as _ref } from 'vue'`)
+    expect(content).toMatch(
+      `import { ref as _ref, shallowRef as _shallowRef } from 'vue'`
+    )
     expect(content).not.toMatch(`$ref()`)
     expect(content).not.toMatch(`$ref(1)`)
-    expect(content).not.toMatch(`$ref({`)
+    expect(content).not.toMatch(`$shallowRef({`)
     expect(content).toMatch(`let foo = _ref()`)
     expect(content).toMatch(`let a = _ref(1)`)
     expect(content).toMatch(`
-    let b = _ref({
+    let b = _shallowRef({
       count: 0
     })
     `)
@@ -366,5 +368,26 @@ describe('<script setup> ref sugar', () => {
         )
       ).toThrow(`cannot reference locally declared variables`)
     })
+
+    test('warn usage in non-init positions', () => {
+      expect(() =>
+        compile(
+          `<script setup>
+      let bar = $ref(1)
+      bar = $ref(2)
+    </script>`,
+          { refSugar: true }
+        )
+      ).toThrow(`$ref can only be used directly as a variable initializer`)
+
+      expect(() =>
+        compile(
+          `<script setup>
+      let bar = { foo: $computed(1) }
+    </script>`,
+          { refSugar: true }
+        )
+      ).toThrow(`$computed can only be used directly as a variable initializer`)
+    })
   })
 })

packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "types": "dist/compiler-sfc.d.ts",
@@ -34,10 +34,10 @@
     "@babel/parser": "^7.13.9",
     "@babel/types": "^7.13.0",
     "@types/estree": "^0.0.48",
-    "@vue/compiler-core": "3.2.1",
-    "@vue/compiler-dom": "3.2.1",
-    "@vue/compiler-ssr": "3.2.1",
-    "@vue/shared": "3.2.1",
+    "@vue/compiler-core": "3.2.2",
+    "@vue/compiler-dom": "3.2.2",
+    "@vue/compiler-ssr": "3.2.2",
+    "@vue/shared": "3.2.2",
     "consolidate": "^0.16.0",
     "estree-walker": "^2.0.1",
     "hash-sum": "^2.0.0",

packages/compiler-sfc/src/compileScript.ts

@@ -65,6 +65,7 @@ const DEFINE_EXPOSE = 'defineExpose'
 const WITH_DEFAULTS = 'withDefaults'
 
 const $REF = `$ref`
+const $SHALLOW_REF = '$shallowRef'
 const $COMPUTED = `$computed`
 const $FROM_REFS = `$fromRefs`
 const $RAW = `$raw`
@@ -531,7 +532,12 @@ export function compileScript(
   }
 
   function isRefSugarCall(callee: string) {
-    return callee === $REF || callee === $COMPUTED || callee === $FROM_REFS
+    return (
+      callee === $REF ||
+      callee === $COMPUTED ||
+      callee === $FROM_REFS ||
+      callee === $SHALLOW_REF
+    )
   }
 
   function processRefSugar(
@@ -558,24 +564,28 @@ export function compileScript(
 
     const callee = (decl.init.callee as Identifier).name
     const start = decl.init.start! + startOffset
-    if (callee === $REF) {
+    if (callee === $REF || callee === $SHALLOW_REF) {
       if (statement.kind !== 'let') {
-        error(`${$REF}() bindings can only be declared with let.`, decl)
+        error(`${callee}() bindings can only be declared with let.`, decl)
       }
       if (decl.id.type !== 'Identifier') {
         error(
-          `${$REF}() bindings cannot be used with destructuring. ` +
+          `${callee}() bindings cannot be used with destructuring. ` +
             `If you are trying to destructure from an object of refs, ` +
             `use \`let { x } = $fromRefs(obj)\`.`,
           decl.id
         )
       }
       registerRefBinding(decl.id)
-      s.overwrite(start, start + $REF.length, helper('ref'))
+      s.overwrite(
+        start,
+        start + callee.length,
+        helper(callee === $REF ? 'ref' : 'shallowRef')
+      )
     } else if (callee === $COMPUTED) {
       if (decl.id.type !== 'Identifier') {
         error(
-          `${$COMPUTED}() bindings cannot be used with destructuring.`,
+          `${callee}() bindings cannot be used with destructuring.`,
           decl.id
         )
       }
@@ -584,7 +594,7 @@ export function compileScript(
     } else if (callee === $FROM_REFS) {
       if (!decl.id.type.endsWith('Pattern')) {
         error(
-          `${$FROM_REFS}() declaration must be used with destructure patterns.`,
+          `${callee}() declaration must be used with destructure patterns.`,
           decl
         )
       }
@@ -1096,7 +1106,7 @@ export function compileScript(
 
   // 3. Do a full walk to rewrite identifiers referencing let exports with ref
   // value access
-  if (enableRefSugar && Object.keys(refBindings).length) {
+  if (enableRefSugar) {
     const onIdent = (id: Identifier, parent: Node, parentStack: Node[]) => {
       if (refBindings[id.name] && !refIdentifiers.has(id)) {
         if (isStaticProperty(parent) && parent.shorthand) {
@@ -1115,13 +1125,23 @@ export function compileScript(
       }
     }
 
-    const onNode = (node: Node) => {
+    const onNode = (node: Node, parent: Node) => {
       if (isCallOf(node, $RAW)) {
         s.remove(
           node.callee.start! + startOffset,
           node.callee.end! + startOffset
         )
         return false // skip walk
+      } else if (
+        parent &&
+        isCallOf(node, isRefSugarCall) &&
+        (parent.type !== 'VariableDeclarator' || node !== parent.init)
+      ) {
+        error(
+          // @ts-ignore
+          `${node.callee.name} can only be used directly as a variable initializer.`,
+          node
+        )
       }
     }
 

packages/compiler-ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-ssr",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "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/vue-next/tree/master/packages/compiler-ssr#readme",
   "dependencies": {
-    "@vue/shared": "3.2.1",
-    "@vue/compiler-dom": "3.2.1"
+    "@vue/shared": "3.2.2",
+    "@vue/compiler-dom": "3.2.2"
   }
 }

packages/reactivity/__tests__/effectScope.spec.ts

@@ -192,6 +192,25 @@ describe('reactivity/effect/scope', () => {
     expect(dummy).toBe(7)
   })
 
+  it('should warn onDispose() is called when there is no active effect scope', () => {
+    const spy = jest.fn()
+    const scope = new EffectScope()
+    scope.run(() => {
+      onScopeDispose(spy)
+    })
+
+    expect(spy).toHaveBeenCalledTimes(0)
+
+    onScopeDispose(spy)
+
+    expect(
+      '[Vue warn] onDispose() is called when there is no active effect scope to be associated with.'
+    ).toHaveBeenWarned()
+
+    scope.stop()
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+
   it('should derefence child scope from parent scope after stopping child scope (no memleaks)', async () => {
     const parent = new EffectScope()
     const child = parent.run(() => new EffectScope())!

packages/reactivity/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/reactivity",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "@vue/reactivity",
   "main": "index.js",
   "module": "dist/reactivity.esm-bundler.js",
@@ -36,6 +36,6 @@
   },
   "homepage": "https://github.com/vuejs/vue-next/tree/master/packages/reactivity#readme",
   "dependencies": {
-    "@vue/shared": "3.2.1"
+    "@vue/shared": "3.2.2"
   }
 }

packages/reactivity/src/effectScope.ts

@@ -98,7 +98,7 @@ export function onScopeDispose(fn: () => void) {
     activeEffectScope.cleanups.push(fn)
   } else if (__DEV__) {
     warn(
-      `onDispose() is called when there is no active effect scope ` +
+      `onDispose() is called when there is no active effect scope` +
         ` to be associated with.`
     )
   }

packages/runtime-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-core",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "@vue/runtime-core",
   "main": "index.js",
   "module": "dist/runtime-core.esm-bundler.js",
@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/vuejs/vue-next/tree/master/packages/runtime-core#readme",
   "dependencies": {
-    "@vue/shared": "3.2.1",
-    "@vue/reactivity": "3.2.1"
+    "@vue/shared": "3.2.2",
+    "@vue/reactivity": "3.2.2"
   }
 }

packages/runtime-core/src/componentEmits.ts

@@ -44,7 +44,11 @@ export type EmitsToProps<T extends EmitsOptions> = T extends string[]
         `on${Capitalize<string & keyof T>}`]?: K extends `on${infer C}`
         ? T[Uncapitalize<C>] extends null
           ? (...args: any[]) => any
-          : T[Uncapitalize<C>]
+          : (
+              ...args: T[Uncapitalize<C>] extends (...args: infer P) => any
+                ? P
+                : never
+            ) => any
         : never
     }
   : {}

packages/runtime-core/src/componentPublicInstance.ts

@@ -16,7 +16,6 @@ import {
   isFunction
 } from '@vue/shared'
 import {
-  ReactiveEffect,
   toRaw,
   shallowReadonly,
   track,
@@ -192,7 +191,7 @@ export type ComponentPublicInstance<
   $emit: EmitFn<E>
   $el: any
   $options: Options & MergedComponentOptionsOverride
-  $forceUpdate: ReactiveEffect
+  $forceUpdate: () => void
   $nextTick: typeof nextTick
   $watch(
     source: string | Function,