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

package/README.md

@@ -0,0 +1 @@
+# @ray-js/router

package/lib/Router.d.ts

@@ -0,0 +1,22 @@
+import { Router as TRouter } from '@ray-js/types';
+import { RouterScheduler } from './RouterScheduler';
+export declare class Router implements TRouter {
+    /**
+     * 页面路由调度器
+     */
+    scheduler: RouterScheduler;
+    /**
+     * 当前环境地址栏
+     */
+    $href: string;
+    constructor(options: {
+        scheduler: RouterScheduler;
+    });
+    private normalizeRoute;
+    push(to: string): void;
+    replace(to: string): void;
+    go(delta: number): void;
+    back(): void;
+    reload(to: string): void;
+    get hostHref(): string;
+}

package/lib/Router.js

@@ -0,0 +1,135 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import "core-js/modules/es.string.starts-with.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.search.js";
+import "core-js/modules/es.string.replace.js";
+import { url } from '@ray-js/library';
+import { history } from './history';
+export var Router = /*#__PURE__*/function () {
+  /**
+   * 页面路由调度器
+   */
+
+  /**
+   * 当前环境地址栏
+   */
+  function Router(options) {
+    _classCallCheck(this, Router);
+
+    this.scheduler = options.scheduler;
+  }
+
+  _createClass(Router, [{
+    key: "normalizeRoute",
+    value: function () {
+      var _normalizeRoute = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(params) {
+        var to, _url$parse, pathname, search, hash;
+
+        return _regeneratorRuntime.wrap(function (_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                to = params.to; // FIXME: 绝对路径是否需要支持？
+
+                if (!(to.startsWith('//') || to.startsWith('http'))) {
+                  _context.next = 3;
+                  break;
+                }
+
+                return _context.abrupt("return", {
+                  to: to
+                });
+
+              case 3:
+                if (this.scheduler.basename) {
+                  to = this.scheduler.basename + to;
+                } // TODO: Web 应用下重复进入一个路由
+
+
+                if (this.$href) {
+                  _url$parse = url.parse(this.$href), pathname = _url$parse.pathname, search = _url$parse.search, hash = _url$parse.hash;
+
+                  if (url.format({
+                    pathname: pathname,
+                    search: search,
+                    hash: hash
+                  }) === to) {
+                    console.warn('duplicate route to:', to);
+                  }
+                }
+
+                return _context.abrupt("return", {
+                  to: to
+                });
+
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function normalizeRoute() {
+        return _normalizeRoute.apply(this, arguments);
+      }
+
+      return normalizeRoute;
+    }()
+  }, {
+    key: "push",
+    value: function push(to) {
+      this.normalizeRoute({
+        to: to
+      }).then(function (_ref) {
+        var to = _ref.to;
+        history.push(to);
+      });
+    }
+  }, {
+    key: "replace",
+    value: function replace(to) {
+      this.normalizeRoute({
+        to: to
+      }).then(function (_ref2) {
+        var to = _ref2.to;
+        history.replace(to);
+      });
+    }
+  }, {
+    key: "go",
+    value: function go(delta) {
+      // 在应用堆栈内进行跳转
+      history.go(delta);
+    }
+  }, {
+    key: "back",
+    value: function back() {
+      history.goBack();
+    }
+  }, {
+    key: "reload",
+    value: function reload(to) {
+      if (to) {
+        this.normalizeRoute({
+          to: to
+        }).then(function (_ref3) {
+          var to = _ref3.to;
+          window.location.href = to;
+        });
+      } else {
+        window.location.reload();
+      }
+    }
+  }, {
+    key: "hostHref",
+    get: function get() {
+      return window.location.href;
+    }
+  }]);
+
+  return Router;
+}();

package/lib/RouterScheduler.d.ts

@@ -0,0 +1,32 @@
+import { Page, Pages, RouterScheduler as IRouterScheduler, Routes, TabBar } from '@ray-js/types';
+declare type EventMembers = 'routeChange';
+/**
+ * web 环境下的路由协调器
+ */
+export declare class RouterScheduler extends IRouterScheduler<Page> {
+    private $currentRoute;
+    private $listeners;
+    $entityMap: Record<string, Page[]>;
+    basename: string;
+    /**
+     * 当前调度器的 route 地址
+     */
+    get currentRoute(): string;
+    set currentRoute(val: string);
+    on(event: EventMembers, fn: Function): () => void;
+    emit(event: EventMembers, ...args: any[]): void;
+    /**
+     * 初始化路由，注册应用声明的路由，并处理映射关系
+     */
+    registryPages(params: {
+        routes: Routes;
+        pages: Pages;
+        tabBar: TabBar;
+    }): void;
+    getMatchedPage(pathname: string): Page & {
+        params: object;
+        pathname: string;
+    };
+    addPage(page: Page): void;
+}
+export {};

package/lib/RouterScheduler.js

@@ -0,0 +1,145 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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.splice.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import { RouterScheduler as IRouterScheduler } from '@ray-js/types';
+
+/**
+ * web 环境下的路由协调器
+ */
+export var RouterScheduler = /*#__PURE__*/function (_IRouterScheduler) {
+  _inherits(RouterScheduler, _IRouterScheduler);
+
+  var _super = _createSuper(RouterScheduler);
+
+  function RouterScheduler() {
+    var _this;
+
+    _classCallCheck(this, RouterScheduler);
+
+    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), "$currentRoute", '');
+
+    _defineProperty(_assertThisInitialized(_this), "$listeners", {});
+
+    _defineProperty(_assertThisInitialized(_this), "$entityMap", {});
+
+    _defineProperty(_assertThisInitialized(_this), "basename", '');
+
+    return _this;
+  }
+
+  _createClass(RouterScheduler, [{
+    key: "currentRoute",
+    get:
+    /**
+     * 当前调度器的 route 地址
+     */
+    function get() {
+      return this.$currentRoute;
+    },
+    set: function set(val) {
+      if (val !== this.currentRoute) {
+        this.$currentRoute = val;
+        this.emit('routeChange', this.currentRoute);
+      }
+    }
+  }, {
+    key: "on",
+    value: function on(event, fn) {
+      if (!this.$listeners[event]) {
+        this.$listeners[event] = [];
+      }
+
+      var events = this.$listeners[event];
+      events.push(fn);
+      return function () {
+        events.splice(events.indexOf(fn), 1);
+      };
+    } // 给 TabBar 监听，用于处理当前高亮状态
+
+  }, {
+    key: "emit",
+    value: function emit(event) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+
+      var fns = this.$listeners[event];
+
+      if (Array.isArray(fns)) {
+        fns.forEach(function (fn) {
+          fn.apply(void 0, args);
+        });
+      }
+    }
+    /**
+     * 初始化路由，注册应用声明的路由，并处理映射关系
+     */
+
+  }, {
+    key: "registryPages",
+    value: function registryPages(params) {
+      var _this2 = this;
+
+      var pages = params.pages,
+          tabBar = params.tabBar;
+      var tabBarList = tabBar.list || [];
+      pages.forEach(function (page) {
+        var isTabBar = tabBarList.some(function (item) {
+          if (item.route) {
+            return page.route === item.route;
+          } else if (item.id) {
+            return page.id === item.id;
+          }
+
+          return false;
+        });
+        page.route = _this2.basename + page.route;
+        page.originalRoute = page.route;
+
+        _this2.addPage(_objectSpread(_objectSpread({}, page), {}, {
+          isTabBar: isTabBar
+        }));
+      });
+    }
+  }, {
+    key: "getMatchedPage",
+    value: function getMatchedPage(pathname) {
+      // 适配 `domain.com/basename/` & `domain.com/basename`
+      // 注册首页使用的是 `/` 需预处理
+      if (this.basename === pathname) {
+        pathname = pathname + '/';
+      }
+
+      this.currentRoute = pathname;
+      return this.matchPageByPathname(pathname);
+    }
+  }, {
+    key: "addPage",
+    value: function addPage(page) {
+      var depth = this.slashDepth(page.route);
+
+      if (!this.$entityMap[depth]) {
+        this.$entityMap[depth] = [];
+      }
+
+      this.$entityMap[depth].push(page);
+    }
+  }]);
+
+  return RouterScheduler;
+}(IRouterScheduler);

