单文本节点表达式优化

remaxjs · Feb 13, 2020 · 785c4fc · 785c4fc
1 parent 762fabf
commit 785c4fc
Show file tree

Hide file tree

Showing 9 changed files with 318 additions and 65 deletions.
diff --git a/packages/remax-cli/src/__tests__/fixtures/staticCompiler/alipay/expected/alipay/base.axml b/packages/remax-cli/src/__tests__/fixtures/staticCompiler/alipay/expected/alipay/base.axml
@@ -3,42 +3,105 @@
   <view data-rid="{{node.props['data-rid']}}" >
   <text data-rid="{{node.children[0].props['data-rid']}}" >
   {{'react component'}}
-</text><block  >
-  <template is="TPL_TRAVERSAL" data="{{root: node.children[1]}}" />
+</text>
+
+<block  >
+  <block a:if="{{node.children[1].children}}">
+  <block a:for="{{node.children[1].children || []}}" key="{{item.id}}">
+    <template a:if="{{item.props._eid > 0}}" is="{{'TPL_' + item.props._eid}}" data="{{ node: item }}" />
+    <template a:else is="{{ 'TPL_' + item.type }}" data="{{ node: item }}" />
+  </block>
 </block>
+<template a:elif="{{node.children[1].props._eid > 0}}" is="{{'TPL_' + node.children[1].props._eid}}" data="{{ node: node.children[1] }}" />
+<template a:else is="{{ 'TPL_' + node.children[1].type }}" data="{{ node: node.children[1] }}" />
+
+</block>
+
 </view>
+
 </template>
 
 <template name="TPL_2">
   <block  >
   <block  >
   {{'Fragment'}}
-</block><block  >
+</block>
+
+<block  >
   {{'React.Fragment'}}
-</block><block  >
+</block>
+
+<block  >
   <template is="TPL_DEFAULT" data="{{root: node.children[2]}}" />
-</block><text data-rid="{{node.children[3].props['data-rid']}}" >
+
+</block>
+
+<text data-rid="{{node.children[3].props['data-rid']}}" >
   {{'Remax.Text'}}
-</text><block  >
+</text>
+
+<block  >
   <template is="TPL_DEFAULT" data="{{root: node.children[4]}}" />
-</block><block  >
+
+</block>
+
+<block  >
   <template is="TPL_DEFAULT" data="{{root: node.children[5]}}" />
-</block><view class="className"
+
+</block>
+
+<view class="className"
   data-rid="{{node.children[6].props['data-rid']}}" >
-  {{'Count: '}}<block  >
-  <template is="TPL_TRAVERSAL" data="{{root: node.children[6].children[1]}}" />
+  {{'Count: '}}
+<block  >
+  <block a:if="{{node.children[6].children[1].children}}">
+  <block a:for="{{node.children[6].children[1].children || []}}" key="{{item.id}}">
+    <template a:if="{{item.props._eid > 0}}" is="{{'TPL_' + item.props._eid}}" data="{{ node: item }}" />
+    <template a:else is="{{ 'TPL_' + item.type }}" data="{{ node: item }}" />
+  </block>
 </block>
-</view><view id="{{node.children[7].props['id']}}"
+<template a:elif="{{node.children[6].children[1].props._eid > 0}}" is="{{'TPL_' + node.children[6].children[1].props._eid}}" data="{{ node: node.children[6].children[1] }}" />
+<template a:else is="{{ 'TPL_' + node.children[6].children[1].type }}" data="{{ node: node.children[6].children[1] }}" />
+
+</block>
+
+</view>
+
+<view id="{{node.children[7].props['id']}}"
   class="class"
   data-rid="{{node.children[7].props['data-rid']}}" >
   {{'view'}}
-</view><view data-rid="{{node.children[8].props['data-rid']}}" >
+</view>
+
+<view data-rid="{{node.children[8].props['data-rid']}}" >
   {{'custom view'}}
