feat: 支持开发者创建 Remax 组件以使用小程序新推出的组件

resolve #293
remaxjs · Nov 12, 2019 · 07a29ff · 07a29ff
1 parent df78f3c
commit 07a29ff
Show file tree

Hide file tree

Showing 128 changed files with 649 additions and 270 deletions.
diff --git a/docs/guide/component.md b/docs/guide/component.md
@@ -30,3 +30,34 @@ Remax
 ```html
 <view class="view" style="display: flex;" onTap="handleClick"></view>
 ```
+
+## 跟进小程序组件更新
+
+如果小程序添加了新的组件，而你所用的 Remax 版本还没提供该组件的支持，Remax 允许你自己创建一个新的 Remax 组件。
+
+假设微信小程序新增了一个 `<foo-bar>` 组件，你可以这么做以让 Remax 提前支持：
+
+```jsx
+import { createRemaxComponent } from 'remax/wechat';
+
+const RemaxFooBar = createRemaxComponent('RemaxFooBar');
+
+function Page() {
+  return <RemaxFooBar foo="bar" />;
+}
+```
+
+如果你使用的是 typescript，还可以定义 props 类型：
+
+```jsx
+import { createRemaxComponent } from 'remax/wechat';
+
+const RemaxFooBar = createRemaxComponent<{ foo: string; }>('RemaxFooBar');
+
+function Page() {
+  return <RemaxFooBar foo="bar" />;
+}
+```
+
+> 其中需要注意的是，在组件定义和使用中必须加上 Remax 前缀，并且命名规则要以实际组件名的驼峰形式命名。
+> 如 RemaxFooBar 对应于 foo-bar
diff --git a/packages/remax-cli/src/__tests__/fixtures/alipay/expected/pages/index.axml b/packages/remax-cli/src/__tests__/fixtures/alipay/expected/pages/index.axml
@@ -85,6 +85,17 @@
 </template>
 
 
+  <template name="REMAX_TPL_1_foo-bar">
+  <foo-bar  foo="{{item.props['foo']}}" >
+
+    <block a:for="{{item.children}}" key="{{item.id}}">
+      <template is="REMAX_TPL_1_CONTAINER" data="{{item: item}}" />
+    </block>
+
+  </foo-bar>
+</template>
+
+
   <template name="REMAX_TPL_1_form">
   <form  class="{{item.props['class']}}"  style="{{item.props['style']}}"  report-submit="{{item.props['report-submit']}}"  onSubmit="{{item.props['onSubmit']}}"  onReset="{{item.props['onReset']}}" >
 

diff --git a/packages/remax-cli/src/__tests__/fixtures/alipay/expected/pages/index.js b/packages/remax-cli/src/__tests__/fixtures/alipay/expected/pages/index.js
@@ -5,6 +5,7 @@ import '../npm/remax/esm/createAppConfig.js';
 import '../npm/remax/esm/Platform.js';
 import createPageConfig from '../npm/remax/esm/createPageConfig.js';
 import '../npm/remax/esm/index.js';
+import { createCustomRemaxComponent } from '../npm/remax/esm/createRemaxComponent.js';
 import View from '../npm/remax/esm/adapters/alipay/components/View.js';
 import '../npm/remax/esm/adapters/alipay/components/ScrollView.js';
 import '../npm/remax/esm/adapters/alipay/components/Swiper.js';
