fix: 优化 text 元素的编译 (#872)

* fix: 优化 text 元素的编译

* fix: 修复 app.json 页面错误

---------

Co-authored-by: DiamondYuan <fandi.yfd@antgroup.com>

.gitignore

@@ -34,3 +34,6 @@
 
 # wechat
 project.private.config.json
+compiled/wechat/miniprogram_npm
+compiled/wechat/node_modules
+compiled/wechat/yarn.lock

compiled/alipay/src/_util/hooks/useComponentEvent.ts

@@ -4,7 +4,7 @@ import fmtEvent from '../fmtEvent';
 export function useComponentEvent<T>(props: T) {
   const component = useComponent();
   return {
-    triggerEvent: (eventName: string, value: unknown, e: any) => {
+    triggerEvent: (eventName: string, value: unknown, e?: any) => {
       // 首字母大写，然后加上 on
 
       const alipayCallbackName =

compiled/wechat/package.json

@@ -0,0 +1,11 @@
+{
+  "dependencies": {
+    "@mini-types/alipay": "^3.0.5",
+    "async-validator": "^4.0.7",
+    "dayjs": "^1.11.10",
+    "fast-deep-equal": "3.1.3",
+    "functional-mini": "^0.8.0",
+    "js-calendar-converter": "^0.0.6",
+    "tslib": "2.5.0"
+  }
+}

compiled/wechat/src/Button/index.js

@@ -1,9 +1,20 @@
-import { __assign } from "tslib";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { ButtonDefaultProps } from './props';
 import '../_util/assert-component2';
 Component({
     properties: {
+        style: String,
         type: String,
         disabled: Boolean,
         activeClassName: String,

compiled/wechat/src/_util/component.js

@@ -9,5 +9,7 @@ function removeNullProps(props) {
     return newProps;
 }
 export function mountComponent(Hooks, defaultProps) {
-    Component(wechatComponent(Hooks, defaultProps, { styleIsolation: 'shared' }));
+    Component(wechatComponent(Hooks, defaultProps, {
+        options: { styleIsolation: 'shared', multipleSlots: true },
+    }));
 }

compiled/wechat/src/_util/hooks/useComponentEvent.js

@@ -4,7 +4,7 @@ export function useComponentEvent(props) {
     return {
         triggerEvent: function (eventName, value, e) {
             // 首字母大写，然后加上 on
-            component.triggerEvent('change', value);
+            component.triggerEvent(eventName, value);
         },
     };
 }

compiled/wechat/src/_util/hooks/useEvent.js

@@ -1,4 +1,12 @@
-import { __spreadArray } from "tslib";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 /**
  * copy from https://github.com/react-component/util/blob/9d5cb8946da29e690bead78b2c251da6f7cbd0eb/src/hooks/useEvent.ts
  */

compiled/wechat/src/_util/promisify.js

@@ -1,4 +1,14 @@
-import { __assign } from "tslib";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 /*
  *@Description: 把所有my.xx的方法变成promise
  */

compiled/wechat/src/mixins/value.js

@@ -1,4 +1,12 @@
-import { __spreadArray } from "tslib";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 function equal(a, b) {
     if (a === b) {
         return true;

compiled/wechat/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "moduleResolution": "node",
-    "target": "esnext",
-    "lib": ["es2015"],
-    "jsx": "preserve",
-    "paths": {
-      "tsxml": ["./lib/index.tsx"]
-    },
-    "types": ["node"]
-  },
-  "include": ["./src/**/*", "./demo/**/*"]
-}

package.json

@@ -81,7 +81,6 @@
     "gulp-typescript": "^6.0.0-alpha.1",
     "inquirer": "^8.2.1",
     "istanbul-lib-coverage": "^3.2.0",
-    "js-calendar-converter": "^0.0.6",
     "less": "^4.1.2",
     "lint-staged": "^10.0.7",
     "merge2": "^1.4.1",
@@ -122,4 +121,4 @@
   ],
   "license": "MIT",
   "homepage": "https://github.com/ant-design/ant-design-mini"
-}
+}

project.config.json

@@ -1,6 +1,6 @@
 {
   "description": "Ant Design Mini 示例小程序",
-  "miniprogramRoot": "compiled/wechat",
+  "miniprogramRoot": "compiled/wechat/",
   "compileType": "miniprogram",
   "libVersion": "3.0.1",
   "packOptions": {
@@ -8,6 +8,13 @@
     "include": []
   },
   "setting": {
+    "packNpmManually": true,
+    "packNpmRelationList": [
+      {
+        "packageJsonPath": "compiled/wechat/package.json",
+        "miniprogramNpmDistDir": "compiled/wechat"
+      }
+    ],
     "babelSetting": {
       "ignore": [],
       "disablePlugins": [],
@@ -23,8 +30,12 @@
     "tabIndent": "insertSpaces",
     "tabSize": 2
   },
-  "useCompilerPlugins": ["typescript", "less"],
+  "useCompilerPlugins": [
+    "typescript",
+    "less"
+  ],
   "srcMiniprogramRoot": "wechat/",
   "projectname": "antd",
-  "simulatorPluginLibVersion": {}
-}
+  "simulatorPluginLibVersion": {},
+  "appid": "wx6d1d41437b0746e6"
+}

scripts/mini-compiler.ts

@@ -287,19 +287,21 @@ export function miniCompiler(option: MiniProgramSourceCompileOption) {
 }
 
 export async function compileAntdMini(watch: boolean) {
-  await Promise.all(
-    [
-      'compiled/alipay/demo/pages',
-      'compiled/alipay/src',
-      'compiled/wechat/demo',
-      'compiled/wechat/src',
-    ].map((dir) => {
-      return fs.rm(resolve(__dirname, '..', dir), {
-        recursive: true,
-        force: true,
-      });
-    })
-  );
+  if (!watch) {
+    await Promise.all(
+      [
+        'compiled/alipay/demo/pages',
+        'compiled/alipay/src',
+        'compiled/wechat/demo',
+        'compiled/wechat/src',
+      ].map((dir) => {
+        return fs.rm(resolve(__dirname, '..', dir), {
+          recursive: true,
+          force: true,
+        });
+      })
+    );
+  }
   const wechatBuildOption = {
     compileTs: true,
     compileLess: true,
@@ -317,7 +319,7 @@ export async function compileAntdMini(watch: boolean) {
   };
 
   miniCompiler({
-    tsconfig: resolve(__dirname, '..', 'tsconfig.json'),
+    tsconfig: resolve(__dirname, '..', 'tsconfig.wechat.json'),
     source: resolve(__dirname, '..', 'src'),
     dest: resolve(__dirname, '..', 'compiled', 'wechat', 'src'),
     watch,
@@ -327,7 +329,7 @@ export async function compileAntdMini(watch: boolean) {
   });
 
   miniCompiler({
-    tsconfig: resolve(__dirname, '..', 'tsconfig.json'),
+    tsconfig: resolve(__dirname, '..', 'tsconfig.wechat.json'),
     source: resolve(__dirname, '..', 'demo'),
     dest: resolve(__dirname, '..', 'compiled', 'wechat', 'demo'),
     watch,

scripts/tsxml/fixtures/if.tsx

@@ -7,6 +7,7 @@ interface Props {
 
 export default ({ a, b }: Props) => (
   <View>
+    {/* one */}
     {!!a && <Text>a</Text>}
     {!!a && b && <Text> a & b</Text>}
     {a ? <Text>a</Text> : <Text>!a</Text>}

scripts/tsxml/fixtures/snapshot/event.axml

@@ -1,7 +1,8 @@
 <view>
+  <!-- display: inline -->
   <text
     onTap="a"
-    catchTap="b">
-    {{ a }}
-  </text>
+    catchTap="b"
+    >{{ a }}</text
+  >
 </view>

scripts/tsxml/fixtures/snapshot/event.wxml

@@ -1,7 +1,8 @@
 <view>
+  <!-- display: inline -->
   <text
     bind:tap="a"
-    catch:tap="b">
-    {{ a }}
-  </text>
+    catch:tap="b"
+    >{{ a }}</text
+  >
 </view>

scripts/tsxml/fixtures/snapshot/if.axml

@@ -1,8 +1,20 @@
 <view>
-  <block a:if="{{ !!a }}"><text>a</text></block>
-  <block a:if="{{ !!a && b }}"><text>a & b</text></block>
-  <block a:if="{{ a }}"><text>a</text></block>
-  <block a:else><text>!a</text></block>
+  <block a:if="{{ !!a }}">
+    <!-- display: inline -->
+    <text>a</text>
+  </block>
+  <block a:if="{{ !!a && b }}">
+    <!-- display: inline -->
+    <text>a & b</text>
+  </block>
+  <block a:if="{{ a }}">
+    <!-- display: inline -->
+    <text>a</text>
+  </block>
+  <block a:else>
+    <!-- display: inline -->
+    <text>!a</text>
+  </block>
   <text class="{{ a ? '1' : '2' }}" />
   <text class="1 {{ a ? '1' + '2' : 2 }} 2" />
 </view>

scripts/tsxml/fixtures/snapshot/if.wxml

@@ -1,8 +1,20 @@
 <view>
-  <block wx:if="{{ !!a }}"><text>a</text></block>
-  <block wx:if="{{ !!a && b }}"><text>a & b</text></block>
-  <block wx:if="{{ a }}"><text>a</text></block>
-  <block wx:else><text>!a</text></block>
+  <block wx:if="{{ !!a }}">
+    <!-- display: inline -->
+    <text>a</text>
+  </block>
+  <block wx:if="{{ !!a && b }}">
+    <!-- display: inline -->
+    <text>a & b</text>
+  </block>
+  <block wx:if="{{ a }}">
+    <!-- display: inline -->
+    <text>a</text>
+  </block>
+  <block wx:else>
+    <!-- display: inline -->
+    <text>!a</text>
+  </block>
   <text class="{{ a ? '1' : '2' }}" />
   <text class="1 {{ a ? '1' + '2' : 2 }} 2" />
 </view>

scripts/tsxml/fixtures/snapshot/index.axml

@@ -3,7 +3,8 @@
     a:for="{{ todoList }}"
     a:for-index="taskIndex"
     a:for-item="task">
-    <text data-item-id="{{ taskIndex }}">{{ taskIndex }} {{ task }}</text>
+    <!-- display: inline -->
+    <text data-item-id="{{ taskIndex }}">{{ taskIndex }}{{ task }}</text>
   </block>
   <test loading />
 </view>

scripts/tsxml/fixtures/snapshot/index.wxml

@@ -3,7 +3,8 @@
     wx:for="{{ todoList }}"
     wx:for-index="taskIndex"
     wx:for-item="task">
-    <text data-item-id="{{ taskIndex }}">{{ taskIndex }} {{ task }}</text>
+    <!-- display: inline -->
+    <text data-item-id="{{ taskIndex }}">{{ taskIndex }}{{ task }}</text>
   </block>
   <test loading />
 </view>

scripts/tsxml/fixtures/snapshot/style.axml

@@ -6,6 +6,13 @@
       <loading style="width: 40px; height: 40px" />
       <loading style="width: 30px; height: 30px" />
       <loading className="custom-size" />
+      <!-- display: inline -->
+      <text
+        a="1"
+        b="2"
+        class="ant-calendar-cell-top-text {{ item.top.className ? item.top.className : '' }}"
+        >1111</text
+      >
     </view>
   </container>
 </view>

scripts/tsxml/fixtures/snapshot/style.wxml

@@ -6,6 +6,13 @@
       <loading style="width: 40px; height: 40px" />
       <loading style="width: 30px; height: 30px" />
       <loading className="custom-size" />
+      <!-- display: inline -->
+      <text
+        a="1"
+        b="2"
+        class="ant-calendar-cell-top-text {{ item.top.className ? item.top.className : '' }}"
+        >1111</text
+      >
     </view>
   </container>
 </view>

scripts/tsxml/fixtures/style.tsx

@@ -1,12 +1,21 @@
 import { View } from 'tsxml';
 
-export default () => (
+export default ({ item }) => (
   <View>
     <container title="自定义大小" class="container">
       <view class="list">
         <loading style="width: 40px; height: 40px;" />
         <loading style="width: 30px; height: 30px;" />
         <loading className="custom-size" />
+        <text
+          a="1"
+          b="2"
+          class={`ant-calendar-cell-top-text ${
+            item.top.className ? item.top.className : ''
+          }`}
+        >
+          1111
+        </text>
       </view>
     </container>
   </View>

scripts/tsxml/h.ts

@@ -14,6 +14,7 @@ export function h(tagName: string, props: any, ...children: any[]) {
 }
 
 export function toHtml(vNode: Node | Children | Array<Node | Children>) {
+  if (!vNode) return '';
   if (typeof vNode === 'string') {
     return vNode;
   }
@@ -35,7 +36,18 @@ export function toHtml(vNode: Node | Children | Array<Node | Children>) {
   }
 
   if (Array.isArray(vNode.children) && vNode.children.length > 0) {
-    return `<${vNode.tagName} ${props}>${vNode.children
+    let prefix = '';
+    if (vNode.tagName === 'text') {
+      prefix = `<!-- display: inline -->`;
+    }
+    return `${prefix}<${vNode.tagName} ${props}>${vNode.children
+      .filter(Boolean)
+      .map((o) => {
+        if (typeof o === 'string' && vNode.tagName === 'text') {
+          return o.trim();
+        }
+        return o;
+      })
       .map((o) => toHtml(o))
       .join('')}</${vNode.tagName}>`;
   }

scripts/tsxml/index.spec.ts

@@ -25,11 +25,11 @@ async function textTsXml(fixtureName: string) {
 
 it('index', async () => {
   await textTsXml('index');
+  await textTsXml('if');
+  await textTsXml('sjs');
 });
 
 it('测试解析为 axml', async () => {
-  await textTsXml('if');
-  await textTsXml('sjs');
   await textTsXml('style');
 });
 

scripts/tsxml/parser.ts

@@ -62,6 +62,9 @@ export function transformJSXElement(ctx: ITransformContext) {
     case 'ArrowFunctionExpression': {
       return transformJSXElement(ctx.extends(ctx.node.body));
     }
+    case 'JSXEmptyExpression': {
+      return null;
+    }
     case 'JSXElement': {
       const tagName = ctx.getTagName(
         getJSXElementName(ctx as ITransformContext<types.JSXElement>)

scripts/tsxml/platform.ts

@@ -32,6 +32,7 @@ export const wechat: PlatformConfig = {
     onTap: 'bind:tap',
     catchTap: 'catch:tap',
     onChange: 'bind:change',
+    onScroll: 'bind:scroll',
   },
 };
 
@@ -51,5 +52,6 @@ export interface PlatformConfig {
     onTap: string;
     catchTap: string;
     onChange?: string;
+    onScroll?: string;
   };
 }

src/Button/index.ts

@@ -6,6 +6,7 @@ import '../_util/assert-component2';
 Component({
   /// #if WECHAT
   properties: {
+    style: String,
     type: String,
     disabled: Boolean,
     activeClassName: String,

src/_util/component.ts

@@ -15,7 +15,11 @@ export function mountComponent<T>(
   defaultProps: T
 ) {
   /// #if WECHAT
-  Component(wechatComponent(Hooks, defaultProps, { styleIsolation: 'shared' }));
+  Component(
+    wechatComponent(Hooks, defaultProps, {
+      options: { styleIsolation: 'shared', multipleSlots: true },
+    })
+  );
   /// #endif
 
   /// #if ALIPAY

src/_util/hooks/useComponentEvent.ts

@@ -4,7 +4,7 @@ import fmtEvent from '../fmtEvent';
 export function useComponentEvent<T>(props: T) {
   const component = useComponent();
   return {
-    triggerEvent: (eventName: string, value: unknown, e: any) => {
+    triggerEvent: (eventName: string, value: unknown, e?: any) => {
       // 首字母大写，然后加上 on
 
       /// #if ALIPAY
@@ -17,7 +17,7 @@ export function useComponentEvent<T>(props: T) {
       /// #endif
 
       /// #if WECHAT
-      component.triggerEvent('change', value);
+      component.triggerEvent(eventName, value);
       /// #endif
     },
   };

src/tsxml/index.tsx

@@ -29,6 +29,7 @@ interface Props {
   onTouchEnd?: string;
   catchTouchEnd?: string;
   catchTouchMove?: string;
+  slot?: string;
   value?: any;
   index?: any;
 }

tsconfig.json

@@ -7,6 +7,7 @@
     "moduleResolution": "node",
     "importHelpers": true,
     "declaration": true,
+    "rootDir": "./",
     "noImplicitThis": false,
     "jsx": "preserve",
     "types": ["@mini-types/alipay", "node"],

tsconfig.wechat.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "importHelpers": false
+  }
+}