-</view><block  >
-  <template is="TPL_TRAVERSAL" data="{{root: node.children[9]}}" />
-</block><block  >
-  <template is="TPL_TRAVERSAL" data="{{root: node.children[10]}}" />
-</block><view id="{{node.children[11].props['id']}}"
+</view>
+
+<block  >
+  <block a:if="{{node.children[9].children}}">
+  <block a:for="{{node.children[9].children || []}}" key="{{item.id}}">
+    <template a:if="{{item.props._eid > 0}}" is="{{'TPL_' + item.props._eid}}" data="{{ node: item }}" />
+    <template a:else is="{{ 'TPL_' + item.type }}" data="{{ node: item }}" />
+  </block>
+</block>
+<template a:elif="{{node.children[9].props._eid > 0}}" is="{{'TPL_' + node.children[9].props._eid}}" data="{{ node: node.children[9] }}" />
+<template a:else is="{{ 'TPL_' + node.children[9].type }}" data="{{ node: node.children[9] }}" />
+
+</block>
+
+<block  >
+  <block a:if="{{node.children[10].children}}">
+  <block a:for="{{node.children[10].children || []}}" key="{{item.id}}">
+    <template a:if="{{item.props._eid > 0}}" is="{{'TPL_' + item.props._eid}}" data="{{ node: item }}" />
+    <template a:else is="{{ 'TPL_' + item.type }}" data="{{ node: item }}" />
+  </block>
+</block>
+<template a:elif="{{node.children[10].props._eid > 0}}" is="{{'TPL_' + node.children[10].props._eid}}" data="{{ node: node.children[10] }}" />
+<template a:else is="{{ 'TPL_' + node.children[10].type }}" data="{{ node: node.children[10] }}" />
+
+</block>
+
+<view id="{{node.children[11].props['id']}}"
   disable-scroll="{{node.children[11].props['disable-scroll']}}"
   hover-class="{{node.children[11].props['hover-class']}}"
   hover-class="{{node.children[11].props['hover-class']}}"
@@ -66,38 +129,90 @@
   onFirstAppear="{{node.children[11].props['onFirstAppear']}}"
   data-rid="{{node.children[11].props['data-rid']}}" >
   {{'Spread Attributes View'}}
-</view><text data-rid="{{node.children[12].props['data-rid']}}" >
+</view>
+
+<text data-rid="{{node.children[12].props['data-rid']}}" >
   {{'long long long long long long long long long long long long text long long long long long long long long long long long long text '}}
-</text><block  >
+</text>
+
+<block  >
   <template is="TPL_DEFAULT" data="{{root: node.children[13]}}" />
-</block><block  >
+
+</block>
+
+<block  >
   {{'Literal Expression'}}
-</block><block  >
+</block>
+
+<block  >
   <template is="TPL_DEFAULT" data="{{root: node.children[15]}}" />
-</block><block  >
+
+</block>
+
+<block  >
   <template is="TPL_DEFAULT" data="{{root: node.children[16]}}" />
+
+</block>
+
+<block  >
+  <block a:if="{{node.children[17].children}}">
+  <block a:for="{{node.children[17].children || []}}" key="{{item.id}}">
+    <template a:if="{{item.props._eid > 0}}" is="{{'TPL_' + item.props._eid}}" data="{{ node: item }}" />
+    <template a:else is="{{ 'TPL_' + item.type }}" data="{{ node: item }}" />
+  </block>
 </block>
+<template a:elif="{{node.children[17].props._eid > 0}}" is="{{'TPL_' + node.children[17].props._eid}}" data="{{ node: node.children[17] }}" />
+<template a:else is="{{ 'TPL_' + node.children[17].type }}" data="{{ node: node.children[17] }}" />
+
+</block>
+
+<text data-rid="{{node.children[18].props['data-rid']}}" >
+  {{ node.children[18].children[0].text }}
+
+</text>
+
 </block>
+
 </template>
 
 <template name="TPL_3">
   <view data-rid="{{node.props['data-rid']}}" >
   {{'create element children 1'}}
 </view>
+
 </template>
 
 <template name="TPL_4">
   <view data-rid="{{node.props['data-rid']}}" >
-  {{'array map: '}}<block  >
-  <template is="TPL_TRAVERSAL" data="{{root: node.children[1]}}" />
+  {{'array map: '}}
+<block  >
+  <block a:if="{{node.children[1].children}}">
+  <block a:for="{{node.children[1].children || []}}" key="{{item.id}}">
+    <template a:if="{{item.props._eid > 0}}" is="{{'TPL_' + item.props._eid}}" data="{{ node: item }}" />
+    <template a:else is="{{ 'TPL_' + item.type }}" data="{{ node: item }}" />
+  </block>
+</block>
+<template a:elif="{{node.children[1].props._eid > 0}}" is="{{'TPL_' + node.children[1].props._eid}}" data="{{ node: node.children[1] }}" />
+<template a:else is="{{ 'TPL_' + node.children[1].type }}" data="{{ node: node.children[1] }}" />
+
 </block>
+
 </view>
+
 </template>
 
 <template name="TPL_5">
