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

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,8 +1,33 @@
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;
@@ -169,31 +194,6 @@ function prependBasename(url = '') {
169
194
  return basename.replace(/\/$/, '') + '/' + url.replace(/^\//, '');
170
195
  }
171
196
 
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
197
  class Stacks {
198
198
  constructor() {
199
199
  this.stacks = [];
@@ -343,36 +343,6 @@ function getCurrentPages() {
343
343
  return pages.map(e => (Object.assign(Object.assign({}, e), { route: e.path || '' })));
344
344
  }
345
345
 
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
346
  let pageResizeFn;
377
347
  function bindPageResize(page) {
378
348
  pageResizeFn && window.removeEventListener('resize', pageResizeFn);
@@ -446,6 +416,189 @@ function initTabbar(config) {
446
416
  initTabBarApis(config);
447
417
  }
448
418
 
419
+ class MultiPageHandler {
420
+ constructor(config) {
421
+ this.config = config;
422
+ this.mount();
423
+ }
424
+ get appId() { return 'app'; }
425
+ get router() { return this.config.router; }
426
+ get routerMode() { return this.router.mode || 'hash'; }
427
+ get customRoutes() { return this.router.customRoutes || {}; }
428
+ get tabBarList() { var _a; return ((_a = this.config.tabBar) === null || _a === void 0 ? void 0 : _a.list) || []; }
429
+ get PullDownRefresh() { return this.config.PullDownRefresh; }
430
+ set pathname(p) { this.router.pathname = p; }
431
+ get pathname() { return this.router.pathname; }
432
+ get basename() { return this.router.basename || ''; }
433
+ get pageConfig() { return this.config.route; }
434
+ get isTabBar() {
435
+ var _a;
436
+ const routePath = stripBasename(this.pathname, this.basename);
437
+ const pagePath = ((_a = Object.entries(this.customRoutes).find(([, target]) => {
438
+ if (typeof target === 'string') {
439
+ return target === routePath;
440
+ }
441
+ else if ((target === null || target === void 0 ? void 0 : target.length) > 0) {
442
+ return target.includes(routePath);
443
+ }
444
+ return false;
445
+ })) === null || _a === void 0 ? void 0 : _a[0]) || routePath;
446
+ return !!pagePath && this.tabBarList.some(t => t.pagePath === pagePath);
447
+ }
448
+ get search() { return location.search.substr(1); }
449
+ getQuery(search = '', options = {}) {
450
+ search = search ? `${search}&${this.search}` : this.search;
451
+ const query = search
452
+ ? queryString.parse(search)
453
+ : {};
454
+ return Object.assign(Object.assign({}, query), options);
455
+ }
456
+ mount() {
457
+ var _a;
458
+ setHistoryMode(this.routerMode, this.router.basename);
459
+ (_a = document.getElementById('app')) === null || _a === void 0 ? void 0 : _a.remove();
460
+ const app = document.createElement('div');
461
+ app.id = this.appId;
462
+ app.classList.add('taro_router');
463
+ if (this.tabBarList.length > 1) {
464
+ const container = document.createElement('div');
465
+ container.classList.add('taro-tabbar__container');
466
+ container.id = 'container';
467
+ const panel = document.createElement('div');
468
+ panel.classList.add('taro-tabbar__panel');
469
+ panel.appendChild(app);
470
+ container.appendChild(panel);
471
+ document.body.appendChild(container);
472
+ initTabbar(this.config);
473
+ }
474
+ else {
475
+ document.body.appendChild(app);
476
+ }
477
+ }
478
+ onReady(page, onLoad = true) {
479
+ var _a;
480
+ const pageEl = this.getPageContainer(page);
481
+ if (pageEl && !(pageEl === null || pageEl === void 0 ? void 0 : pageEl['__isReady'])) {
482
+ const el = pageEl.firstElementChild;
483
+ (_a = el === null || el === void 0 ? void 0 : el['componentOnReady']) === null || _a === void 0 ? void 0 : _a.call(el);
484
+ onLoad && (pageEl['__page'] = page);
485
+ }
486
+ }
487
+ load(page, pageConfig = {}) {
488
+ var _a;
489
+ if (!page)
490
+ return;
491
+ (_a = page.onLoad) === null || _a === void 0 ? void 0 : _a.call(page, this.getQuery('', page.options), () => {
492
+ var _a;
493
+ const pageEl = this.getPageContainer(page);
494
+ this.isTabBar && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page'));
495
+ this.onReady(page, true);
496
+ (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
497
+ this.bindPageEvents(page, pageEl, pageConfig);
498
+ });
499
+ }
500
+ getPageContainer(page) {
501
+ var _a;
502
+ const path = page ? page === null || page === void 0 ? void 0 : page.path : (_a = Current.page) === null || _a === void 0 ? void 0 : _a.path;
503
+ const id = path === null || path === void 0 ? void 0 : path.replace(/([^a-z0-9\u00a0-\uffff_-])/ig, '\\$1');
504
+ if (page) {
505
+ return document.querySelector(`.taro_page#${id}`);
506
+ }
507
+ const el = (id
508
+ ? document.querySelector(`.taro_page#${id}`)
509
+ : document.querySelector('.taro_page') ||
510
+ document.querySelector('.taro_router'));
511
+ return el || window;
512
+ }
513
+ bindPageEvents(page, pageEl, config = {}) {
514
+ var _a;
515
+ if (!pageEl) {
516
+ pageEl = this.getPageContainer();
517
+ }
518
+ const distance = config.onReachBottomDistance || ((_a = this.config.window) === null || _a === void 0 ? void 0 : _a.onReachBottomDistance) || 50;
519
+ bindPageScroll(page, pageEl, distance);
520
+ bindPageResize(page);
521
+ }
522
+ }
523
+
524
+ // TODO 支持多路由 (APP 生命周期仅触发一次)
525
+ /** Note: 关于多页面应用
526
+ * - 需要配置路由映射(根目录跳转、404 页面……)
527
+ * - app.onPageNotFound 事件不支持
528
+ * - 应用生命周期可能多次触发
529
+ * - TabBar 会多次加载
530
+ * - 不支持路由动画
531
+ */
532
+ function createMultiRouter(app, config, framework) {
533
+ var _a, _b, _c, _d, _e, _f;
534
+ return __awaiter(this, void 0, void 0, function* () {
535
+ RouterConfig.config = config;
536
+ const handler = new MultiPageHandler(config);
537
+ const launchParam = handler.getQuery();
538
+ (_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
539
+ const pathName = config.pageName;
540
+ const pageConfig = handler.pageConfig;
541
+ let element;
542
+ try {
543
+ element = yield ((_b = pageConfig.load) === null || _b === void 0 ? void 0 : _b.call(pageConfig));
544
+ }
545
+ catch (error) {
546
+ throw new Error(error);
547
+ }
548
+ if (!element)
549
+ return;
550
+ let enablePullDownRefresh = ((_c = config === null || config === void 0 ? void 0 : config.window) === null || _c === void 0 ? void 0 : _c.enablePullDownRefresh) || false;
551
+ eventCenter.trigger('__taroRouterChange', {
552
+ toLocation: {
553
+ path: pathName
554
+ }
555
+ });
556
+ if (pageConfig) {
557
+ document.title = (_d = pageConfig.navigationBarTitleText) !== null && _d !== void 0 ? _d : document.title;
558
+ if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
559
+ enablePullDownRefresh = pageConfig.enablePullDownRefresh;
560
+ }
561
+ }
562
+ const el = (_e = element.default) !== null && _e !== void 0 ? _e : element;
563
+ const loadConfig = Object.assign({}, pageConfig);
564
+ delete loadConfig['path'];
565
+ delete loadConfig['load'];
566
+ const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, location.pathname, framework, config.PullDownRefresh) : el, pathName + stringify(launchParam), {}, loadConfig);
567
+ handler.load(page, pageConfig);
568
+ (_f = app.onShow) === null || _f === void 0 ? void 0 : _f.call(app, launchParam);
569
+ });
570
+ }
571
+
572
+ /**
573
+ * 插入页面动画需要的样式
574
+ */
575
+ function loadAnimateStyle(ms = 300) {
576
+ const css = `
577
+ .taro_router .taro_page {
578
+ position: absolute;
579
+ left: 0;
580
+ top: 0;
581
+ width: 100%;
582
+ height: 100%;
583
+ background-color: #fff;
584
+ transform: translate(100%, 0);
585
+ transition: transform ${ms}ms;
586
+ z-index: 0;
587
+ }
588
+
589
+ .taro_router .taro_page.taro_tabbar_page,
590
+ .taro_router .taro_page.taro_page_show.taro_page_stationed {
591
+ transform: none;
592
+ }
593
+
594
+ .taro_router .taro_page.taro_page_show {
595
+ transform: translate(0, 0);
596
+ }`;
597
+ const style = document.createElement('style');
598
+ style.innerHTML = css;
599
+ document.getElementsByTagName('head')[0].appendChild(style);
600
+ }
601
+
449
602
  function setDisplay(el, type = '') {
450
603
  if (el) {
451
604
  el.style.display = type;
@@ -825,158 +978,5 @@ function createRouter(app, config, framework) {
825
978
  return history.listen(render);
826
979
  }
827
980
 
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
981
  export { createMultiRouter, createRouter, getCurrentPages, history, navigateBack, navigateTo, reLaunch, redirectTo, switchTab };
982
982
  //# sourceMappingURL=index.esm.js.map