@ray-js/framework 0.5.7-beta-2 → 0.5.9

package/lib/api/index.js

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

package/lib/api/tabBar.js

@@ -1,21 +1,13 @@
 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);
+    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);
 }
 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);
-}
+    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);
+}

package/lib/app/createApp.jsx

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

@@ -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.d.ts

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

package/lib/app/index.js

@@ -1,6 +1,5 @@
 import { getCurrent } from '@ray-js/runtime';
 export * from './createApp';
-export * from './createAppInstance';
 export function getApp() {
   var 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

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

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

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

package/lib/components/Application/index.jsx

@@ -0,0 +1,58 @@
+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.d.ts

@@ -6,6 +6,7 @@ declare type PageWrapperProps = {
     isClassType: boolean;
     page: Page;
     getGlobalConfig: (path: string | string[], defaultValue?: any) => any;
+    children: any;
 };
 export declare class PageWrapper extends React.Component<PageWrapperProps, any> {
     $instance: PageInstance;

package/lib/components/PageWrapper/index.jsx

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

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

@@ -0,0 +1,10 @@
+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/index.d.ts

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

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, withPageLifecycle, useAppEvent, usePageEvent, useNativeEffect, useQuery, usePageInstance, useComponentInstance, } from '@ray-js/runtime';
+export * from './api';

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,22 +1,20 @@
-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 模式下限定最大值
-
-    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();
-}
+    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();
+}

package/lib/store/appStore.js

@@ -1,26 +1,24 @@
-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 const appStoreEmitter = new Emitter();
+export const renderOptions = {
+    tabBarVisible: true,
+    tabBarAnimation: false,
 };
-export var actions = {
-  toggleTabBar: 'toggleTabBar',
-  onChange: 'onChange'
+export const actions = {
+    toggleTabBar: 'toggleTabBar',
+    onChange: 'onChange',
 };
-export var events = {
-  tabBarChange: 'tabBarChange'
+export const events = {
+    tabBarChange: 'tabBarChange',
 };
-
-var update = function (eventName, nextState) {
-  Object.assign(renderOptions, nextState);
-  appStoreEmitter.emit(eventName, renderOptions);
+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,
-    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,18 +1,11 @@
-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;
-}
+    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;
+}

package/lib/utils/withPublicPath.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/framework",
-  "version": "0.5.7-beta-2",
+  "version": "0.5.9",
   "description": "Ray Core",
   "keywords": [
     "ray"
@@ -20,21 +20,20 @@
     "watch": "tsc -p ./tsconfig.build.json --module esnext --outDir lib --watch"
   },
   "dependencies": {
-    "@ray-js/framework-mp": "^0.5.7-beta-2",
-    "@ray-js/framework-native": "^0.5.7-beta-2",
-    "@ray-js/framework-shared": "^0.5.7-beta-2",
-    "@ray-js/library": "^0.5.7-beta-2",
-    "@ray-js/location": "^0.5.7-beta-2",
-    "@ray-js/router": "^0.5.7-beta-2",
-    "@ray-js/runtime": "^0.5.7-beta-2",
+    "@ray-js/framework-mp": "^0.5.9",
+    "@ray-js/framework-shared": "^0.5.9",
+    "@ray-js/library": "^0.5.9",
+    "@ray-js/location": "^0.5.9",
+    "@ray-js/router": "^0.5.9",
+    "@ray-js/runtime": "^0.5.9",
     "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.5.7-beta-2",
-    "@ray-js/types": "^0.5.7-beta-2"
+    "@ray-js/cli": "^0.5.9",
+    "@ray-js/types": "^0.5.9"
   },
   "maintainers": [
     {
@@ -42,6 +41,6 @@
       "email": "tuyafe@tuya.com"
     }
   ],
-  "gitHead": "290d921f04a74cf0df8415c91bd33119e6f8e11e",
+  "gitHead": "8618821f05c00f4987138f5b523ae6261e32c9a6",
   "repository": {}
 }

package/lib/index.native.d.ts

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

package/lib/index.native.js

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