@ray-js/framework 1.4.0-alpha.3 → 1.4.0-alpha.5

package/lib/api/tabBar.js

@@ -1,7 +1,6 @@
 import { appStoreEmitter, actions } from '../store/appStore';
 export function showTabBar(options) {
   var _options$success, _options$complete;
-
   appStoreEmitter.emit(actions.toggleTabBar, {
     visible: true,
     animation: options.animation
@@ -11,7 +10,6 @@ export function showTabBar(options) {
 }
 export function hideTabBar(options) {
   var _options$success2, _options$complete2;
-
   appStoreEmitter.emit(actions.toggleTabBar, {
     visible: false,
     animation: options.animation

package/lib/app/createApp.js

@@ -7,15 +7,14 @@ import { Application } from '../components/Application';
 import { normalizeBasename } from '../utils';
 export function createApp(options) {
   var _cfg$globalConfig;
-
-  var cfg = _objectSpread({}, options);
-
-  var root = document.createElement('div');
+  const cfg = _objectSpread({}, options);
+  const root = document.createElement('div');
   root.id = 'root';
-  document.body.appendChild(root); // 入口初始化 格式数据
-
+  document.body.appendChild(root);
+  // 入口初始化 格式数据
   set(cfg, 'globalConfig.basename', normalizeBasename((_cfg$globalConfig = cfg.globalConfig) === null || _cfg$globalConfig === void 0 ? void 0 : _cfg$globalConfig.basename));
-  set(cfg, 'tabBar', normalizeTabBar(cfg.tabBar, cfg.routes)); // 作为 web 构建的启动入口文件
+  set(cfg, 'tabBar', normalizeTabBar(cfg.tabBar, cfg.routes));
 
+  // 作为 web 构建的启动入口文件
   ReactDOM.render( /*#__PURE__*/React.createElement(Application, cfg), root);
 }

package/lib/app/createApp.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import set from 'lodash.set';
+import { normalizeTabBar } from '@ray-js/framework-shared';
+import { Application } from '../components/Application';
+import { normalizeBasename } from '../utils';
+export function createApp(options) {
+    var _a;
+    const cfg = Object.assign({}, options);
+    const root = document.createElement('div');
+    root.id = 'root';
+    document.body.appendChild(root);
+    // 入口初始化 格式数据
+    set(cfg, 'globalConfig.basename', normalizeBasename((_a = cfg.globalConfig) === null || _a === void 0 ? void 0 : _a.basename));
+    set(cfg, 'tabBar', normalizeTabBar(cfg.tabBar, cfg.routes));
+    // 作为 web 构建的启动入口文件
+    ReactDOM.render(<Application {...cfg}/>, root);
+}

package/lib/app/createAppInstance.js

@@ -1,12 +1,12 @@
 import { getCurrent } from '@ray-js/runtime';
+
 /**
  * 创建抽象的 App Instance 对标到小程序，提供给 getApp() 进行使用
  * @param appThis
  */
-
 export function createAppInstance(appThis) {
-  var current = getCurrent(); // App 实例仅且注册一次
-
+  const current = getCurrent();
+  // App 实例仅且注册一次
   if (!current.app) {
     current.app = appThis;
   }

package/lib/app/createAppInstance.jsx

@@ -0,0 +1,12 @@
+import { getCurrent } from '@ray-js/runtime';
+/**
+ * 创建抽象的 App Instance 对标到小程序，提供给 getApp() 进行使用
+ * @param appThis
+ */
+export function createAppInstance(appThis) {
+    const current = getCurrent();
+    // App 实例仅且注册一次
+    if (!current.app) {
+        current.app = appThis;
+    }
+}

package/lib/app/index.js

@@ -1,6 +1,6 @@
 import { getCurrent } from '@ray-js/runtime';
 export * from './createApp';
 export function getApp() {
-  var current = getCurrent();
+  const current = getCurrent();
   return current.app;
 }

package/lib/app/index.jsx

@@ -0,0 +1,6 @@
+import { getCurrent } from '@ray-js/runtime';
+export * from './createApp';
+export function getApp() {
+    const current = getCurrent();
+    return current.app;
+}

package/lib/components/AppWrapper/index.d.ts

@@ -3,5 +3,5 @@ export declare class AppWrapper extends React.Component<{
     children: any;
 }> {
     componentDidMount(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/lib/components/AppWrapper/index.js

@@ -1,53 +1,30 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import styles from './index.module.less';
 import { getApp } from '../../app';
 import location from '@ray-js/location';
-export var AppWrapper = /*#__PURE__*/function (_React$Component) {
-  _inherits(AppWrapper, _React$Component);
-
-  var _super = _createSuper(AppWrapper);
-
-  function AppWrapper() {
-    _classCallCheck(this, AppWrapper);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(AppWrapper, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var app = getApp();
-
-      if (typeof app.onLaunch === 'function') {
-        app.onLaunch({
-          path: location.pathname,
-          query: location.query,
-          params: location.params
-        });
-      } // 初次展现
-
-
-      if (typeof app.onShow === 'function') {
-        app.onShow({
-          path: location.pathname,
-          query: location.query,
-          params: location.params
-        });
-      }
+export class AppWrapper extends React.Component {
+  componentDidMount() {
+    const app = getApp();
+    if (typeof app.onLaunch === 'function') {
+      app.onLaunch({
+        path: location.pathname,
+        query: location.query,
+        params: location.params
+      });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        id: "Application",
-        className: styles.application
-      }, this.props.children);
+    // 初次展现
+    if (typeof app.onShow === 'function') {
+      app.onShow({
+        path: location.pathname,
+        query: location.query,
+        params: location.params
+      });
     }
-  }]);
-
-  return AppWrapper;
-}(React.Component);
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      id: "Application",
+      className: styles.application
+    }, this.props.children);
+  }
+}

package/lib/components/AppWrapper/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styles from './index.module.less';
+import { getApp } from '../../app';
+import location from '@ray-js/location';
+export class AppWrapper extends React.Component {
+    componentDidMount() {
+        const app = getApp();
+        if (typeof app.onLaunch === 'function') {
+            app.onLaunch({
+                path: location.pathname,
+                query: location.query,
+                params: location.params,
+            });
+        }
+        // 初次展现
+        if (typeof app.onShow === 'function') {
+            app.onShow({
+                path: location.pathname,
+                query: location.query,
+                params: location.params,
+            });
+        }
+    }
+    render() {
+        return (<div id='Application' className={styles.application}>
+        {this.props.children}
+      </div>);
+    }
+}

package/lib/components/Application/index.d.ts

@@ -1,7 +1,7 @@
 import '../../runtime';
 import React from 'react';
 import * as types from '@ray-js/types';
-export declare type ApplicationProps = {
+export type ApplicationProps = {
     globalConfig: types.GlobalConfig & types.WebGlobalConfig;
     routes: types.Routes;
     tabBar: types.TabBar;
@@ -15,5 +15,5 @@ export declare class Application extends React.Component<ApplicationProps, {
     constructor(props: Readonly<ApplicationProps>);
     componentDidMount(): void;
     getGlobalConfig: (path: string | string[], defaultValue?: any) => any;
-    render(): JSX.Element | null;
+    render(): React.JSX.Element | null;
 }

package/lib/components/Application/index.js

@@ -1,8 +1,3 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import '../../runtime';
 import React from 'react';
@@ -12,94 +7,73 @@ import { get } from '../../utils';
 import { AppWrapper } from '../AppWrapper';
 import { PageWrapper } from '../PageWrapper';
 import { TabBar } from '../TabBar';
-
-var isClassComponent = function (Component) {
+const isClassComponent = Component => {
   return Component.prototype && typeof Component.prototype.render === 'function';
 };
-
-export var Application = /*#__PURE__*/function (_React$Component) {
-  _inherits(Application, _React$Component);
-
-  var _super = _createSuper(Application);
-
-  function Application(props) {
-    var _this;
-
-    _classCallCheck(this, Application);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "getGlobalConfig", function (path, defaultValue) {
-      var _this$props$globalCon = _this.props.globalConfig,
-          globalConfig = _this$props$globalCon === void 0 ? {} : _this$props$globalCon;
-      var value = get(globalConfig, path, defaultValue);
+export class Application extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "getGlobalConfig", (path, defaultValue) => {
+      const {
+        globalConfig = {}
+      } = this.props;
+      const value = get(globalConfig, path, defaultValue);
       return value;
     });
-
-    _this.state = {};
-
-    var title = _this.getGlobalConfig(['window', 'navigationBarTitleText'], 'Ray App');
-
+    this.state = {};
+    const title = this.getGlobalConfig(['window', 'navigationBarTitleText'], 'Ray App');
     document.title = title;
-    return _this;
   }
-
-  _createClass(Application, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          routes = _this$props.routes,
-          pages = _this$props.pages,
-          tabBar = _this$props.tabBar;
-      var basename = this.getGlobalConfig('basename', '/') || '/';
-      var bgColor = this.getGlobalConfig(['window', 'backgroundColor'], '#fff');
-      document.body.style.backgroundColor = bgColor;
-      createRouter({
-        basename: basename,
-        routes: routes,
-        pages: pages,
-        tabBar: tabBar,
-        onChange: function onChange(component, props) {
-          _this2.setState({
-            component: component,
-            matchedPage: props.page
-          });
-        }
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          App = _this$props2.app,
-          tabBar = _this$props2.tabBar;
-      var basename = this.getGlobalConfig('basename', '/') || '/';
-      var _this$state = this.state,
-          PageComponent = _this$state.component,
-          matchedPage = _this$state.matchedPage; // 空页面暂不渲染，否则 appEvent 无法应用到页面内部
-
-      if (!matchedPage) {
-        return null;
+  componentDidMount() {
+    const {
+      routes,
+      pages,
+      tabBar
+    } = this.props;
+    const basename = this.getGlobalConfig('basename', '/') || '/';
+    const bgColor = this.getGlobalConfig(['window', 'backgroundColor'], '#fff');
+    document.body.style.backgroundColor = bgColor;
+    createRouter({
+      basename,
+      routes,
+      pages,
+      tabBar,
+      onChange: (component, props) => {
+        this.setState({
+          component,
+          matchedPage: props.page
+        });
       }
+    });
+  }
+  render() {
+    const {
+      app: App,
+      tabBar
+    } = this.props;
+    const basename = this.getGlobalConfig('basename', '/') || '/';
+    const {
+      component: PageComponent,
+      matchedPage
+    } = this.state;
 
-      var isClassType = isClassComponent(PageComponent);
-      return /*#__PURE__*/React.createElement(AppWrapper, null, /*#__PURE__*/React.createElement(App, {
-        ref: function ref(appThis) {
-          createAppInstance(appThis);
-        }
-      }, /*#__PURE__*/React.createElement(PageWrapper, {
-        isClassType: isClassType,
-        page: matchedPage,
-        key: matchedPage.route,
-        getGlobalConfig: this.getGlobalConfig
-      }, /*#__PURE__*/React.createElement(PageComponent, null)), matchedPage.isTabBar && /*#__PURE__*/React.createElement(TabBar, {
-        basename: basename,
-        config: tabBar
-      })));
+    // 空页面暂不渲染，否则 appEvent 无法应用到页面内部
+    if (!matchedPage) {
+      return null;
     }
-  }]);
-
-  return Application;
-}(React.Component);
+    const isClassType = isClassComponent(PageComponent);
+    return /*#__PURE__*/React.createElement(AppWrapper, null, /*#__PURE__*/React.createElement(App, {
+      ref: appThis => {
+        createAppInstance(appThis);
+      }
+    }, /*#__PURE__*/React.createElement(PageWrapper, {
+      isClassType: isClassType,
+      page: matchedPage,
+      key: matchedPage.route,
+      getGlobalConfig: this.getGlobalConfig
+    }, /*#__PURE__*/React.createElement(PageComponent, null)), matchedPage.isTabBar && /*#__PURE__*/React.createElement(TabBar, {
+      basename: basename,
+      config: tabBar
+    })));
+  }
+}

package/lib/components/Application/index.jsx

@@ -0,0 +1,59 @@
+import '../../runtime';
+import React from 'react';
+import { createRouter } from '@ray-js/router';
+import { createAppInstance } from '../../app/createAppInstance';
+import { get } from '../../utils';
+import { AppWrapper } from '../AppWrapper';
+import { PageWrapper } from '../PageWrapper';
+import { TabBar } from '../TabBar';
+const isClassComponent = (Component) => {
+    return Component.prototype && typeof Component.prototype.render === 'function';
+};
+export class Application extends React.Component {
+    constructor(props) {
+        super(props);
+        this.getGlobalConfig = (path, defaultValue) => {
+            const { globalConfig = {} } = this.props;
+            const value = get(globalConfig, path, defaultValue);
+            return value;
+        };
+        this.state = {};
+        const title = this.getGlobalConfig(['window', 'navigationBarTitleText'], 'Ray App');
+        document.title = title;
+    }
+    componentDidMount() {
+        const { routes, pages, tabBar } = this.props;
+        const basename = this.getGlobalConfig('basename', '/') || '/';
+        const bgColor = this.getGlobalConfig(['window', 'backgroundColor'], '#fff');
+        document.body.style.backgroundColor = bgColor;
+        createRouter({
+            basename,
+            routes,
+            pages,
+            tabBar,
+            onChange: (component, props) => {
+                this.setState({ component, matchedPage: props.page });
+            },
+        });
+    }
+    render() {
+        const { app: App, tabBar } = this.props;
+        const basename = this.getGlobalConfig('basename', '/') || '/';
+        const { component: PageComponent, matchedPage } = this.state;
+        // 空页面暂不渲染，否则 appEvent 无法应用到页面内部
+        if (!matchedPage) {
+            return null;
+        }
+        const isClassType = isClassComponent(PageComponent);
+        return (<AppWrapper>
+        <App ref={(appThis) => {
+                createAppInstance(appThis);
+            }}>
+          <PageWrapper isClassType={isClassType} page={matchedPage} key={matchedPage.route} getGlobalConfig={this.getGlobalConfig}>
+            <PageComponent />
+          </PageWrapper>
+          {matchedPage.isTabBar && <TabBar basename={basename} config={tabBar}/>}
+        </App>
+      </AppWrapper>);
+    }
+}

package/lib/components/PageWrapper/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { PageInstance } from '@ray-js/runtime';
 import { Page, PageConfig } from '@ray-js/types';
 import './index.module.less';
-declare type PageWrapperProps = {
+type PageWrapperProps = {
     isClassType: boolean;
     page: Page;
     getGlobalConfig: (path: string | string[], defaultValue?: any) => any;
@@ -20,6 +20,6 @@ export declare class PageWrapper extends React.Component<PageWrapperProps, any>
     handlePageScroll: () => void;
     checkReachBottom: () => void;
     getPageConfig: (field: keyof PageConfig | string[], defaultValue?: any) => any;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/lib/components/PageWrapper/index.js

@@ -1,162 +1,132 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.keys.js";
 import React from 'react';
 import { lifecycle, PageInstance, PageInstanceContext } from '@ray-js/runtime';
 import { pageLifecycles } from '@ray-js/types';
 import { get } from '../../utils';
 import './index.module.less';
-export var PageWrapper = /*#__PURE__*/function (_React$Component) {
-  _inherits(PageWrapper, _React$Component);
-
-  var _super = _createSuper(PageWrapper);
-
-  function PageWrapper(props) {
-    var _this;
-
-    _classCallCheck(this, PageWrapper);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "$reachBottomDistance", 50);
-
-    _defineProperty(_assertThisInitialized(_this), "handlePageResize", function () {
-      var windowWidth = document.documentElement.clientWidth;
-      var windowHeight = document.documentElement.clientHeight;
+export class PageWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "$reachBottomDistance", 50);
+    _defineProperty(this, "handlePageResize", () => {
+      const windowWidth = document.documentElement.clientWidth;
+      const windowHeight = document.documentElement.clientHeight;
       lifecycle.emit({
-        uniqueId: _this.$instance.uniqueId,
+        uniqueId: this.$instance.uniqueId,
         name: pageLifecycles.onResize,
         args: {
-          windowWidth: windowWidth,
-          windowHeight: windowHeight
+          windowWidth,
+          windowHeight
         }
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handlePageScroll", function () {
-      var event = {
+    _defineProperty(this, "handlePageScroll", () => {
+      const event = {
         scrollTop: window.scrollY
       };
       lifecycle.emit({
-        uniqueId: _this.$instance.uniqueId,
+        uniqueId: this.$instance.uniqueId,
         name: pageLifecycles.onPageScroll,
         args: event
       });
-
-      _this.checkReachBottom();
+      this.checkReachBottom();
     });
-
-    _defineProperty(_assertThisInitialized(_this), "checkReachBottom", function () {
-      var isCurrentReachBottom = document.body.scrollHeight - (window.innerHeight + window.scrollY) <= _this.$reachBottomDistance;
-
-      if (!_this.$isReachBottom && isCurrentReachBottom) {
-        _this.$isReachBottom = true;
+    _defineProperty(this, "checkReachBottom", () => {
+      const isCurrentReachBottom = document.body.scrollHeight - (window.innerHeight + window.scrollY) <= this.$reachBottomDistance;
+      if (!this.$isReachBottom && isCurrentReachBottom) {
+        this.$isReachBottom = true;
         lifecycle.emit({
-          uniqueId: _this.$instance.uniqueId,
+          uniqueId: this.$instance.uniqueId,
           name: pageLifecycles.onReachBottom
         });
         return;
       }
-
-      _this.$isReachBottom = isCurrentReachBottom;
+      this.$isReachBottom = isCurrentReachBottom;
     });
-
-    _defineProperty(_assertThisInitialized(_this), "getPageConfig", function (field, defaultValue) {
-      var page = _this.props.page;
-      var pageConfig = page.config;
+    _defineProperty(this, "getPageConfig", (field, defaultValue) => {
+      const {
+        page
+      } = this.props;
+      const pageConfig = page.config;
       return get(pageConfig, field, defaultValue);
     });
-
-    _this.$instance = new PageInstance();
-    lifecycle.addInstance(_this.$instance);
-    _this.getGlobalConfig = _this.props.getGlobalConfig;
-    return _this;
+    this.$instance = new PageInstance();
+    lifecycle.addInstance(this.$instance);
+    this.getGlobalConfig = this.props.getGlobalConfig;
   }
+  componentDidMount() {
+    const title = this.getPageConfig('navigationBarTitleText', '');
+    document.title = title;
+    window.addEventListener('scroll', this.handlePageScroll);
+    window.addEventListener('resize', this.handlePageResize);
+    const backgroundColor = this.getPageConfig('backgroundColor');
+    if (backgroundColor) {
+      document.body.style.backgroundColor = backgroundColor;
+    }
 
-  _createClass(PageWrapper, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var title = this.getPageConfig('navigationBarTitleText', '');
-      document.title = title;
-      window.addEventListener('scroll', this.handlePageScroll);
-      window.addEventListener('resize', this.handlePageResize);
-      var backgroundColor = this.getPageConfig('backgroundColor');
-
-      if (backgroundColor) {
-        document.body.style.backgroundColor = backgroundColor;
-      } // 获取页面触底的距离
-
-
-      this.$reachBottomDistance = this.getPageConfig('onReachBottomDistance', this.getGlobalConfig(['window', 'onReachBottomDistance'], 50) // 全局配置
-      ); // FIXME: 应用实例化未完成，didMount 从内至外执行
-      // 此时触发 onShow onReady 获取不到 getApp 实例，组件内也存在这样的情况
+    // 获取页面触底的距离
+    this.$reachBottomDistance = this.getPageConfig('onReachBottomDistance', this.getGlobalConfig(['window', 'onReachBottomDistance'], 50) // 全局配置
+    );
 
-      lifecycle.emit({
-        uniqueId: this.$instance.uniqueId,
-        name: pageLifecycles.onShow
-      });
-      lifecycle.emit({
-        uniqueId: this.$instance.uniqueId,
-        name: pageLifecycles.onReady
-      });
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('scroll', this.handlePageScroll);
-      window.removeEventListener('resize', this.handlePageResize); // FIXME: 目前是 SPA 的页面直接切换，卸载前直接调用事件
+    // FIXME: 应用实例化未完成，didMount 从内至外执行
+    // 此时触发 onShow onReady 获取不到 getApp 实例，组件内也存在这样的情况
+    lifecycle.emit({
+      uniqueId: this.$instance.uniqueId,
+      name: pageLifecycles.onShow
+    });
+    lifecycle.emit({
+      uniqueId: this.$instance.uniqueId,
+      name: pageLifecycles.onReady
+    });
+  }
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handlePageScroll);
+    window.removeEventListener('resize', this.handlePageResize);
+
+    // FIXME: 目前是 SPA 的页面直接切换，卸载前直接调用事件
+    lifecycle.emit({
+      uniqueId: this.$instance.uniqueId,
+      name: pageLifecycles.onHide
+    });
+    lifecycle.emit({
+      uniqueId: this.$instance.uniqueId,
+      name: pageLifecycles.onUnload
+    });
+    lifecycle.removeInstance(this.$instance);
+    // TODO: 实现 onPullDownRefresh 生命周期
+  }
 
-      lifecycle.emit({
-        uniqueId: this.$instance.uniqueId,
-        name: pageLifecycles.onHide
-      });
-      lifecycle.emit({
-        uniqueId: this.$instance.uniqueId,
-        name: pageLifecycles.onUnload
-      });
-      lifecycle.removeInstance(this.$instance); // TODO: 实现 onPullDownRefresh 生命周期
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          page = _this$props.page,
-          children = _this$props.children,
-          isClassType = _this$props.isClassType;
-      var $instance = this.$instance;
-      var globalBackgroundColor = this.getGlobalConfig(['window', 'backgroundColor'], '#fff');
-      var backgroundColor = this.getPageConfig('backgroundColor', globalBackgroundColor);
-      document.body.style.backgroundColor = backgroundColor;
-      return /*#__PURE__*/React.createElement(PageInstanceContext.Provider, {
-        value: {
-          $instance: $instance,
-          pageConfig: page.config
-        }
-      }, /*#__PURE__*/React.createElement("v-page", {
-        "data-route": page.route
-      }, isClassType ?
-      /*#__PURE__*/
-      // @ts-ignore
-      React.cloneElement(children, {
-        ref: function ref(ins) {
-          if (ins) {
-            // 实现 class 生命周期用法的挂载
-            Object.keys(pageLifecycles).forEach(function (event) {
-              if (typeof ins[event] === 'function') {
-                $instance.registerLifecycle(event, ins, ins[event]);
-              }
-            });
-          }
+  render() {
+    const {
+      page,
+      children,
+      isClassType
+    } = this.props;
+    const $instance = this.$instance;
+    const globalBackgroundColor = this.getGlobalConfig(['window', 'backgroundColor'], '#fff');
+    const backgroundColor = this.getPageConfig('backgroundColor', globalBackgroundColor);
+    document.body.style.backgroundColor = backgroundColor;
+    return /*#__PURE__*/React.createElement(PageInstanceContext.Provider, {
+      value: {
+        $instance,
+        pageConfig: page.config
+      }
+    }, /*#__PURE__*/React.createElement("v-page", {
+      "data-route": page.route
+    }, isClassType ?
+    /*#__PURE__*/
+    // @ts-ignore
+    React.cloneElement(children, {
+      ref(ins) {
+        if (ins) {
+          // 实现 class 生命周期用法的挂载
+          Object.keys(pageLifecycles).forEach(event => {
+            if (typeof ins[event] === 'function') {
+              $instance.registerLifecycle(event, ins, ins[event]);
+            }
+          });
         }
-      }) : children));
-    }
-  }]);
-
-  return PageWrapper;
-}(React.Component);
+      }
+    }) : children));
+  }
+}

package/lib/components/PageWrapper/index.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { lifecycle, PageInstance, PageInstanceContext } from '@ray-js/runtime';
+import { pageLifecycles } from '@ray-js/types';
+import { get } from '../../utils';
+import './index.module.less';
+export class PageWrapper extends React.Component {
+    constructor(props) {
+        super(props);
+        this.$reachBottomDistance = 50;
+        this.handlePageResize = () => {
+            const windowWidth = document.documentElement.clientWidth;
+            const windowHeight = document.documentElement.clientHeight;
+            lifecycle.emit({
+                uniqueId: this.$instance.uniqueId,
+                name: pageLifecycles.onResize,
+                args: { windowWidth, windowHeight },
+            });
+        };
+        this.handlePageScroll = () => {
+            const event = { scrollTop: window.scrollY };
+            lifecycle.emit({
+                uniqueId: this.$instance.uniqueId,
+                name: pageLifecycles.onPageScroll,
+                args: event,
+            });
+            this.checkReachBottom();
+        };
+        this.checkReachBottom = () => {
+            const isCurrentReachBottom = document.body.scrollHeight - (window.innerHeight + window.scrollY) <=
+                this.$reachBottomDistance;
+            if (!this.$isReachBottom && isCurrentReachBottom) {
+                this.$isReachBottom = true;
+                lifecycle.emit({
+                    uniqueId: this.$instance.uniqueId,
+                    name: pageLifecycles.onReachBottom,
+                });
+                return;
+            }
+            this.$isReachBottom = isCurrentReachBottom;
+        };
+        this.getPageConfig = (field, defaultValue) => {
+            const { page } = this.props;
+            const pageConfig = page.config;
+            return get(pageConfig, field, defaultValue);
+        };
+        this.$instance = new PageInstance();
+        lifecycle.addInstance(this.$instance);
+        this.getGlobalConfig = this.props.getGlobalConfig;
+    }
+    componentDidMount() {
+        const title = this.getPageConfig('navigationBarTitleText', '');
+        document.title = title;
+        window.addEventListener('scroll', this.handlePageScroll);
+        window.addEventListener('resize', this.handlePageResize);
+        const backgroundColor = this.getPageConfig('backgroundColor');
+        if (backgroundColor) {
+            document.body.style.backgroundColor = backgroundColor;
+        }
+        // 获取页面触底的距离
+        this.$reachBottomDistance = this.getPageConfig('onReachBottomDistance', this.getGlobalConfig(['window', 'onReachBottomDistance'], 50) // 全局配置
+        );
+        // FIXME: 应用实例化未完成，didMount 从内至外执行
+        // 此时触发 onShow onReady 获取不到 getApp 实例，组件内也存在这样的情况
+        lifecycle.emit({
+            uniqueId: this.$instance.uniqueId,
+            name: pageLifecycles.onShow,
+        });
+        lifecycle.emit({
+            uniqueId: this.$instance.uniqueId,
+            name: pageLifecycles.onReady,
+        });
+    }
+    componentWillUnmount() {
+        window.removeEventListener('scroll', this.handlePageScroll);
+        window.removeEventListener('resize', this.handlePageResize);
+        // FIXME: 目前是 SPA 的页面直接切换，卸载前直接调用事件
+        lifecycle.emit({
+            uniqueId: this.$instance.uniqueId,
+            name: pageLifecycles.onHide,
+        });
+        lifecycle.emit({
+            uniqueId: this.$instance.uniqueId,
+            name: pageLifecycles.onUnload,
+        });
+        lifecycle.removeInstance(this.$instance);
+        // TODO: 实现 onPullDownRefresh 生命周期
+    }
+    render() {
+        const { page, children, isClassType } = this.props;
+        const $instance = this.$instance;
+        const globalBackgroundColor = this.getGlobalConfig(['window', 'backgroundColor'], '#fff');
+        const backgroundColor = this.getPageConfig('backgroundColor', globalBackgroundColor);
+        document.body.style.backgroundColor = backgroundColor;
+        return (<PageInstanceContext.Provider value={{ $instance, pageConfig: page.config }}>
+        <v-page data-route={page.route}>
+          {isClassType
+                ? // @ts-ignore
+                    React.cloneElement(children, {
+                        ref(ins) {
+                            if (ins) {
+                                // 实现 class 生命周期用法的挂载
+                                Object.keys(pageLifecycles).forEach((event) => {
+                                    if (typeof ins[event] === 'function') {
+                                        $instance.registerLifecycle(event, ins, ins[event]);
+                                    }
+                                });
+                            }
+                        },
+                    })
+                : children}
+          {/* TODO: 如果需要转场动画，需要在 PageWrapper 中渲染 */}
+          {/* {page?.isTabBar && <TabBar config={tabBarConfig} />} */}
+        </v-page>
+      </PageInstanceContext.Provider>);
+    }
+}

package/lib/components/TabBar/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TabBar as ITabBar } from '@ray-js/types';
 import { renderOptions } from '../../store/appStore';
-declare type TabBarProps = {
+type TabBarProps = {
     config: ITabBar;
     basename?: string;
 };
@@ -20,6 +20,6 @@ export declare class TabBar extends React.Component<TabBarProps, {
     };
     componentDidMount(): void;
     componentWillUnmount(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/lib/components/TabBar/index.js

@@ -1,102 +1,73 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.array.map.js";
+import "core-js/modules/web.dom-collections.iterator.js";
 import clsx from 'clsx';
 import React from 'react';
 import router from '@ray-js/router';
 import { events, appStoreEmitter, renderOptions } from '../../store/appStore';
 import { withPublicPath } from '../../utils';
 import styles from './index.module.less';
-export var TabBar = /*#__PURE__*/function (_React$Component) {
-  _inherits(TabBar, _React$Component);
-
-  var _super = _createSuper(TabBar);
-
-  function TabBar() {
-    var _this;
-
-    _classCallCheck(this, TabBar);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+export class TabBar extends React.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
       currentRoute: router.scheduler.currentRoute,
       renderOptions: renderOptions
     });
-
-    return _this;
   }
-
-  _createClass(TabBar, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      this.unChangeHandle = router.scheduler.on('routeChange', function (route) {
-        _this2.setState({
-          currentRoute: route
-        });
+  componentDidMount() {
+    this.unChangeHandle = router.scheduler.on('routeChange', route => {
+      this.setState({
+        currentRoute: route
       });
-      this.unAppStoreChange = appStoreEmitter.on(events.tabBarChange, function (state) {
-        _this2.setState({
-          renderOptions: state
-        });
+    });
+    this.unAppStoreChange = appStoreEmitter.on(events.tabBarChange, state => {
+      this.setState({
+        renderOptions: state
       });
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var _this$unChangeHandle, _this$unAppStoreChang;
-
-      (_this$unChangeHandle = this.unChangeHandle) === null || _this$unChangeHandle === void 0 ? void 0 : _this$unChangeHandle.call(this);
-      (_this$unAppStoreChang = this.unAppStoreChange) === null || _this$unAppStoreChang === void 0 ? void 0 : _this$unAppStoreChang.call(this);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _clsx;
-
-      var config = this.props.config;
-      var _this$state = this.state,
-          currentRoute = _this$state.currentRoute,
-          renderOptions = _this$state.renderOptions;
+    });
+  }
+  componentWillUnmount() {
+    var _this$unChangeHandle, _this$unAppStoreChang;
+    (_this$unChangeHandle = this.unChangeHandle) === null || _this$unChangeHandle === void 0 ? void 0 : _this$unChangeHandle.call(this);
+    (_this$unAppStoreChang = this.unAppStoreChange) === null || _this$unAppStoreChang === void 0 ? void 0 : _this$unAppStoreChang.call(this);
+  }
+  render() {
+    const {
+      config
+    } = this.props;
+    const {
+      currentRoute,
+      renderOptions
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-route": currentRoute,
+      className: clsx(styles.wrapper, {
+        [styles.hidden]: !renderOptions.tabBarVisible && !renderOptions.tabBarAnimation,
+        [styles.showIn]: renderOptions.tabBarVisible && renderOptions.tabBarAnimation,
+        [styles.hideOut]: !renderOptions.tabBarVisible && renderOptions.tabBarAnimation
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.tabBar
+    }, config.list.map((item, index) => {
+      const fullRoute = item.route;
+      const isActive = currentRoute === fullRoute;
+      // console.log('>>>>>>>> currentRoute: %s, item: %s', currentRoute, item.route)
       return /*#__PURE__*/React.createElement("div", {
-        "data-route": currentRoute,
-        className: clsx(styles.wrapper, (_clsx = {}, _defineProperty(_clsx, styles.hidden, !renderOptions.tabBarVisible && !renderOptions.tabBarAnimation), _defineProperty(_clsx, styles.showIn, renderOptions.tabBarVisible && renderOptions.tabBarAnimation), _defineProperty(_clsx, styles.hideOut, !renderOptions.tabBarVisible && renderOptions.tabBarAnimation), _clsx))
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.tabBar
-      }, config.list.map(function (item, index) {
-        var fullRoute = item.route;
-        var isActive = currentRoute === fullRoute; // console.log('>>>>>>>> currentRoute: %s, item: %s', currentRoute, item.route)
-
-        return /*#__PURE__*/React.createElement("div", {
-          "data-full-route": fullRoute,
-          key: item.pagePath + index,
-          className: styles.item,
-          onClick: function onClick() {
-            router.push(item.route);
-          }
-        }, item.icon && /*#__PURE__*/React.createElement("img", {
-          className: styles.icon,
-          src: "".concat(withPublicPath(isActive ? item.activeIcon : item.icon))
-        }), /*#__PURE__*/React.createElement("span", {
-          className: styles.text,
-          style: {
-            color: isActive ? config.selectedColor : config.textColor
-          }
-        }, item.text));
-      })));
-    }
-  }]);
-
-  return TabBar;
-}(React.Component);
+        "data-full-route": fullRoute,
+        key: item.pagePath + index,
+        className: styles.item,
+        onClick: () => {
+          router.push(item.route);
+        }
+      }, item.icon && /*#__PURE__*/React.createElement("img", {
+        className: styles.icon,
+        src: "".concat(withPublicPath(isActive ? item.activeIcon : item.icon))
+      }), /*#__PURE__*/React.createElement("span", {
+        className: styles.text,
+        style: {
+          color: isActive ? config.selectedColor : config.textColor
+        }
+      }, item.text));
+    })));
+  }
+}

package/lib/components/TabBar/index.jsx

@@ -0,0 +1,55 @@
+import clsx from 'clsx';
+import React from 'react';
+import router from '@ray-js/router';
+import { events, appStoreEmitter, renderOptions } from '../../store/appStore';
+import { withPublicPath } from '../../utils';
+import styles from './index.module.less';
+export class TabBar extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            currentRoute: router.scheduler.currentRoute,
+            renderOptions: renderOptions,
+        };
+    }
+    componentDidMount() {
+        this.unChangeHandle = router.scheduler.on('routeChange', (route) => {
+            this.setState({
+                currentRoute: route,
+            });
+        });
+        this.unAppStoreChange = appStoreEmitter.on(events.tabBarChange, (state) => {
+            this.setState({ renderOptions: state });
+        });
+    }
+    componentWillUnmount() {
+        var _a, _b;
+        (_a = this.unChangeHandle) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unAppStoreChange) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
+    render() {
+        const { config } = this.props;
+        const { currentRoute, renderOptions } = this.state;
+        return (<div data-route={currentRoute} className={clsx(styles.wrapper, {
+                [styles.hidden]: !renderOptions.tabBarVisible && !renderOptions.tabBarAnimation,
+                [styles.showIn]: renderOptions.tabBarVisible && renderOptions.tabBarAnimation,
+                [styles.hideOut]: !renderOptions.tabBarVisible && renderOptions.tabBarAnimation,
+            })}>
+        <div className={styles.tabBar}>
+          {config.list.map((item, index) => {
+                const fullRoute = item.route;
+                const isActive = currentRoute === fullRoute;
+                // console.log('>>>>>>>> currentRoute: %s, item: %s', currentRoute, item.route)
+                return (<div data-full-route={fullRoute} key={item.pagePath + index} className={styles.item} onClick={() => {
+                        router.push(item.route);
+                    }}>
+                {item.icon && (<img className={styles.icon} src={`${withPublicPath(isActive ? item.activeIcon : item.icon)}`}/>)}
+                <span className={styles.text} style={{ color: isActive ? config.selectedColor : config.textColor }}>
+                  {item.text}
+                </span>
+              </div>);
+            })}
+        </div>
+      </div>);
+    }
+}

package/lib/runtime/index.js

@@ -1,3 +1,4 @@
-import { responsive } from './responsive'; // 响应式设计 rem 单位
+import { responsive } from './responsive';
 
+// 响应式设计 rem 单位
 responsive();

package/lib/runtime/responsive.js

@@ -1,19 +1,17 @@
-import "core-js/modules/es.parse-float.js";
-var htmlRoot = document.querySelector('html');
+const htmlRoot = document.querySelector('html');
 export function responsive() {
   function setRem() {
-    var clientWidth = htmlRoot.clientWidth; // clientWidth = Math.min(clientWidth, 640); // PC 模式下限定最大值
-
+    let clientWidth = htmlRoot.clientWidth;
+    // clientWidth = Math.min(clientWidth, 640); // PC 模式下限定最大值
     htmlRoot.style.fontSize = "".concat(clientWidth / 7.5, "px");
-    var div = document.createElement('div');
+    const div = document.createElement('div');
     div.style.width = '7.5rem';
     document.body.appendChild(div);
     htmlRoot.style.fontSize = "".concat(parseFloat(htmlRoot.style.fontSize) * clientWidth / div.clientWidth, "px");
     document.body.removeChild(div);
     document.body.style.fontSize = "16px";
   }
-
-  var b = null;
+  let b = null;
   window.addEventListener('resize', function () {
     clearTimeout(b);
     b = setTimeout(setRem, 100);

package/lib/store/appStore.js

@@ -1,23 +1,20 @@
-import "core-js/modules/es.object.assign.js";
 import { Emitter } from '@ray-js/framework-shared';
-export var appStoreEmitter = new Emitter();
-export var renderOptions = {
+export const appStoreEmitter = new Emitter();
+export const renderOptions = {
   tabBarVisible: true,
   tabBarAnimation: false
 };
-export var actions = {
+export const actions = {
   toggleTabBar: 'toggleTabBar',
   onChange: 'onChange'
 };
-export var events = {
+export const events = {
   tabBarChange: 'tabBarChange'
 };
-
-var update = function (eventName, nextState) {
+const update = (eventName, nextState) => {
   Object.assign(renderOptions, nextState);
   appStoreEmitter.emit(eventName, renderOptions);
 };
-
 appStoreEmitter.on(actions.toggleTabBar, function (next) {
   if (next.visible !== renderOptions.tabBarVisible) update(events.tabBarChange, {
     tabBarVisible: next.visible,

package/lib/utils/normalizeBasename.js

@@ -1,14 +1,9 @@
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.regexp.test.js";
 import slash from 'slash';
 export function normalizeBasename(p) {
   var _p;
-
   p = slash((_p = p) !== null && _p !== void 0 ? _p : '/');
-
   if (!/^\//.test(p)) {
     p = '/' + p;
   }
-
   return p;
 }

package/lib/utils/withPublicPath.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.replace.js";
 export function withPublicPath(basePath) {
   return PUBLIC_PATH + basePath.replace(/^\//, '');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/framework",
-  "version": "1.4.0-alpha.3",
+  "version": "1.4.0-alpha.5",
   "description": "Ray Core",
   "keywords": [
     "ray"
@@ -20,22 +20,22 @@
     "watch": "tsc -p ./tsconfig.build.json --module esnext --outDir lib --watch"
   },
   "dependencies": {
-    "@ray-js/framework-mp": "^1.4.0-alpha.3",
-    "@ray-js/framework-shared": "^1.4.0-alpha.3",
-    "@ray-js/library": "^1.4.0-alpha.3",
-    "@ray-js/location": "^1.4.0-alpha.3",
-    "@ray-js/router": "^1.4.0-alpha.3",
-    "@ray-js/runtime": "^1.4.0-alpha.3",
-    "clsx": "^1.1.1",
+    "@ray-js/framework-mp": "^1.4.0-alpha.5",
+    "@ray-js/framework-shared": "^1.4.0-alpha.5",
+    "@ray-js/library": "^1.4.0-alpha.5",
+    "@ray-js/location": "^1.4.0-alpha.5",
+    "@ray-js/router": "^1.4.0-alpha.5",
+    "@ray-js/runtime": "^1.4.0-alpha.5",
+    "clsx": "^1.2.1",
     "hoist-non-react-statics": "^3.3.2",
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
-    "slash": "^5.0.0",
-    "tiny-invariant": "^1.1.0"
+    "slash": "^5.1.0",
+    "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
-    "@ray-js/cli": "^1.4.0-alpha.3",
-    "@ray-js/types": "^1.4.0-alpha.3"
+    "@ray-js/cli": "^1.4.0-alpha.5",
+    "@ray-js/types": "^1.4.0-alpha.5"
   },
   "maintainers": [
     {
@@ -43,6 +43,6 @@
       "email": "tuyafe@tuya.com"
     }
   ],
-  "gitHead": "438a6262377009a49dd569adab1079542e4e857a",
+  "gitHead": "14cb935df10f020e714b44bb41d4899646db751c",
   "repository": {}
 }

package/LICENSE.md

@@ -1,9 +0,0 @@
-Copyright © 2014-2022 Tuya.inc
-
-MIT License
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.