@tarojs/router 3.5.0-beta.2 → 3.5.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -1,12 +1,38 @@
1
1
  import { createBrowserHistory, createHashHistory, Action, parsePath } from 'history';
2
- import { requestAnimationFrame, Current, eventCenter, createPageConfig, hooks, stringify } from '@tarojs/runtime';
3
- import UniversalRouter from 'universal-router';
2
+ import { Current, eventCenter, createPageConfig, hooks, stringify, requestAnimationFrame } from '@tarojs/runtime';
4
3
  import queryString from 'query-string';
5
4
  import { initTabBarApis } from '@tarojs/taro';
5
+ import UniversalRouter from 'universal-router';
6
+
7
+ /*! *****************************************************************************
8
+ Copyright (c) Microsoft Corporation.
9
+
10
+ Permission to use, copy, modify, and/or distribute this software for any
11
+ purpose with or without fee is hereby granted.
12
+
13
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
14
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
15
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
16
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
17
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
18
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
19
+ PERFORMANCE OF THIS SOFTWARE.
20
+ ***************************************************************************** */
21
+
22
+ function __awaiter(thisArg, _arguments, P, generator) {
23
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
24
+ return new (P || (P = Promise))(function (resolve, reject) {
25
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
26
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
27
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
28
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
29
+ });
30
+ }
6
31
 
7
32
  const addLeadingSlash = (url = '') => (url.charAt(0) === '/' ? url : '/' + url);
8
33
  const hasBasename = (path = '', prefix = '') => new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path) || path === prefix;
9
34
  const stripBasename = (path = '', prefix = '') => hasBasename(path, prefix) ? path.substr(prefix.length) : path;
