@tramvai/module-page-render-mode 1.73.0 → 1.75.1
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/README.md +24 -6
- package/lib/index.d.ts +0 -1
- package/lib/index.es.js +25 -7
- package/lib/index.js +24 -5
- package/lib/tokens.d.ts +6 -2
- package/package.json +6 -6
- package/lib/types.d.ts +0 -1
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@ Enable different rendering modes for specific pages:
|
|
|
10
10
|
|
|
11
11
|
Client mode - render only fallback for page component, then render full page on browser, after hydration.
|
|
12
12
|
This mode can significally improve server rendering performance, but not recommended for pages with high SEO impact.
|
|
13
|
-
Header and Footer will be rendered as usual.
|
|
13
|
+
By default, Header and Footer will be rendered as usual.
|
|
14
14
|
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
@@ -41,13 +41,13 @@ You can change this mode for all pages or for specific pages only.
|
|
|
41
41
|
|
|
42
42
|
#### Default mode
|
|
43
43
|
|
|
44
|
-
For global rendering mode changing, use token `
|
|
44
|
+
For global rendering mode changing, use token `TRAMVAI_RENDER_MODE` from `@tramvai/tokens-render`:
|
|
45
45
|
|
|
46
46
|
```ts
|
|
47
|
-
import {
|
|
47
|
+
import { TRAMVAI_RENDER_MODE } from '@tramvai/tokens-render';
|
|
48
48
|
|
|
49
49
|
const provider = {
|
|
50
|
-
provide:
|
|
50
|
+
provide: TRAMVAI_RENDER_MODE,
|
|
51
51
|
useValue: 'client',
|
|
52
52
|
};
|
|
53
53
|
```
|
|
@@ -89,7 +89,7 @@ You can set default fallback for all pages with `client` render mode, or only fo
|
|
|
89
89
|
|
|
90
90
|
#### Default fallback
|
|
91
91
|
|
|
92
|
-
For setting default fallback, use token `
|
|
92
|
+
For setting default fallback, use token `PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT`:
|
|
93
93
|
|
|
94
94
|
```tsx
|
|
95
95
|
import { PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT } from '@tramvai/module-page-render-mode';
|
|
@@ -149,9 +149,27 @@ For specific pages available few options:
|
|
|
149
149
|
pageRenderFallbackComponent: 'myOwnFallbackComponent',
|
|
150
150
|
},
|
|
151
151
|
},
|
|
152
|
-
]
|
|
152
|
+
];
|
|
153
153
|
```
|
|
154
154
|
|
|
155
|
+
## How-to
|
|
156
|
+
|
|
157
|
+
### How to prevent Header and Footer Rendering
|
|
158
|
+
|
|
159
|
+
By default, Header and Footer will be rendered as usual, because this module provide Page component wrapper.
|
|
160
|
+
If you want to make less work on server, use token `PAGE_RENDER_WRAPPER_TYPE` with `layout` or `content` value, e.g.:
|
|
161
|
+
|
|
162
|
+
```ts
|
|
163
|
+
const providers = [
|
|
164
|
+
{
|
|
165
|
+
provide: PAGE_RENDER_WRAPPER_TYPE,
|
|
166
|
+
useValue: 'layout',
|
|
167
|
+
},
|
|
168
|
+
];
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
With `client` rendering mode, all layout will be rendered in browser.
|
|
172
|
+
|
|
155
173
|
## Troubleshooting
|
|
156
174
|
|
|
157
175
|
### Fallback name conflicts
|
package/lib/index.d.ts
CHANGED
package/lib/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
2
|
import { Module } from '@tramvai/core';
|
|
3
|
-
import { LAYOUT_OPTIONS } from '@tramvai/tokens-render';
|
|
3
|
+
import { LAYOUT_OPTIONS, TRAMVAI_RENDER_MODE } from '@tramvai/tokens-render';
|
|
4
4
|
import React, { useState, useEffect } from 'react';
|
|
5
5
|
import { useDi } from '@tramvai/react';
|
|
6
6
|
import { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
|
|
@@ -8,7 +8,11 @@ import { useRoute } from '@tramvai/module-router';
|
|
|
8
8
|
import { createToken } from '@tinkoff/dippy';
|
|
9
9
|
|
|
10
10
|
const PAGE_RENDER_FALLBACK_COMPONENT_PREFIX = createToken('pageRenderFallbackComponentName');
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated Use token `TRAMVAI_RENDER_MODE` from `@tramvai/tokens-render`
|
|
13
|
+
*/
|
|
11
14
|
const PAGE_RENDER_DEFAULT_MODE = createToken('pageRenderDefaultMode');
|
|
15
|
+
const PAGE_RENDER_WRAPPER_TYPE = createToken('pageRenderWrapperType');
|
|
12
16
|
const PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT = createToken('pageRenderDefaultFallbackComponent');
|
|
13
17
|
|
|
14
18
|
const PageRenderWrapper = ({ children }) => {
|
|
@@ -52,10 +56,15 @@ PageRenderModeModule = __decorate([
|
|
|
52
56
|
{
|
|
53
57
|
provide: LAYOUT_OPTIONS,
|
|
54
58
|
multi: true,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
+
useFactory: ({ wrapperType }) => {
|
|
60
|
+
return {
|
|
61
|
+
wrappers: {
|
|
62
|
+
[wrapperType]: pageRenderHOC,
|
|
63
|
+
},
|
|
64
|
+
};
|
|
65
|
+
},
|
|
66
|
+
deps: {
|
|
67
|
+
wrapperType: PAGE_RENDER_WRAPPER_TYPE,
|
|
59
68
|
},
|
|
60
69
|
},
|
|
61
70
|
{
|
|
@@ -64,10 +73,19 @@ PageRenderModeModule = __decorate([
|
|
|
64
73
|
},
|
|
65
74
|
{
|
|
66
75
|
provide: PAGE_RENDER_DEFAULT_MODE,
|
|
67
|
-
|
|
76
|
+
useFactory: ({ tramvaiRenderMode }) => {
|
|
77
|
+
return tramvaiRenderMode;
|
|
78
|
+
},
|
|
79
|
+
deps: {
|
|
80
|
+
tramvaiRenderMode: TRAMVAI_RENDER_MODE,
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
provide: PAGE_RENDER_WRAPPER_TYPE,
|
|
85
|
+
useValue: 'page',
|
|
68
86
|
},
|
|
69
87
|
],
|
|
70
88
|
})
|
|
71
89
|
], PageRenderModeModule);
|
|
72
90
|
|
|
73
|
-
export { PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT, PAGE_RENDER_DEFAULT_MODE, PAGE_RENDER_FALLBACK_COMPONENT_PREFIX, PageRenderModeModule };
|
|
91
|
+
export { PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT, PAGE_RENDER_DEFAULT_MODE, PAGE_RENDER_FALLBACK_COMPONENT_PREFIX, PAGE_RENDER_WRAPPER_TYPE, PageRenderModeModule };
|
package/lib/index.js
CHANGED
|
@@ -16,7 +16,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
16
16
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
17
17
|
|
|
18
18
|
const PAGE_RENDER_FALLBACK_COMPONENT_PREFIX = dippy.createToken('pageRenderFallbackComponentName');
|
|
19
|
+
/**
|
|
20
|
+
* @deprecated Use token `TRAMVAI_RENDER_MODE` from `@tramvai/tokens-render`
|
|
21
|
+
*/
|
|
19
22
|
const PAGE_RENDER_DEFAULT_MODE = dippy.createToken('pageRenderDefaultMode');
|
|
23
|
+
const PAGE_RENDER_WRAPPER_TYPE = dippy.createToken('pageRenderWrapperType');
|
|
20
24
|
const PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT = dippy.createToken('pageRenderDefaultFallbackComponent');
|
|
21
25
|
|
|
22
26
|
const PageRenderWrapper = ({ children }) => {
|
|
@@ -60,10 +64,15 @@ exports.PageRenderModeModule = tslib.__decorate([
|
|
|
60
64
|
{
|
|
61
65
|
provide: tokensRender.LAYOUT_OPTIONS,
|
|
62
66
|
multi: true,
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
+
useFactory: ({ wrapperType }) => {
|
|
68
|
+
return {
|
|
69
|
+
wrappers: {
|
|
70
|
+
[wrapperType]: pageRenderHOC,
|
|
71
|
+
},
|
|
72
|
+
};
|
|
73
|
+
},
|
|
74
|
+
deps: {
|
|
75
|
+
wrapperType: PAGE_RENDER_WRAPPER_TYPE,
|
|
67
76
|
},
|
|
68
77
|
},
|
|
69
78
|
{
|
|
@@ -72,7 +81,16 @@ exports.PageRenderModeModule = tslib.__decorate([
|
|
|
72
81
|
},
|
|
73
82
|
{
|
|
74
83
|
provide: PAGE_RENDER_DEFAULT_MODE,
|
|
75
|
-
|
|
84
|
+
useFactory: ({ tramvaiRenderMode }) => {
|
|
85
|
+
return tramvaiRenderMode;
|
|
86
|
+
},
|
|
87
|
+
deps: {
|
|
88
|
+
tramvaiRenderMode: tokensRender.TRAMVAI_RENDER_MODE,
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
provide: PAGE_RENDER_WRAPPER_TYPE,
|
|
93
|
+
useValue: 'page',
|
|
76
94
|
},
|
|
77
95
|
],
|
|
78
96
|
})
|
|
@@ -81,3 +99,4 @@ exports.PageRenderModeModule = tslib.__decorate([
|
|
|
81
99
|
exports.PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT = PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT;
|
|
82
100
|
exports.PAGE_RENDER_DEFAULT_MODE = PAGE_RENDER_DEFAULT_MODE;
|
|
83
101
|
exports.PAGE_RENDER_FALLBACK_COMPONENT_PREFIX = PAGE_RENDER_FALLBACK_COMPONENT_PREFIX;
|
|
102
|
+
exports.PAGE_RENDER_WRAPPER_TYPE = PAGE_RENDER_WRAPPER_TYPE;
|
package/lib/tokens.d.ts
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import type { ComponentType } from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { TramvaiRenderMode } from '@tramvai/tokens-render';
|
|
3
3
|
export declare const PAGE_RENDER_FALLBACK_COMPONENT_PREFIX: string;
|
|
4
|
-
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use token `TRAMVAI_RENDER_MODE` from `@tramvai/tokens-render`
|
|
6
|
+
*/
|
|
7
|
+
export declare const PAGE_RENDER_DEFAULT_MODE: TramvaiRenderMode;
|
|
8
|
+
export declare const PAGE_RENDER_WRAPPER_TYPE: "layout" | "content" | "page";
|
|
5
9
|
export declare const PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT: ComponentType<any>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tramvai/module-page-render-mode",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.75.1",
|
|
4
4
|
"description": "Enable different rendering modes for pages",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib/index.es.js",
|
|
@@ -25,11 +25,11 @@
|
|
|
25
25
|
"dependencies": {},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"@tinkoff/dippy": "0.7.38",
|
|
28
|
-
"@tramvai/core": "1.
|
|
29
|
-
"@tramvai/react": "1.
|
|
30
|
-
"@tramvai/module-router": "1.
|
|
31
|
-
"@tramvai/tokens-render": "1.
|
|
32
|
-
"@tramvai/tokens-router": "1.
|
|
28
|
+
"@tramvai/core": "1.75.1",
|
|
29
|
+
"@tramvai/react": "1.75.1",
|
|
30
|
+
"@tramvai/module-router": "1.75.1",
|
|
31
|
+
"@tramvai/tokens-render": "1.75.1",
|
|
32
|
+
"@tramvai/tokens-router": "1.75.1",
|
|
33
33
|
"react": ">=16.8.0",
|
|
34
34
|
"tslib": "^2.0.3"
|
|
35
35
|
}
|
package/lib/types.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare type PageRenderMode = 'ssr' | 'client';
|