@@ -43,12 +44,15 @@ import '../npm/remax/esm/adapters/alipay/api.js';
 var _page = function _page() {
   var props = {};
   var TextElement = cloneElement(createElement(Text, null));
+  var RemaxFooBar = createCustomRemaxComponent('RemaxFooBar');
 
   function handleClick() {}
 
   function handleTouchStart() {}
 
-  return createElement(View, null, createElement(View, _extends({
+  return createElement(View, null, createElement(RemaxFooBar, {
+    foo: "bar"
+  }), createElement(View, _extends({
     onClick: handleClick,
     onTouchStart: handleTouchStart,
     id: "view",

diff --git a/packages/remax-cli/src/__tests__/fixtures/alipay/src/pages/index.js b/packages/remax-cli/src/__tests__/fixtures/alipay/src/pages/index.js
@@ -1,16 +1,18 @@
 import * as React from 'react';
-import { View, Text } from 'remax/alipay';
+import { View, Text, createRemaxComponent } from 'remax/alipay';
 
 export default () => {
   const props = {};
   const TextElement = React.cloneElement(<Text />);
+  const RemaxFooBar = createRemaxComponent('RemaxFooBar');
 
   function handleClick() {}
 
   function handleTouchStart() {}
 
   return (
     <View>
+      <RemaxFooBar foo="bar" />
       <View
         onClick={handleClick}
         onTouchStart={handleTouchStart}

diff --git a/packages/remax-cli/src/__tests__/fixtures/assets/expected/pages/index.js b/packages/remax-cli/src/__tests__/fixtures/assets/expected/pages/index.js
@@ -4,6 +4,7 @@ import '../npm/remax/esm/createAppConfig.js';
 import '../npm/remax/esm/Platform.js';
 import createPageConfig from '../npm/remax/esm/createPageConfig.js';
 import '../npm/remax/esm/index.js';
+import '../npm/remax/esm/createRemaxComponent.js';
 import View from '../npm/remax/esm/adapters/alipay/components/View.js';
 import '../npm/remax/esm/adapters/alipay/components/ScrollView.js';
 import '../npm/remax/esm/adapters/alipay/components/Swiper.js';

diff --git a/packages/remax-cli/src/__tests__/fixtures/babelrc/expected/pages/index.js b/packages/remax-cli/src/__tests__/fixtures/babelrc/expected/pages/index.js
@@ -4,6 +4,7 @@ import '../npm/remax/esm/createAppConfig.js';
 import '../npm/remax/esm/Platform.js';
 import createPageConfig from '../npm/remax/esm/createPageConfig.js';
 import '../npm/remax/esm/index.js';
+import '../npm/remax/esm/createRemaxComponent.js';
 import View from '../npm/remax/esm/adapters/alipay/components/View.js';
 import '../npm/remax/esm/adapters/alipay/components/ScrollView.js';
 import '../npm/remax/esm/adapters/alipay/components/Swiper.js';

diff --git a/packages/remax-cli/src/__tests__/fixtures/customRootDir/expected/pages/index.js b/packages/remax-cli/src/__tests__/fixtures/customRootDir/expected/pages/index.js
@@ -4,6 +4,7 @@ import '../npm/remax/esm/createAppConfig.js';
 import '../npm/remax/esm/Platform.js';
 import createPageConfig from '../npm/remax/esm/createPageConfig.js';
 import '../npm/remax/esm/index.js';
+import '../npm/remax/esm/createRemaxComponent.js';
 import View from '../npm/remax/esm/adapters/alipay/components/View.js';
 import '../npm/remax/esm/adapters/alipay/components/ScrollView.js';
 import '../npm/remax/esm/adapters/alipay/components/Swiper.js';

diff --git a/packages/remax-cli/src/__tests__/fixtures/nativeComponent/expected/pages/index.js b/packages/remax-cli/src/__tests__/fixtures/nativeComponent/expected/pages/index.js
@@ -4,6 +4,7 @@ import '../npm/remax/esm/createAppConfig.js';
 import '../npm/remax/esm/Platform.js';
 import createPageConfig from '../npm/remax/esm/createPageConfig.js';
 import '../npm/remax/esm/index.js';
+import '../npm/remax/esm/createRemaxComponent.js';
 import View from '../npm/remax/esm/adapters/alipay/components/View.js';
 import '../npm/remax/esm/adapters/alipay/components/ScrollView.js';
 import '../npm/remax/esm/adapters/alipay/components/Swiper.js';

diff --git a/packages/remax-cli/src/__tests__/fixtures/toutiao/expected/base.ttml b/packages/remax-cli/src/__tests__/fixtures/toutiao/expected/base.ttml
@@ -5,6 +5,17 @@
 </template>
 
 
+  <template name="REMAX_TPL_foo-bar">
+  <foo-bar  foo="{{i.props['foo']}}" >
+
+      <block tt:for="{{i.children}}" tt:key="{{id}}">
+        <template is="{{'REMAX_TPL_' + item.type}}" data="{{i: item}}" />
+      </block>
+
+  </foo-bar>
+</template>
+
+
   <template name="REMAX_TPL_text">
   <text >
 

diff --git a/packages/remax-cli/src/__tests__/fixtures/toutiao/expected/pages/index.js b/packages/remax-cli/src/__tests__/fixtures/toutiao/expected/pages/index.js
@@ -12,6 +12,7 @@ require('../npm/remax/esm/createAppConfig.js');
 require('../npm/remax/esm/Platform.js');
 var createPageConfig = require('../npm/remax/esm/createPageConfig.js');
 require('../npm/remax/esm/index.js');
+var createRemaxComponent = require('../npm/remax/esm/createRemaxComponent.js');
 var View = require('../npm/remax/esm/adapters/toutiao/components/View.js');
 require('../npm/remax/esm/adapters/toutiao/components/Input.js');
 require('../npm/remax/esm/adapters/toutiao/components/Textarea.js');
@@ -44,12 +45,15 @@ require('../npm/remax/esm/adapters/toutiao/api.js');
 var _page = function _page() {
   var props = {};
   var TextElement = React.cloneElement(React.createElement(Text.default, null));
+  var RemaxFooBar = createRemaxComponent.createCustomRemaxComponent('RemaxFooBar');
 
   function handleClick() {}
 
   function handleTouchStart() {}
 
-  return React.createElement(View.default, null, React.createElement(View.default, _rollupPluginBabelHelpers.extends({
+  return React.createElement(View.default, null, React.createElement(RemaxFooBar, {
+    foo: "bar"
+  }), React.createElement(View.default, _rollupPluginBabelHelpers.extends({
     onClick: handleClick,
     onTouchStart: handleTouchStart,
     id: "view",

diff --git a/packages/remax-cli/src/__tests__/fixtures/toutiao/src/pages/index.js b/packages/remax-cli/src/__tests__/fixtures/toutiao/src/pages/index.js
@@ -1,16 +1,18 @@
 import * as React from 'react';
-import { View, Text } from 'remax/toutiao';
+import { View, Text, createRemaxComponent } from 'remax/toutiao';
 
 export default () => {
   const props = {};
   const TextElement = React.cloneElement(<Text />);
+  const RemaxFooBar = createRemaxComponent('RemaxFooBar');
 
   function handleClick() {}
 
   function handleTouchStart() {}
 
   return (
     <View>
+      <RemaxFooBar foo="bar" />
       <View
         onClick={handleClick}
         onTouchStart={handleTouchStart}

diff --git a/packages/remax-cli/src/__tests__/fixtures/universe/expected/alipay/components/Text.js b/packages/remax-cli/src/__tests__/fixtures/universe/expected/alipay/components/Text.js
@@ -4,6 +4,7 @@ import '../npm/remax/esm/createAppConfig.js';
 import Platform from '../npm/remax/esm/Platform.js';
 import '../npm/remax/esm/createPageConfig.js';
 import '../npm/remax/esm/index.js';
+import '../npm/remax/esm/createRemaxComponent.js';
 import '../npm/remax/esm/adapters/alipay/components/View.js';
 import '../npm/remax/esm/adapters/alipay/components/ScrollView.js';
 import '../npm/remax/esm/adapters/alipay/components/Swiper.js';

diff --git a/packages/remax-cli/src/__tests__/fixtures/universe/expected/alipay/components/View.js b/packages/remax-cli/src/__tests__/fixtures/universe/expected/alipay/components/View.js
@@ -4,6 +4,7 @@ import '../npm/remax/esm/createAppConfig.js';
 import Platform from '../npm/remax/esm/Platform.js';
 import '../npm/remax/esm/createPageConfig.js';
 import '../npm/remax/esm/index.js';
+import '../npm/remax/esm/createRemaxComponent.js';
 import AlipayView from '../npm/remax/esm/adapters/alipay/components/View.js';
 import '../npm/remax/esm/adapters/alipay/components/ScrollView.js';
 import '../npm/remax/esm/adapters/alipay/components/Swiper.js';

diff --git a/packages/remax-cli/src/__tests__/fixtures/universe/expected/toutiao/components/Text.js b/packages/remax-cli/src/__tests__/fixtures/universe/expected/toutiao/components/Text.js
@@ -11,6 +11,7 @@ require('../npm/remax/esm/createPageConfig.js');
 require('../npm/remax/esm/index.js');
 var index$1 = require('../npm/remax/esm/adapters/alipay/components/index.js');
 var index$2 = require('../npm/remax/esm/adapters/wechat/components/index.js');
+require('../npm/remax/esm/createRemaxComponent.js');
 require('../npm/remax/esm/adapters/toutiao/components/View.js');
 require('../npm/remax/esm/adapters/toutiao/components/Input.js');
 require('../npm/remax/esm/adapters/toutiao/components/Textarea.js');

diff --git a/packages/remax-cli/src/__tests__/fixtures/universe/expected/toutiao/components/View.js b/packages/remax-cli/src/__tests__/fixtures/universe/expected/toutiao/components/View.js
@@ -11,6 +11,7 @@ require('../npm/remax/esm/createPageConfig.js');
 require('../npm/remax/esm/index.js');
 var index$1 = require('../npm/remax/esm/adapters/alipay/components/index.js');
 var index$2 = require('../npm/remax/esm/adapters/wechat/components/index.js');
+require('../npm/remax/esm/createRemaxComponent.js');
 var View$1 = require('../npm/remax/esm/adapters/toutiao/components/View.js');
 require('../npm/remax/esm/adapters/toutiao/components/Input.js');
 require('../npm/remax/esm/adapters/toutiao/components/Textarea.js');

diff --git a/packages/remax-cli/src/__tests__/fixtures/universe/expected/wechat/components/Text.js b/packages/remax-cli/src/__tests__/fixtures/universe/expected/wechat/components/Text.js
@@ -10,6 +10,7 @@ var Platform = require('../npm/remax/esm/Platform.js');
 require('../npm/remax/esm/createPageConfig.js');
 require('../npm/remax/esm/index.js');
 var index$1 = require('../npm/remax/esm/adapters/alipay/components/index.js');
+require('../npm/remax/esm/createRemaxComponent.js');
 require('../npm/remax/esm/adapters/wechat/components/View.js');
 require('../npm/remax/esm/adapters/wechat/components/Input.js');
 require('../npm/remax/esm/adapters/wechat/components/Textarea.js');

diff --git a/packages/remax-cli/src/__tests__/fixtures/universe/expected/wechat/components/View.js b/packages/remax-cli/src/__tests__/fixtures/universe/expected/wechat/components/View.js
@@ -10,6 +10,7 @@ var Platform = require('../npm/remax/esm/Platform.js');
 require('../npm/remax/esm/createPageConfig.js');
 require('../npm/remax/esm/index.js');
 var index$1 = require('../npm/remax/esm/adapters/alipay/components/index.js');
+require('../npm/remax/esm/createRemaxComponent.js');
 var View$1 = require('../npm/remax/esm/adapters/wechat/components/View.js');
 require('../npm/remax/esm/adapters/wechat/components/Input.js');
 require('../npm/remax/esm/adapters/wechat/components/Textarea.js');