package/lib/history/index.d.ts

@@ -0,0 +1,10 @@
+import { History } from 'history';
+import { MatchedPage, Page, PageComponent, RouterScheduler } from '@ray-js/types';
+export declare let history: History;
+export declare function createHistory(options: {
+    basename?: string;
+    scheduler: RouterScheduler<Page>;
+    onChange: (component: PageComponent, params: {
+        page: MatchedPage;
+    }) => void;
+}): History<unknown>;

package/lib/history/index.js

@@ -0,0 +1,87 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.promise.js";
+import { createBrowserHistory } from 'history';
+import React from 'react';
+export var history;
+var changeKey = '';
+export function createHistory(options) {
+  var scheduler = options.scheduler;
+  history = createBrowserHistory(options);
+  history.listen( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(historyLocation) {
+      var key, pathname, matchedPage, page, NotFound;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              key = historyLocation.key, pathname = historyLocation.pathname;
+
+              if (!(key && key === changeKey)) {
+                _context.next = 3;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 3:
+              changeKey = key;
+              matchedPage = scheduler.getMatchedPage(pathname);
+
+              if (!matchedPage) {
+                // 兜底通配页面
+                matchedPage = scheduler.getMatchedPage('*');
+              }
+
+              if (!matchedPage) {
+                _context.next = 13;
+                break;
+              }
+
+              _context.next = 9;
+              return matchedPage.component();
+
+            case 9:
+              page = _context.sent;
+              options.onChange(page, {
+                page: matchedPage
+              });
+              _context.next = 16;
+              break;
+
+            case 13:
+              console.warn('Not match any route!'); // 兜底 404 页面
+
+              NotFound = function () {
+                return /*#__PURE__*/React.createElement('div', null, 'Page Not Found');
+              };
+
+              options.onChange(NotFound, {
+                page: {
+                  id: pathname,
+                  pathname: pathname,
+                  route: '*',
+                  path: '*',
+                  config: {},
+                  params: {},
+                  component: function component() {
+                    return Promise.resolve(NotFound);
+                  }
+                }
+              });
+
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function () {
+      return _ref.apply(this, arguments);
+    };
+  }());
+  return history;
+}

package/lib/index.d.ts

@@ -0,0 +1,13 @@
+import { MatchedPage, PageComponent, Pages, Routes, TabBar } from '@ray-js/types';
+import { Router } from './Router';
+declare const router: Router;
+export declare function createRouter(options: {
+    routes: Routes;
+    pages: Pages;
+    tabBar: TabBar;
+    basename?: string;
+    onChange: (component: PageComponent, params: {
+        page: MatchedPage;
+    }) => void;
+}): Router;
+export default router;

package/lib/index.js

@@ -0,0 +1,45 @@
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.search.js";
+import "core-js/modules/es.string.replace.js";
+import { createHistory } from './history';
+import { Router } from './Router';
+import { RouterScheduler } from './RouterScheduler';
+var scheduler = window.__ray__routerScheduler__ = new RouterScheduler();
+var router = window.__ray__router__ = new Router({
+  scheduler: scheduler
+});
+export function createRouter(options) {
+  var basename = options.basename,
+      _onChange = options.onChange,
+      routes = options.routes,
+      tabBar = options.tabBar,
+      pages = options.pages;
+  var history = createHistory({
+    basename: basename,
+    scheduler: scheduler,
+    onChange: function onChange() {
+      router.$href = window.location.href;
+
+      _onChange.apply(void 0, arguments);
+    }
+  }); // 设置路由基准路径
+
+  if (basename) {
+    router.scheduler.basename = basename;
+  } // 调度器注册页面
+
+
+  router.scheduler.registryPages({
+    routes: routes,
+    tabBar: tabBar,
+    pages: pages
+  });
+  var _history$location = history.location,
+      pathname = _history$location.pathname,
+      search = _history$location.search,
+      hash = _history$location.hash; // 首次触发 history change
+
+  history.replace(pathname + search + hash);
+  return router;
+}
+export default router;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@ray-js/router",
+  "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/library": "^0.3.0-beta.1c347991",
+    "@ray-js/types": "^0.3.0-beta.1c347991",
+    "history": "4.x",
+    "path-to-regexp": "^6.2.0"
+  },
+  "devDependencies": {
+    "@ray-js/cli": "^0.3.0-beta.1c347991",
+    "@types/history": "^4.7.9"
+  },
+  "maintainers": [
+    {
+      "name": "tuyafe",
+      "email": "tuyafe@tuya.com"
+    }
+  ],
+  "gitHead": "e0bd013022ddda63380d3c9e20fd8cadb46cd61f",
+  "repository": {}
+}