Merge remote-tracking branch 'upstream/main' into computed-ondemand

Author: johnsoncodehk

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -17,6 +17,12 @@ body:
         Also try to search for your issue - it may have already been answered or even fixed in the development branch.
         However, if you find that an old, closed issue still persists in the latest version,
         you should open a new issue using the form below instead of commenting on the old issue.
+  - type: input
+    id: version
+    attributes:
+      label: Vue version
+    validations:
+      required: true
   - type: input
     id: reproduction-link
     attributes:

.github/contributing.md

@@ -19,6 +19,8 @@ Hi! I'm really excited that you are interested in contributing to Vue.js. Before
 
 - Checkout a topic branch from a base branch, e.g. `main`, and merge back against that branch.
 
+- [Make sure to tick the "Allow edits from maintainers" box](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork). This allows us to directly make minor edits / refactors and saves a lot of time.
+
 - If adding a new feature:
 
   - Add accompanying test case.

.github/workflows/ci.yml

@@ -13,9 +13,7 @@ jobs:
       - uses: actions/checkout@v2
 
       - name: Install pnpm
-        uses: pnpm/[email protected]
-        with:
-          version: 7.0.1
+        uses: pnpm/action-setup@v2
 
       - name: Set node version to 16
         uses: actions/setup-node@v2
@@ -34,9 +32,7 @@ jobs:
       - uses: actions/checkout@v2
 
       - name: Install pnpm
-        uses: pnpm/[email protected]
-        with:
-          version: 7.0.1
+        uses: pnpm/action-setup@v2
 
       - name: Set node version to 16
         uses: actions/setup-node@v2
@@ -55,9 +51,7 @@ jobs:
       - uses: actions/checkout@v2
 
       - name: Install pnpm
-        uses: pnpm/[email protected]
-        with:
-          version: 7.0.1
+        uses: pnpm/action-setup@v2
 
       - name: Set node version to 16
         uses: actions/setup-node@v2
@@ -81,9 +75,7 @@ jobs:
       - uses: actions/checkout@v2
 
       - name: Install pnpm
-        uses: pnpm/[email protected]
-        with:
-          version: 7.0.1
+        uses: pnpm/action-setup@v2
 
       - name: Set node version to 16
         uses: actions/setup-node@v2

CHANGELOG.md

@@ -1,6 +1,7 @@
 {
   "private": true,
-  "version": "3.2.33",
+  "version": "3.2.36",
+  "packageManager": "[email protected]",
   "scripts": {
     "dev": "node scripts/dev.js",
     "build": "node scripts/build.js",
@@ -17,13 +18,14 @@
     "test-coverage": "node scripts/build.js vue -f global -d && jest --runInBand --coverage --bail",
     "release": "node scripts/release.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "dev-esm": "node scripts/dev.js -if esm-bundler-runtime",
     "dev-compiler": "run-p \"dev template-explorer\" serve",
-    "dev-sfc": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime \" serve-sfc-playground",
+    "dev-sfc": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev server-renderer -if esm-bundler\" serve-sfc-playground",
     "serve-sfc-playground": "vite packages/sfc-playground --host",
     "serve": "serve",
     "open": "open http://localhost:5000/packages/template-explorer/local.html",
     "preinstall": "node ./scripts/preinstall.js",
-    "prebuild-sfc-playground": "node scripts/build.js compiler reactivity-transform shared -af cjs && node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime && node scripts/build.js compiler-sfc -f esm-browser",
+    "prebuild-sfc-playground": "node scripts/build.js compiler reactivity-transform shared -af cjs && node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime && node scripts/build.js compiler-sfc server-renderer -f esm-browser",
     "build-sfc-playground": "cd packages/sfc-playground && npm run build"
   },
   "types": "test-dts/index.d.ts",

package.json

@@ -211,6 +211,30 @@ return function render(_ctx, _cache) {
 }"
 `;
 
+exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist SVG with directives 1`] = `
+"const _Vue = Vue
+const { createElementVNode: _createElementVNode } = _Vue
+
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"path\\", { d: \\"M2,3H5.5L12\\" }, null, -1 /* HOISTED */)
+const _hoisted_2 = [
+  _hoisted_1
+]
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { createElementVNode: _createElementVNode, resolveDirective: _resolveDirective, openBlock: _openBlock, createElementBlock: _createElementBlock, withDirectives: _withDirectives } = _Vue
+
+    const _directive_foo = _resolveDirective(\\"foo\\")
+
+    return (_openBlock(), _createElementBlock(\\"div\\", null, [
+      _withDirectives((_openBlock(), _createElementBlock(\\"svg\\", null, _hoisted_2)), [
+        [_directive_foo]
+      ])
+    ]))
+  }
+}"
+`;
+
 exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist elements with cached handlers + other bindings 1`] = `
 "import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 

packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap

@@ -616,5 +616,11 @@ describe('compiler: hoistStatic transform', () => {
       expect(root.hoists.length).toBe(0)
       expect(generate(root).code).toMatchSnapshot()
     })
+
+    test('should NOT hoist SVG with directives', () => {
+      const root = transformWithHoist(`<div><svg v-foo><path d="M2,3H5.5L12"/></svg></div>`)
+      expect(root.hoists.length).toBe(2)
+      expect(generate(root).code).toMatchSnapshot()
+    })
   })
 })

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

@@ -1053,6 +1053,21 @@ describe('compiler: element transform', () => {
         genFlagText([PatchFlags.PROPS, PatchFlags.HYDRATE_EVENTS])
       )
     })
