fix(jsx2mp): attributes transform in wechat&release 0.4.18 (#1933)

* fix(jsx2mp): attributes transform in wechat * fix(jsx2mp): lint error * feat(jsx2mp): finish event transform handle * refactor(jsx2mp): finish event handle * docs(jsx2mp): add event handler example * fix(example): lint error * chore(jsx2mp): remove useless code * docs(jsx2mp): update comment * build(jsx-compiler): publish version 0.4.18
alibaba · Aug 27, 2020 · f3ead1d · f3ead1d
1 parent 5eebec6
commit f3ead1d
Show file tree

Hide file tree

Showing 26 changed files with 328 additions and 16 deletions.
diff --git a/examples/README.md b/examples/README.md
@@ -24,3 +24,5 @@ npm run build
 * use-rax-compiled-component-in-runtime-miniapp: Rax 小程序运行时项目使用 Rax 编译时组件
 * app-lifecycle: 使用 app 生命周期
 * page-lifecycle-with-router: 使用 page 生命周期 + 路由跳转
+* event-handler: 事件绑定（编译时小程序）
+
diff --git a/examples/event-handler/.eslintrc.js b/examples/event-handler/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['rax']
+};
diff --git a/examples/event-handler/.gitignore b/examples/event-handler/.gitignore
@@ -0,0 +1,17 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+*~
+*.swp
+*.log
+
+.DS_Store
+.idea/
+.temp/
+
+build/
+dist/
+lib/
+coverage/
+node_modules/
+
+template.yml
diff --git a/examples/event-handler/README.md b/examples/event-handler/README.md
@@ -0,0 +1,15 @@
+# rax-materials-basic-app
+
+## Getting Started
+
+### `npm run start`
+
+Runs the app in development mode.
+
+Open [http://localhost:9999](http://localhost:9999) to view it in the browser.
+
+The page will reload if you make edits.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.
diff --git a/examples/event-handler/build.json b/examples/event-handler/build.json
@@ -0,0 +1,20 @@
+{
+  "inlineStyle": false,
+  "plugins": [
+    [
+      "build-plugin-rax-app",
+      {
+        "targets": [
+          "miniapp",
+          "wechat-miniprogram"
+        ],
+        "miniapp": {
+          "buildType": "compile"
+        },
+        "wechat-miniprogram": {
+          "buildType": "compile"
+        }
+      }
+    ]
+  ]
+}
diff --git a/examples/event-handler/package.json b/examples/event-handler/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@rax-materials/scaffolds-app-js",
+  "author": "rax",
+  "description": "Rax 无线跨端应用工程，使用 JavaScript。",
+  "version": "0.1.0",
+  "scripts": {
+    "build": "build-scripts build",
+    "start": "build-scripts start",
+    "lint": "eslint --ext .js --ext .jsx ./"
+  },
+  "dependencies": {
+    "rax": "^1.1.0",
+    "rax-app": "^2.0.0",
+    "driver-universal": "^3.0.0",
+    "rax-image": "^2.0.0",
+    "rax-link": "^1.0.1",
+    "rax-text": "^1.0.0",
+    "rax-view": "^1.0.0",
+    "rax-document": "^0.1.0"
+  },
+  "devDependencies": {
+    "@alib/build-scripts": "^0.1.0",
+    "babel-eslint": "^10.0.3",
+    "build-plugin-rax-app": "^5.0.0",
+    "eslint": "^6.8.0",
+    "eslint-config-rax": "^0.1.0",
+    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-module": "^0.1.0",
+    "eslint-plugin-react": "^7.18.0"
+  },
+  "private": true,
+  "originTemplate": "@rax-materials/scaffolds-app-js"
+}
diff --git a/examples/event-handler/src/app.js b/examples/event-handler/src/app.js
@@ -0,0 +1,4 @@
+import { runApp } from 'rax-app';
+import appConfig from './app.json';
+
+runApp(appConfig);
diff --git a/examples/event-handler/src/app.json b/examples/event-handler/src/app.json
@@ -0,0 +1,11 @@
+{
+  "routes": [
+    {
+      "path": "/",
+      "source": "pages/Home/index"
+    }
+  ],
+  "window": {
+    "title": "Rax App"
+  }
+}
diff --git a/examples/event-handler/src/components/CustomComp/index.css b/examples/event-handler/src/components/CustomComp/index.css
@@ -0,0 +1,5 @@
+.logo {
+  width: 200rpx;
+  height: 180rpx;
+  margin-bottom: 20rpx;
+}
diff --git a/examples/event-handler/src/components/CustomComp/index.jsx b/examples/event-handler/src/components/CustomComp/index.jsx
@@ -0,0 +1,15 @@
+import { createElement } from 'rax';
+import Image from 'rax-image';
+
+import './index.css';
+
+export default (props) => {
+  const { uri } = props;
+  const source = { uri };
+  return (
+    <Image
+      className="logo"
+      source={source}
+    />
+  );
+};
diff --git a/examples/event-handler/src/document/index.jsx b/examples/event-handler/src/document/index.jsx
@@ -0,0 +1,21 @@
+import { createElement } from 'rax';
+import { Root, Style, Script} from 'rax-document';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" />
+        <title>rax-materials-basic-app</title>
+        <Style />
+      </head>
+      <body>
+        {/* root container */}
+        <Root />
+        <Script />
+      </body>
+    </html>
+  );
+}
+export default Document;
diff --git a/examples/event-handler/src/pages/Home/index.css b/examples/event-handler/src/pages/Home/index.css
@@ -0,0 +1,16 @@
+.home {
+  align-items: center;
+  margin-top: 200rpx;
+}
+
+.title {
+  font-size: 45rpx;
+  font-weight: bold;
+  margin: 20rpx 0;
+}
+
+.info {
+  font-size: 36rpx;
+  margin: 8rpx 0;
+  color: #555;
+}
diff --git a/examples/event-handler/src/pages/Home/index.jsx b/examples/event-handler/src/pages/Home/index.jsx
@@ -0,0 +1,21 @@
+import { createElement } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Image from 'rax-image';
+
+import './index.css';
+
+import CustomComp from '../../components/CustomComp';
+
+export default function Home() {
+  function noop() {}
+  return (
+    <View className="home">
+      <View className="test" onClick={noop}>onClick -> onTap (alibaba miniapp) && bindtap (wechat miniprogram) in rax-view</View>
+      <Text className="test" onClick={noop}>onClick -> bindtap (wechat miniprogram) in rax-text</Text>
+      <Image onClick={noop} onChange={noop}>onClick/onChange are not transformed (alibaba miniapp) && onClick -> bindonClick/onChange -> bindonChange (wechat miniprogram)</Image>
+      <button className="test" style={{color: 'red'}} onClick={noop} onChange={noop}>onClick -> onTap (alibaba miniapp) && onClick -> bindtap (wechat miniprogram) && onChange -> bindchange (wechat miniprogram) </button>
+      <CustomComp onClick={noop} onChange={noop}>not transformed</CustomComp>
+    </View>
+  );
+}
diff --git a/examples/with-miniapp-plugin-component/package.json b/examples/with-miniapp-plugin-component/package.json
@@ -16,7 +16,8 @@
     "rax-link": "^1.0.1",
     "rax-text": "^1.0.0",
     "rax-view": "^1.0.0",
