标记入口 JSX

packages/remax-alipay/templates/static/base.ejs

@@ -9,7 +9,8 @@
 <%- include('./native-component.ejs', {
   props: component.props,
   id: component.id,
-  view: viewComponent
+  view: viewComponent,
+  TEMPLATE_PROP: TEMPLATE_PROP
   })
 %>
   <% } else if (component.additional) { %>
@@ -33,18 +34,18 @@
 
 <!-- for default render -->
 <template name="TPL_DEFAULT">
-  <template a:if="{{root.props._eid > 0}}" is="{{'TPL_' + root.props._eid}}" data="{{ node: root }}" />
+  <template a:if="{{root.props.<%=TEMPLATE_PROP%> > 0}}" is="{{'TPL_' + root.props.<%=TEMPLATE_PROP%>}}" data="{{ node: root }}" />
   <template a:else is="{{ 'TPL_' + root.type }}" data="{{ node: root }}" />
 </template>
 
 <!-- for traversal -->
 <template name="TPL_TRAVERSAL">
   <block a:if="{{root.children}}">
     <block a:for="{{root.children}}" key="{{item.id}}">
-      <template a:if="{{item.props._eid > 0}}" is="{{'TPL_' + item.props._eid}}" data="{{ node: item }}" />
+      <template a:if="{{item.props.<%=TEMPLATE_PROP%> > 0}}" is="{{'TPL_' + item.props.<%=TEMPLATE_PROP%>}}" data="{{ node: item }}" />
       <template a:else is="{{ 'TPL_' + item.type }}" data="{{ node: item }}" />
     </block>
   </block>
-  <template a:elif="{{root.props._eid > 0}}" is="{{'TPL_' + root.props._eid}}" data="{{ node: root }}" />
+  <template a:elif="{{root.props.<%=TEMPLATE_PROP%> > 0}}" is="{{'TPL_' + root.props.<%=TEMPLATE_PROP%>}}" data="{{ node: root }}" />
   <template a:else is="{{ 'TPL_' + root.type }}" data="{{ node: root }}" />
 </template>

packages/remax-alipay/templates/static/native-component.ejs

@@ -11,7 +11,7 @@
         </view>
       </block>
       <block a:else>
-        <template a:if="{{item.props._eid > 0}}" is="{{'TPL_' + item.props._eid}}" data="{{ node: item }}" />
+        <template a:if="{{item.props.<%=TEMPLATE_PROP%> > 0}}" is="{{'TPL_' + item.props.<%=TEMPLATE_PROP%>}}" data="{{ node: item }}" />
         <template a:else is="{{ 'TPL_' + item.type }}" data="{{ node: item }}" />
       </block>
     </block>

packages/remax-alipay/templates/static/page.ejs

@@ -1,2 +1,9 @@
 <import src="<%= baseTemplate %>"/>
-<template is="TPL_TRAVERSAL" data="{{ root: root }}" />
+
+<% if (entries.length > 0) { %>
+  <% for (let index = 0; index < entries.length; index++) { %>
+    <template is="TPL_<%=entries[index].templateID%>" data="{{ node: root.children[<%=index%>] }}" />
+  <% } %>
+<% } else { %>
+  <template is="TPL_TRAVERSAL" data="{{ root: root }}" />
+<% } %>

packages/remax-cli/src/__tests__/fixtures/staticCompiler/alipay/expected/alipay/app.json

@@ -1,6 +1,7 @@
 {
   "pages": [
-    "pages/index"
+    "pages/index",
+    "pages/entry/index"
   ],
   "window": {
     "defaultTitle": "Alipay App",

packages/remax-cli/src/__tests__/fixtures/staticCompiler/alipay/expected/alipay/base.axml

@@ -8,11 +8,11 @@
 <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:if="{{item.props._tid > 0}}" is="{{'TPL_' + item.props._tid}}" 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:elif="{{node.children[1].props._tid > 0}}" is="{{'TPL_' + node.children[1].props._tid}}" data="{{ node: node.children[1] }}" />
 <template a:else is="{{ 'TPL_' + node.children[1].type }}" data="{{ node: node.children[1] }}" />
 
 </block>
@@ -56,11 +56,11 @@
 <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:if="{{item.props._tid > 0}}" is="{{'TPL_' + item.props._tid}}" data="{{ node: item }}" />
     <template a:else is="{{ 'TPL_' + item.type }}" data="{{ node: item }}" />
   </block>
 </block>
-<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:elif="{{node.children[6].children[1].props._tid > 0}}" is="{{'TPL_' + node.children[6].children[1].props._tid}}" 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>
@@ -80,23 +80,23 @@
 <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:if="{{item.props._tid > 0}}" is="{{'TPL_' + item.props._tid}}" 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:elif="{{node.children[9].props._tid > 0}}" is="{{'TPL_' + node.children[9].props._tid}}" 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:if="{{item.props._tid > 0}}" is="{{'TPL_' + item.props._tid}}" 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:elif="{{node.children[10].props._tid > 0}}" is="{{'TPL_' + node.children[10].props._tid}}" data="{{ node: node.children[10] }}" />
 <template a:else is="{{ 'TPL_' + node.children[10].type }}" data="{{ node: node.children[10] }}" />
 
 </block>
@@ -157,11 +157,11 @@
 <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:if="{{item.props._tid > 0}}" is="{{'TPL_' + item.props._tid}}" 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:elif="{{node.children[17].props._tid > 0}}" is="{{'TPL_' + node.children[17].props._tid}}" data="{{ node: node.children[17] }}" />
 <template a:else is="{{ 'TPL_' + node.children[17].type }}" data="{{ node: node.children[17] }}" />
 
 </block>
@@ -188,11 +188,11 @@
 <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:if="{{item.props._tid > 0}}" is="{{'TPL_' + item.props._tid}}" 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:elif="{{node.children[1].props._tid > 0}}" is="{{'TPL_' + node.children[1].props._tid}}" data="{{ node: node.children[1] }}" />
 <template a:else is="{{ 'TPL_' + node.children[1].type }}" data="{{ node: node.children[1] }}" />
 
 </block>
@@ -209,6 +209,17 @@
 </template>
 
 <template name="TPL_6">
+  <view entry="{{node.props['entry']}}"
+  data-rid="{{node.props['data-rid']}}" >
+  <view data-rid="{{node.children[0].props['data-rid']}}" >
+  {{'entry'}}
+</view>
+
+</view>
+
+</template>
+
+<template name="TPL_7">
   <view data-rid="{{node.props['data-rid']}}" >
   {{'remax window'}}
 </view>
@@ -262,7 +273,7 @@
         </view>
       </block>
       <block a:else>
-        <template a:if="{{item.props._eid > 0}}" is="{{'TPL_' + item.props._eid}}" data="{{ node: item }}" />
+        <template a:if="{{item.props._tid > 0}}" is="{{'TPL_' + item.props._tid}}" data="{{ node: item }}" />
         <template a:else is="{{ 'TPL_' + item.type }}" data="{{ node: item }}" />
       </block>
     </block>
@@ -342,18 +353,18 @@
 
 <!-- for default render -->
 <template name="TPL_DEFAULT">
-  <template a:if="{{root.props._eid > 0}}" is="{{'TPL_' + root.props._eid}}" data="{{ node: root }}" />
+  <template a:if="{{root.props._tid > 0}}" is="{{'TPL_' + root.props._tid}}" data="{{ node: root }}" />
   <template a:else is="{{ 'TPL_' + root.type }}" data="{{ node: root }}" />
 </template>
 
 <!-- for traversal -->
 <template name="TPL_TRAVERSAL">
   <block a:if="{{root.children}}">
     <block a:for="{{root.children}}" key="{{item.id}}">
-      <template a:if="{{item.props._eid > 0}}" is="{{'TPL_' + item.props._eid}}" data="{{ node: item }}" />
+      <template a:if="{{item.props._tid > 0}}" is="{{'TPL_' + item.props._tid}}" data="{{ node: item }}" />
       <template a:else is="{{ 'TPL_' + item.type }}" data="{{ node: item }}" />
     </block>
   </block>
-  <template a:elif="{{root.props._eid > 0}}" is="{{'TPL_' + root.props._eid}}" data="{{ node: root }}" />
+  <template a:elif="{{root.props._tid > 0}}" is="{{'TPL_' + root.props._tid}}" data="{{ node: root }}" />
   <template a:else is="{{ 'TPL_' + root.type }}" data="{{ node: root }}" />
 </template>

packages/remax-cli/src/__tests__/fixtures/staticCompiler/alipay/expected/alipay/pages/entry/index.axml

@@ -0,0 +1,6 @@
+<import src="../../base.axml"/>
+
+
+
+    <template is="TPL_6" data="{{ node: root.children[0] }}" />
+

packages/remax-cli/src/__tests__/fixtures/staticCompiler/alipay/expected/alipay/pages/entry/index.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('../../npm/remax/esm/render.js');
+require('../../npm/remax/esm/createAppConfig.js');
+require('../../npm/remax/esm/createHostComponent.js');
+require('../../npm/remax/esm/Platform.js');
+var createPageConfig = require('../../npm/remax/esm/createPageConfig.js');
+require('../../npm/remax/esm/index.js');
+var index$2 = require('../../npm/remax/npm/remax-alipay/esm/hostComponents/View/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/ScrollView/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Swiper/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/SwiperItem/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/MovableView/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/MovableArea/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/CoverView/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/CoverImage/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Icon/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Text/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/RichText/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Progress/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Button/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/CheckboxGroup/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Checkbox/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Form/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Input/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Label/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Picker/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/PickerView/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/PickerViewColumn/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/RadioGroup/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Radio/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Slider/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Switch/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Textarea/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Navigator/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Image/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Map/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Canvas/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/WebView/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Lifestyle/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/ContactButton/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/hostComponents/Video/index.js');
+require('../../npm/remax/npm/remax-alipay/esm/api/index.js');
+
+function _ref() {
+  return React.createElement(index$2.default, {
+    entry: true,
+    _tid: "6"
+  }, React.createElement(index$2.default, null, "entry"));
+}
+
+var index = Page(createPageConfig.default(_ref));
+
+exports.default = index;

packages/remax-cli/src/__tests__/fixtures/staticCompiler/alipay/expected/alipay/pages/entry/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

packages/remax-cli/src/__tests__/fixtures/staticCompiler/alipay/expected/alipay/pages/index.axml

@@ -1,2 +1,4 @@
 <import src="../base.axml"/>
-<template is="TPL_TRAVERSAL" data="{{ root: root }}" />
+
+
+  <template is="TPL_TRAVERSAL" data="{{ root: root }}" />

packages/remax-cli/src/__tests__/fixtures/staticCompiler/alipay/src/app.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  pages: ['pages/index'],
+  pages: ['pages/index', 'pages/entry/index'],
   window: {
     defaultTitle: 'Alipay App',
     titleBarColor: '#323239',

packages/remax-cli/src/__tests__/fixtures/staticCompiler/alipay/src/pages/entry/index.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { View } from 'remax/alipay';
+
+export default function Index() {
+  return (
+    <View entry>
+      <View>entry</View>
+    </View>
+  );
+}

packages/remax-cli/src/build/plugins/compiler/static/constants.ts

@@ -4,3 +4,5 @@ export const TEMPLATE_ID_ATTRIBUTE_NAME = '_tid';
 export const REACT_KEY_ATTRIBUTE_NAME = 'key';
 // 单节点标记属性 "leaf"
 export const LEAF_ATTRIBUTE_NAME = 'leaf';
+// 入口 JSX 标记属性 "entry"
+export const ENTRY_ATTRIBUTE_NAME = 'entry';

packages/remax-cli/src/build/plugins/compiler/static/index.ts

@@ -1,5 +1,5 @@
 export { default as preprocess } from './preprocess';
 export { default as visit, jsxElementPathSet } from './visit';
 export { default as renderTemplates } from './render/templates';
-export { default as renderAsset } from './render/asset';
+export { renderCommon, renderPage } from './render/asset';
 export { default as constants } from './constants';

packages/remax-cli/src/build/plugins/compiler/static/render/asset.ts

@@ -1,34 +1,62 @@
-import { sortBy } from 'lodash';
-import { getComponents } from '../../../components';
+import * as path from 'path';
 import { RemaxOptions, Meta } from 'remax-types';
 import ejs from 'ejs';
-import API from '../../../../../API';
-import { getNativeComponents } from '../../../nativeComponents/babelPlugin';
-import renderTemplates from './templates';
+import winPath from '../../../../../winPath';
+import { TEMPLATE_ID_ATTRIBUTE_NAME } from '../constants';
 
-export default async function renderAsset(options: RemaxOptions, meta: Meta) {
-  const templates = renderTemplates();
+export async function renderPage(
+  pageFile: string,
+  options: RemaxOptions,
+  meta: Meta,
+  createRenderOptions: Function
+) {
+  const renderOptions: any = createRenderOptions(options);
+  const fileName = `${path.dirname(pageFile)}/${path.basename(
+    pageFile,
+    path.extname(pageFile)
+  )}${meta.template.extension}`;
 
-  const components = sortBy(
-    getComponents(options).concat(Object.values(getNativeComponents())),
-    'id'
+  const entries = renderOptions.templates.filter(
+    (template: any) =>
+      template.isEntry &&
+      template.module === path.join(options.cwd, options.rootDir, pageFile)
   );
 
-  const hostComponents = API.getHostComponents();
-
-  let code: string = await ejs.renderFile(
-    meta.ejs.base!,
-    {
-      templates,
-      components,
-      viewComponent: {
-        props: [...new Set(hostComponents.get('view')!.props)].sort(),
-      },
-    },
-    {
-      rmWhitespace: options.compressTemplate,
-    }
+  renderOptions.entries = entries;
+  renderOptions.baseTemplate = winPath(
+    path.relative(path.dirname(pageFile), `base${meta.template.extension}`)
   );
+  renderOptions.TEMPLATE_PROP = TEMPLATE_ID_ATTRIBUTE_NAME;
+
+  let code: string = await ejs.renderFile(meta.ejs.page, renderOptions, {
+    rmWhitespace: options.compressTemplate,
+  });
+
+  // TODO 用 uglify 替代 compressTemplate
+  /* istanbul ignore next */
+  if (options.compressTemplate) {
+    code = code.replace(/^\s*$(?:\r\n?|\n)/gm, '').replace(/\r\n|\n/g, ' ');
+  }
+
+  return {
+    type: 'asset' as const,
+    fileName,
+    source: code,
+  };
+}
+
+export async function renderCommon(
+  options: RemaxOptions,
+  meta: Meta,
+  createRenderOptions: Function
+) {
+  const renderOptions = createRenderOptions(options);
+
+  renderOptions.TEMPLATE_PROP = TEMPLATE_ID_ATTRIBUTE_NAME;
+
+  let code: string = await ejs.renderFile(meta.ejs.base!, renderOptions, {
+    rmWhitespace: options.compressTemplate,
+  });
 
   // TODO 用 uglify 替代 compressTemplate
   /* istanbul ignore next */