feat(compiler): allow flexible spacing in v-for

jh-leong · jh-leong · commit 45c9d54bfeaa · 2023-11-09T15:41:33.000+08:00
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
@@ -45,6 +45,20 @@ return function render(_ctx, _cache) {
 }"
 `;
 
+exports[`compiler: v-for > codegen > no whitespace around (in|of) with basic v-for 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+
+    return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList([items], (item) => {
+      return (_openBlock(), _createElementBlock(\\"span\\"))
+    }), 256 /* UNKEYED_FRAGMENT */))
+  }
+}"
+`;
+
 exports[`compiler: v-for > codegen > skipped key 1`] = `
 "const _Vue = Vue
 
diff --git a/packages/compiler-core/__tests__/transforms/vFor.spec.ts b/packages/compiler-core/__tests__/transforms/vFor.spec.ts
@@ -202,6 +202,43 @@ describe('compiler: v-for', () => {
       expect(forNode.valueAlias).toBeUndefined()
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
     })
+
+    test('no whitespace around (in|of) with simple expression', () => {
+      const { node: forNode } = parseWithForTransform(
+        '<span v-for="(item)in[items]" />'
+      )
+
+      expect(forNode.keyAlias).toBeUndefined()
+      expect(forNode.objectIndexAlias).toBeUndefined()
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('item')
+      expect((forNode.source as SimpleExpressionNode).content).toBe('[items]')
+    })
+
+    test('no whitespace around (in|of) with object de-structured value', () => {
+      const { node: forNode } = parseWithForTransform(
+        '<span v-for="{ id, value }in[item]" />'
+      )
+
+      expect(forNode.keyAlias).toBeUndefined()
+      expect(forNode.objectIndexAlias).toBeUndefined()
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe(
+        '{ id, value }'
+      )
+      expect((forNode.source as SimpleExpressionNode).content).toBe('[item]')
+    })
+
+    test('no whitespace around (in|of) with array de-structured value', () => {
+      const { node: forNode } = parseWithForTransform(
+        '<span v-for="[ id ]in[item]" />'
+      )
+
+      expect(forNode.keyAlias).toBeUndefined()
+      expect(forNode.objectIndexAlias).toBeUndefined()
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe(
+        '[ id ]'
+      )
+      expect((forNode.source as SimpleExpressionNode).content).toBe('[item]')
+    })
   })
 
   describe('errors', () => {
@@ -241,6 +278,18 @@ describe('compiler: v-for', () => {
       )
     })
 
+    test('invalid expression containing (in|of)', () => {
+      const onError = vi.fn()
+      parseWithForTransform('<span v-for="fooinbar" />', { onError })
+
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION
+        })
+      )
+    })
+
     test('missing source', () => {
       const onError = vi.fn()
       parseWithForTransform('<span v-for="item in" />', { onError })
@@ -265,6 +314,18 @@ describe('compiler: v-for', () => {
       )
     })
 
+    test('missing source and value', () => {
+      const onError = vi.fn()
+      parseWithForTransform('<span v-for=" in " />', { onError })
+
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION
+        })
+      )
+    })
+
     test('<template v-for> key placement', () => {
       const onError = vi.fn()
       parseWithForTransform(
@@ -409,6 +470,48 @@ describe('compiler: v-for', () => {
       )
     })
 
+    test('no whitespace around (in|of) with bracketed value, key, index', () => {
+      const source = '<span v-for="( item, key, index )in[items]" />'
+      const { node: forNode } = parseWithForTransform(source)
+
+      const itemOffset = source.indexOf('item')
+      const value = forNode.valueAlias as SimpleExpressionNode
+      expect(value.content).toBe('item')
+      expect(value.loc.start.offset).toBe(itemOffset)
+      expect(value.loc.start.line).toBe(1)
+      expect(value.loc.start.column).toBe(itemOffset + 1)
+      expect(value.loc.end.line).toBe(1)
+      expect(value.loc.end.column).toBe(itemOffset + 1 + `item`.length)
+
+      const keyOffset = source.indexOf('key')
+      const key = forNode.keyAlias as SimpleExpressionNode
+      expect(key.content).toBe('key')
+      expect(key.loc.start.offset).toBe(keyOffset)
+      expect(key.loc.start.line).toBe(1)
+      expect(key.loc.start.column).toBe(keyOffset + 1)
+      expect(key.loc.end.line).toBe(1)
+      expect(key.loc.end.column).toBe(keyOffset + 1 + `key`.length)
+
+      const indexOffset = source.indexOf('index')
+      const index = forNode.objectIndexAlias as SimpleExpressionNode
+      expect(index.content).toBe('index')
+      expect(index.loc.start.offset).toBe(indexOffset)
+      expect(index.loc.start.line).toBe(1)
+      expect(index.loc.start.column).toBe(indexOffset + 1)
+      expect(index.loc.end.line).toBe(1)
+      expect(index.loc.end.column).toBe(indexOffset + 1 + `index`.length)
+
+      const itemsOffset = source.indexOf('[items]')
+      expect((forNode.source as SimpleExpressionNode).content).toBe('[items]')
+      expect(forNode.source.loc.start.offset).toBe(itemsOffset)
+      expect(forNode.source.loc.start.line).toBe(1)
+      expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
+      expect(forNode.source.loc.end.line).toBe(1)
+      expect(forNode.source.loc.end.column).toBe(
+        itemsOffset + 1 + `[items]`.length
+      )
+    })
+
     test('skipped key', () => {
       const source = '<span v-for="( item,, index ) in items" />'
       const { node: forNode } = parseWithForTransform(source)
@@ -717,6 +820,21 @@ describe('compiler: v-for', () => {
       expect(generate(root).code).toMatchSnapshot()
     })
 
+    test('no whitespace around (in|of) with basic v-for', () => {
+      const {
+        root,
+        node: { codegenNode }
+      } = parseWithForTransform('<span v-for="(item)in[items]" />')
+      expect(assertSharedCodegen(codegenNode)).toMatchObject({
+        source: { content: `[items]` },
+        params: [{ content: `item` }],
+        innerVNodeCall: {
+          tag: `"span"`
+        }
+      })
+      expect(generate(root).code).toMatchSnapshot()
+    })
+
     test('value + key + index', () => {
       const {
         root,
diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts
@@ -37,7 +37,8 @@ import {
   isTemplateNode,
   isSlotOutlet,
   injectProp,
-  findDir
+  findDir,
+  matchForAlias
 } from '../utils'
 import {
   RENDER_LIST,
@@ -308,7 +309,6 @@ export function processFor(
   }
 }
 
-const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
 // This regex doesn't cover the case if key or index aliases have destructuring,
 // but those do not make sense in the first place, so this works in practice.
 const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
@@ -327,17 +327,13 @@ export function parseForExpression(
 ): ForParseResult | undefined {
   const loc = input.loc
   const exp = input.content
-  const inMatch = exp.match(forAliasRE)
-  if (!inMatch) return
 
-  const [, LHS, RHS] = inMatch
+  const inMatch = matchForAlias(exp)
+  if (!inMatch) return
+  const { LHS, RHS } = inMatch
 
   const result: ForParseResult = {
-    source: createAliasExpression(
-      loc,
-      RHS.trim(),
-      exp.indexOf(RHS, LHS.length)
-    ),
+    source: createAliasExpression(loc, RHS, exp.indexOf(RHS, LHS.length)),
     value: undefined,
     key: undefined,
     index: undefined
@@ -352,7 +348,7 @@ export function parseForExpression(
     validateBrowserExpression(result.source as SimpleExpressionNode, context)
   }
 
-  let valueContent = LHS.trim().replace(stripParensRE, '').trim()
+  let valueContent = LHS.replace(stripParensRE, '').trim()
   const trimmedOffset = LHS.indexOf(valueContent)
 
   const iteratorMatch = valueContent.match(forIteratorRE)
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
@@ -519,3 +519,14 @@ export function getMemoedVNodeCall(node: BlockCodegenNode | MemoExpression) {
     return node
   }
 }
+
+const forAliasRE = /([\s\S]*?[\s\)\}\]]+)(?:in|of)([\s\[]+[\s\S]*)/
+export function matchForAlias(exp: string) {
+  const inMatch = exp.match(forAliasRE)
+  if (!inMatch) return
+
+  const LHS = inMatch[1].trim()
+  const RHS = inMatch[2].trim()
+
+  if (LHS && RHS) return { LHS, RHS }
+}
diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -4,6 +4,7 @@ import {
   NodeTypes,
   SimpleExpressionNode,
   createRoot,
+  matchForAlias,
   parserOptions,
   transform,
   walkIdentifiers
@@ -87,20 +88,18 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
   return code
 }
 
-const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
-
 function processExp(exp: string, dir?: string): string {
   if (/ as\s+\w|<.*>|:/.test(exp)) {
     if (dir === 'slot') {
       exp = `(${exp})=>{}`
     } else if (dir === 'on') {
       exp = `()=>{return ${exp}}`
     } else if (dir === 'for') {
-      const inMatch = exp.match(forAliasRE)
+      const inMatch = matchForAlias(exp)
       if (inMatch) {
-        let [, LHS, RHS] = inMatch
+        let { LHS, RHS } = inMatch
         // #6088
-        LHS = LHS.trim().replace(/^\(|\)$/g, '')
+        LHS = LHS.replace(/^\(|\)$/g, '')
         return processExp(`(${LHS})=>{}`) + processExp(RHS)
       }
     }
