feat(compiler-core): hoist element with static ref (#344)

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
index 1bb57f3dee0c9a5f9fc5462055816d2cb97022e9..267445b4054cf6dd61130e97e3641fab6e9bfd7e 100644 (file)
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
@@ -169,6 +169,23 @@ return function render() {
 }"
 `;
 
+exports[`compiler: hoistStatic transform prefixIdentifiers hoist element with static ref 1`] = `
+"const _Vue = Vue
+const _createVNode = Vue.createVNode
+
+const _hoisted_1 = _createVNode(\\"span\\", { ref: \\"o\\" })
+
+return function render() {
+  with (this) {
+    const { createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
+    
+    return (_openBlock(), _createBlock(\\"div\\", null, [
+      _hoisted_1
+    ]))
+  }
+}"
+`;
+
 exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static tree with static interpolation 1`] = `
 "const _Vue = Vue
 const _createVNode = Vue.createVNode

diff --git a/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts b/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
index 1fb81f93171a0319097a65418866b1b589f91a75..719aee704debd57b56e87d9ab857d0ffa89146e4 100644 (file)
--- a/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
@@ -677,5 +677,42 @@ describe('compiler: hoistStatic transform', () => {
         }).code
       ).toMatchSnapshot()
     })
+
+    test('hoist element with static ref', () => {
+      const { root, args } = transformWithHoist(
+        `<div><span ref="o"></span></div>`,
+        {
+          prefixIdentifiers: true
+        }
+      )
+
+      expect(root.hoists.length).toBe(1)
+      expect(root.hoists).toMatchObject([
+        {
+          type: NodeTypes.JS_CALL_EXPRESSION,
+          callee: CREATE_VNODE,
+          arguments: [
+            `"span"`,
+            createObjectMatcher({
+              ref: `o`
+            })
+          ]
+        }
+      ])
+      expect(args).toMatchObject([
+        `"div"`,
+        `null`,
+        [
+          {
+            type: NodeTypes.ELEMENT,
+            codegenNode: {
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: `_hoisted_1`
+            }
+          }
+        ]
+      ])
+      expect(generate(root).code).toMatchSnapshot()
+    })
   })
 })

diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index 74b2cc878e2753f1fc06fd1248f1a726f8a60454..b8ef7543b72aaefddb1ab2b3b0cbf4f555994e27 100644 (file)
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -699,10 +699,15 @@ describe('compiler: element transform', () => {
       expect(node.arguments[3]).toBe(genFlagText(PatchFlags.FULL_PROPS))
     })
 
-    test('NEED_PATCH (static ref)', () => {
+    test('NO NEED_PATCH (static ref)', () => {
       const { node } = parseWithBind(`<div ref="foo" />`)
-      expect(node.arguments.length).toBe(4)
-      expect(node.arguments[3]).toBe(genFlagText(PatchFlags.NEED_PATCH))
+      expect(node.arguments.length).toBe(2)
+      expect(node.arguments).toMatchObject([
+        `"div"`,
+        createObjectMatcher({
+          ref: `foo`
+        })
+      ])
     })
 
     test('NEED_PATCH (dynamic ref)', () => {

diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 646a51ce61931b53e5c042f595789602ac1e4e87..99f1c675278f97bf9aecfc67a36d7168456088ae 100644 (file)
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -249,9 +249,6 @@ export function buildProps(
     const prop = props[i]
     if (prop.type === NodeTypes.ATTRIBUTE) {
       const { loc, name, value } = prop
-      if (name === 'ref') {
-        hasRef = true
-      }
       properties.push(
         createObjectProperty(
           createSimpleExpression(