35
+ const stripTrailing = (str = '') => str.replace(/[?#][\s\S]*$/, '');
10
36
  class RoutesAlias {
11
37
  constructor() {
12
38
  this.conf = [];
@@ -169,31 +195,6 @@ function prependBasename(url = '') {
169
195
  return basename.replace(/\/$/, '') + '/' + url.replace(/^\//, '');
170
196
  }
171
197
 
172
- /*! *****************************************************************************
173
- Copyright (c) Microsoft Corporation.
174
-
175
- Permission to use, copy, modify, and/or distribute this software for any
176
- purpose with or without fee is hereby granted.
177
-
178
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
179
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
180
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
181
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
182
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
183
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
184
- PERFORMANCE OF THIS SOFTWARE.
185
- ***************************************************************************** */
186
-
187
- function __awaiter(thisArg, _arguments, P, generator) {
188
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
189
- return new (P || (P = Promise))(function (resolve, reject) {
190
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
191
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
192
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
193
- step((generator = generator.apply(thisArg, _arguments || [])).next());
194
- });
195
- }
196
-
197
198
  class Stacks {
198
199
  constructor() {
199
200
  this.stacks = [];
@@ -343,36 +344,6 @@ function getCurrentPages() {
343
344
  return pages.map(e => (Object.assign(Object.assign({}, e), { route: e.path || '' })));
344
345
  }
345
346
 
346
- /**
347
- * 插入页面动画需要的样式
348
- */
349
- function loadAnimateStyle(ms = 300) {
350
- const css = `
351
- .taro_router .taro_page {
352
- position: absolute;
353
- left: 0;
354
- top: 0;
355
- width: 100%;
356
- height: 100%;
357
- background-color: #fff;
358
- transform: translate(100%, 0);
359
- transition: transform ${ms}ms;
360
- z-index: 0;
361
- }
362
-
363
- .taro_router .taro_page.taro_tabbar_page,
364
- .taro_router .taro_page.taro_page_show.taro_page_stationed {
365
- transform: none;
366
- }
367
-
368
- .taro_router .taro_page.taro_page_show {
369
- transform: translate(0, 0);
370
- }`;
371
- const style = document.createElement('style');
372
- style.innerHTML = css;
373
- document.getElementsByTagName('head')[0].appendChild(style);
374
- }
375
-
376
347
  let pageResizeFn;
377
348
  function bindPageResize(page) {
378
349
  pageResizeFn && window.removeEventListener('resize', pageResizeFn);
@@ -394,7 +365,8 @@ function bindPageScroll(page, pageEl, distance = 50) {
394
365
  pageDOM = pageEl;
395
366
  let isReachBottom = false;
396
367
  pageScrollFn = function () {
397
- page.onPageScroll && page.onPageScroll({
368
+ var _a;
369
+ (_a = page.onPageScroll) === null || _a === void 0 ? void 0 : _a.call(page, {
398
370
  scrollTop: pageDOM instanceof Window ? window.scrollY : pageDOM.scrollTop
399
371
  });
400
372
  if (isReachBottom && getOffset() > distance) {
@@ -446,6 +418,192 @@ function initTabbar(config) {
446
418
  initTabBarApis(config);
447
419
  }
448
420
 
421
+ /* eslint-disable dot-notation */
422
+ class MultiPageHandler {
423
+ constructor(config) {
424
+ this.config = config;
425
+ this.mount();
426
+ }
427
+ get appId() { return 'app'; }
428
+ get router() { return this.config.router; }
429
+ get routerMode() { return this.router.mode || 'hash'; }
430
+ get customRoutes() { return this.router.customRoutes || {}; }
431
+ get tabBarList() { var _a; return ((_a = this.config.tabBar) === null || _a === void 0 ? void 0 : _a.list) || []; }
432
+ get PullDownRefresh() { return this.config.PullDownRefresh; }
433
+ set pathname(p) { this.router.pathname = p; }
434
+ get pathname() { return this.router.pathname; }
435
+ get basename() { return this.router.basename || ''; }
436
+ get pageConfig() { return this.config.route; }
437
+ get isTabBar() {
438
+ var _a;
439
+ const routePath = stripBasename(this.pathname, this.basename);
440
+ const pagePath = ((_a = Object.entries(this.customRoutes).find(([, target]) => {
441
+ if (typeof target === 'string') {
442
+ return target === routePath;
443
+ }
444
+ else if ((target === null || target === void 0 ? void 0 : target.length) > 0) {
445
+ return target.includes(routePath);
446
+ }
447
+ return false;
448
+ })) === null || _a === void 0 ? void 0 : _a[0]) || routePath;
449
+ return !!pagePath && this.tabBarList.some(t => t.pagePath === pagePath);
450
+ }
451
+ get search() { return location.search.substr(1); }
452
+ getQuery(search = '', options = {}) {
453
+ search = search ? `${search}&${this.search}` : this.search;
454
+ const query = search
455
+ ? queryString.parse(search)
456
+ : {};
457
+ return Object.assign(Object.assign({}, query), options);
458
+ }
459
+ mount() {
460
+ var _a;
461
+ setHistoryMode(this.routerMode, this.router.basename);
462
+ (_a = document.getElementById('app')) === null || _a === void 0 ? void 0 : _a.remove();
463
+ const app = document.createElement('div');
464
+ app.id = this.appId;
465
+ app.classList.add('taro_router');
466
+ if (this.tabBarList.length > 1) {
467
+ const container = document.createElement('div');
468
+ container.classList.add('taro-tabbar__container');
469
+ container.id = 'container';
470
+ const panel = document.createElement('div');
471
+ panel.classList.add('taro-tabbar__panel');
472
+ panel.appendChild(app);
473
+ container.appendChild(panel);
474
+ document.body.appendChild(container);
475
+ initTabbar(this.config);
476
+ }
477
+ else {
478
+ document.body.appendChild(app);
479
+ }
480
+ }
481
+ onReady(page, onLoad = true) {
482
+ var _a;
483
+ const pageEl = this.getPageContainer(page);
484
+ if (pageEl && !(pageEl === null || pageEl === void 0 ? void 0 : pageEl['__isReady'])) {
485
+ const el = pageEl.firstElementChild;
486
+ (_a = el === null || el === void 0 ? void 0 : el['componentOnReady']) === null || _a === void 0 ? void 0 : _a.call(el);
487
+ onLoad && (pageEl['__page'] = page);
488
+ }
489
+ }
490
+ load(page, pageConfig = {}) {
491
+ var _a;
492
+ if (!page)
493
+ return;
494
+ (_a = page.onLoad) === null || _a === void 0 ? void 0 : _a.call(page, this.getQuery('', page.options), () => {
495
+ var _a;
496
+ const pageEl = this.getPageContainer(page);
497
+ this.isTabBar && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page'));
498
+ this.onReady(page, true);
499
+ (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
500
+ this.bindPageEvents(page, pageEl, pageConfig);
501
+ });
502
+ }
503
+ getPageContainer(page) {
504
+ var _a;
505
+ const path = page ? page === null || page === void 0 ? void 0 : page.path : (_a = Current.page) === null || _a === void 0 ? void 0 : _a.path;
506
+ const id = path === null || path === void 0 ? void 0 : path.replace(/([^a-z0-9\u00a0-\uffff_-])/ig, '\\$1');
507
+ if (page) {
508
+ return document.querySelector(`.taro_page#${id}`);
509
+ }
510
+ const el = (id
511
+ ? document.querySelector(`.taro_page#${id}`)
512
+ : document.querySelector('.taro_page') ||
513
+ document.querySelector('.taro_router'));
514
+ return el || window;
515
+ }
516
+ bindPageEvents(page, pageEl, config = {}) {
517
+ var _a;
518
+ if (!pageEl) {
519
+ pageEl = this.getPageContainer();
520
+ }
521
+ const distance = config.onReachBottomDistance || ((_a = this.config.window) === null || _a === void 0 ? void 0 : _a.onReachBottomDistance) || 50;
522
+ bindPageScroll(page, pageEl, distance);
523
+ bindPageResize(page);
524
+ }
525
+ }
526
+
527
+ // TODO 支持多路由 (APP 生命周期仅触发一次)
528
+ /** Note: 关于多页面应用
529
+ * - 需要配置路由映射(根目录跳转、404 页面……)
530
+ * - app.onPageNotFound 事件不支持
531
+ * - 应用生命周期可能多次触发
532
+ * - TabBar 会多次加载
533
+ * - 不支持路由动画
534
+ */
535
+ function createMultiRouter(app, config, framework) {
536
+ var _a, _b, _c, _d, _e, _f;
537
+ return __awaiter(this, void 0, void 0, function* () {
538
+ RouterConfig.config = config;
539
+ const handler = new MultiPageHandler(config);
540
+ const launchParam = handler.getQuery();
541
+ (_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
542
+ app.onError && window.addEventListener('error', e => { var _a; return (_a = app.onError) === null || _a === void 0 ? void 0 : _a.call(app, e.message); });
543
+ const pathName = config.pageName;
544
+ const pageConfig = handler.pageConfig;
545
+ let element;
546
+ try {
547
+ element = yield ((_b = pageConfig.load) === null || _b === void 0 ? void 0 : _b.call(pageConfig));
548
+ }
549
+ catch (error) {
550
+ throw new Error(error);
551
+ }
552
+ if (!element)
553
+ return;
554
+ let enablePullDownRefresh = ((_c = config === null || config === void 0 ? void 0 : config.window) === null || _c === void 0 ? void 0 : _c.enablePullDownRefresh) || false;
555
+ eventCenter.trigger('__taroRouterChange', {
556
+ toLocation: {
557
+ path: pathName
558
+ }
559
+ });
560
+ if (pageConfig) {
561
+ document.title = (_d = pageConfig.navigationBarTitleText) !== null && _d !== void 0 ? _d : document.title;
562
+ if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
563
+ enablePullDownRefresh = pageConfig.enablePullDownRefresh;
564
+ }
565
+ }
566
+ const el = (_e = element.default) !== null && _e !== void 0 ? _e : element;
567
+ const loadConfig = Object.assign({}, pageConfig);
568
+ delete loadConfig['path'];
569
+ delete loadConfig['load'];
570
+ const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, location.pathname, framework, config.PullDownRefresh) : el, pathName + stringify(launchParam), {}, loadConfig);
571
+ handler.load(page, pageConfig);
572
+ (_f = app.onShow) === null || _f === void 0 ? void 0 : _f.call(app, launchParam);
573
+ });
574
+ }
575
+
576
+ /**
577
+ * 插入页面动画需要的样式
578
+ */
579
+ function loadAnimateStyle(ms = 300) {
580
+ const css = `
581
+ .taro_router .taro_page {
582
+ position: absolute;
583
+ left: 0;
584
+ top: 0;
585
+ width: 100%;
586
+ height: 100%;
587
+ background-color: #fff;
588
+ transform: translate(100%, 0);
589
+ transition: transform ${ms}ms;
590
+ z-index: 0;
591
+ }
592
+
593
+ .taro_router .taro_page.taro_tabbar_page,
594
+ .taro_router .taro_page.taro_page_show.taro_page_stationed {
595
+ transform: none;
596
+ }
597
+
598
+ .taro_router .taro_page.taro_page_show {
599
+ transform: translate(0, 0);
600
+ }`;
601
+ const style = document.createElement('style');
602
+ style.innerHTML = css;
603
+ document.getElementsByTagName('head')[0].appendChild(style);
604
+ }
605
+
606
+ /* eslint-disable dot-notation */
449
607
  function setDisplay(el, type = '') {
450
608
  if (el) {
451
609
  el.style.display = type;
@@ -508,7 +666,7 @@ class PageHandler {
508
666
  }
509
667
  return false;
510
668
  })) === null || _a === void 0 ? void 0 : _a[0]) || routePath;
511
- return !!pagePath && this.tabBarList.some(t => t.pagePath === pagePath);
669
+ return !!pagePath && this.tabBarList.some(t => stripTrailing(t.pagePath) === pagePath);
512
670
  }
513
671
  isSamePage(page) {
514
672
  const routePath = stripBasename(this.pathname, this.basename);
@@ -735,6 +893,7 @@ function createRouter(app, config, framework) {
735
893
  const router = new UniversalRouter(routes, { baseUrl: basename || '' });
736
894
  const launchParam = handler.getQuery(stacks.length);
737
895
  (_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
896
+ app.onError && window.addEventListener('error', e => { var _a; return (_a = app.onError) === null || _a === void 0 ? void 0 : _a.call(app, e.message); });
738
897
  const render = ({ location, action }) => __awaiter(this, void 0, void 0, function* () {
739
898
  var _c, _d, _e, _f;
740
899
  handler.pathname = decodeURI(location.pathname);
@@ -825,158 +984,5 @@ function createRouter(app, config, framework) {
825
984
  return history.listen(render);
826
985
  }
827
986
 
828
- class MultiPageHandler {
829
- constructor(config) {
830
- this.config = config;
831
- this.mount();
832
- }
833
- get appId() { return 'app'; }
834
- get router() { return this.config.router; }
835
- get routerMode() { return this.router.mode || 'hash'; }
836
- get customRoutes() { return this.router.customRoutes || {}; }
837
- get tabBarList() { var _a; return ((_a = this.config.tabBar) === null || _a === void 0 ? void 0 : _a.list) || []; }
838
- get PullDownRefresh() { return this.config.PullDownRefresh; }
839
- set pathname(p) { this.router.pathname = p; }
840
- get pathname() { return this.router.pathname; }
841
- get basename() { return this.router.basename || ''; }
842
- get pageConfig() { return this.config.route; }
843
- get isTabBar() {
844
- var _a;
845
- const routePath = stripBasename(this.pathname, this.basename);
846
- const pagePath = ((_a = Object.entries(this.customRoutes).find(([, target]) => {
847
- if (typeof target === 'string') {
848
- return target === routePath;
849
- }
850
- else if ((target === null || target === void 0 ? void 0 : target.length) > 0) {
851
- return target.includes(routePath);
852
- }
853
- return false;
854
- })) === null || _a === void 0 ? void 0 : _a[0]) || routePath;
855
- return !!pagePath && this.tabBarList.some(t => t.pagePath === pagePath);
856
- }
857
- get search() { return location.search.substr(1); }
858
- getQuery(search = '', options = {}) {
859
- search = search ? `${search}&${this.search}` : this.search;
860
- const query = search
861
- ? queryString.parse(search)
862
- : {};
863
- return Object.assign(Object.assign({}, query), options);
864
- }
865
- mount() {
866
- var _a;
867
- setHistoryMode(this.routerMode, this.router.basename);
868
- (_a = document.getElementById('app')) === null || _a === void 0 ? void 0 : _a.remove();
869
- const app = document.createElement('div');
870
- app.id = this.appId;
871
- app.classList.add('taro_router');
872
- if (this.tabBarList.length > 1) {
873
- const container = document.createElement('div');
874
- container.classList.add('taro-tabbar__container');
875
- container.id = 'container';
876
- const panel = document.createElement('div');
877
- panel.classList.add('taro-tabbar__panel');
878
- panel.appendChild(app);
879
- container.appendChild(panel);
880
- document.body.appendChild(container);
881
- initTabbar(this.config);
882
- }
883
- else {
884
- document.body.appendChild(app);
885
- }
886
- }
887
- onReady(page, onLoad = true) {
888
- var _a;
889
- const pageEl = this.getPageContainer(page);
890
- if (pageEl && !(pageEl === null || pageEl === void 0 ? void 0 : pageEl['__isReady'])) {
891
- const el = pageEl.firstElementChild;
892
- (_a = el === null || el === void 0 ? void 0 : el['componentOnReady']) === null || _a === void 0 ? void 0 : _a.call(el);
893
- onLoad && (pageEl['__page'] = page);
894
- }
895
- }
896
- load(page, pageConfig = {}) {
897
- var _a;
898
- if (!page)
899
- return;
900
- (_a = page.onLoad) === null || _a === void 0 ? void 0 : _a.call(page, this.getQuery('', page.options), () => {
901
- var _a;
902
- const pageEl = this.getPageContainer(page);
903
- this.isTabBar && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page'));
904
- this.onReady(page, true);
905
- (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
906
- this.bindPageEvents(page, pageEl, pageConfig);
907
- });
908
- }
909
- getPageContainer(page) {
910
- var _a;
911
- const path = page ? page === null || page === void 0 ? void 0 : page.path : (_a = Current.page) === null || _a === void 0 ? void 0 : _a.path;
912
- const id = path === null || path === void 0 ? void 0 : path.replace(/([^a-z0-9\u00a0-\uffff_-])/ig, '\\$1');
913
- if (page) {
914
- return document.querySelector(`.taro_page#${id}`);
915
- }
916
- const el = (id
917
- ? document.querySelector(`.taro_page#${id}`)
918
- : document.querySelector('.taro_page') ||
919
- document.querySelector('.taro_router'));
920
- return el || window;
921
- }
922
- bindPageEvents(page, pageEl, config = {}) {
923
- var _a;
924
- if (!pageEl) {
925
- pageEl = this.getPageContainer();
926
- }
927
- const distance = config.onReachBottomDistance || ((_a = this.config.window) === null || _a === void 0 ? void 0 : _a.onReachBottomDistance) || 50;
928
- bindPageScroll(page, pageEl, distance);
929
- bindPageResize(page);
930
- }
931
- }
932
-
933
- // TODO 支持多路由 (APP 生命周期仅触发一次)
934
- /** Note: 关于多页面应用
935
- * - 需要配置路由映射(根目录跳转、404 页面……)
936
- * - app.onPageNotFound 事件不支持
937
- * - 应用生命周期可能多次触发
938
- * - TabBar 会多次加载
939
- * - 不支持路由动画
940
- */
941
- function createMultiRouter(app, config, framework) {
942
- var _a, _b, _c, _d, _e, _f;
943
- return __awaiter(this, void 0, void 0, function* () {
944
- RouterConfig.config = config;
945
- const handler = new MultiPageHandler(config);
946
- const launchParam = handler.getQuery();
947
- (_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
948
- const pathName = config.pageName;
949
- const pageConfig = handler.pageConfig;
950
- let element;
951
- try {
952
- element = yield ((_b = pageConfig.load) === null || _b === void 0 ? void 0 : _b.call(pageConfig));
953
- }
954
- catch (error) {
955
- throw new Error(error);
956
- }
957
- if (!element)
958
- return;
959
- let enablePullDownRefresh = ((_c = config === null || config === void 0 ? void 0 : config.window) === null || _c === void 0 ? void 0 : _c.enablePullDownRefresh) || false;
960
- eventCenter.trigger('__taroRouterChange', {
961
- toLocation: {
962
- path: pathName
963
- }
964
- });
965
- if (pageConfig) {
966
- document.title = (_d = pageConfig.navigationBarTitleText) !== null && _d !== void 0 ? _d : document.title;
967
- if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
968
- enablePullDownRefresh = pageConfig.enablePullDownRefresh;
969
- }
970
- }
971
- const el = (_e = element.default) !== null && _e !== void 0 ? _e : element;
972
- const loadConfig = Object.assign({}, pageConfig);
973
- delete loadConfig['path'];
974
- delete loadConfig['load'];
975
- const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, location.pathname, framework, config.PullDownRefresh) : el, pathName + stringify(launchParam), {}, loadConfig);
976
- handler.load(page, pageConfig);
977
- (_f = app.onShow) === null || _f === void 0 ? void 0 : _f.call(app, launchParam);
978
- });
979
- }
980
-
981
987
  export { createMultiRouter, createRouter, getCurrentPages, history, navigateBack, navigateTo, reLaunch, redirectTo, switchTab };
982
988
  //# sourceMappingURL=index.esm.js.map