-    "rax-document": "^0.1.0"
+    "rax-document": "^0.1.0",
+    "universal-env": "^3.0.0"
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.0",

diff --git a/examples/with-miniapp-plugin-component/src/components/Test/index.ali.jsx b/examples/with-miniapp-plugin-component/src/components/Test/index.ali.jsx
@@ -1,5 +1,6 @@
 import { createElement, useState } from 'rax';
 import View from 'rax-view';
+// eslint-disable-next-line
 import Test from 'plugin://myPlugin/test';
 
 export default function Home() {

diff --git a/examples/with-miniapp-plugin-component/src/components/Test/index.wechat.jsx b/examples/with-miniapp-plugin-component/src/components/Test/index.wechat.jsx
@@ -1,6 +1,7 @@
 import { createElement, useState } from 'rax';
 import View from 'rax-view';
 import Text from 'rax-text';
+// eslint-disable-next-line
 import Plugin from 'plugin://myPlugin/hello-component';
 
 export default function Home() {

diff --git a/packages/jsx-compiler/package.json b/packages/jsx-compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jsx-compiler",
-  "version": "0.4.17",
+  "version": "0.4.18",
   "license": "BSD-3-Clause",
   "description": "Parser for Rax JSX Statements.",
   "files": [

diff --git a/packages/jsx-compiler/src/adapter.js b/packages/jsx-compiler/src/adapter.js
@@ -42,6 +42,8 @@ const parserAdapters = {
     compatibleText: false,
     // Need transform style & class keyword
     styleKeyword: false,
+    // No need to transform onClick -> bindonclick
+    needTransformEvent: false,
     slotScope: true,
     // Need transform key
     needTransformKey: false,
@@ -71,6 +73,8 @@ const parserAdapters = {
     },
     styleKeyword: true,
     slotScope: false,
+    // Need transform onClick -> bindonclick
+    needTransformEvent: true,
     needTransformKey: true,
     triggerRef: true,
     processSlider: true,
@@ -97,10 +101,13 @@ const parserAdapters = {
     },
     styleKeyword: true,
     slotScope: false,
+    // Need transform onClick -> bindonclick
+    needTransformEvent: true,
     needTransformKey: true,
     triggerRef: true,
     needRegisterProps: true,
   },
+  componentCommonProps
 };
 
 module.exports = parserAdapters;
diff --git a/packages/jsx-compiler/src/baseComponents.js b/packages/jsx-compiler/src/baseComponents.js
@@ -1,5 +1,4 @@
 module.exports = [
-  'rax-text',
   'rax-scrollview',
   'rax-recyclerview',
   'rax-textinput',

diff --git a/packages/jsx-compiler/src/modules/__tests__/attribute.js b/packages/jsx-compiler/src/modules/__tests__/attribute.js
@@ -35,6 +35,7 @@ describe('Transform JSX Attribute', () => {
   it('should not transform wechat custom component className', () => {
     const code = '<Custom className="box">test</Custom>';
     const ast = parseExpression(code);
+    ast.openingElement.name.isCustom = true;
     _transformAttribute(ast, code, wxAdapter);
     expect(genCode(ast).code).toEqual('<Custom className="box">test</Custom>');
   });
@@ -49,6 +50,7 @@ describe('Transform JSX Attribute', () => {
   it('should transform wechat custom component style into styleSheet', () => {
     const code = "<Custom style={{width: '100rpx'}}>test</Custom>";
     const ast = parseExpression(code);
+    ast.openingElement.name.isCustom = true;
     _transformAttribute(ast, code, wxAdapter);
     expect(genCode(ast).code).toEqual(`<Custom styleSheet={{
   width: '100rpx'
@@ -57,6 +59,7 @@ describe('Transform JSX Attribute', () => {
   it('should transform wechat custom component id', () => {
     const code = '<Custom id="box">test</Custom>';
     const ast = parseExpression(code);
+    ast.openingElement.name.isCustom = true;
     _transformAttribute(ast, code, wxAdapter);
     expect(genCode(ast).code).toEqual('<Custom id="box" componentId="box">test</Custom>');
   });