@tramvai/module-render 2.59.4 → 2.61.1

package/README.md

@@ -143,194 +143,9 @@ To speed up data loading, we've added a preloading system for resources and asyn
 - Next we add all the CSS to the **preload** tag and add onload event on them. We need to load the blocking resources as quickly as possible.
 - When loading any CSS file, onload event will be fired (only once time) and add all **preload** tags to the necessary JS files
 
-### Root layout
+### Layouts
 
-The `RenderModule` has a default root layout that supports different ways of extending and adding functionality
-
-[Read more about layout on the library page](references/libs/tinkoff-layout.md)
-
-#### Adding a default header and footer
-
-The module allows you to add header and footer components, which will be rendered by default for all pages
-
-##### Via provider
-
-Register header and footer components through providers:
-
-```tsx
-import { DEFAULT_HEADER_COMPONENT, DEFAULT_FOOTER_COMPONENT } from '@tramvai/tokens-render';
-import { provide } from '@tramvai/core';
-
-createApp({
-  providers: [
-    provide({
-      provide: DEFAULT_HEADER_COMPONENT,
-      useValue: DefaultHeader,
-    }),
-    provide({
-      provide: DEFAULT_FOOTER_COMPONENT,
-      useValue: DefaultFooter,
-    }),
-  ],
-});
-```
-
-##### Via bundle
-
-You can register a `headerDefault` and `footerDefault` component in the bundle, which will be rendered for all routes that do not have `headerComponent` and `footerComponent` redefined in configuration:
-
-```tsx
-createBundle({
-  name: 'common-bundle',
-  components: {
-    headerDefault: CustomHeader,
-    footerDefault: CustomFooter,
-  },
-});
-```
-
-#### Adding components and wrappers
-
-You can add custom components and wrappers for layout via the token `LAYOUT_OPTIONS`, this wrappers will be applied on every application page:
-
-```tsx
-import { provide } from '@tramvai/core';
-@Module({
-  providers: [
-    provide({
-      provide: 'LAYOUT_OPTIONS',
-      multi: true,
-      useValue: {
-        // React components
-        components: {
-          // content component, this component wraps the header, page and footer
-          content: Content,
-          // page component
-          page: Page,
-
-          // any global components
-          alerts: Alerts,
-          feedback: Feedback,
-        },
-        // HOC's for components
-        wrappers: {
-          layout: layoutWrapper,
-          alerts: [alertWrapper1, alertWrapper2],
-        },
-      },
-    }),
-  ],
-})
-export class MyLayoutModule {}
-```
-
-More details about the `components` and `wrappers` options can be found in [@tinkoff/layout-factory](references/libs/tinkoff-layout.md)
-
-#### Replacing the root layout
-
-:::warning
-
-Not recommended, because a lot of dependant features can be broken!
-
-:::
-
-If the basic layout doesn't work for you, you can replace it with any other React component.
-In doing so, you need to implement all the wrappers yourself and plug in global components if you need them.
-
-You can replace it in two ways:
-
-##### Add layoutComponent to route 
-
-You can add a `layoutComponent` property to route `config` and register component in `bundle`.
-This layout will be rendered when you go to the corresponding route.
-
-```tsx
-createBundle({
-  name: 'common-bundle',
-  components: {
-    myCustomLayout: CustomLayout,
-  },
-});
-
-const route = {
-  name: 'main',
-  path: '/',
-  config: {
-    layoutComponent: 'myCustomLayout',
-  },
-};
-```
-
-##### Replace layoutDefault
-
-You can register a `layoutDefault` component in `bundle`, which will be automatically rendered for all routes that do not have an `layoutComponent` in `config` property.
-
-```tsx
-createBundle({
-  name: 'common-bundle',
-  components: {
-    layoutDefault: CustomLayout,
-  },
-});
-```
-
-### Nested layout
-
-For every page, nested layout can be applied. It is useful when you need to wrap group of pages in the same block, or add the same actions.
-
-:::note
-
-For now, only one level of layout nesting supported, and simplified component structure will look like this:
-
-```tsx
-<RootLayout>
-  <NestedLayout>
-    <Page />
-  </NestedLayout>
-</RootLayout>
-```
-
-:::
-
-Nested layout it is a simple React component with `children` property, and static properties `actions` and `reducers` are supported:
-
-```tsx
-import type { NestedLayoutComponent } from '@tramvai/react';
-
-const Layout: NestedLayoutComponent = ({ children }) => {
-  return <div>{children}</div>;
-};
-
-Layout.actions = [actionFoo, actionBar];
-
-Layout.reducers = [StoreBaz];
-```
-
-Actions will be registered as current page component actions and reducers will be registered in global store.
-
-#### Adding a nested layout
-
-You can add a `nestedLayoutComponent` property to route `config` property and register component in `bundle`.
-This layout will be rendered when you go to the corresponding route.
-
-```tsx
-createBundle({
-  name: 'common-bundle',
-  components: {
-    myNestedLayout: NestedLayout,
-  },
-});
-
-const route = {
-  name: 'main',
-  path: '/',
-  config: {
-    nestedLayoutComponent: 'myNestedLayout',
-  },
-};
-```
-
-Also, this feature available for [File-System Pages and Routes](features/routing/file-system-pages.md)
+[Actual documentation](03-features/04-layouts.md)
 
 ## How to
 

