@ray-js/framework 0.3.0-beta.1c347991

package/README.md

@@ -0,0 +1,18 @@
+# @ray-js/framework
+
+实现跨端框架运行时统一，面向开发者提供统一的开发体验。
+
+## 框架 API
+
+```js
+import { router, location, usePageEvent, withPageLifecycle } from 'ray';
+```
+
+### Hooks
+
+- `usePageEvent(event, fn)` - 页面事件
+- `useAppEvent(event, fn)` - App 事件
+
+### Hoc
+
+- `withPageLifecycle` - 非页面组件使用页面事件

package/lib/api/index.d.ts

@@ -0,0 +1 @@
+export { showTabBar, hideTabBar } from './tabBar';

package/lib/api/index.js

@@ -0,0 +1 @@
+export { showTabBar, hideTabBar } from './tabBar';

package/lib/api/tabBar.d.ts

@@ -0,0 +1,7 @@
+import { WithApiCallback } from '@ray-js/types';
+export declare function showTabBar(options?: WithApiCallback<{
+    animation?: boolean;
+}>): void;
+export declare function hideTabBar(options?: WithApiCallback<{
+    animation?: boolean;
+}>): void;

package/lib/api/tabBar.js

@@ -0,0 +1,21 @@
+import { appStoreEmitter, actions } from '../store/appStore';
+export function showTabBar(options) {
+  var _options$success, _options$complete;
+
+  appStoreEmitter.emit(actions.toggleTabBar, {
+    visible: true,
+    animation: options.animation
+  });
+  options === null || options === void 0 ? void 0 : (_options$success = options.success) === null || _options$success === void 0 ? void 0 : _options$success.call(options);
+  options === null || options === void 0 ? void 0 : (_options$complete = options.complete) === null || _options$complete === void 0 ? void 0 : _options$complete.call(options);
+}
+export function hideTabBar(options) {
+  var _options$success2, _options$complete2;
+
+  appStoreEmitter.emit(actions.toggleTabBar, {
+    visible: false,
+    animation: options.animation
+  });
+  options === null || options === void 0 ? void 0 : (_options$success2 = options.success) === null || _options$success2 === void 0 ? void 0 : _options$success2.call(options);
+  options === null || options === void 0 ? void 0 : (_options$complete2 = options.complete) === null || _options$complete2 === void 0 ? void 0 : _options$complete2.call(options);
+}

package/lib/app/createApp.d.ts

@@ -0,0 +1,2 @@
+import { ApplicationProps } from '../components/Application';
+export declare function createApp(options: ApplicationProps): void;

package/lib/app/createApp.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Application } from '../components/Application';
+export function createApp(options) {
+  var root = document.createElement('div');
+  root.id = 'root';
+  document.body.appendChild(root); // 作为 web 构建的启动入口文件
+
+  ReactDOM.render( /*#__PURE__*/React.createElement(Application, options), root);
+}

package/lib/app/createAppInstance.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 创建抽象的 App Instance 对标到小程序，提供给 getApp() 进行使用
+ * @param appThis
+ */
+export declare function createAppInstance(appThis: any): void;

package/lib/app/createAppInstance.js

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

package/lib/app/index.d.ts

@@ -0,0 +1,3 @@
+export * from './createApp';
+export * from './createAppInstance';
+export declare function getApp(): import("@ray-js/runtime/lib/instance").AppInstance | null;

package/lib/app/index.js

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare class AppWrapper extends React.Component {
+    componentDidMount(): void;
+    render(): JSX.Element;
+}

package/lib/components/AppWrapper/index.js

@@ -0,0 +1,53 @@
+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
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        id: "Application",
+        className: styles.application
+      }, this.props.children);
+    }
+  }]);
+
+  return AppWrapper;
+}(React.Component);

package/lib/components/AppWrapper/index.module.less

@@ -0,0 +1,3 @@
+.application {
+  min-height: 100vh;
+}

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

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

package/lib/components/Application/index.js

