Merge pull request #158 from bytedance/feat/0.2.29

Feat/0.2.29

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.27",
+  "version": "0.2.29",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

packages/mona-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytedance/mona-cli",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "displayName": "mona",
   "description": "Merchant app's developing and building tools",
   "main": "./bin/mona",
@@ -20,8 +20,8 @@
   "author": "zhangxiaowei.chris@bytedance.com",
   "license": "MIT",
   "dependencies": {
-    "@bytedance/mona-service": "0.2.27",
-    "@bytedance/mona-shared": "0.2.27",
+    "@bytedance/mona-service": "0.2.29",
+    "@bytedance/mona-shared": "0.2.29",
     "chalk": "^4.1.2",
     "command-line-usage": "^6.1.1",
     "compare-version": "^0.1.2",

packages/mona-clients/mona-client-mini/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytedance/mona-client-mini",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "description": "miniapp for mona",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -21,8 +21,8 @@
   "license": "MIT",
   "sideEffects": false,
   "dependencies": {
-    "@bytedance/mona": "0.2.27",
-    "@bytedance/mona-shared": "0.2.27",
+    "@bytedance/mona": "0.2.29",
+    "@bytedance/mona-shared": "0.2.29",
     "react-reconciler": "^0.26.2",
     "scheduler": "^0.20.2"
   },

packages/mona-clients/mona-client-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytedance/mona-client-plugin",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "description": "plugin for mona",
   "main": "./dist/index.js",
   "files": [
@@ -17,10 +17,10 @@
     "mona"
   ],
   "dependencies": {
-    "@bytedance/mona": "0.2.27",
-    "@bytedance/mona-client-web": "0.2.27",
-    "@bytedance/mona-plugin-events": "0.2.27",
-    "@bytedance/mona-shared": "0.2.27"
+    "@bytedance/mona": "0.2.29",
+    "@bytedance/mona-client-web": "0.2.29",
+    "@bytedance/mona-plugin-events": "0.2.29",
+    "@bytedance/mona-shared": "0.2.29"
   },
   "peerDependencies": {
     "react": "^17.0.2",

packages/mona-clients/mona-client-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytedance/mona-client-web",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "description": "web for mona",
   "main": "./dist/index.js",
   "files": [
@@ -19,8 +19,8 @@
     "mona"
   ],
   "dependencies": {
-    "@bytedance/mona": "0.2.27",
-    "@bytedance/mona-shared": "0.2.27",
+    "@bytedance/mona": "0.2.29",
+    "@bytedance/mona-shared": "0.2.29",
     "ahooks": "^3.7.0",
     "classnames": "^2.3.1",
     "copyfiles": "^2.4.1"

packages/mona-max/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytedance/mona-max",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "description": "Cli for isv",
   "main": "index.js",
   "scripts": {

packages/mona-plugin-events/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytedance/mona-plugin-events",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "description": "Merchant application plugin side communication package",
   "author": "fengbo.lucky@bytedance.com",
   "scripts": {

packages/mona-runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytedance/mona-runtime",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "description": "Merchant app's developing and building tools",
   "main": "./dist/index",
   "scripts": {
@@ -25,12 +25,12 @@
     "typescript-transform-paths": "^2.2.4"
   },
   "dependencies": {
-    "@bytedance/mona": "0.2.27",
-    "@bytedance/mona-client-mini": "0.2.27",
-    "@bytedance/mona-client-plugin": "0.2.27",
-    "@bytedance/mona-client-web": "0.2.27",
-    "@bytedance/mona-plugin-events": "0.2.27",
-    "@bytedance/mona-shared": "0.2.27"
+    "@bytedance/mona": "0.2.29",
+    "@bytedance/mona-client-mini": "0.2.29",
+    "@bytedance/mona-client-plugin": "0.2.29",
+    "@bytedance/mona-client-web": "0.2.29",
+    "@bytedance/mona-plugin-events": "0.2.29",
+    "@bytedance/mona-shared": "0.2.29"
   },
   "publishConfig": {
     "access": "public",

packages/mona-service/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytedance/mona-service",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "displayName": "mona",
   "description": "Merchant app's developing and building tools",
   "main": "./dist/index.js",
@@ -31,10 +31,10 @@
     "@babel/preset-typescript": "^7.16.5",
     "@babel/traverse": "^7.16.5",
     "@babel/types": "^7.16.0",
-    "@bytedance/mona": "0.2.27",
-    "@bytedance/mona-max": "0.2.27",
-    "@bytedance/mona-runtime": "0.2.27",
-    "@bytedance/mona-shared": "0.2.27",
+    "@bytedance/mona": "0.2.29",
+    "@bytedance/mona-max": "0.2.29",
+    "@bytedance/mona-runtime": "0.2.29",
+    "@bytedance/mona-shared": "0.2.29",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
     "@svgr/webpack": "^5.5.0",
     "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",

packages/mona-service/src/target/mini/baseComponents/prop.ts

@@ -30,6 +30,7 @@ export const basePropAlias = {
   className: 'class',
   style: 'style',
   hidden: 'hidden',
+  animation: 'animation',
 };
 
 export const hoverPropAlias = {

packages/mona-service/src/target/utils/commonChainModuleRule.ts

@@ -25,11 +25,7 @@ export function commonChainModuleRule(params: ModuleRule) {
 
 function createJsRule({ webpackConfig, configHelper, TARGET }: ModuleRule) {
   const { projectConfig, cwd } = configHelper;
-  const jsRule = webpackConfig.module
-    .rule('js')
-    .test(/\.((j|t)sx?)$/i)
-    .exclude.add(/node_modules/)
-    .end();
+  const jsRule = webpackConfig.module.rule('js').test(/\.((j|t)sx?)$/i);
 
   jsRule
     .oneOf('babel')
@@ -67,7 +63,6 @@ function createJsRule({ webpackConfig, configHelper, TARGET }: ModuleRule) {
 function createLessRule({ webpackConfig, configHelper, commonCssRule }: ModuleRule) {
   const lessRule = webpackConfig.module.rule('less').test(/\.less$/i);
   commonCssRule(lessRule, configHelper)
-    .oneOf('less')
     .use('less')
     .loader(require.resolve('less-loader'))
     .options({
@@ -80,7 +75,7 @@ function createLessRule({ webpackConfig, configHelper, commonCssRule }: ModuleRu
 
 function createCssRule({ webpackConfig, configHelper, commonCssRule }: ModuleRule) {
   const cssRule = webpackConfig.module.rule('css').test(/\.css$/i);
-  commonCssRule(cssRule, configHelper).oneOf('css');
+  commonCssRule(cssRule, configHelper);
 }
 
 function createAssetRule({ webpackConfig, configHelper }: ModuleRule) {

packages/mona-shared/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bytedance/mona-shared",
   "displayName": "mona-shared",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "description": "mona shared utils",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

packages/mona/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytedance/mona",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "description": "Merchant app's developing and building tools",
   "main": "./dist/index",
   "scripts": {

packages/mona/src/BaseApis.ts

@@ -1054,14 +1054,101 @@ export interface ShowFavoriteGuideOptions extends Callbacks<CommonErrorArgs, Com
 }
 
 export interface Animation {
-  opacity: number;
-  backgroundColor: string;
-  width: number;
-  height: number;
-  top: number;
-  bottom: number;
-  left: number;
-  right: number;
+  /** 透明度 */
+  opacity: (value: number) => Animation;
+  /** 背景色 */
+  backgroundColor: (value: string) => Animation;
+  /** 宽度 */
+  width: (value: number) => Animation;
+  /** 高度 */
+  height: (value: number) => Animation;
+  /** 顶部距离 */
+  top: (value: number) => Animation;
+  /** 底部距离 */
+  bottom: (value: number) => Animation;
+  /** 左侧距离 */
+  left: (value: number) => Animation;
+  /** 右侧距离 */
+  right: (value: number) => Animation;
+
+  /** 旋转, 等效 rotateZ */
+  rotate: (value: number) => Animation;
+  /** X 轴旋转 */
+  rotateX: (x: number) => Animation;
+  /** Y 轴旋转 */
+  rotateY: (y: number) => Animation;
+  /** Z 轴旋转 */
+  rotateZ: (z: number) => Animation;
+  /**
+   * 从 固定轴 顺时针旋转一个角度
+   *
+   * @param x 描述旋转轴向量的x坐标
+   * @param y 描述旋转轴向量的y坐标
+   * @param z 描述旋转轴向量的z坐标
+   * @param a 代表旋转的角度. 正角度表示顺时针旋转, 负角度表示逆时针旋转
+   */
+  rotate3d: (x: number, y: number, z: number, a: number) => Animation;
+
+  /** XY 缩放 */
+  scale: (s: number) => Animation;
+  /** X 轴缩放 */
+  scaleX: (x: number) => Animation;
+  /** Y 轴缩放 */
+  scaleY: (y: number) => Animation;
+  /** Z 轴缩放 */
+  scaleZ: (z: number) => Animation;
+  /** XYZ 轴缩放 */
+  scale3d: (x: number, y: number, z: number) => Animation;
+
+  /** XY 轴平移 */
+  translate: (x: number, y: number) => Animation;
+  /** X 轴平移 */
+  translateX: (x: number) => Animation;
+  /** Y 轴平移 */
+  translateY: (y: number) => Animation;
+  /** Z 轴平移 */
+  translateZ: (z: number) => Animation;
+  /** XYZ 轴平移 */
+  translate3d: (x: number, y: number, z: number) => Animation;
+
+  /** XY 轴倾斜 */
+  skew: (x: number, y: number) => Animation;
+  /** X 轴倾斜 */
+  skewX: (x: number) => Animation;
+  /** Y 轴倾斜 */
+  skewY: (y: number) => Animation;
+
+  /**
+   * CSS 函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵
+   *
+   * 这种矩阵的常量值是隐含的，而不是由参数传递的, 其他的参数是以列优先的顺序描述的
+   *
+   * `matrix(a, b, c, d, tx, ty)` 是 `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)` 的简写
+   */
+  matrix: (a: number, b: number, c: number, d: number, tx: number, ty: number) => Animation;
+
+  /**
+   * CSS 函数 matrix3d() 以 4x4 齐次矩阵的形式定义一个3D转换
+   * 其结果是一个 [transform-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function) 数据类型。
+   */
+  matrix3d: (
+    a1: number,
+    b1: number,
+    c1: number,
+    d1: number,
+    a2: number,
+    b2: number,
+    c2: number,
+    d2: number,
+    a3: number,
+    b3: number,
+    c3: number,
+    d3: number,
+    a4: number,
+    b4: number,
+    c4: number,
+    d4: number,
+  ) => Animation;
 }
 
 export interface CreateAnimationOptions {
@@ -1580,7 +1667,7 @@ abstract class Api {
     left: number;
   };
   // 动画
-  abstract createAnimation(options?: CreateAnimationOptions): Animation;
+  abstract createAnimation(options?: CreateAnimationOptions): any;
   // 页面位置
   abstract pageScrollTo: PromisifyReturn<
     (options: { scrollTop: number; duration?: number } & Callbacks<CommonErrorArgs, CommonErrorArgs>) => void

packages/mona/src/BaseComponents.ts

@@ -6,6 +6,8 @@ export interface BaseProps<T = Touch> {
   className?: string;
   style?: React.CSSProperties;
   hidden?: boolean;
+  animation?: any;
+
   // 事件
   onTouchStart?: TouchEventHandler<T>;
   onTouchMove?: TouchEventHandler<T>;