package/lib/browser.js

@@ -1,7 +1,7 @@
 import { __decorate } from 'tslib';
 import { Module, provide, commandLineListTokens, DI_TOKEN } from '@tramvai/core';
 import { COMBINE_REDUCERS, STORE_TOKEN, LOGGER_TOKEN, CONTEXT_TOKEN } from '@tramvai/tokens-common';
-import { DEFAULT_LAYOUT_COMPONENT, LAYOUT_OPTIONS, DEFAULT_FOOTER_COMPONENT, DEFAULT_HEADER_COMPONENT, TRAMVAI_RENDER_MODE, RESOURCES_REGISTRY, CUSTOM_RENDER, EXTEND_RENDER, RENDERER_CALLBACK, USE_REACT_STRICT_MODE, RENDER_MODE } from '@tramvai/tokens-render';
+import { DEFAULT_LAYOUT_COMPONENT, LAYOUT_OPTIONS, DEFAULT_FOOTER_COMPONENT, DEFAULT_HEADER_COMPONENT, DEFAULT_ERROR_BOUNDARY_COMPONENT, TRAMVAI_RENDER_MODE, RESOURCES_REGISTRY, CUSTOM_RENDER, EXTEND_RENDER, RENDERER_CALLBACK, USE_REACT_STRICT_MODE, RENDER_MODE } from '@tramvai/tokens-render';
 export * from '@tramvai/tokens-render';
 import { PAGE_SERVICE_TOKEN, ROUTER_TOKEN } from '@tramvai/tokens-router';
 import each from '@tinkoff/utils/array/each';
@@ -213,6 +213,7 @@ LayoutModule = __decorate([
                     layoutDefault: DEFAULT_LAYOUT_COMPONENT,
                     footerDefault: { token: DEFAULT_FOOTER_COMPONENT, optional: true },
                     headerDefault: { token: DEFAULT_HEADER_COMPONENT, optional: true },
+                    errorBoundaryDefault: { token: DEFAULT_ERROR_BOUNDARY_COMPONENT, optional: true },
                 },
             },
         ],

package/lib/server.es.js

@@ -5,7 +5,7 @@ import { Module, provide, commandLineListTokens, DI_TOKEN } from '@tramvai/core'
 import { COMBINE_REDUCERS, CREATE_CACHE_TOKEN, LOGGER_TOKEN, REQUEST_MANAGER_TOKEN, RESPONSE_MANAGER_TOKEN, CONTEXT_TOKEN } from '@tramvai/tokens-common';
 import { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
 import { ClientHintsModule, USER_AGENT_TOKEN } from '@tramvai/module-client-hints';
-import { ResourceType, ResourceSlot, DEFAULT_LAYOUT_COMPONENT, LAYOUT_OPTIONS, DEFAULT_FOOTER_COMPONENT, DEFAULT_HEADER_COMPONENT, TRAMVAI_RENDER_MODE, RESOURCES_REGISTRY, RESOURCE_INLINE_OPTIONS, RENDER_SLOTS, POLYFILL_CONDITION, HTML_ATTRS, MODERN_SATISFIES_TOKEN, RENDER_FLOW_AFTER_TOKEN, CUSTOM_RENDER, EXTEND_RENDER, REACT_SERVER_RENDER_MODE } from '@tramvai/tokens-render';
+import { ResourceType, ResourceSlot, DEFAULT_LAYOUT_COMPONENT, LAYOUT_OPTIONS, DEFAULT_FOOTER_COMPONENT, DEFAULT_HEADER_COMPONENT, DEFAULT_ERROR_BOUNDARY_COMPONENT, TRAMVAI_RENDER_MODE, RESOURCES_REGISTRY, RESOURCE_INLINE_OPTIONS, RENDER_SLOTS, POLYFILL_CONDITION, HTML_ATTRS, MODERN_SATISFIES_TOKEN, RENDER_FLOW_AFTER_TOKEN, CUSTOM_RENDER, EXTEND_RENDER, REACT_SERVER_RENDER_MODE } from '@tramvai/tokens-render';
 export * from '@tramvai/tokens-render';
 import { createToken, Scope } from '@tinkoff/dippy';
 import { WEB_FASTIFY_APP_BEFORE_ERROR_TOKEN } from '@tramvai/tokens-server-private';
@@ -842,6 +842,7 @@ LayoutModule = __decorate([
                     layoutDefault: DEFAULT_LAYOUT_COMPONENT,
                     footerDefault: { token: DEFAULT_FOOTER_COMPONENT, optional: true },
                     headerDefault: { token: DEFAULT_HEADER_COMPONENT, optional: true },
+                    errorBoundaryDefault: { token: DEFAULT_ERROR_BOUNDARY_COMPONENT, optional: true },
                 },
             },
         ],

