@umijs/renderer-react 3.5.19 → 4.0.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 DELETED
@@ -1,691 +0,0 @@
1
- import { __RouterContext, matchPath, Redirect, ApplyPluginsType, Router } from '@umijs/runtime';
2
- import React, { Children, isValidElement, cloneElement, useState, useEffect, createElement } from 'react';
3
- import { hydrate, render } from 'react-dom';
4
- import { matchRoutes } from 'react-router-config';
5
-
6
- function ownKeys(object, enumerableOnly) {
7
- var keys = Object.keys(object);
8
-
9
- if (Object.getOwnPropertySymbols) {
10
- var symbols = Object.getOwnPropertySymbols(object);
11
-
12
- if (enumerableOnly) {
13
- symbols = symbols.filter(function (sym) {
14
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
15
- });
16
- }
17
-
18
- keys.push.apply(keys, symbols);
19
- }
20
-
21
- return keys;
22
- }
23
-
24
- function _objectSpread2(target) {
25
- for (var i = 1; i < arguments.length; i++) {
26
- var source = arguments[i] != null ? arguments[i] : {};
27
-
28
- if (i % 2) {
29
- ownKeys(Object(source), true).forEach(function (key) {
30
- _defineProperty(target, key, source[key]);
31
- });
32
- } else if (Object.getOwnPropertyDescriptors) {
33
- Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
34
- } else {
35
- ownKeys(Object(source)).forEach(function (key) {
36
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
37
- });
38
- }
39
- }
40
-
41
- return target;
42
- }
43
-
44
- function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
45
- try {
46
- var info = gen[key](arg);
47
- var value = info.value;
48
- } catch (error) {
49
- reject(error);
50
- return;
51
- }
52
-
53
- if (info.done) {
54
- resolve(value);
55
- } else {
56
- Promise.resolve(value).then(_next, _throw);
57
- }
58
- }
59
-
60
- function _asyncToGenerator(fn) {
61
- return function () {
62
- var self = this,
63
- args = arguments;
64
- return new Promise(function (resolve, reject) {
65
- var gen = fn.apply(self, args);
66
-
67
- function _next(value) {
68
- asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
69
- }
70
-
71
- function _throw(err) {
72
- asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
73
- }
74
-
75
- _next(undefined);
76
- });
77
- };
78
- }
79
-
80
- function _defineProperty(obj, key, value) {
81
- if (key in obj) {
82
- Object.defineProperty(obj, key, {
83
- value: value,
84
- enumerable: true,
85
- configurable: true,
86
- writable: true
87
- });
88
- } else {
89
- obj[key] = value;
90
- }
91
-
92
- return obj;
93
- }
94
-
95
- function _extends() {
96
- _extends = Object.assign || function (target) {
97
- for (var i = 1; i < arguments.length; i++) {
98
- var source = arguments[i];
99
-
100
- for (var key in source) {
101
- if (Object.prototype.hasOwnProperty.call(source, key)) {
102
- target[key] = source[key];
103
- }
104
- }
105
- }
106
-
107
- return target;
108
- };
109
-
110
- return _extends.apply(this, arguments);
111
- }
112
-
113
- function _objectWithoutPropertiesLoose(source, excluded) {
114
- if (source == null) return {};
115
- var target = {};
116
- var sourceKeys = Object.keys(source);
117
- var key, i;
118
-
119
- for (i = 0; i < sourceKeys.length; i++) {
120
- key = sourceKeys[i];
121
- if (excluded.indexOf(key) >= 0) continue;
122
- target[key] = source[key];
123
- }
124
-
125
- return target;
126
- }
127
-
128
- function _objectWithoutProperties(source, excluded) {
129
- if (source == null) return {};
130
-
131
- var target = _objectWithoutPropertiesLoose(source, excluded);
132
-
133
- var key, i;
134
-
135
- if (Object.getOwnPropertySymbols) {
136
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
137
-
138
- for (i = 0; i < sourceSymbolKeys.length; i++) {
139
- key = sourceSymbolKeys[i];
140
- if (excluded.indexOf(key) >= 0) continue;
141
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
142
- target[key] = source[key];
143
- }
144
- }
145
-
146
- return target;
147
- }
148
-
149
- function _slicedToArray(arr, i) {
150
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
151
- }
152
-
153
- function _arrayWithHoles(arr) {
154
- if (Array.isArray(arr)) return arr;
155
- }
156
-
157
- function _iterableToArrayLimit(arr, i) {
158
- var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
159
-
160
- if (_i == null) return;
161
- var _arr = [];
162
- var _n = true;
163
- var _d = false;
164
-
165
- var _s, _e;
166
-
167
- try {
168
- for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
169
- _arr.push(_s.value);
170
-
171
- if (i && _arr.length === i) break;
172
- }
173
- } catch (err) {
174
- _d = true;
175
- _e = err;
176
- } finally {
177
- try {
178
- if (!_n && _i["return"] != null) _i["return"]();
179
- } finally {
180
- if (_d) throw _e;
181
- }
182
- }
183
-
184
- return _arr;
185
- }
186
-
187
- function _unsupportedIterableToArray(o, minLen) {
188
- if (!o) return;
189
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
190
- var n = Object.prototype.toString.call(o).slice(8, -1);
191
- if (n === "Object" && o.constructor) n = o.constructor.name;
192
- if (n === "Map" || n === "Set") return Array.from(o);
193
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
194
- }
195
-
196
- function _arrayLikeToArray(arr, len) {
197
- if (len == null || len > arr.length) len = arr.length;
198
-
199
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
200
-
201
- return arr2;
202
- }
203
-
204
- function _nonIterableRest() {
205
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
206
- }
207
-
208
- function _createForOfIteratorHelper(o, allowArrayLike) {
209
- var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
210
-
211
- if (!it) {
212
- if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
213
- if (it) o = it;
214
- var i = 0;
215
-
216
- var F = function () {};
217
-
218
- return {
219
- s: F,
220
- n: function () {
221
- if (i >= o.length) return {
222
- done: true
223
- };
224
- return {
225
- done: false,
226
- value: o[i++]
227
- };
228
- },
229
- e: function (e) {
230
- throw e;
231
- },
232
- f: F
233
- };
234
- }
235
-
236
- throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
237
- }
238
-
239
- var normalCompletion = true,
240
- didErr = false,
241
- err;
242
- return {
243
- s: function () {
244
- it = it.call(o);
245
- },
246
- n: function () {
247
- var step = it.next();
248
- normalCompletion = step.done;
249
- return step;
250
- },
251
- e: function (e) {
252
- didErr = true;
253
- err = e;
254
- },
255
- f: function () {
256
- try {
257
- if (!normalCompletion && it.return != null) it.return();
258
- } finally {
259
- if (didErr) throw err;
260
- }
261
- }
262
- };
263
- }
264
-
265
- function Route(props) {
266
- return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, function (context) {
267
- var location = props.location || context.location;
268
- var match = props.computedMatch;
269
-
270
- var newProps = _objectSpread2(_objectSpread2({}, context), {}, {
271
- location: location,
272
- match: match
273
- });
274
-
275
- var render = props.render;
276
- return /*#__PURE__*/React.createElement(__RouterContext.Provider, {
277
- value: newProps
278
- }, newProps.match ? render(_objectSpread2(_objectSpread2({}, props.layoutProps), newProps)) : null);
279
- });
280
- }
281
-
282
- var _excluded = ["children"];
283
- function Switch(props) {
284
- return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, function (context) {
285
- var children = props.children,
286
- extraProps = _objectWithoutProperties(props, _excluded);
287
-
288
- var location = props.location || context.location;
289
- var element,
290
- match = null;
291
- Children.forEach(children, function (child) {
292
- if (match === null && /*#__PURE__*/isValidElement(child)) {
293
- element = child;
294
- var path = child.props.path || child.props.from;
295
- match = path ? matchPath(location.pathname, _objectSpread2(_objectSpread2({}, child.props), {}, {
296
- path: path
297
- })) : context.match;
298
- }
299
- });
300
- return match ? /*#__PURE__*/cloneElement(element, {
301
- location: location,
302
- computedMatch: match,
303
- layoutProps: extraProps
304
- }) : null;
305
- });
306
- }
307
-
308
- var _excluded$1 = ["component"];
309
-
310
- function wrapInitialPropsFetch(route, opts) {
311
- var component = route.component,
312
- restRouteParams = _objectWithoutProperties(route, _excluded$1);
313
-
314
- var Component = route.component;
315
-
316
- function ComponentWithInitialPropsFetch(props) {
317
- var _useState = useState(function () {
318
- return window.g_initialProps;
319
- }),
320
- _useState2 = _slicedToArray(_useState, 2),
321
- initialProps = _useState2[0],
322
- setInitialProps = _useState2[1];
323
-
324
- useEffect(function () {
325
- /**
326
- * 1. 首次渲染时,此时 window.g_initialProps 变量存在,不需要再走一次 getInitialProps,这样一次 SSR 就走了 2 次 getInitialProps
327
- * 2. 但是路由切换时,window.getInitialProps 会被赋为 null,这时候就走 getInitialProps 逻辑
328
- * 3. 如果任何时候都走 2 次,配置 forceInitial: true,这个场景用于静态站点的首屏加载希望走最新数据
329
- * 4. 开启动态加载后,会在执行 getInitialProps 前预加载下
330
- */
331
- var handleGetInitialProps = /*#__PURE__*/function () {
332
- var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
333
- var _preloadComponent;
334
-
335
- var preloadComponent, defaultCtx, ctx, _initialProps;
336
-
337
- return regeneratorRuntime.wrap(function _callee$(_context) {
338
- while (1) {
339
- switch (_context.prev = _context.next) {
340
- case 0:
341
- // preload when enalbe dynamicImport
342
- preloadComponent = Component;
343
-
344
- if (!Component.preload) {
345
- _context.next = 6;
346
- break;
347
- }
348
-
349
- _context.next = 4;
350
- return Component.preload();
351
-
352
- case 4:
353
- preloadComponent = _context.sent;
354
- // for test case, really use .default
355
- preloadComponent = preloadComponent.default || preloadComponent;
356
-
357
- case 6:
358
- defaultCtx = _objectSpread2(_objectSpread2({
359
- isServer: false,
360
- match: props === null || props === void 0 ? void 0 : props.match,
361
- history: props === null || props === void 0 ? void 0 : props.history,
362
- route: route
363
- }, opts.getInitialPropsCtx || {}), restRouteParams);
364
-
365
- if (!((_preloadComponent = preloadComponent) === null || _preloadComponent === void 0 ? void 0 : _preloadComponent.getInitialProps)) {
366
- _context.next = 15;
367
- break;
368
- }
369
-
370
- _context.next = 10;
371
- return opts.plugin.applyPlugins({
372
- key: 'ssr.modifyGetInitialPropsCtx',
373
- type: ApplyPluginsType.modify,
374
- initialValue: defaultCtx,
375
- async: true
376
- });
377
-
378
- case 10:
379
- ctx = _context.sent;
380
- _context.next = 13;
381
- return preloadComponent.getInitialProps(ctx || defaultCtx);
382
-
383
- case 13:
384
- _initialProps = _context.sent;
385
- setInitialProps(_initialProps);
386
-
387
- case 15:
388
- case "end":
389
- return _context.stop();
390
- }
391
- }
392
- }, _callee);
393
- }));
394
-
395
- return function handleGetInitialProps() {
396
- return _ref.apply(this, arguments);
397
- };
398
- }(); // null 时,一定会触发 getInitialProps 执行
399
-
400
-
401
- if (!window.g_initialProps) {
402
- handleGetInitialProps();
403
- }
404
- }, [window.location.pathname, window.location.search]);
405
- return /*#__PURE__*/React.createElement(Component, _extends({}, props, initialProps));
406
- } // flag for having wrappered
407
-
408
-
409
- ComponentWithInitialPropsFetch.wrapInitialPropsLoaded = true;
410
- ComponentWithInitialPropsFetch.displayName = 'ComponentWithInitialPropsFetch';
411
- return ComponentWithInitialPropsFetch;
412
- }
413
-
414
- function _render(_ref2) {
415
- var route = _ref2.route,
416
- opts = _ref2.opts,
417
- props = _ref2.props;
418
- var routes = renderRoutes(_objectSpread2(_objectSpread2({}, opts), {}, {
419
- routes: route.routes || [],
420
- rootRoutes: opts.rootRoutes
421
- }), {
422
- location: props.location
423
- });
424
- var Component = route.component,
425
- wrappers = route.wrappers;
426
-
427
- if (Component) {
428
- var defaultPageInitialProps = opts.isServer ? {} : window.g_initialProps;
429
-
430
- var newProps = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, props), opts.extraProps), opts.pageInitialProps || defaultPageInitialProps), {}, {
431
- route: route,
432
- routes: opts.rootRoutes
433
- }); // @ts-ignore
434
-
435
-
436
- var ret = /*#__PURE__*/React.createElement(Component, newProps, routes); // route.wrappers
437
-
438
- if (wrappers) {
439
- var len = wrappers.length - 1;
440
-
441
- while (len >= 0) {
442
- ret = /*#__PURE__*/createElement(wrappers[len], newProps, ret);
443
- len -= 1;
444
- }
445
- }
446
-
447
- return ret;
448
- } else {
449
- return routes;
450
- }
451
- }
452
-
453
- function getRouteElement(_ref3) {
454
- var route = _ref3.route,
455
- index = _ref3.index,
456
- opts = _ref3.opts;
457
- var routeProps = {
458
- key: route.key || index,
459
- exact: route.exact,
460
- strict: route.strict,
461
- sensitive: route.sensitive,
462
- path: route.path
463
- };
464
-
465
- if (route.redirect) {
466
- return /*#__PURE__*/React.createElement(Redirect, _extends({}, routeProps, {
467
- from: route.path,
468
- to: route.redirect
469
- }));
470
- } else {
471
- var _route$component, _route$component2, _route$component3;
472
-
473
- // avoid mount and unmount with url hash change
474
- if ( // only when SSR config enable
475
- opts.ssrProps && !opts.isServer && // make sure loaded once
476
- !((_route$component = route.component) === null || _route$component === void 0 ? void 0 : _route$component.wrapInitialPropsLoaded) && ( // TODO need a type
477
- ((_route$component2 = route.component) === null || _route$component2 === void 0 ? void 0 : _route$component2.getInitialProps) || ((_route$component3 = route.component) === null || _route$component3 === void 0 ? void 0 : _route$component3.preload))) {
478
- // client Render for enable ssr, but not sure SSR success
479
- route.component = wrapInitialPropsFetch(route, opts);
480
- }
481
-
482
- return /*#__PURE__*/React.createElement(Route, _extends({}, routeProps, {
483
- render: function render(props) {
484
- return _render({
485
- route: route,
486
- opts: opts,
487
- props: props
488
- });
489
- }
490
- }));
491
- }
492
- }
493
-
494
- function renderRoutes(opts) {
495
- var switchProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
496
- return opts.routes ? /*#__PURE__*/React.createElement(Switch, switchProps, opts.routes.map(function (route, index) {
497
- return getRouteElement({
498
- route: route,
499
- index: index,
500
- opts: _objectSpread2(_objectSpread2({}, opts), {}, {
501
- rootRoutes: opts.rootRoutes || opts.routes
502
- })
503
- });
504
- })) : null;
505
- }
506
-
507
- var _excluded$2 = ["history"];
508
-
509
- function RouterComponent(props) {
510
- var history = props.history,
511
- renderRoutesProps = _objectWithoutProperties(props, _excluded$2);
512
-
513
- useEffect(function () {
514
- // first time using window.g_initialProps
515
- // switch route fetching data, if exact route reset window.getInitialProps
516
- if (window.g_useSSR) {
517
- window.g_initialProps = null;
518
- }
519
-
520
- function routeChangeHandler(location, action) {
521
- var matchedRoutes = matchRoutes(props.routes, location.pathname); // Set title
522
-
523
- if (typeof document !== 'undefined' && renderRoutesProps.defaultTitle !== undefined) {
524
- document.title = matchedRoutes.length && // @ts-ignore
525
- matchedRoutes[matchedRoutes.length - 1].route.title || renderRoutesProps.defaultTitle || '';
526
- }
527
-
528
- props.plugin.applyPlugins({
529
- key: 'onRouteChange',
530
- type: ApplyPluginsType.event,
531
- args: {
532
- routes: props.routes,
533
- matchedRoutes: matchedRoutes,
534
- location: location,
535
- action: action
536
- }
537
- });
538
- }
539
-
540
- routeChangeHandler(history.location, 'POP');
541
- return history.listen(routeChangeHandler);
542
- }, [history]);
543
- return /*#__PURE__*/React.createElement(Router, {
544
- history: history
545
- }, renderRoutes(renderRoutesProps));
546
- }
547
- /**
548
- * preload for SSR in dynamicImport
549
- * exec preload Promise function before ReactDOM.hydrate
550
- * @param Routes
551
- */
552
-
553
-
554
- function preloadComponent(_x) {
555
- return _preloadComponent.apply(this, arguments);
556
- }
557
-
558
- function _preloadComponent() {
559
- _preloadComponent = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(readyRoutes) {
560
- var pathname,
561
- matchedRoutes,
562
- _iterator,
563
- _step,
564
- _route$component,
565
- matchRoute,
566
- route,
567
- _preloadComponent2,
568
- _args = arguments;
569
-
570
- return regeneratorRuntime.wrap(function _callee$(_context) {
571
- while (1) {
572
- switch (_context.prev = _context.next) {
573
- case 0:
574
- pathname = _args.length > 1 && _args[1] !== undefined ? _args[1] : window.location.pathname;
575
- // using matched routes not load all routes
576
- matchedRoutes = matchRoutes(readyRoutes, pathname);
577
- _iterator = _createForOfIteratorHelper(matchedRoutes);
578
- _context.prev = 3;
579
-
580
- _iterator.s();
581
-
582
- case 5:
583
- if ((_step = _iterator.n()).done) {
584
- _context.next = 19;
585
- break;
586
- }
587
-
588
- matchRoute = _step.value;
589
- route = matchRoute.route; // load all preload function, because of only a chance to load
590
-
591
- if (!(typeof route.component !== 'string' && ((_route$component = route.component) === null || _route$component === void 0 ? void 0 : _route$component.preload))) {
592
- _context.next = 13;
593
- break;
594
- }
595
-
596
- _context.next = 11;
597
- return route.component.preload();
598
-
599
- case 11:
600
- _preloadComponent2 = _context.sent;
601
- route.component = _preloadComponent2.default || _preloadComponent2;
602
-
603
- case 13:
604
- if (!route.routes) {
605
- _context.next = 17;
606
- break;
607
- }
608
-
609
- _context.next = 16;
610
- return preloadComponent(route.routes, pathname);
611
-
612
- case 16:
613
- route.routes = _context.sent;
614
-
615
- case 17:
616
- _context.next = 5;
617
- break;
618
-
619
- case 19:
620
- _context.next = 24;
621
- break;
622
-
623
- case 21:
624
- _context.prev = 21;
625
- _context.t0 = _context["catch"](3);
626
-
627
- _iterator.e(_context.t0);
628
-
629
- case 24:
630
- _context.prev = 24;
631
-
632
- _iterator.f();
633
-
634
- return _context.finish(24);
635
-
636
- case 27:
637
- return _context.abrupt("return", readyRoutes);
638
-
639
- case 28:
640
- case "end":
641
- return _context.stop();
642
- }
643
- }
644
- }, _callee, null, [[3, 21, 24, 27]]);
645
- }));
646
- return _preloadComponent.apply(this, arguments);
647
- }
648
-
649
- function renderClient(opts) {
650
- var rootContainer = opts.plugin.applyPlugins({
651
- type: ApplyPluginsType.modify,
652
- key: 'rootContainer',
653
- initialValue: /*#__PURE__*/React.createElement(RouterComponent, {
654
- history: opts.history,
655
- routes: opts.routes,
656
- plugin: opts.plugin,
657
- ssrProps: opts.ssrProps,
658
- defaultTitle: opts.defaultTitle
659
- }),
660
- args: {
661
- history: opts.history,
662
- routes: opts.routes,
663
- plugin: opts.plugin
664
- }
665
- });
666
-
667
- if (opts.rootElement) {
668
- var rootElement = typeof opts.rootElement === 'string' ? document.getElementById(opts.rootElement) : opts.rootElement;
669
-
670
- var callback = opts.callback || function () {}; // flag showing SSR successed
671
-
672
-
673
- if (window.g_useSSR) {
674
- if (opts.dynamicImport) {
675
- // dynamicImport should preload current route component
676
- // first loades);
677
- preloadComponent(opts.routes).then(function () {
678
- hydrate(rootContainer, rootElement, callback);
679
- });
680
- } else {
681
- hydrate(rootContainer, rootElement, callback);
682
- }
683
- } else {
684
- render(rootContainer, rootElement, callback);
685
- }
686
- } else {
687
- return rootContainer;
688
- }
689
- }
690
-
691
- export { renderClient, renderRoutes };
@@ -1,23 +0,0 @@
1
- import { Plugin } from '@umijs/runtime';
2
- import { IRoute } from '..';
3
- interface IRouterComponentProps {
4
- routes: IRoute[];
5
- plugin: Plugin;
6
- history: any;
7
- ssrProps?: object;
8
- defaultTitle?: string;
9
- dynamicImport?: boolean;
10
- isServer?: boolean;
11
- }
12
- interface IOpts extends IRouterComponentProps {
13
- rootElement?: string | HTMLElement;
14
- callback?: () => void;
15
- }
16
- /**
17
- * preload for SSR in dynamicImport
18
- * exec preload Promise function before ReactDOM.hydrate
19
- * @param Routes
20
- */
21
- export declare function preloadComponent(readyRoutes: IRoute[], pathname?: string): Promise<IRoute[]>;
22
- export default function renderClient(opts: IOpts): any;
23
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- export default function Route(props: any): JSX.Element;