BACKERS.md

@@ -0,0 +1,9 @@
+<h1 align="center">Sponsors &amp; Backers</h1>
+
+Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of the awesome sponsors and backers listed in this file. If you'd like to join them, please consider [ sponsor Vue's development](https://vuejs.org/sponsor/).
+
+<p align="center">
+  <a target="_blank" href="https://sponsors.vuejs.org/backers.svg">
+    <img alt="sponsors" src="https://sponsors.vuejs.org/backers.svg">
+  </a>
+</p>

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.2.30](https://github.com/vuejs/core/compare/v3.2.29...v3.2.30) (2022-02-07)
+
+
+### Features
+
+* **ssr:** support custom directive getSSRProps in optimized compilation ([60cf175](https://github.com/vuejs/core/commit/60cf175d88236db2c2a4a02900c92e26ceea0073)), closes [#5304](https://github.com/vuejs/core/issues/5304)
+
+
+### Performance Improvements
+
+* **reactivity:** optimize effect/effectScope active state tracking ([2993a24](https://github.com/vuejs/core/commit/2993a246181df12e367b7abdfce0954244e8f7ec))
+
+
+
 ## [3.2.29](https://github.com/vuejs/vue-next/compare/v3.2.28...v3.2.29) (2022-01-23)
 
 

README.md

@@ -1,22 +1,43 @@
-# vuejs/core [![npm](https://img.shields.io/npm/v/vue/next.svg)](https://www.npmjs.com/package/vue/v/next) [![build status](https://github.com/vuejs/core/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/vuejs/core/actions/workflows/ci.yml)
+# vuejs/core [![npm](https://img.shields.io/npm/v/vue.svg)](https://www.npmjs.com/package/vue) [![build status](https://github.com/vuejs/core/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/vuejs/core/actions/workflows/ci.yml)
 
-This is the repository for Vue 3.x.
+## Getting Started
 
-## Quickstart
+Please follow the documentation at [vuejs.org](https://vuejs.org/)!
 
-- Via CDN: `<script src="https://unpkg.com/vue@next"></script>`
-- Try in the browser on [StackBlitz](https://vite.new/vue)
-- Scaffold via [create-vue](https://github.com/vuejs/create-vue):
+## Sponsors
 
-  ```bash
-  # npm
-  npm init vue@latest
-  # yarn
-  yarn create vue
-  ```
+Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome [backers](https://github.com/vuejs/core/blob/main/BACKERS.md). If you'd like to join them, please consider [ sponsor Vue's development](https://vuejs.org/sponsor/).
 
-## Changes from Vue 2
+<p align="center">
+  <a target="_blank" href="https://vuejs.org/sponsor/">
+    <img alt="sponsors" src="https://sponsors.vuejs.org/sponsors.svg">
+  </a>
+</p>
 
-Please consult the [Migration Guide](http://v3-migration.vuejs.org/).
+## Questions
 
-Also note: Vue 3 does not support IE11 ([RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md) | [Discussion](https://github.com/vuejs/rfcs/discussions/296)).
+For questions and support please use [the official forum](https://forum.vuejs.org) or [community chat](https://chat.vuejs.org/). The issue list of this repo is **exclusively** for bug reports and feature requests.
+
+## Issues
+
+Please make sure to respect issue requirements and use [the new issue helper](https://new-issue.vuejs.org/) when opening an issue. Issues not conforming to the guidelines may be closed immediately.
+
+## Stay In Touch
+
+- [Twitter](https://twitter.com/vuejs)
+- [Blog](https://blog.vuejs.org/)
+- [Job Board](https://vuejobs.com/?ref=vuejs)
+
+## Contribution
+
+Please make sure to read the [Contributing Guide](https://github.com/vuejs/core/blob/main/.github/contributing.md) before making a pull request. If you have a Vue-related project/component/tool, add it with a pull request to [this curated list](https://github.com/vuejs/awesome-vue)!
+
+Thank you to all the people who already contributed to Vue!
+
+<a href="https://github.com/vuejs/vue/graphs/contributors"><img src="https://opencollective.com/vuejs/contributors.svg?width=890" /></a>
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT)
+
+Copyright (c) 2013-present, Yuxi (Evan) You

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "3.2.29",
+  "version": "3.2.30",
   "scripts": {
     "dev": "node scripts/dev.js",
     "build": "node scripts/build.js",

packages/compiler-core/__tests__/transforms/transformElement.spec.ts

@@ -5,7 +5,8 @@ import {
   ErrorCodes,
   BindingTypes,
   NodeTransform,
-  transformExpression
+  transformExpression,
+  baseCompile
 } from '../../src'
 import {
   RESOLVE_COMPONENT,
@@ -66,6 +67,7 @@ function parseWithBind(template: string, options?: CompilerOptions) {
   return parseWithElementTransform(template, {
     ...options,
     directiveTransforms: {
+      ...options?.directiveTransforms,
       bind: transformBind
     }
   })
@@ -932,7 +934,11 @@ describe('compiler: element transform', () => {
     })
 
     test('NEED_PATCH (vnode hooks)', () => {
-      const { node } = parseWithBind(`<div @vnodeUpdated="foo" />`)
+      const root = baseCompile(`<div @vnodeUpdated="foo" />`, {
+        prefixIdentifiers: true,
+        cacheHandlers: true
+      }).ast
+      const node = (root as any).children[0].codegenNode
       expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_PATCH))
     })
 

packages/compiler-core/package.json

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

packages/compiler-core/src/compat/compatConfig.ts

@@ -36,15 +36,15 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
       `Platform-native elements with "is" prop will no longer be ` +
       `treated as components in Vue 3 unless the "is" value is explicitly ` +
       `prefixed with "vue:".`,
-    link: `https://v3.vuejs.org/guide/migration/custom-elements-interop.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html`
   },
 
   [CompilerDeprecationTypes.COMPILER_V_BIND_SYNC]: {
     message: key =>
       `.sync modifier for v-bind has been removed. Use v-model with ` +
       `argument instead. \`v-bind:${key}.sync\` should be changed to ` +
       `\`v-model:${key}\`.`,
-    link: `https://v3.vuejs.org/guide/migration/v-model.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/v-model.html`
   },
 
   [CompilerDeprecationTypes.COMPILER_V_BIND_PROP]: {
@@ -60,12 +60,12 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
       `that appears before v-bind in the case of conflict. ` +
       `To retain 2.x behavior, move v-bind to make it the first attribute. ` +
       `You can also suppress this warning if the usage is intended.`,
-    link: `https://v3.vuejs.org/guide/migration/v-bind.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/v-bind.html`
   },
 
   [CompilerDeprecationTypes.COMPILER_V_ON_NATIVE]: {
     message: `.native modifier for v-on has been removed as is no longer necessary.`,
-    link: `https://v3.vuejs.org/guide/migration/v-on-native-modifier-removed.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html`
   },
 
   [CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE]: {
@@ -75,7 +75,7 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
       `access to v-for scope variables. It is best to avoid the ambiguity ` +
       `with <template> tags or use a computed property that filters v-for ` +
       `data source.`,
-    link: `https://v3.vuejs.org/guide/migration/v-if-v-for.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/v-if-v-for.html`
   },
 
   [CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE]: {
@@ -86,15 +86,15 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
 
   [CompilerDeprecationTypes.COMPILER_INLINE_TEMPLATE]: {
     message: `"inline-template" has been removed in Vue 3.`,
-    link: `https://v3.vuejs.org/guide/migration/inline-template-attribute.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/inline-template-attribute.html`
   },
 
   [CompilerDeprecationTypes.COMPILER_FILTERS]: {
     message:
       `filters have been removed in Vue 3. ` +
       `The "|" symbol will be treated as native JavaScript bitwise OR operator. ` +
       `Use method calls or computed properties instead.`,
-    link: `https://v3.vuejs.org/guide/migration/filters.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/filters.html`
   }
 }
 

packages/compiler-core/src/index.ts

@@ -54,7 +54,9 @@ export {
 export {
   transformElement,
   resolveComponentType,
-  buildProps
+  buildProps,
+  buildDirectiveArgs,
+  PropsExpression
 } from './transforms/transformElement'
 export { processSlotOutlet } from './transforms/transformSlotOutlet'
 export { generateCodeFrame } from '@vue/shared'

packages/compiler-core/src/transforms/transformElement.ts

@@ -29,7 +29,8 @@ import {
   isObject,
   isReservedProp,
   capitalize,
-  camelize
+  camelize,
+  isBuiltInDirective
 } from '@vue/shared'
 import { createCompilerError, ErrorCodes } from '../errors'
 import {
@@ -665,7 +666,7 @@ export function buildProps(
             directiveImportMap.set(prop, needRuntime)
           }
         }
-      } else {
+      } else if (!isBuiltInDirective(name)) {
         // no built-in transform, this is a user custom directive.
         runtimeDirectives.push(prop)
         // custom dirs may use beforeUpdate so they need to force blocks
@@ -853,7 +854,7 @@ function mergeAsArray(existing: Property, incoming: Property) {
   }
 }
 
-function buildDirectiveArgs(
+export function buildDirectiveArgs(
   dir: DirectiveNode,
   context: TransformContext
 ): ArrayExpression {

packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap

@@ -37,14 +37,11 @@ exports[`compiler: transform v-model input w/ dynamic v-bind 2`] = `
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelDynamic: _vModelDynamic, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    const _directive_bind = _resolveDirective(\\"bind\\")
+    const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
       \\"onUpdate:modelValue\\": $event => ((model) = $event)
     }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
-      [_directive_bind, val, key],
       [_vModelDynamic, model]
     ])
   }
@@ -152,14 +149,11 @@ exports[`compiler: transform v-model simple expression for input (dynamic type)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { vModelDynamic: _vModelDynamic, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
-
-    const _directive_bind = _resolveDirective(\\"bind\\")
+    const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
       \\"onUpdate:modelValue\\": $event => ((model) = $event)
     }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
-      [_directive_bind, foo, \\"type\\"],
       [_vModelDynamic, model]
     ])
   }

packages/compiler-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-dom",
-  "version": "3.2.29",
+  "version": "3.2.30",
   "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.2.29",
-    "@vue/compiler-core": "3.2.29"
+    "@vue/shared": "3.2.30",
+    "@vue/compiler-core": "3.2.30"
   }
 }

packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.2.29",
+  "version": "3.2.30",
   "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.16.4",
-    "@vue/compiler-core": "3.2.29",
-    "@vue/compiler-dom": "3.2.29",
-    "@vue/compiler-ssr": "3.2.29",
-    "@vue/reactivity-transform": "3.2.29",
-    "@vue/shared": "3.2.29",
+    "@vue/compiler-core": "3.2.30",
+    "@vue/compiler-dom": "3.2.30",
+    "@vue/compiler-ssr": "3.2.30",
+    "@vue/reactivity-transform": "3.2.30",
+    "@vue/shared": "3.2.30",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.25.7",
     "source-map": "^0.6.1",

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

@@ -377,4 +377,20 @@ describe('ssr: components', () => {
       })
     })
   })
+
+  describe('custom directive', () => {
+    test('basic', () => {
+      expect(compile(`<foo v-xxx:x.y="z" />`).code).toMatchInlineSnapshot(`
+        "const { resolveComponent: _resolveComponent, resolveDirective: _resolveDirective, mergeProps: _mergeProps } = require(\\"vue\\")
+        const { ssrGetDirectiveProps: _ssrGetDirectiveProps, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          const _component_foo = _resolveComponent(\\"foo\\")
+          const _directive_xxx = _resolveDirective(\\"xxx\\")
+
+          _push(_ssrRenderComponent(_component_foo, _mergeProps(_attrs, _ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, \\"x\\", { y: true })), null, _parent))
+        }"
+      `)
+    })
+  })
 })

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

@@ -288,5 +288,56 @@ describe('ssr: element', () => {
           }></div>\`"
       `)
     })
+
+    test('custom dir', () => {
+      expect(getCompiledString(`<div v-xxx:x.y="z" />`)).toMatchInlineSnapshot(`
+        "\`<div\${
+            _ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, \\"x\\", { y: true }))
+          }></div>\`"
+      `)
+    })
+
+    test('custom dir with normal attrs', () => {
+      expect(getCompiledString(`<div class="foo" v-xxx />`))
+        .toMatchInlineSnapshot(`
+        "\`<div\${
+            _ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
+          }></div>\`"
+      `)
+    })
+
+    test('custom dir with v-bind', () => {
+      expect(getCompiledString(`<div :title="foo" :class="bar" v-xxx />`))
+        .toMatchInlineSnapshot(`
+        "\`<div\${
+            _ssrRenderAttrs(_mergeProps({
+              title: _ctx.foo,
+              class: _ctx.bar
+            }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
+          }></div>\`"
+      `)
+    })
+
+    test('custom dir with object v-bind', () => {
+      expect(getCompiledString(`<div v-bind="x" v-xxx />`))
+        .toMatchInlineSnapshot(`
+        "\`<div\${
+            _ssrRenderAttrs(_mergeProps(_ctx.x, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
+          }></div>\`"
+      `)
+    })
+
+    test('custom dir with object v-bind + normal bindings', () => {
+      expect(
+        getCompiledString(`<div v-bind="x" class="foo" v-xxx title="bar" />`)
+      ).toMatchInlineSnapshot(`
+        "\`<div\${
+            _ssrRenderAttrs(_mergeProps(_ctx.x, {
+              class: \\"foo\\",
+              title: \\"bar\\"
+            }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
+          }></div>\`"
+      `)
+    })
   })
 })