feat(compiler-core): enhance the warning for v-once

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

@@ -1,56 +1,75 @@
-import { baseCompile } from '../../src'
-
-describe('compiler: v-memo transform', () => {
-  function compile(content: string) {
-    return baseCompile(`<div>${content}</div>`, {
-      mode: 'module',
-      prefixIdentifiers: true
-    }).code
-  }
-
-  test('on root element', () => {
-    expect(
-      baseCompile(`<div v-memo="[x]"></div>`, {
-        mode: 'module',
-        prefixIdentifiers: true
-      }).code
-    ).toMatchSnapshot()
-  })
+import { baseCompile, CompilerOptions, ErrorCodes } from '../../src'
 
-  test('on normal element', () => {
-    expect(compile(`<div v-memo="[x]"></div>`)).toMatchSnapshot()
-  })
+function compile(content: string, options: CompilerOptions = {}) {
+  return baseCompile(`<div>${content}</div>`, {
+    mode: 'module',
+    prefixIdentifiers: true,
+    ...options
+  }).code
+}
 
-  test('on component', () => {
-    expect(compile(`<Comp v-memo="[x]"></Comp>`)).toMatchSnapshot()
-  })
+describe('compiler: v-memo', () => {
+  describe('transform', () => {
+    test('on root element', () => {
+      expect(
+        baseCompile(`<div v-memo="[x]"></div>`, {
+          mode: 'module',
+          prefixIdentifiers: true
+        }).code
+      ).toMatchSnapshot()
+    })
 
-  test('on v-if', () => {
-    expect(
-      compile(
-        `<div v-if="ok" v-memo="[x]"><span>foo</span>bar</div>
-        <Comp v-else v-memo="[x]"></Comp>`
-      )
-    ).toMatchSnapshot()
-  })
+    test('on normal element', () => {
+      expect(compile(`<div v-memo="[x]"></div>`)).toMatchSnapshot()
+    })
 
-  test('on v-for', () => {
-    expect(
-      compile(
-        `<div v-for="{ x, y } in list" :key="x" v-memo="[x, y === z]">
-          <span>foobar</span>
-        </div>`
-      )
-    ).toMatchSnapshot()
+    test('on component', () => {
+      expect(compile(`<Comp v-memo="[x]"></Comp>`)).toMatchSnapshot()
+    })
+
+    test('on v-if', () => {
+      expect(
+        compile(
+          `<div v-if="ok" v-memo="[x]"><span>foo</span>bar</div>
+          <Comp v-else v-memo="[x]"></Comp>`
+        )
+      ).toMatchSnapshot()
+    })
+
+    test('on v-for', () => {
+      expect(
+        compile(
+          `<div v-for="{ x, y } in list" :key="x" v-memo="[x, y === z]">
+            <span>foobar</span>
+          </div>`
+        )
+      ).toMatchSnapshot()
+    })
+
+    test('on template v-for', () => {
+      expect(
+        compile(
+          `<template v-for="{ x, y } in list" :key="x" v-memo="[x, y === z]">
+            <span>foobar</span>
+          </template>`
+        )
+      ).toMatchSnapshot()
+    })
   })
 
-  test('on template v-for', () => {
-    expect(
-      compile(
-        `<template v-for="{ x, y } in list" :key="x" v-memo="[x, y === z]">
-          <span>foobar</span>
-        </template>`
+  describe('errors', () => {
+    test('inside v-for', () => {
+      const onError = jest.fn()
+      compile(`<div v-for="i in list"><div v-memo="[i]" /></div>`, {
+        onError
+      })
+
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_V_MEMO_INSIDE_FOR
+        })
       )
-    ).toMatchSnapshot()
+    })
   })
 })

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

@@ -4,7 +4,8 @@ import {
   NodeTypes,
   generate,
   CompilerOptions,
-  getBaseTransformPreset
+  getBaseTransformPreset,
+  ErrorCodes
 } from '../../src'
 import { RENDER_SLOT, SET_BLOCK_TRACKING } from '../../src/runtimeHelpers'
 
@@ -19,127 +20,145 @@ function transformWithOnce(template: string, options: CompilerOptions = {}) {
   return ast
 }
 
-describe('compiler: v-once transform', () => {
-  test('as root node', () => {
-    const root = transformWithOnce(`<div :id="foo" v-once />`)
-    expect(root.cached).toBe(1)
-    expect(root.helpers).toContain(SET_BLOCK_TRACKING)
-    expect(root.codegenNode).toMatchObject({
-      type: NodeTypes.JS_CACHE_EXPRESSION,
-      index: 0,
-      value: {
-        type: NodeTypes.VNODE_CALL,
-        tag: `"div"`
-      }
+describe('compiler: v-once', () => {
+  describe('transform', () => {
+    test('as root node', () => {
+      const root = transformWithOnce(`<div :id="foo" v-once />`)
+      expect(root.cached).toBe(1)
+      expect(root.helpers).toContain(SET_BLOCK_TRACKING)
+      expect(root.codegenNode).toMatchObject({
+        type: NodeTypes.JS_CACHE_EXPRESSION,
+        index: 0,
+        value: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `"div"`
+        }
+      })
+      expect(generate(root).code).toMatchSnapshot()
     })
-    expect(generate(root).code).toMatchSnapshot()
-  })
 
-  test('on nested plain element', () => {
-    const root = transformWithOnce(`<div><div :id="foo" v-once /></div>`)
-    expect(root.cached).toBe(1)
-    expect(root.helpers).toContain(SET_BLOCK_TRACKING)
-    expect((root.children[0] as any).children[0].codegenNode).toMatchObject({
-      type: NodeTypes.JS_CACHE_EXPRESSION,
-      index: 0,
-      value: {
-        type: NodeTypes.VNODE_CALL,
-        tag: `"div"`
-      }
+    test('on nested plain element', () => {
+      const root = transformWithOnce(`<div><div :id="foo" v-once /></div>`)
+      expect(root.cached).toBe(1)
+      expect(root.helpers).toContain(SET_BLOCK_TRACKING)
+      expect((root.children[0] as any).children[0].codegenNode).toMatchObject({
+        type: NodeTypes.JS_CACHE_EXPRESSION,
+        index: 0,
+        value: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `"div"`
+        }
+      })
+      expect(generate(root).code).toMatchSnapshot()
     })
-    expect(generate(root).code).toMatchSnapshot()
-  })
 
-  test('on component', () => {
-    const root = transformWithOnce(`<div><Comp :id="foo" v-once /></div>`)
-    expect(root.cached).toBe(1)
-    expect(root.helpers).toContain(SET_BLOCK_TRACKING)
-    expect((root.children[0] as any).children[0].codegenNode).toMatchObject({
-      type: NodeTypes.JS_CACHE_EXPRESSION,
-      index: 0,
-      value: {
-        type: NodeTypes.VNODE_CALL,
-        tag: `_component_Comp`
-      }
+    test('on component', () => {
+      const root = transformWithOnce(`<div><Comp :id="foo" v-once /></div>`)
+      expect(root.cached).toBe(1)
+      expect(root.helpers).toContain(SET_BLOCK_TRACKING)
+      expect((root.children[0] as any).children[0].codegenNode).toMatchObject({
+        type: NodeTypes.JS_CACHE_EXPRESSION,
+        index: 0,
+        value: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `_component_Comp`
+        }
+      })
+      expect(generate(root).code).toMatchSnapshot()
     })
-    expect(generate(root).code).toMatchSnapshot()
-  })
 
-  test('on slot outlet', () => {
-    const root = transformWithOnce(`<div><slot v-once /></div>`)
-    expect(root.cached).toBe(1)
-    expect(root.helpers).toContain(SET_BLOCK_TRACKING)
-    expect((root.children[0] as any).children[0].codegenNode).toMatchObject({
-      type: NodeTypes.JS_CACHE_EXPRESSION,
-      index: 0,
-      value: {
-        type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: RENDER_SLOT
-      }
+    test('on slot outlet', () => {
+      const root = transformWithOnce(`<div><slot v-once /></div>`)
+      expect(root.cached).toBe(1)
+      expect(root.helpers).toContain(SET_BLOCK_TRACKING)
+      expect((root.children[0] as any).children[0].codegenNode).toMatchObject({
+        type: NodeTypes.JS_CACHE_EXPRESSION,
+        index: 0,
+        value: {
+          type: NodeTypes.JS_CALL_EXPRESSION,
+          callee: RENDER_SLOT
+        }
+      })
+      expect(generate(root).code).toMatchSnapshot()
     })
-    expect(generate(root).code).toMatchSnapshot()
-  })
-
-  // v-once inside v-once should not be cached
-  test('inside v-once', () => {
-    const root = transformWithOnce(`<div v-once><div v-once/></div>`)
-    expect(root.cached).not.toBe(2)
-    expect(root.cached).toBe(1)
-  })
 
-  // cached nodes should be ignored by hoistStatic transform
-  test('with hoistStatic: true', () => {
-    const root = transformWithOnce(`<div><div v-once /></div>`, {
-      hoistStatic: true
+    // v-once inside v-once should not be cached
+    test('inside v-once', () => {
+      const root = transformWithOnce(`<div v-once><div v-once/></div>`)
+      expect(root.cached).not.toBe(2)
+      expect(root.cached).toBe(1)
     })
-    expect(root.cached).toBe(1)
-    expect(root.helpers).toContain(SET_BLOCK_TRACKING)
-    expect(root.hoists.length).toBe(0)
-    expect((root.children[0] as any).children[0].codegenNode).toMatchObject({
-      type: NodeTypes.JS_CACHE_EXPRESSION,
-      index: 0,
-      value: {
-        type: NodeTypes.VNODE_CALL,
-        tag: `"div"`
-      }
-    })
-    expect(generate(root).code).toMatchSnapshot()
-  })
 
-  test('with v-if/else', () => {
-    const root = transformWithOnce(`<div v-if="BOOLEAN" v-once /><p v-else/>`)
-    expect(root.cached).toBe(1)
-    expect(root.helpers).toContain(SET_BLOCK_TRACKING)
-    expect(root.children[0]).toMatchObject({
-      type: NodeTypes.IF,
-      // should cache the entire v-if/else-if/else expression, not just a single branch
-      codegenNode: {
+    // cached nodes should be ignored by hoistStatic transform
+    test('with hoistStatic: true', () => {
+      const root = transformWithOnce(`<div><div v-once /></div>`, {
+        hoistStatic: true
+      })
+      expect(root.cached).toBe(1)
+      expect(root.helpers).toContain(SET_BLOCK_TRACKING)
+      expect(root.hoists.length).toBe(0)
+      expect((root.children[0] as any).children[0].codegenNode).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
+        index: 0,
         value: {
-          type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
-          consequent: {
-            type: NodeTypes.VNODE_CALL,
-            tag: `"div"`
-          },
-          alternate: {
-            type: NodeTypes.VNODE_CALL,
-            tag: `"p"`
+          type: NodeTypes.VNODE_CALL,
+          tag: `"div"`
+        }
+      })
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
+    test('with v-if/else', () => {
+      const root = transformWithOnce(`<div v-if="BOOLEAN" v-once /><p v-else/>`)
+      expect(root.cached).toBe(1)
+      expect(root.helpers).toContain(SET_BLOCK_TRACKING)
+      expect(root.children[0]).toMatchObject({
+        type: NodeTypes.IF,
+        // should cache the entire v-if/else-if/else expression, not just a single branch
+        codegenNode: {
+          type: NodeTypes.JS_CACHE_EXPRESSION,
+          value: {
+            type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
+            consequent: {
+              type: NodeTypes.VNODE_CALL,
+              tag: `"div"`
+            },
+            alternate: {
+              type: NodeTypes.VNODE_CALL,
+              tag: `"p"`
+            }
           }
         }
-      }
+      })
+    })
+
+    test('with v-for', () => {
+      const root = transformWithOnce(`<div v-for="i in list" v-once />`)
+      expect(root.cached).toBe(1)
+      expect(root.helpers).toContain(SET_BLOCK_TRACKING)
+      expect(root.children[0]).toMatchObject({
+        type: NodeTypes.FOR,
+        // should cache the entire v-for expression, not just a single branch
+        codegenNode: {
+          type: NodeTypes.JS_CACHE_EXPRESSION
+        }
+      })
     })
   })
 
-  test('with v-for', () => {
-    const root = transformWithOnce(`<div v-for="i in list" v-once />`)
-    expect(root.cached).toBe(1)
-    expect(root.helpers).toContain(SET_BLOCK_TRACKING)
-    expect(root.children[0]).toMatchObject({
-      type: NodeTypes.FOR,
-      // should cache the entire v-for expression, not just a single branch
-      codegenNode: {
-        type: NodeTypes.JS_CACHE_EXPRESSION
-      }
+  describe('errors', () => {
+    test('inside v-for', () => {
+      const onError = jest.fn()
+      transformWithOnce(`<div v-for="i in list"><div v-once /></div>`, {
+        onError
+      })
+
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_V_ONCE_INSIDE_FOR
+        })
+      )
     })
   })
 })