package/lib/server.js

@@ -878,6 +878,7 @@ LayoutModule = tslib.__decorate([
                     layoutDefault: tokensRender.DEFAULT_LAYOUT_COMPONENT,
                     footerDefault: { token: tokensRender.DEFAULT_FOOTER_COMPONENT, optional: true },
                     headerDefault: { token: tokensRender.DEFAULT_HEADER_COMPONENT, optional: true },
+                    errorBoundaryDefault: { token: tokensRender.DEFAULT_ERROR_BOUNDARY_COMPONENT, optional: true },
                 },
             },
         ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-render",
-  "version": "2.59.4",
+  "version": "2.61.1",
   "description": "",
   "browser": "lib/browser.js",
   "main": "lib/server.js",
@@ -24,15 +24,15 @@
   "dependencies": {
     "@loadable/server": "^5.15.0",
     "@tinkoff/htmlpagebuilder": "0.5.5",
-    "@tinkoff/layout-factory": "0.3.5",
+    "@tinkoff/layout-factory": "0.3.6",
     "@tinkoff/url": "0.8.4",
-    "@tinkoff/user-agent": "0.4.144",
-    "@tramvai/module-client-hints": "2.59.4",
-    "@tramvai/module-router": "2.59.4",
-    "@tramvai/react": "2.59.4",
+    "@tinkoff/user-agent": "0.4.148",
+    "@tramvai/module-client-hints": "2.61.1",
+    "@tramvai/module-router": "2.61.1",
+    "@tramvai/react": "2.61.1",
     "@tramvai/safe-strings": "0.5.6",
-    "@tramvai/tokens-render": "2.59.4",
-    "@tramvai/experiments": "2.59.4",
+    "@tramvai/tokens-render": "2.61.1",
+    "@tramvai/experiments": "2.61.1",
     "@types/loadable__server": "^5.12.6",
     "node-fetch": "^2.6.1"
   },
@@ -40,14 +40,14 @@
     "@tinkoff/dippy": "0.8.11",
     "@tinkoff/utils": "^2.1.2",
     "@tinkoff/react-hooks": "0.1.4",
-    "@tramvai/cli": "2.59.4",
-    "@tramvai/core": "2.59.4",
-    "@tramvai/module-common": "2.59.4",
-    "@tramvai/state": "2.59.4",
-    "@tramvai/test-helpers": "2.59.4",
-    "@tramvai/tokens-common": "2.59.4",
-    "@tramvai/tokens-router": "2.59.4",
-    "@tramvai/tokens-server-private": "2.59.4",
+    "@tramvai/cli": "2.61.1",
+    "@tramvai/core": "2.61.1",
+    "@tramvai/module-common": "2.61.1",
+    "@tramvai/state": "2.61.1",
+    "@tramvai/test-helpers": "2.61.1",
+    "@tramvai/tokens-common": "2.61.1",
+    "@tramvai/tokens-router": "2.61.1",
+    "@tramvai/tokens-server-private": "2.61.1",
     "express": "^4.17.1",
     "prop-types": "^15.6.2",
     "react": ">=16.14.0",