@@ -0,0 +1,107 @@
+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';
+import { createRouter } from '@ray-js/router';
+import { createAppInstance } from '../../app/createAppInstance';
+import { get } from '../../utils';
+import { normalizeTabBar } from '../../utils/normalizeTabBar';
+import { AppWrapper } from '../AppWrapper';
+import { PageWrapper } from '../PageWrapper';
+import { TabBar } from '../TabBar';
+
+var isClassComponent = function (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);
+      return value;
+    });
+
+    _this.state = {};
+
+    var 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,
+          globalConfig = _this$props.globalConfig;
+      var basename = globalConfig.basename;
+      document.body.style.backgroundColor = this.getGlobalConfig(['window', 'backgroundColor'], '#fff');
+      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,
+          routes = _this$props2.routes,
+          basename = _this$props2.basename;
+      var _this$state = this.state,
+          PageComponent = _this$state.component,
+          matchedPage = _this$state.matchedPage; // 空页面暂不渲染，否则 appEvent 无法应用到页面内部
+
+      if (!matchedPage) {
+        return null;
+      }
+
+      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: normalizeTabBar(tabBar, routes)
+      })));
+    }
+  }]);
+
+  return Application;
+}(React.Component);

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PageInstance } from '@ray-js/runtime';
+import { Page, PageConfig } from '@ray-js/types';
+import './index.module.less';
+declare type PageWrapperProps = {
+    isClassType: boolean;
+    page: Page;
+    getGlobalConfig: (path: string | string[], defaultValue?: any) => any;
+};
+export declare class PageWrapper extends React.Component<PageWrapperProps, any> {
+    $instance: PageInstance;
+    $isReachBottom: boolean;
+    $reachBottomDistance: number;
+    getGlobalConfig: PageWrapperProps['getGlobalConfig'];
+    constructor(props: Readonly<PageWrapperProps>);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handlePageResize: () => void;
+    handlePageScroll: () => void;
+    checkReachBottom: () => void;
+    getPageConfig: (field: keyof PageConfig | string[], defaultValue?: any) => any;
+    render(): JSX.Element;
+}
+export {};

package/lib/components/PageWrapper/index.js

@@ -0,0 +1,163 @@
+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 { normalizeTabBar } from '../../utils/normalizeTabBar';
+
+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;
+      lifecycle.emit({
+        uniqueId: _this.$instance.uniqueId,
+        name: pageLifecycles.onResize,
+        args: {
+          windowWidth: windowWidth,
+          windowHeight: windowHeight
+        }
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handlePageScroll", function () {
+      var event = {
+        scrollTop: window.scrollY
+      };
+      lifecycle.emit({
+        uniqueId: _this.$instance.uniqueId,
+        name: pageLifecycles.onPageScroll,
+        args: event
+      });
+
+      _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;
+        lifecycle.emit({
+          uniqueId: _this.$instance.uniqueId,
+          name: pageLifecycles.onReachBottom
+        });
+        return;
+      }
+
+      _this.$isReachBottom = isCurrentReachBottom;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getPageConfig", function (field, defaultValue) {
+      var page = _this.props.page;
+      var pageConfig = page.config;
+      return get(pageConfig, field, defaultValue);
+    });
+
+    _this.$instance = new PageInstance();
+    lifecycle.addInstance(_this.$instance);
+    _this.getGlobalConfig = _this.props.getGlobalConfig;
+    return _this;
+  }
+
+  _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 实例，组件内也存在这样的情况
+
+      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 的页面直接切换，卸载前直接调用事件
+
+      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("ty-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]);
+              }
+            });
+          }
+        }
+      }) : children));
+    }
+  }]);
+
+  return PageWrapper;
+}(React.Component);

package/lib/components/PageWrapper/index.module.less