+  <view data-rid="{{node.props['data-rid']}}" >
+  {{'Conditional View'}}
+</view>
+
+</template>
+
+<template name="TPL_6">
   <view data-rid="{{node.props['data-rid']}}" >
   {{'remax window'}}
 </view>
+
 </template>
 
 

diff --git a/...ges/remax-cli/src/__tests__/fixtures/staticCompiler/alipay/expected/alipay/pages/index.js b/...ges/remax-cli/src/__tests__/fixtures/staticCompiler/alipay/expected/alipay/pages/index.js
@@ -76,6 +76,16 @@ function _ref2() {
   var props = {
     id: 'spreadId'
   };
+
+  var _React$useState3 = React.useState(true),
+      _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 1),
+      show = _React$useState4[0];
+
+  var _React$useState5 = React.useState(true),
+      _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 1),
+      showPlainText = _React$useState6[0];
+
+  var plainText = 'plain-text-leaf';
   return React.createElement("block", {
     _tid: "2"
   }, React.createElement("block", null, "Fragment"), React.createElement("block", null, "React.Fragment"), React.createElement("expression-block", null, React.createElement(DDD, null)), React.createElement(index$9.default, null, "Remax.Text"), React.createElement("expression-block", null, React.createElement(NativeComponent, null)), React.createElement("expression-block", null, React.createElement(ReactComp, null, React.createElement(index$2.default, null, "React Component First Child"), React.createElement("expression-block", null, 'React Component Second Child'))), React.createElement(index$2.default, {
@@ -95,7 +105,11 @@ function _ref2() {
       key: item,
       _tid: "4"
     }, "array map: ", React.createElement("expression-block", null, item));
-  })), React.createElement(index$2.default, props, "Spread Attributes View"), React.createElement(index$9.default, null, "long long long long long long long long long long long long text long long long long long long long long long long long long text"), React.createElement("expression-block", null, React.createElement(index$z.default, null)), React.createElement("expression-block", null, 'Literal Expression'), React.createElement("expression-block", null, React.createElement(Deep.Object.View, null, "Deep Object View")), React.createElement("expression-block", null, React.createElement(RenameView, null, "Rename View")));
+  })), React.createElement(index$2.default, props, "Spread Attributes View"), React.createElement(index$9.default, null, "long long long long long long long long long long long long text long long long long long long long long long long long long text"), React.createElement("expression-block", null, React.createElement(index$z.default, null)), React.createElement("expression-block", null, 'Literal Expression'), React.createElement("expression-block", null, React.createElement(Deep.Object.View, null, "Deep Object View")), React.createElement("expression-block", null, React.createElement(RenameView, null, "Rename View")), React.createElement("expression-block", null, show && React.createElement(index$2.default, {
+    _tid: "5"
+  }, "Conditional View")), React.createElement(index$9.default, {
+    leaf: true
+  }, showPlainText && plainText, " ", showPlainText && '第二段', ' ', showPlainText && plainText));
 }
 
 var index = Page(createPageConfig.default(_ref2));

diff --git a/packages/remax-cli/src/__tests__/fixtures/staticCompiler/alipay/src/pages/index.js b/packages/remax-cli/src/__tests__/fixtures/staticCompiler/alipay/src/pages/index.js
@@ -30,6 +30,9 @@ function ReactComp({ children }) {
 export default function Index() {
   const [count] = React.useState(1);
   const props = { id: 'spreadId' };
+  const [show] = React.useState(true);
+  const [showPlainText] = React.useState(true);
+  const plainText = 'plain-text-leaf';
   return (
     <>
       {/* 注释 */}
@@ -63,6 +66,11 @@ export default function Index() {
       {'Literal Expression'}
       <Deep.Object.View>Deep Object View</Deep.Object.View>
       <RenameView>Rename View</RenameView>
+      {show && <View>Conditional View</View>}
+      <Text leaf>
+        {showPlainText && plainText} {showPlainText && '第二段'}{' '}
+        {showPlainText && plainText}
+      </Text>
     </>
   );
 }
diff --git a/packages/remax-cli/src/build/plugins/compiler/static/constants.ts b/packages/remax-cli/src/build/plugins/compiler/static/constants.ts
@@ -2,3 +2,5 @@
 export const TEMPLATE_ID_ATTRIBUTE_NAME = '_tid';
 // React "Key" 属性名称
 export const REACT_KEY_ATTRIBUTE_NAME = 'key';
+// 单节点标记属性 "leaf"
+export const LEAF_ATTRIBUTE_NAME = 'leaf';