fix(mp-baidu): Make sure the event is up to date (#3647)

packages/uni-cli-shared/src/vue/transforms/index.ts

@@ -12,6 +12,7 @@ export * from './transformTag'
 export { createAssetUrlTransformWithOptions } from './templateTransformAssetUrl'
 export { createSrcsetTransformWithOptions } from './templateTransformSrcset'
 export {
+  STRINGIFY_JSON,
   ATTR_DATASET_EVENT_OPTS,
   createTransformOn,
   defaultMatch as matchTransformOn,

packages/uni-cli-shared/src/vue/transforms/vModel.ts

@@ -38,7 +38,8 @@ export function createTransformModel(
       addEventOpts(
         (arg as SimpleExpressionNode).content,
         exp as SimpleExpressionNode,
-        node as ComponentNode
+        node as ComponentNode,
+        context
       )
       props[1].exp = createCustomEventExpr()
     }

packages/uni-cli-shared/src/vue/transforms/vOn.ts

@@ -52,7 +52,8 @@ export function createTransformOn(
         ? customizeEvent(arg.content)
         : arg.content,
       value,
-      node
+      node,
+      context
     )
     return res
   }
@@ -65,7 +66,8 @@ export function createCustomEventExpr() {
 export function addEventOpts(
   event: string,
   value: ExpressionNode,
-  node: ElementNode
+  node: ElementNode,
+  context: TransformContext
 ) {
   const attrName =
     node.tagType === ElementTypes.COMPONENT
@@ -73,7 +75,7 @@ export function addEventOpts(
       : ATTR_DATASET_EVENT_OPTS
   const opts = findProp(node, attrName, true) as DirectiveNode
   if (!opts) {
-    node.props.push(createDataEventOptsProp(attrName, event, value))
+    node.props.push(createDataEventOptsProp(attrName, event, value, context))
   } else {
     const children = (opts.exp as CompoundExpressionNode).children
     children.splice(
@@ -91,22 +93,30 @@ function createDataEventOptsProperty(event: string, exp: ExpressionNode) {
   return createCompoundExpression([`'${event}'`, ': ', exp, ','])
 }
 
+export const STRINGIFY_JSON = Symbol(`stringifyJson`)
+
 function createDataEventOptsProp(
   name: string,
   event: string,
-  exp: ExpressionNode
+  exp: ExpressionNode,
+  context: TransformContext
 ): DirectiveNode {
+  const children = []
+  const stringify = name === ATTR_DATA_EVENT_OPTS
+  if (stringify) {
+    children.push(context.helperString(STRINGIFY_JSON) + '(')
+  }
+  children.push('{', createDataEventOptsProperty(event, exp), '}')
+  if (stringify) {
+    children.push(')')
+  }
   return {
     type: NodeTypes.DIRECTIVE,
     name: 'bind',
     loc: locStub,
     modifiers: [],
     arg: createSimpleExpression(name, true),
-    exp: createCompoundExpression([
-      '{',
-      createDataEventOptsProperty(event, exp),
-      '}',
-    ]),
+    exp: createCompoundExpression(children),
   }
 }
 

packages/uni-mp-baidu/__tests__/vModel.spec.ts

@@ -6,7 +6,7 @@ describe('mp-baidu: transform v-model', () => {
       `<Comp v-model="model" />`,
       `<comp s-if="{{b}}" u-i="2a9ec0b0-0" eO="{{a}}" bindupdateModelValue="__e" u-p="{{b}}"/>`,
       `(_ctx, _cache) => {
-  return { a: { 'updateModelValue': _o($event => _ctx.model = $event) }, b: _p({ modelValue: _ctx.model }) }
+  return { a: _j({ 'updateModelValue': _o($event => _ctx.model = $event) }), b: _p({ modelValue: _ctx.model }) }
 }`
     )
   })
@@ -15,7 +15,7 @@ describe('mp-baidu: transform v-model', () => {
       `<Comp v-model="model" />`,
       `<comp s-if="{{b}}" u-i="2a9ec0b0-0" eO="{{a}}" bindupdateModelValue="__e" u-p="{{b}}"/>`,
       `(_ctx, _cache) => {
-  return { a: { 'updateModelValue': _o($event => _ctx.model = $event) }, b: _p({ modelValue: _ctx.model }) }
+  return { a: _j({ 'updateModelValue': _o($event => _ctx.model = $event) }), b: _p({ modelValue: _ctx.model }) }
 }`,
       {
         cacheHandlers: true,

packages/uni-mp-baidu/__tests__/vOn.spec.ts

@@ -16,7 +16,7 @@ describe('mp-baidu: transform v-on', () => {
         `<custom @click="click"/>`,
         `<custom bindclick="__e" u-i="2a9ec0b0-0" eO="{{a}}"/>`,
         `(_ctx, _cache) => {
-  return { a: { 'click': _o(_ctx.click) } }
+  return { a: _j({ 'click': _o(_ctx.click) }) }
 }`
       )
     }),
@@ -25,7 +25,7 @@ describe('mp-baidu: transform v-on', () => {
           `<custom @unmount="unmount" @update:modelValue="changeHandle" @custom-mount="mount();created();"/>`,
           `<custom bindunmount="__e" bindupdateModelValue="__e" bindcustomMount="__e" u-i="2a9ec0b0-0" eO="{{a}}"/>`,
           `(_ctx, _cache) => {
-  return { a: { 'updateModelValue': _o(_ctx.changeHandle), 'customMount': _o($event => { _ctx.mount(); _ctx.created(); }), 'unmount': _o(_ctx.unmount) } }
+  return { a: _j({ 'unmount': _o(_ctx.unmount), 'updateModelValue': _o(_ctx.changeHandle), 'customMount': _o($event => { _ctx.mount(); _ctx.created(); }) }) }
 }`
         )
       })

packages/uni-mp-compiler/src/runtimeHelpers.ts

 import { registerRuntimeHelpers } from '@vue/compiler-core'
-
+import { STRINGIFY_JSON } from '@dcloudio/uni-cli-shared'
 export const V_ON = Symbol(`vOn`)
 export const V_FOR = Symbol(`vFor`)
 export const EXTEND = Symbol(`extend`)
@@ -14,6 +14,7 @@ export const STRINGIFY_STYLE = Symbol(`stringifyStyle`)
 export const NORMALIZE_CLASS = Symbol(`normalizeClass`)
 export const TO_DISPLAY_STRING = Symbol(`toDisplayString`)
 export const WITH_MODEL_MODIFIERS = Symbol(`withModelModifiers`)
+
 registerRuntimeHelpers({
   [V_ON]: 'o',
   [V_FOR]: 'f',
@@ -29,4 +30,5 @@ registerRuntimeHelpers({
   [NORMALIZE_CLASS]: 'n',
   [TO_DISPLAY_STRING]: 't',
   [WITH_MODEL_MODIFIERS]: 'm',
+  [STRINGIFY_JSON]: 'j',
 })

packages/uni-mp-core/src/runtime/util.ts

@@ -142,7 +142,13 @@ export function handleEvent(
   // 快手小程序的 __l 方法也会走此处逻辑，但没有 __ins__
   if (__ins__) {
     // 自定义事件，通过 triggerEvent 传递 __ins__
-    methodName = resolveMethodName(type, __ins__.properties[EVENT_OPTS] || {})
+    let eventObj = {}
+    try {
+      // https://github.com/dcloudio/uni-app/issues/3647
+      // 通过字符串序列化解决百度小程序修改对象不触发组件properties变化的Bug
+      eventObj = JSON.parse(__ins__.properties[EVENT_OPTS])
+    } catch (e) {}
+    methodName = resolveMethodName(type, eventObj)
   } else if (dataset && dataset[EVENT_OPTS]) {
     // 快手小程序 input 等内置组件的 input 事件也会走此逻辑，所以从 dataset 中读取
     methodName = resolveMethodName(type, dataset[EVENT_OPTS])

packages/uni-mp-kuaishou/__tests__/vModel.spec.ts

@@ -6,7 +6,7 @@ describe('mp-kuaishou: transform v-model', () => {
       `<Comp v-model="model" />`,
       `<comp ks:if="{{b}}" u-i="2a9ec0b0-0" bind:__l="__l" eO="{{a}}" bindupdateModelValue="__e" u-p="{{b}}"/>`,
       `(_ctx, _cache) => {
-  return { a: { 'updateModelValue': _o($event => _ctx.model = $event) }, b: _p({ modelValue: _ctx.model }) }
+  return { a: _j({ 'updateModelValue': _o($event => _ctx.model = $event) }), b: _p({ modelValue: _ctx.model }) }
 }`
     )
   })
@@ -15,7 +15,7 @@ describe('mp-kuaishou: transform v-model', () => {
       `<Comp v-model="model" />`,
       `<comp ks:if="{{b}}" u-i="2a9ec0b0-0" bind:__l="__l" eO="{{a}}" bindupdateModelValue="__e" u-p="{{b}}"/>`,
       `(_ctx, _cache) => {
-  return { a: { 'updateModelValue': _o($event => _ctx.model = $event) }, b: _p({ modelValue: _ctx.model }) }
+  return { a: _j({ 'updateModelValue': _o($event => _ctx.model = $event) }), b: _p({ modelValue: _ctx.model }) }
 }`,
       {
         cacheHandlers: true,

packages/uni-mp-kuaishou/__tests__/vOn.spec.ts

@@ -36,7 +36,7 @@ describe('mp-kuaishou: transform v-on', () => {
         `<custom @click="click"/>`,
         `<custom bindclick="__e" u-i="2a9ec0b0-0" bind:__l="__l" eO="{{a}}"/>`,
         `(_ctx, _cache) => {
-  return { a: { 'click': _o(_ctx.click) } }
+  return { a: _j({ 'click': _o(_ctx.click) }) }
 }`
       )
     }),
@@ -45,7 +45,7 @@ describe('mp-kuaishou: transform v-on', () => {
           `<custom @unmount="unmount" @custom-mount="mount();created();"/>`,
           `<custom bindunmount="__e" bindcustomMount="__e" u-i="2a9ec0b0-0" bind:__l="__l" eO="{{a}}"/>`,
           `(_ctx, _cache) => {
-  return { a: { 'customMount': _o($event => { _ctx.mount(); _ctx.created(); }), 'unmount': _o(_ctx.unmount) } }
+  return { a: _j({ 'unmount': _o(_ctx.unmount), 'customMount': _o($event => { _ctx.mount(); _ctx.created(); }) }) }
 }`
         )
       })

packages/uni-mp-vue/src/helpers/index.ts

@@ -44,3 +44,5 @@ export const m: typeof withModelModifiers = (
   modifiers,
   isComponent = false
 ) => withModelModifiers(fn, modifiers, isComponent)
+
+export const j = (obj: unknown) => JSON.stringify(obj)