@@ -0,0 +1,6 @@
+page {
+  min-height: 100vh;
+  transform: translate(0);
+  background-color: #fff;
+  display: block;
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { TabBar as ITabBar } from '@ray-js/types';
+import { renderOptions } from '../../store/appStore';
+declare type TabBarProps = {
+    config: ITabBar;
+    basename?: string;
+};
+export declare class TabBar extends React.Component<TabBarProps, {
+    currentRoute: string;
+    renderOptions: typeof renderOptions;
+}> {
+    unChangeHandle: () => void;
+    unAppStoreChange: () => void;
+    state: {
+        currentRoute: string;
+        renderOptions: {
+            tabBarVisible: boolean;
+            tabBarAnimation: boolean;
+        };
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+export {};

package/lib/components/TabBar/index.js

@@ -0,0 +1,104 @@
+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 clsx from 'clsx';
+import React from 'react';
+import router from '@ray-js/router';
+import { events, appStoreEmitter, renderOptions } from '../../store/appStore';
+import { withPublicPath } from '../../utils/withPublicPath';
+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", {
+      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
+        });
+      });
+      this.unAppStoreChange = appStoreEmitter.on(events.tabBarChange, function (state) {
+        _this2.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 _this$props = this.props,
+          config = _this$props.config,
+          _this$props$basename = _this$props.basename,
+          basename = _this$props$basename === void 0 ? '' : _this$props$basename;
+      var _this$state = this.state,
+          currentRoute = _this$state.currentRoute,
+          renderOptions = _this$state.renderOptions;
+      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) {
+        var fullRoute = basename + item.route;
+        var isActive = currentRoute === fullRoute;
+        return /*#__PURE__*/React.createElement("div", {
+          "data-full-route": fullRoute,
+          key: item.route || item.id,
+          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);

package/lib/components/TabBar/index.module.less

@@ -0,0 +1,73 @@
+.wrapper {
+  overflow: hidden;
+  position: fixed;
+  bottom: 0;
+}
+
+@keyframes slideInUp {
+  0% {
+    visibility: visible;
+    transform: translate3d(0, 100%, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes slideOutDown {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  100% {
+    visibility: visible;
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.hidden {
+  display: none;
+}
+.showIn {
+  animation-name: slideInUp;
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-timing-function: ease-in;
+  animation-iteration-count: initial;
+}
+.hideOut {
+  animation-name: slideOutDown;
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-timing-function: ease-out;
+  animation-iteration-count: initial;
+}
+
+.tabBar {
+  height: 50px;
+  background-color: #fff;
+  border-top: 1px solid #eee;
+  width: 750rpx;
+  display: flex;
+  padding-bottom: 0;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  z-index: 999;
+}
+
+.item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.text {
+  font-size: 12px;
+  padding-top: 2px;
+}
+.icon {
+  width: 24px;
+  height: 24px;
+}

package/lib/createApp.d.ts

@@ -0,0 +1,2 @@
+import { ApplicationProps } from './components/Application';
+export declare function createApp(options: ApplicationProps): void;

package/lib/createApp.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Application } from './components/Application';
+export function createApp(options) {
+  var root = document.createElement('div');
+  root.id = 'root';
+  document.body.appendChild(root); // 作为 web 构建的启动入口文件
+
+  ReactDOM.render( /*#__PURE__*/React.createElement(Application, options), root);
+}

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export { createApp, getApp } from './app';
+export { lifecycle, PageInstance, PageInstanceContext, useAppEvent, usePageEvent, withPageLifecycle, } from '@ray-js/runtime';
+export * from './api';

package/lib/index.js

@@ -0,0 +1,3 @@
+export { createApp, getApp } from './app';
+export { lifecycle, PageInstance, PageInstanceContext, useAppEvent, usePageEvent, withPageLifecycle } from '@ray-js/runtime';
+export * from './api';

package/lib/index.native.d.ts

@@ -0,0 +1 @@
+export * from '@ray-js/framework-native';

package/lib/index.native.js

@@ -0,0 +1 @@
+export * from '@ray-js/framework-native';

package/lib/runtime/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/runtime/index.js

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

package/lib/runtime/responsive.d.ts

@@ -0,0 +1 @@
+export declare function responsive(): void;

package/lib/runtime/responsive.js

@@ -0,0 +1,22 @@
+import "core-js/modules/es.parse-float.js";
+var htmlRoot = document.querySelector('html');
+export function responsive() {
+  function setRem() {
+    var clientWidth = htmlRoot.clientWidth; // clientWidth = Math.min(clientWidth, 640); // PC 模式下限定最大值
+
+    htmlRoot.style.fontSize = "".concat(clientWidth / 7.5, "px");
+    var 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;
+  window.addEventListener('resize', function () {
+    clearTimeout(b);
+    b = setTimeout(setRem, 100);
+  }, !1);
+  setRem();
+}

package/lib/store/appStore.d.ts

@@ -0,0 +1,13 @@
+import { Emitter } from '@ray-js/framework-shared';
+export declare const appStoreEmitter: Emitter;
+export declare const renderOptions: {
+    tabBarVisible: boolean;
+    tabBarAnimation: boolean;
+};
+export declare const actions: {
+    toggleTabBar: string;
+    onChange: string;
+};
+export declare const events: {
+    tabBarChange: string;
+};

package/lib/store/appStore.js

@@ -0,0 +1,26 @@
+import "core-js/modules/es.object.assign.js";
+import { Emitter } from '@ray-js/framework-shared';
+export var appStoreEmitter = new Emitter();
+export var renderOptions = {
+  tabBarVisible: true,
+  tabBarAnimation: false
+};
+export var actions = {
+  toggleTabBar: 'toggleTabBar',
+  onChange: 'onChange'
+};
+export var events = {
+  tabBarChange: 'tabBarChange'
+};
+
+var update = function (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,
+    tabBarAnimation: next.animation
+  });
+});

package/lib/utils/index.d.ts

@@ -0,0 +1,2 @@
+import get from 'lodash.get';
+export { get };

package/lib/utils/index.js

@@ -0,0 +1,2 @@
+import get from 'lodash.get';
+export { get };

package/lib/utils/normalizeTabBar.d.ts

@@ -0,0 +1,2 @@
+import { Routes, TabBar } from '@ray-js/types';
+export declare function normalizeTabBar(tabBar: TabBar, routes: Routes): TabBar;

package/lib/utils/normalizeTabBar.js

@@ -0,0 +1,18 @@
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.object.to-string.js";
+export function normalizeTabBar(tabBar, routes) {
+  if (tabBar.list) {
+    tabBar.list = tabBar.list.map(function (item) {
+      if (item.id) {
+        item.route = routes.find(function (i) {
+          return i.id === item.id;
+        }).route;
+      }
+
+      return item;
+    });
+  }
+
+  return tabBar;
+}

package/lib/utils/withPublicPath.d.ts

@@ -0,0 +1 @@
+export declare function withPublicPath(basePath: string): string;

package/lib/utils/withPublicPath.js

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,48 @@
+{
+  "name": "@ray-js/framework",
+  "version": "0.3.0-beta.1c347991",
+  "description": "Ray Core",
+  "keywords": [
+    "ray"
+  ],
+  "author": "子长 <zichang.nong@tuya.com>",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "ray build --type=component --transform-mode=pure",
+    "watch": "tsc -p ./tsconfig.build.json --module esnext --outDir lib --watch"
+  },
+  "dependencies": {
+    "@ray-js/framework-mp": "^0.3.0-beta.1c347991",
+    "@ray-js/framework-native": "^0.3.0-beta.1c347991",
+    "@ray-js/framework-shared": "^0.3.0-beta.1c347991",
+    "@ray-js/library": "^0.3.0-beta.1c347991",
+    "@ray-js/location": "^0.3.0-beta.1c347991",
+    "@ray-js/router": "^0.3.0-beta.1c347991",
+    "@ray-js/runtime": "^0.3.0-beta.1c347991",
+    "clsx": "^1.1.1",
+    "hoist-non-react-statics": "^3.3.2",
+    "lodash.get": "^4.4.2",
+    "tiny-invariant": "^1.1.0"
+  },
+  "devDependencies": {
+    "@ray-js/cli": "^0.3.0-beta.1c347991",
+    "@ray-js/types": "^0.3.0-beta.1c347991"
+  },
+  "maintainers": [
+    {
+      "name": "tuyafe",
+      "email": "tuyafe@tuya.com"
+    }
+  ],
+  "gitHead": "e0bd013022ddda63380d3c9e20fd8cadb46cd61f",
+  "repository": {}
+}