+
+    // #5870
+    test('HYDRATE_EVENTS on dynamic component', () => {
+      const { node } = parseWithElementTransform(
+        `<component :is="foo" @input="foo" />`,
+        {
+          directiveTransforms: {
+            on: transformOn
+          }
+        }
+      )
+      expect(node.patchFlag).toBe(
+        genFlagText([PatchFlags.PROPS, PatchFlags.HYDRATE_EVENTS])
+      )
+    })
   })
 
   describe('dynamic component', () => {

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

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-core",
-  "version": "3.2.33",
+  "version": "3.2.36",
   "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.33",
+    "@vue/shared": "3.2.36",
     "@babel/parser": "^7.16.4",
     "estree-walker": "^2.0.2",
     "source-map": "^0.6.1"

packages/compiler-core/package.json

@@ -68,7 +68,7 @@ export interface DirectiveTransformResult {
   ssrTagParts?: TemplateLiteral['elements']
 }
 
-// A structural directive transform is a technically a NodeTransform;
+// A structural directive transform is technically also a NodeTransform;
 // Only v-if and v-for fall into this category.
 export type StructuralDirectiveTransform = (
   node: ElementNode,

packages/compiler-core/src/transform.ts

@@ -230,6 +230,15 @@ export function getConstantType(
         // static then they don't need to be blocks since there will be no
         // nested updates.
         if (codegenNode.isBlock) {
+          // except set custom directives.
+          for (let i = 0; i < node.props.length; i++) {
+            const p = node.props[i]
+            if (p.type === NodeTypes.DIRECTIVE) {
+              constantCache.set(node, ConstantTypes.NOT_CONSTANT)
+              return ConstantTypes.NOT_CONSTANT
+            }
+          }
+
           context.removeHelper(OPEN_BLOCK)
           context.removeHelper(
             getVNodeBlockHelper(context.inSSR, codegenNode.isComponent)

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

@@ -121,7 +121,13 @@ export const transformElement: NodeTransform = (node, context) => {
 
     // props
     if (props.length > 0) {
-      const propsBuildResult = buildProps(node, context)
+      const propsBuildResult = buildProps(
+        node,
+        context,
+        undefined,
+        isComponent,
+        isDynamicComponent
+      )
       vnodeProps = propsBuildResult.props
       patchFlag = propsBuildResult.patchFlag
       dynamicPropNames = propsBuildResult.dynamicPropNames
@@ -380,6 +386,8 @@ export function buildProps(
   node: ElementNode,
   context: TransformContext,
   props: ElementNode['props'] = node.props,
+  isComponent: boolean,
+  isDynamicComponent: boolean,
   ssr = false
 ): {
   props: PropsExpression | undefined
@@ -389,7 +397,6 @@ export function buildProps(
   shouldUseBlock: boolean
 } {
   const { tag, loc: elementLoc, children } = node
-  const isComponent = node.tagType === ElementTypes.COMPONENT
   let properties: ObjectExpression['properties'] = []
   const mergeArgs: PropsExpression[] = []
   const runtimeDirectives: DirectiveNode[] = []
@@ -411,8 +418,8 @@ export function buildProps(
       const name = key.content
       const isEventHandler = isOn(name)
       if (
-        !isComponent &&
         isEventHandler &&
+        (!isComponent || isDynamicComponent) &&
         // omit the flag for click handlers because hydration gives click
         // dedicated fast path.
         name.toLowerCase() !== 'onclick' &&

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

@@ -87,7 +87,13 @@ export function processSlotOutlet(
   }
 
   if (nonNameProps.length > 0) {
-    const { props, directives } = buildProps(node, context, nonNameProps)
+    const { props, directives } = buildProps(
+      node,
+      context,
+      nonNameProps,
+      false,
+      false
+    )
     slotProps = props
 
     if (directives.length) {

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

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

packages/compiler-dom/package.json

@@ -205,7 +205,7 @@ export default {
   expose();
 
 let __temp, __restore
-if (ok) { 
+if (ok) {
         for (let a of [1,2,3]) {
           (
   ([__temp,__restore] = _withAsyncContext(() => a)),
@@ -240,7 +240,7 @@ export default {
   expose();
 
 let __temp, __restore
-if (ok) { 
+if (ok) {
         while (d) {
           (
   ([__temp,__restore] = _withAsyncContext(() => 5)),
@@ -295,7 +295,7 @@ export default {
   expose();
 
 let __temp, __restore
-if (ok) { 
+if (ok) {
         let a = 'foo'
         ;(
   ([__temp,__restore] = _withAsyncContext(() => 0)),
@@ -351,7 +351,7 @@ if (ok) {
   __restore()
 )
         }
-      } else { 
+      } else {
         (
   ([__temp,__restore] = _withAsyncContext(() => 5)),
   await __temp,
@@ -722,7 +722,7 @@ return { props, a, emit }
 
 exports[`SFC compile <script setup> dev mode import usage check TS annotations 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
-import { Foo, Bar, Baz } from './x'
+import { Foo, Bar, Baz, Qux, Fred } from './x'
 
 export default /*#__PURE__*/_defineComponent({
   setup(__props, { expose }) {
@@ -1039,24 +1039,19 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode ssr codegen 1`] = `
-"import { useCssVars as _useCssVars, unref as _unref } from 'vue'
-import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from \\"vue/server-renderer\\"
+"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from \\"vue/server-renderer\\"
 
 import { ref } from 'vue'
 
 export default {
   __ssrInlineRender: true,
   setup(__props) {
 
-_useCssVars(_ctx => ({
-  \\"xxxxxxxx-count\\": (count.value)
-}))
-
         const count = ref(0)
 
 return (_ctx, _push, _parent, _attrs) => {
   const _cssVars = { style: {
-  \\"xxxxxxxx-count\\": (count.value)
+  \\"--xxxxxxxx-count\\": (count.value)
 }}
   _push(\`<!--[--><div\${
     _ssrRenderAttrs(_cssVars)