feat(mp): wxs 支持 animation

dcloudio · Feb 13, 2025 · 6af9cef · 6af9cef
1 parent 1f8ee9b
commit 6af9cef
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 19 deletions.
diff --git a/packages/uni-mp-compiler/__tests__/uniElement.spec.ts b/packages/uni-mp-compiler/__tests__/uniElement.spec.ts
@@ -249,7 +249,7 @@ describe('compiler: transform UniElement.style.setProperty (wxs)', () => {
   test('static id', () => {
     assert(
       `<view id="view"/>`,
-      `<view id="view" change:eS="{{uV.sS}}" eS="{{$eS[a]}}"/>`,
+      `<view id="view" change:eS="{{uV.sS}}" eS="{{$eS[a]}}" change:eA="{{uV.sA}}" eA="{{$eA[a]}}"/>`,
       `(_ctx, _cache) => {
   const __returned__ = { a: _sei('view', 'view') }
   return __returned__
@@ -266,7 +266,7 @@ describe('compiler: transform UniElement.style.setProperty (wxs)', () => {
     )
     assert(
       `<view v-for="item in 10" id="view"/>`,
-      `<view wx:for="{{a}}" wx:for-item="item" id="view" change:eS="{{uV.sS}}" eS="{{$eS[b]}}"/>`,
+      `<view wx:for="{{a}}" wx:for-item="item" id="view" change:eS="{{uV.sS}}" eS="{{$eS[b]}}" change:eA="{{uV.sA}}" eA="{{$eA[b]}}"/>`,
       `(_ctx, _cache) => {
   const __returned__ = { a: _f(10, (item, k0, i0) => { return {}; }), b: _sei('view', 'view') }
   return __returned__
@@ -285,7 +285,7 @@ describe('compiler: transform UniElement.style.setProperty (wxs)', () => {
   test('static id with style', () => {
     assert(
       `<view id="view" style="color:red"/>`,
-      `<view id="view" style="color:red" change:eS="{{uV.sS}}" eS="{{$eS[a]}}"/>`,
+      `<view id="view" style="color:red" change:eS="{{uV.sS}}" eS="{{$eS[a]}}" change:eA="{{uV.sA}}" eA="{{$eA[a]}}"/>`,
       `(_ctx, _cache) => {
   const __returned__ = { a: _sei('view', 'view') }
   return __returned__
@@ -302,7 +302,7 @@ describe('compiler: transform UniElement.style.setProperty (wxs)', () => {
     )
     assert(
       `<view id="view" style="color:red" :style="{color:'blue'}"/>`,
-      `<view id="view" style="{{'color:red' + ';' + ('color:' + 'blue')}}" change:eS="{{uV.sS}}" eS="{{$eS[a]}}"/>`,
+      `<view id="view" style="{{'color:red' + ';' + ('color:' + 'blue')}}" change:eS="{{uV.sS}}" eS="{{$eS[a]}}" change:eA="{{uV.sA}}" eA="{{$eA[a]}}"/>`,
       `(_ctx, _cache) => {
   const __returned__ = { a: _sei('view', 'view') }
   return __returned__
@@ -319,7 +319,7 @@ describe('compiler: transform UniElement.style.setProperty (wxs)', () => {
     )
     assert(
       `<view v-for="item in 10" id="view" style="color:red"/>`,
-      `<view wx:for="{{a}}" wx:for-item="item" id="view" style="color:red" change:eS="{{uV.sS}}" eS="{{$eS[b]}}"/>`,
+      `<view wx:for="{{a}}" wx:for-item="item" id="view" style="color:red" change:eS="{{uV.sS}}" eS="{{$eS[b]}}" change:eA="{{uV.sA}}" eA="{{$eA[b]}}"/>`,
       `(_ctx, _cache) => {
   const __returned__ = { a: _f(10, (item, k0, i0) => { return {}; }), b: _sei('view', 'view') }
   return __returned__
@@ -338,7 +338,7 @@ describe('compiler: transform UniElement.style.setProperty (wxs)', () => {
   test('dynamic id', () => {
     assert(
       `<view :id="viewId"/>`,
-      `<view id="{{a}}" change:eS="{{uV.sS}}" eS="{{$eS[a]}}"/>`,
+      `<view id="{{a}}" change:eS="{{uV.sS}}" eS="{{$eS[a]}}" change:eA="{{uV.sA}}" eA="{{$eA[a]}}"/>`,
       `(_ctx, _cache) => {
   const __returned__ = { a: _sei(_ctx.viewId, 'view') }
   return __returned__
@@ -355,7 +355,7 @@ describe('compiler: transform UniElement.style.setProperty (wxs)', () => {
     )
     assert(
       `<view v-for="item in 10" :id="viewId"/>`,
-      `<view wx:for="{{a}}" wx:for-item="item" id="{{b}}" change:eS="{{uV.sS}}" eS="{{$eS[b]}}"/>`,
+      `<view wx:for="{{a}}" wx:for-item="item" id="{{b}}" change:eS="{{uV.sS}}" eS="{{$eS[b]}}" change:eA="{{uV.sA}}" eA="{{$eA[b]}}"/>`,
       `(_ctx, _cache) => {
   const __returned__ = { a: _f(10, (item, k0, i0) => { return {}; }), b: _sei(_ctx.viewId, 'view') }
   return __returned__
@@ -372,7 +372,7 @@ describe('compiler: transform UniElement.style.setProperty (wxs)', () => {
     )
     assert(
       `<view v-for="item in 10" :id="viewId+'_'+item"/>`,
-      `<view wx:for="{{a}}" wx:for-item="item" id="{{item.a}}" change:eS="{{uV.sS}}" eS="{{$eS[item.a]}}"/>`,
+      `<view wx:for="{{a}}" wx:for-item="item" id="{{item.a}}" change:eS="{{uV.sS}}" eS="{{$eS[item.a]}}" change:eA="{{uV.sA}}" eA="{{$eA[item.a]}}"/>`,
       `(_ctx, _cache) => {
   const __returned__ = { a: _f(10, (item, k0, i0) => { return { a: _sei(_ctx.viewId + '_' + item, 'view') }; }) }
   return __returned__
@@ -391,7 +391,7 @@ describe('compiler: transform UniElement.style.setProperty (wxs)', () => {
   test('static ref', () => {
     assert(
       `<view ref="view" style="color:red"/>`,
-      `<view ref="view" style="color:red" id="r0-2a9ec0b0" change:eS="{{uV.sS}}" eS="{{$eS[a]}}"/>`,
+      `<view ref="view" style="color:red" id="r0-2a9ec0b0" change:eS="{{uV.sS}}" eS="{{$eS[a]}}" change:eA="{{uV.sA}}" eA="{{$eA[a]}}"/>`,
       `(_ctx, _cache) => {
   const __returned__ = { a: _sei('r0-2a9ec0b0', 'view', 'view') }
   return __returned__
@@ -408,7 +408,7 @@ describe('compiler: transform UniElement.style.setProperty (wxs)', () => {
     )
     assert(
       `<view v-for="item in 10" ref="view"/>`,
-      `<view wx:for="{{a}}" wx:for-item="item" ref="view" id="{{item.a}}" change:eS="{{uV.sS}}" eS="{{$eS[item.a]}}"/>`,
+      `<view wx:for="{{a}}" wx:for-item="item" ref="view" id="{{item.a}}" change:eS="{{uV.sS}}" eS="{{$eS[item.a]}}" change:eA="{{uV.sA}}" eA="{{$eA[item.a]}}"/>`,
       `(_ctx, _cache) => {
   const __returned__ = { a: _f(10, (item, k0, i0) => { return { a: _sei('r0-2a9ec0b0-' + k0, 'view', 'view', { "f": 1 }) }; }) }
   return __returned__
@@ -425,7 +425,7 @@ describe('compiler: transform UniElement.style.setProperty (wxs)', () => {
     )
     assert(
       `<view v-for="item in 10" ref="v0"><view v-for="item in 10" ref="v1"/></view>`,
-      `<view wx:for="{{a}}" wx:for-item="item" ref="v0" id="{{item.b}}" change:eS="{{uV.sS}}" eS="{{$eS[item.b]}}"><view wx:for="{{item.a}}" wx:for-item="item" ref="v1" id="{{item.a}}" change:eS="{{uV.sS}}" eS="{{$eS[item.a]}}"/></view>`,
+      `<view wx:for="{{a}}" wx:for-item="item" ref="v0" id="{{item.b}}" change:eS="{{uV.sS}}" eS="{{$eS[item.b]}}" change:eA="{{uV.sA}}" eA="{{$eA[item.b]}}"><view wx:for="{{item.a}}" wx:for-item="item" ref="v1" id="{{item.a}}" change:eS="{{uV.sS}}" eS="{{$eS[item.a]}}" change:eA="{{uV.sA}}" eA="{{$eA[item.a]}}"/></view>`,
       `(_ctx, _cache) => {
   const __returned__ = { a: _f(10, (item, k0, i0) => { return { a: _f(10, (item, k1, i1) => { return { a: _sei('r0-2a9ec0b0-' + k1 + '-' + k0, 'view', 'v1', { "f": 1 }) }; }), b: _sei('r1-2a9ec0b0-' + k0, 'view', 'v0', { "f": 1 }) }; }) }
   return __returned__
@@ -444,7 +444,7 @@ describe('compiler: transform UniElement.style.setProperty (wxs)', () => {
   test('static ref with unicloud-db', () => {
     assert(
       `<unicloud-db ref="udb"/>`,
-      `<unicloud-db ref="udb" u-i="2a9ec0b0-0" id="r0-2a9ec0b0" change:eS="{{uV.sS}}" eS="{{$eS[a]}}" u-p="{{b||''}}"/>`,
+      `<unicloud-db ref="udb" u-i="2a9ec0b0-0" id="r0-2a9ec0b0" change:eS="{{uV.sS}}" eS="{{$eS[a]}}" change:eA="{{uV.sA}}" eA="{{$eA[a]}}" u-p="{{b||''}}"/>`,
       `(_ctx, _cache) => {
   const __returned__ = { a: _sei('r0-2a9ec0b0', { "name": "unicloud-db", "type": 1 }, 'udb'), b: _p({ id: 'r0-2a9ec0b0' }) }
   return __returned__

diff --git a/packages/uni-mp-compiler/src/transforms/transformComponent.ts b/packages/uni-mp-compiler/src/transforms/transformComponent.ts
@@ -23,6 +23,7 @@ import {
 import {
   ATTR_COM_TYPE,
   ATTR_ELEMENT_ID,
+  ATTR_SET_ELEMENT_ANIMATION,
   ATTR_SET_ELEMENT_STYLE,
   ATTR_VUE_ID,
   ATTR_VUE_PROPS,
@@ -137,6 +138,7 @@ const builtInProps = [
   ATTR_COM_TYPE,
   ATTR_ELEMENT_ID,
   ATTR_SET_ELEMENT_STYLE,
+  ATTR_SET_ELEMENT_ANIMATION,
   'eO',
   'e-o',
   'onVI',
@@ -156,6 +158,9 @@ function isComponentProp(name: string) {
   if (name === filterObserverName(ATTR_SET_ELEMENT_STYLE)) {
     return false
   }
+  if (name === filterObserverName(ATTR_SET_ELEMENT_ANIMATION)) {
+    return false
+  }
   return true
 }
 /**

diff --git a/packages/uni-mp-compiler/src/transforms/transformIdentifier.ts b/packages/uni-mp-compiler/src/transforms/transformIdentifier.ts
@@ -10,6 +10,7 @@ import {
 import type { NodeTransform } from '../transform'
 import {
   ATTR_ELEMENT_ID,
+  ATTR_SET_ELEMENT_ANIMATION,
   ATTR_SET_ELEMENT_STYLE,
   ATTR_VUE_SLOTS,
   rewriteExpression,
@@ -185,10 +186,15 @@ export const transformIdentifier: NodeTransform = (node, context) => {
                 context.isX &&
                 elementId &&
                 arg &&
-                isSimpleExpressionNode(arg) &&
-                arg.content === ATTR_SET_ELEMENT_STYLE
+                isSimpleExpressionNode(arg)
               ) {
-                dir.exp = createSimpleExpression(`$eS[${elementId}]`)
+                if (arg.content === ATTR_SET_ELEMENT_STYLE) {
+                  dir.exp = createSimpleExpression(`$eS[${elementId}]`)
+                } else if (arg.content === ATTR_SET_ELEMENT_ANIMATION) {
+                  dir.exp = createSimpleExpression(`$eA[${elementId}]`)
+                } else {
+                  dir.exp = rewriteExpression(exp, context)
+                }
               } else {
                 dir.exp = rewriteExpression(exp, context)
               }

diff --git a/packages/uni-mp-compiler/src/transforms/transformUniElement.ts b/packages/uni-mp-compiler/src/transforms/transformUniElement.ts
@@ -22,10 +22,12 @@ import {
 import {
   ATTR_ELEMENT_ID,
   ATTR_ELEMENT_TAG,
+  ATTR_SET_ELEMENT_ANIMATION,
   ATTR_SET_ELEMENT_STYLE,
   ATTR_VUE_REF,
   FILTER_MODULE_FILE_NAME,
   FILTER_MODULE_NAME,
+  FILTER_SET_ELEMENT_ANIMATION,
   FILTER_SET_ELEMENT_STYLE,
   filterName,
   filterObserverName,
@@ -205,6 +207,16 @@ export function rewriteId(node: ElementNode, context: TransformContext) {
       )
     )
     node.props.push(createBindDirectiveNode(ATTR_SET_ELEMENT_STYLE, ''))
+
+    // setAnimation
+    node.props.push(
+      createBindDirectiveNode(
+        filterObserverName(ATTR_SET_ELEMENT_ANIMATION),
+        filterName(FILTER_SET_ELEMENT_ANIMATION)
+      )
+    )
+    node.props.push(createBindDirectiveNode(ATTR_SET_ELEMENT_ANIMATION, ''))
+
     if (
       !context.autoImportFilters.find(
         (filter) => filter.name === FILTER_MODULE_NAME

diff --git a/packages/uni-mp-compiler/src/transforms/utils.ts b/packages/uni-mp-compiler/src/transforms/utils.ts
@@ -41,11 +41,13 @@ export const ATTR_ELEMENT_ID = 'u-e'
 export const ATTR_ELEMENT_TAG = 'u-t'
 
 export const ATTR_SET_ELEMENT_STYLE = 'eS' // 不能使用连字符e-s
+export const ATTR_SET_ELEMENT_ANIMATION = 'eA' // 不能使用连字符e-a
 
 export const FILTER_MODULE_NAME = 'uV' // uniView
 export const FILTER_MODULE_FILE_NAME = 'uniView'
 
 export const FILTER_SET_ELEMENT_STYLE = 'sS' // setStyle
+export const FILTER_SET_ELEMENT_ANIMATION = 'sA' // setAnimation
 
 export const SCOPED_SLOT_IDENTIFIER = '__SCOPED_SLOT__'
 

diff --git a/packages/uni-mp-vite/lib/filters/uniView.js b/packages/uni-mp-vite/lib/filters/uniView.js
@@ -1,7 +1,14 @@
 module.exports = {
+    // setStyle
     sS: function (newValue, oldValue, _ownerInstance, instance) {
         if (newValue) {
             instance.setStyle(newValue)
         }
-    }
-}
+    },
+    // setAnimation
+    sA: function (newValue, oldValue, _ownerInstance, instance) {
+        if (newValue) {
+            instance.setAttr(newValue)
+        }
+    },
+}
diff --git a/packages/uni-mp-vue/lib/vue.runtime.esm.js b/packages/uni-mp-vue/lib/vue.runtime.esm.js
@@ -4096,7 +4096,8 @@ function createComponentInstance(vnode, parent, suspense) {
     $uniElements: /* @__PURE__ */ new Map(),
     $templateUniElementRefs: [],
     $templateUniElementStyles: {},
-    $eS: {}
+    $eS: {},
+    $eA: {}
   };
   if (!!(process.env.NODE_ENV !== "production")) {
     instance.ctx = createDevRenderContext(instance);
@@ -4695,6 +4696,7 @@ function patch(instance, data, oldData) {
   }
   data = deepCopy(data);
   data.$eS = instance.$eS || {};
+  data.$eA = instance.$eA || {};
   const ctx = instance.ctx;
   const mpType = ctx.mpType;
   if (mpType === "page" || mpType === "component") {

diff --git a/packages/uni-mp-weixin/__tests__/component.spec.ts b/packages/uni-mp-weixin/__tests__/component.spec.ts
@@ -250,7 +250,7 @@ describe('mp-weixin: transform component', () => {
   test('static ref with unicloud-db', () => {
     assert(
       `<unicloud-db ref="udb"/>`,
-      `<unicloud-db class="r" u-r="udb" u-i="2a9ec0b0-0" bind:__l="__l" id="r0-2a9ec0b0" change:eS="{{uV.sS}}" eS="{{$eS[b]}}" u-p="{{c||''}}"/>`,
+      `<unicloud-db class="r" u-r="udb" u-i="2a9ec0b0-0" bind:__l="__l" id="r0-2a9ec0b0" change:eS="{{uV.sS}}" eS="{{$eS[b]}}" change:eA="{{uV.sA}}" eA="{{$eA[b]}}" u-p="{{c||''}}"/>`,
       `(_ctx, _cache) => {
   const __returned__ = { a: _sr('udb', '2a9ec0b0-0'), b: _sei('r0-2a9ec0b0', { "name": "unicloud-db", "type": 1 }, 'udb'), c: _p({ id: 'r0-2a9ec0b0' }) }
   return __returned__