@ray-js/framework 0.4.15-beta-0 → 0.5.0

package/lib/api/index.js

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

package/lib/api/tabBar.js

@@ -1,13 +1,21 @@
 import { appStoreEmitter, actions } from '../store/appStore';
 export function showTabBar(options) {
-    var _a, _b;
-    appStoreEmitter.emit(actions.toggleTabBar, { visible: true, animation: options.animation });
-    (_a = options === null || options === void 0 ? void 0 : options.success) === null || _a === void 0 ? void 0 : _a.call(options);
-    (_b = options === null || options === void 0 ? void 0 : options.complete) === null || _b === void 0 ? void 0 : _b.call(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 _a, _b;
-    appStoreEmitter.emit(actions.toggleTabBar, { visible: false, animation: options.animation });
-    (_a = options === null || options === void 0 ? void 0 : options.success) === null || _a === void 0 ? void 0 : _a.call(options);
-    (_b = options === null || options === void 0 ? void 0 : options.complete) === null || _b === void 0 ? void 0 : _b.call(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/index.d.ts

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

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

@@ -16,5 +16,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;
+    render(): JSX.Element | null;
 }

package/lib/index.js

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

package/lib/index.native.js

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

package/lib/runtime/index.js

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

package/lib/runtime/responsive.js

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

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

package/lib/utils/index.js

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

package/lib/utils/normalizeTabBar.js

@@ -1,11 +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((item) => {
-            if (item.id) {
-                item.route = routes.find((i) => i.id === item.id).route;
-            }
-            return item;
-        });
-    }
-    return tabBar;
-}
+  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.js

@@ -1,3 +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(/^\//, '');
-}
+  return PUBLIC_PATH + basePath.replace(/^\//, '');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/framework",
-  "version": "0.4.15-beta-0",
+  "version": "0.5.0",
   "description": "Ray Core",
   "keywords": [
     "ray"
@@ -20,21 +20,21 @@
     "watch": "tsc -p ./tsconfig.build.json --module esnext --outDir lib --watch"
   },
   "dependencies": {
-    "@ray-js/framework-mp": "^0.4.15-beta-0",
-    "@ray-js/framework-native": "^0.4.15-beta-0",
-    "@ray-js/framework-shared": "^0.4.15-beta-0",
-    "@ray-js/library": "^0.4.15-beta-0",
-    "@ray-js/location": "^0.4.15-beta-0",
-    "@ray-js/router": "^0.4.15-beta-0",
-    "@ray-js/runtime": "^0.4.15-beta-0",
+    "@ray-js/framework-mp": "^0.5.0",
+    "@ray-js/framework-native": "^0.5.0",
+    "@ray-js/framework-shared": "^0.5.0",
+    "@ray-js/library": "^0.5.0",
+    "@ray-js/location": "^0.5.0",
+    "@ray-js/router": "^0.5.0",
+    "@ray-js/runtime": "^0.5.0",
     "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.4.15-beta-0",
-    "@ray-js/types": "^0.4.15-beta-0"
+    "@ray-js/cli": "^0.5.0",
+    "@ray-js/types": "^0.5.0"
   },
   "maintainers": [
     {
@@ -42,6 +42,6 @@
       "email": "tuyafe@tuya.com"
     }
   ],
-  "gitHead": "c9b5b2e847299ecbd30c8b1feb2413045c139bf7",
+  "gitHead": "5f49ac5a276532472d10aa60ec21c9a5f0b28ce8",
   "repository": {}
 }

package/lib/app/createApp.jsx

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

package/lib/app/createAppInstance.jsx

@@ -1,12 +0,0 @@
-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.jsx

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

package/lib/components/AppWrapper/index.jsx

@@ -1,29 +0,0 @@
-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.jsx

@@ -1,58 +0,0 @@
-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';
-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, globalConfig } = this.props;
-        const { basename } = globalConfig;
-        document.body.style.backgroundColor = this.getGlobalConfig(['window', 'backgroundColor'], '#fff');
-        createRouter({
-            basename,
-            routes,
-            pages,
-            tabBar,
-            onChange: (component, props) => {
-                this.setState({ component, matchedPage: props.page });
-            },
-        });
-    }
-    render() {
-        const { app: App, tabBar, routes, basename } = this.props;
-        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={normalizeTabBar(tabBar, routes)}/>)}
-        </App>
-      </AppWrapper>);
-    }
-}

package/lib/components/PageWrapper/index.jsx

@@ -1,117 +0,0 @@
-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 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.jsx

@@ -1,54 +0,0 @@
-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 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, basename = '' } = 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) => {
-                const fullRoute = basename + item.route;
-                const isActive = currentRoute === fullRoute;
-                return (<div data-full-route={fullRoute} key={item.route || item.id} 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/createApp.jsx

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