wip(uts): vBind

packages/uni-app-uts/__tests__/transforms/vBind.spec.ts

@@ -157,11 +157,21 @@ describe('compiler: v-bind', () => {
 ]), null, 8 /* PROPS */, [\"onClick\"])`
     )
   })
-  test('style with object complex expression', () => {
+  test('object value width all number expression', () => {
     assert(
-      `<view :style="{'opcity': 1 - (scrollTop*3>100?100:scrollTop*3)/100}"></view>`,
+      `<view class="search" @click="toSearchPage" :style="{'opacity': 1 + 1}" />`,
       `createElementVNode(\"view\", new Map<string, any | null>([
-  [\"style\", new Map<string, any | null>([['opcity', '1 - (_ctx.scrollTop*3>100?100:_ctx.scrollTop*3)/100']])]
+  [\"class\", \"search\"],
+  [\"onClick\", _ctx.toSearchPage],
+  [\"style\", new Map<string, any | null>([['opacity', 1 + 1]])]
+]), null, 8 /* PROPS */, [\"onClick\"])`
+    )
+  })
+  test('object value width expression (with data)', () => {
+    assert(
+      `<view :style="{'opacity': count > 0.3 ? 1 : count * 3, 'color': 'red'}" />`,
+      `createElementVNode(\"view\", new Map<string, any | null>([
+  [\"style\", new Map<string, any | null>([['opacity', _ctx.count > 0.3 ? 1 : _ctx.count * 3], ['color', 'red']])]
 ]))`
     )
   })

packages/uni-app-uts/src/plugins/uvue/compiler/transforms/vBind.ts

@@ -8,7 +8,7 @@ import {
 import { createCompilerError, ErrorCodes } from '../errors'
 import { camelize } from '@vue/shared'
 import { CAMELIZE } from '@vue/compiler-core'
-import { objectExp, objectStringToMapString } from '../utils'
+import { OBJECT_EXP, objectStringToMapString } from '../utils'
 import { isString } from '@vue/shared'
 
 // v-bind without arg is handled directly in ./transformElements.ts due to it affecting
@@ -58,10 +58,10 @@ export const transformBind: DirectiveTransform = (dir, _node, context) => {
     }
   }
 
-  if ((exp as any).content && objectExp.test((exp as any).content)) {
+  if ((exp as any).content && OBJECT_EXP.test((exp as any).content)) {
     ;(exp as any).content = objectStringToMapString((exp as any).content)
   } else if ((exp as any).children) {
-    // { 'opcity': 1 - (scrollTop * 3 > 100 ? 100 : scrollTop * 3) / 100 } to map
+    // {'opacity': count > 0.3 ? 1: count * 3, 'color': 'red'} to map
     // TODO: 考虑更多边缘情况
     if (
       isString((exp as any).children[0]) &&
@@ -83,7 +83,7 @@ export const transformBind: DirectiveTransform = (dir, _node, context) => {
     }
     ;(exp as any).children.forEach(
       (child: ExpressionNode | string, index: number) => {
-        if (isString(child) && objectExp.test(child)) {
+        if (isString(child) && OBJECT_EXP.test(child)) {
           ;(exp as any).children[index] = objectStringToMapString(child)
         }
       }

packages/uni-app-uts/src/plugins/uvue/compiler/utils.ts

 import { CompilerOptions } from './options'
-import { isObject, isString } from '@vue/shared'
+import { isObject } from '@vue/shared'
 
 export function genRenderFunctionDecl({
   targetLanguage,
@@ -10,10 +10,10 @@ export function genRenderFunctionDecl({
   }function ${filename}Render(): VNode | null`
 }
 
-export const objectExp = /\{[\s\S]*\}/g
+export const OBJECT_EXP = /\{[\s\S]*\}/g
 export function objectStringToMapString(content: string, wrap = true): string {
   content = content.replace(/\n/g, '')
-  const matched = content.match(objectExp)![0]
+  const matched = content.match(OBJECT_EXP)![0]
   const matchedObj = stringToData(matched) as Record<any, any>
   const mapConstructor = convertObjectToMapString(matchedObj)
   return content.replace(
@@ -65,18 +65,14 @@ function findObjectValueInString(
       num--
     }
     if (char === ',' && num === 0) {
-      const value = removeExtraQuotationMarks(
-        str.substring(startIndex, i).trim()
-      )
+      const value = str.substring(startIndex, i).trim()
       return {
         value: isComplexExpressionString(value) ? stringToData(value) : value,
         endIndex: i,
       }
     }
     if (i === str.length - 1 && num === 0) {
-      const value = removeExtraQuotationMarks(
-        str.substring(startIndex, str.length).trim()
-      )
+      const value = str.substring(startIndex, str.length).trim()
       return {
         value: isComplexExpressionString(value) ? stringToData(value) : value,
         endIndex: i,
@@ -100,16 +96,12 @@ function stringToArray(str: string): any[] {
       num--
     }
     if (char === ',' && num === 0) {
-      const item = removeExtraQuotationMarks(
-        str.substring(preIndex + 1, i).trim()
-      )
+      const item = str.substring(preIndex + 1, i).trim()
       result.push(isComplexExpressionString(item) ? stringToData(item) : item)
       preIndex = i
     }
     if (i === str.length - 1 && num === 0) {
-      const item = removeExtraQuotationMarks(
-        str.substring(preIndex + 1, str.length).trim()
-      )
+      const item = str.substring(preIndex + 1, str.length).trim()
       item &&
         result.push(isComplexExpressionString(item) ? stringToData(item) : item)
     }
@@ -131,11 +123,6 @@ function getKeyValueString(key: string, value: any): string {
 }
 
 function getValueString(value: any): string {
-  if (isString(value)) {
-    return hasExtraQuotationMarks(value) || isBooleanString(value)
-      ? `${value}`
-      : `'${value}'`
-  }
   if (Array.isArray(value)) {
     return `[${value.map((item) => getValueString(item)).join(', ')}]`
   }
@@ -156,21 +143,10 @@ function hasExtraQuotationMarks(str: string): boolean {
   return str.startsWith("'") || str.endsWith("'")
 }
 
-function hasExtraStartQuotationMarks(str: string): boolean {
-  return /^['"].*['"]$/.test(str)
-}
-
 function removeStartAndEndChar(str: string): string {
   return str.substring(1, str.length - 1)
 }
 
-function removeExtraQuotationMarks(str: string): string {
-  if (hasExtraStartQuotationMarks(str)) {
-    return removeStartAndEndChar(str)
-  }
-  return str
-}
-
 function isComplexExpressionString(str: string): boolean {
   return /[{[]/.test(str)
 }