@tramvai/module-render 2.40.0 → 2.44.2

package/README.md

@@ -143,13 +143,13 @@ 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
 
-### Basic layout
+### Root layout
 
-The `RenderModule` has a default basic layout that supports different ways of extending and adding functionality
+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 basic header and footer
+#### 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
 
@@ -191,7 +191,7 @@ createBundle({
 
 #### Adding components and wrappers
 
-You can add custom components and wrappers for layout via the token `LAYOUT_OPTIONS`
+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';
@@ -226,7 +226,13 @@ 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 basic layout
+#### 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.
@@ -268,6 +274,64 @@ createBundle({
 });
 ```
 
+### 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)
+
 ## How to
 
 ### How to add assets loading to a page

package/lib/browser.js

@@ -3,36 +3,64 @@ 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';
 export * from '@tramvai/tokens-render';
-import { ROUTER_TOKEN, PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
+import { PAGE_SERVICE_TOKEN, ROUTER_TOKEN } from '@tramvai/tokens-router';
 import each from '@tinkoff/utils/array/each';
-import { PureComponent, useMemo, createElement, StrictMode } from 'react';
+import { useMemo, createElement, StrictMode } from 'react';
 import { jsx } from 'react/jsx-runtime';
 import { createEvent, createReducer, useStore, Provider } from '@tramvai/state';
 import { useDi, ERROR_BOUNDARY_TOKEN, ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, UniversalErrorBoundary, DIContext } from '@tramvai/react';
-import { useRoute, useUrl } from '@tramvai/module-router';
+import { usePageService, useUrl } from '@tramvai/module-router';
 import { useIsomorphicLayoutEffect } from '@tinkoff/react-hooks';
 import { composeLayoutOptions, createLayout } from '@tinkoff/layout-factory';
 
-class RootComponent extends PureComponent {
-    render() {
-        const { LayoutComponent, PageComponent, HeaderComponent, FooterComponent } = this.props;
-        return (jsx(LayoutComponent, { Header: HeaderComponent, Footer: FooterComponent, children: jsx(PageComponent, {}) }));
-    }
-}
-const Root = ({ pageService }) => {
-    const { config } = useRoute();
-    const { pageComponent } = config;
+/**
+ * Result component structure:
+ *
+ * <Root>
+ *   <RootComponent>
+ *    <LayoutComponent>
+ *      <NestedLayoutComponent>
+ *        <PageComponent />
+ *      </NestedLayoutComponent>
+ *    </LayoutComponent>
+ *  </RootComponent>
+ * </Root>
+ *
+ * All components separated for a few reasons:
+ * - Page subtree can be rendered independently when Layout and Nested Layout the same
+ * - Nested Layout can be rerendered only on its changes
+ * - Layout can be rendered only on its changes
+ */
+const LayoutRenderComponent = ({ children }) => {
+    const pageService = usePageService();
+    const LayoutComponent = pageService.resolveComponentFromConfig('layout');
+    const HeaderComponent = pageService.resolveComponentFromConfig('header');
+    const FooterComponent = pageService.resolveComponentFromConfig('footer');
+    const layout = useMemo(() => (jsx(LayoutComponent, { Header: HeaderComponent, Footer: FooterComponent, children: children })), [LayoutComponent, HeaderComponent, FooterComponent, children]);
+    return layout;
+};
+const NestedLayoutRenderComponent = ({ children }) => {
+    const pageService = usePageService();
+    const NestedLayoutComponent = pageService.resolveComponentFromConfig('nestedLayout');
+    const nestedLayout = useMemo(() => jsx(NestedLayoutComponent, { children: children }), [NestedLayoutComponent, children]);
+    return nestedLayout;
+};
+const PageRenderComponent = () => {
+    const pageService = usePageService();
+    const { pageComponent } = pageService.getConfig();
     let PageComponent = pageService.getComponent(pageComponent);
     if (!PageComponent) {
         PageComponent = () => {
             throw new Error(`Page component '${pageComponent}' not found`);
         };
     }
-    // Get components for current page, otherwise use a defaults
-    const LayoutComponent = pageService.resolveComponentFromConfig('layout');
-    const HeaderComponent = pageService.resolveComponentFromConfig('header');
-    const FooterComponent = pageService.resolveComponentFromConfig('footer');
-    return (jsx(RootComponent, { HeaderComponent: HeaderComponent, FooterComponent: FooterComponent, LayoutComponent: LayoutComponent, PageComponent: PageComponent }));
+    const page = useMemo(() => jsx(PageComponent, {}), [PageComponent]);
+    return page;
+};
+const Root = () => {
+    const pageRenderComponent = useMemo(() => jsx(PageRenderComponent, {}), []);
+    const nestedLayoutRenderComponent = useMemo(() => jsx(NestedLayoutRenderComponent, { children: pageRenderComponent }), [pageRenderComponent]);
+    return jsx(LayoutRenderComponent, { children: nestedLayoutRenderComponent });
 };
 
 function serializeError(error) {
@@ -52,7 +80,8 @@ const initialState = null;
 const PageErrorStore = createReducer('pageError', initialState).on(setPageErrorEvent, (state, error) => error && serializeError(error));
 
 const PageErrorBoundary = (props) => {
-    const { children, pageService } = props;
+    const { children } = props;
+    const pageService = useDi(PAGE_SERVICE_TOKEN);
     const url = useUrl();
     const serializedError = useStore(PageErrorStore);
     const error = useMemo(() => {
@@ -64,9 +93,9 @@ const PageErrorBoundary = (props) => {
     return (jsx(UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi, children: children }));
 };
 
-function renderReact({ pageService, di }, context) {
+function renderReact({ di }, context) {
     const serverState = typeof window !== 'undefined' ? context.getState() : undefined;
-    return (jsx(Provider, { context: context, serverState: serverState, children: jsx(DIContext.Provider, { value: di, children: jsx(PageErrorBoundary, { pageService: pageService, children: jsx(Root, { pageService: pageService }) }) }) }));
+    return (jsx(Provider, { context: context, serverState: serverState, children: jsx(DIContext.Provider, { value: di, children: jsx(PageErrorBoundary, { children: jsx(Root, {}) }) }) }));
 }
 
 let hydrateRoot;
@@ -98,10 +127,10 @@ const renderer = ({ element, container, callback, log }) => {
     return hydrate(element, container, callback);
 };
 
-function rendering({ pageService, logger, consumerContext, customRender, extendRender, di, useStrictMode, rendererCallback, }) {
+function rendering({ logger, consumerContext, customRender, extendRender, di, useStrictMode, rendererCallback, }) {
     const log = logger('module-render');
     return new Promise((resolve, reject) => {
-        let renderResult = renderReact({ pageService, di }, consumerContext);
+        let renderResult = renderReact({ di }, consumerContext);
         if (extendRender) {
             each((render) => {
                 renderResult = render(renderResult);
@@ -140,6 +169,7 @@ function rendering({ pageService, logger, consumerContext, customRender, extendR
     });
 }
 
+const RenderChildrenComponent = ({ children }) => children;
 let LayoutModule = class LayoutModule {
 };
 LayoutModule = __decorate([
@@ -158,7 +188,10 @@ LayoutModule = __decorate([
             {
                 provide: 'componentDefaultList',
                 multi: true,
-                useFactory: (components) => components,
+                useFactory: (components) => ({
+                    ...components,
+                    nestedLayoutDefault: RenderChildrenComponent,
+                }),
                 deps: {
                     layoutDefault: DEFAULT_LAYOUT_COMPONENT,
                     footerDefault: { token: DEFAULT_FOOTER_COMPONENT, optional: true },
@@ -247,7 +280,6 @@ RenderModule = RenderModule_1 = __decorate([
                     };
                 },
                 deps: {
-                    pageService: PAGE_SERVICE_TOKEN,
                     logger: LOGGER_TOKEN,
                     customRender: { token: CUSTOM_RENDER, optional: true },
                     extendRender: { token: EXTEND_RENDER, optional: true },

package/lib/client/index.d.ts

@@ -1,8 +1,6 @@
 import type { EXTEND_RENDER, RENDERER_CALLBACK, USE_REACT_STRICT_MODE } from '@tramvai/tokens-render';
-import type { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
 import type { ExtractDependencyType } from '@tinkoff/dippy';
-export declare function rendering({ pageService, logger, consumerContext, customRender, extendRender, di, useStrictMode, rendererCallback, }: {
-    pageService: ExtractDependencyType<typeof PAGE_SERVICE_TOKEN>;
+export declare function rendering({ logger, consumerContext, customRender, extendRender, di, useStrictMode, rendererCallback, }: {
     logger: any;
     consumerContext: any;
     extendRender?: ExtractDependencyType<typeof EXTEND_RENDER>;

package/lib/client/types.d.ts

@@ -1,4 +1,4 @@
-declare type Renderer = (params: {
+type Renderer = (params: {
     element: any;
     container: Element;
     callback: () => void;

package/lib/react/index.d.ts

@@ -1,4 +1,3 @@
-export declare function renderReact({ pageService, di }: {
-    pageService: any;
+export declare function renderReact({ di }: {
     di: any;
 }, context: any): JSX.Element;

package/lib/react/pageErrorBoundary.d.ts

@@ -1,5 +1,2 @@
 import type { PropsWithChildren } from 'react';
-import type { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
-export declare const PageErrorBoundary: (props: PropsWithChildren<{
-    pageService: typeof PAGE_SERVICE_TOKEN;
-}>) => JSX.Element;
+export declare const PageErrorBoundary: (props: PropsWithChildren) => JSX.Element;

package/lib/react/root.d.ts

@@ -1,4 +1 @@
-import type { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
-export declare const Root: ({ pageService }: {
-    pageService: typeof PAGE_SERVICE_TOKEN;
-}) => JSX.Element;
+export declare const Root: () => JSX.Element;

package/lib/resourcesInliner/tokens.d.ts

@@ -6,7 +6,7 @@ import type { ResourcesInlinerType } from './resourcesInliner';
  * в итоговую html-страницу в виде ссылки на файл или заинлайнеными полностью
  */
 export declare const RESOURCE_INLINER: import("@tinkoff/dippy").BaseTokenInterface<ResourcesInlinerType>;
-export declare type ResourcesRegistryCache = {
+export type ResourcesRegistryCache = {
     filesCache: Cache;
     sizeCache: Cache;
     disabledUrlsCache: Cache;

package/lib/resourcesRegistry/index.d.ts

@@ -1,6 +1,6 @@
 import type { RESOURCES_REGISTRY } from '@tramvai/tokens-render';
-declare type ResourceRegistry = typeof RESOURCES_REGISTRY;
-declare type PageResource = ReturnType<ResourceRegistry['getPageResources']>[0];
+type ResourceRegistry = typeof RESOURCES_REGISTRY;
+type PageResource = ReturnType<ResourceRegistry['getPageResources']>[0];
 export declare class ResourcesRegistry implements ResourceRegistry {
     private resources;
     private resourceInliner;

package/lib/server/ReactRenderServer.d.ts

@@ -2,18 +2,15 @@ import type { ExtractDependencyType } from '@tinkoff/dippy';
 import type { DI_TOKEN } from '@tramvai/core';
 import type { CONTEXT_TOKEN, LOGGER_TOKEN } from '@tramvai/module-common';
 import type { EXTEND_RENDER, CUSTOM_RENDER, REACT_SERVER_RENDER_MODE } from '@tramvai/tokens-render';
-import type { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
 import type { ChunkExtractor } from '@loadable/server';
 export declare class ReactRenderServer {
     customRender: typeof CUSTOM_RENDER;
     extendRender: ExtractDependencyType<typeof EXTEND_RENDER>;
     context: typeof CONTEXT_TOKEN;
-    pageService: typeof PAGE_SERVICE_TOKEN;
     di: typeof DI_TOKEN;
     log: ReturnType<typeof LOGGER_TOKEN>;
     renderMode: typeof REACT_SERVER_RENDER_MODE;
-    constructor({ pageService, context, customRender, extendRender, di, renderMode, logger }: {
-        pageService: any;
+    constructor({ context, customRender, extendRender, di, renderMode, logger }: {
         context: any;
         customRender: any;
         extendRender: any;

package/lib/server/blocks/utils/fetchWebpackStats.d.ts

@@ -1,4 +1,4 @@
-export declare type WebpackStats = {
+export type WebpackStats = {
     assetsByChunkName: Record<string, string[]>;
     namedChunkGroups?: Record<string, {
         name: string;

package/lib/server.es.js

@@ -1,5 +1,5 @@
 import { __decorate } from 'tslib';
-import { PureComponent, useMemo, createElement } from 'react';
+import { useMemo, createElement } from 'react';
 import { renderToString } from 'react-dom/server';
 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';
@@ -32,7 +32,7 @@ import { o as onload } from './server_inline.inline.es.js';
 import { Writable } from 'stream';
 import { jsx } from 'react/jsx-runtime';
 import { createEvent, createReducer, useStore, Provider } from '@tramvai/state';
-import { useRoute, useUrl } from '@tramvai/module-router';
+import { usePageService, useUrl } from '@tramvai/module-router';
 import { composeLayoutOptions, createLayout } from '@tinkoff/layout-factory';
 
 const thirtySeconds = 1000 * 30;
@@ -647,26 +647,54 @@ const htmlPageSchemaFactory = ({ htmlAttrs, }) => {
     ];
 };
 
-class RootComponent extends PureComponent {
-    render() {
-        const { LayoutComponent, PageComponent, HeaderComponent, FooterComponent } = this.props;
-        return (jsx(LayoutComponent, { Header: HeaderComponent, Footer: FooterComponent, children: jsx(PageComponent, {}) }));
-    }
-}
-const Root = ({ pageService }) => {
-    const { config } = useRoute();
-    const { pageComponent } = config;
+/**
+ * Result component structure:
+ *
+ * <Root>
+ *   <RootComponent>
+ *    <LayoutComponent>
+ *      <NestedLayoutComponent>
+ *        <PageComponent />
+ *      </NestedLayoutComponent>
+ *    </LayoutComponent>
+ *  </RootComponent>
+ * </Root>
+ *
+ * All components separated for a few reasons:
+ * - Page subtree can be rendered independently when Layout and Nested Layout the same
+ * - Nested Layout can be rerendered only on its changes
+ * - Layout can be rendered only on its changes
+ */
+const LayoutRenderComponent = ({ children }) => {
+    const pageService = usePageService();
+    const LayoutComponent = pageService.resolveComponentFromConfig('layout');
+    const HeaderComponent = pageService.resolveComponentFromConfig('header');
+    const FooterComponent = pageService.resolveComponentFromConfig('footer');
+    const layout = useMemo(() => (jsx(LayoutComponent, { Header: HeaderComponent, Footer: FooterComponent, children: children })), [LayoutComponent, HeaderComponent, FooterComponent, children]);
+    return layout;
+};
+const NestedLayoutRenderComponent = ({ children }) => {
+    const pageService = usePageService();
+    const NestedLayoutComponent = pageService.resolveComponentFromConfig('nestedLayout');
+    const nestedLayout = useMemo(() => jsx(NestedLayoutComponent, { children: children }), [NestedLayoutComponent, children]);
+    return nestedLayout;
+};
+const PageRenderComponent = () => {
+    const pageService = usePageService();
+    const { pageComponent } = pageService.getConfig();
     let PageComponent = pageService.getComponent(pageComponent);
     if (!PageComponent) {
         PageComponent = () => {
             throw new Error(`Page component '${pageComponent}' not found`);
         };
     }
-    // Get components for current page, otherwise use a defaults
-    const LayoutComponent = pageService.resolveComponentFromConfig('layout');
-    const HeaderComponent = pageService.resolveComponentFromConfig('header');
-    const FooterComponent = pageService.resolveComponentFromConfig('footer');
-    return (jsx(RootComponent, { HeaderComponent: HeaderComponent, FooterComponent: FooterComponent, LayoutComponent: LayoutComponent, PageComponent: PageComponent }));
+    const page = useMemo(() => jsx(PageComponent, {}), [PageComponent]);
+    return page;
+};
+const Root = () => {
+    const pageRenderComponent = useMemo(() => jsx(PageRenderComponent, {}), []);
+    const nestedLayoutRenderComponent = useMemo(() => jsx(NestedLayoutRenderComponent, { children: pageRenderComponent }), [pageRenderComponent]);
+    return jsx(LayoutRenderComponent, { children: nestedLayoutRenderComponent });
 };
 
 function serializeError(error) {
@@ -686,7 +714,8 @@ const initialState = null;
 const PageErrorStore = createReducer('pageError', initialState).on(setPageErrorEvent, (state, error) => error && serializeError(error));
 
 const PageErrorBoundary = (props) => {
-    const { children, pageService } = props;
+    const { children } = props;
+    const pageService = useDi(PAGE_SERVICE_TOKEN);
     const url = useUrl();
     const serializedError = useStore(PageErrorStore);
     const error = useMemo(() => {
@@ -698,9 +727,9 @@ const PageErrorBoundary = (props) => {
     return (jsx(UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi, children: children }));
 };
 
-function renderReact({ pageService, di }, context) {
+function renderReact({ di }, context) {
     const serverState = typeof window !== 'undefined' ? context.getState() : undefined;
-    return (jsx(Provider, { context: context, serverState: serverState, children: jsx(DIContext.Provider, { value: di, children: jsx(PageErrorBoundary, { pageService: pageService, children: jsx(Root, { pageService: pageService }) }) }) }));
+    return (jsx(Provider, { context: context, serverState: serverState, children: jsx(DIContext.Provider, { value: di, children: jsx(PageErrorBoundary, { children: jsx(Root, {}) }) }) }));
 }
 
 const RENDER_TIMEOUT = 500;
@@ -724,8 +753,7 @@ class HtmlWritable extends Writable {
 }
 class ReactRenderServer {
     // eslint-disable-next-line sort-class-members/sort-class-members
-    constructor({ pageService, context, customRender, extendRender, di, renderMode, logger }) {
-        this.pageService = pageService;
+    constructor({ context, customRender, extendRender, di, renderMode, logger }) {
         this.context = context;
         this.customRender = customRender;
         this.extendRender = extendRender;
@@ -735,7 +763,7 @@ class ReactRenderServer {
     }
     render(extractor) {
         var _a;
-        let renderResult = renderReact({ pageService: this.pageService, di: this.di }, this.context);
+        let renderResult = renderReact({ di: this.di }, this.context);
         each((render) => {
             renderResult = render(renderResult);
         }, (_a = this.extendRender) !== null && _a !== void 0 ? _a : []);
@@ -787,6 +815,7 @@ class ReactRenderServer {
     }
 }
 
+const RenderChildrenComponent = ({ children }) => children;
 let LayoutModule = class LayoutModule {
 };
 LayoutModule = __decorate([
@@ -805,7 +834,10 @@ LayoutModule = __decorate([
             {
                 provide: 'componentDefaultList',
                 multi: true,
-                useFactory: (components) => components,
+                useFactory: (components) => ({
+                    ...components,
+                    nestedLayoutDefault: RenderChildrenComponent,
+                }),
                 deps: {
                     layoutDefault: DEFAULT_LAYOUT_COMPONENT,
                     footerDefault: { token: DEFAULT_FOOTER_COMPONENT, optional: true },
@@ -965,7 +997,6 @@ RenderModule = RenderModule_1 = __decorate([
                 useClass: ReactRenderServer,
                 deps: {
                     context: CONTEXT_TOKEN,
-                    pageService: PAGE_SERVICE_TOKEN,
                     customRender: { token: CUSTOM_RENDER, optional: true },
                     extendRender: { token: EXTEND_RENDER, optional: true },
                     di: DI_TOKEN,

package/lib/server.js

@@ -683,26 +683,54 @@ const htmlPageSchemaFactory = ({ htmlAttrs, }) => {
     ];
 };
 
-class RootComponent extends react.PureComponent {
-    render() {
-        const { LayoutComponent, PageComponent, HeaderComponent, FooterComponent } = this.props;
-        return (jsxRuntime.jsx(LayoutComponent, { Header: HeaderComponent, Footer: FooterComponent, children: jsxRuntime.jsx(PageComponent, {}) }));
-    }
-}
-const Root = ({ pageService }) => {
-    const { config } = moduleRouter.useRoute();
-    const { pageComponent } = config;
+/**
+ * Result component structure:
+ *
+ * <Root>
+ *   <RootComponent>
+ *    <LayoutComponent>
+ *      <NestedLayoutComponent>
+ *        <PageComponent />
+ *      </NestedLayoutComponent>
+ *    </LayoutComponent>
+ *  </RootComponent>
+ * </Root>
+ *
+ * All components separated for a few reasons:
+ * - Page subtree can be rendered independently when Layout and Nested Layout the same
+ * - Nested Layout can be rerendered only on its changes
+ * - Layout can be rendered only on its changes
+ */
+const LayoutRenderComponent = ({ children }) => {
+    const pageService = moduleRouter.usePageService();
+    const LayoutComponent = pageService.resolveComponentFromConfig('layout');
+    const HeaderComponent = pageService.resolveComponentFromConfig('header');
+    const FooterComponent = pageService.resolveComponentFromConfig('footer');
+    const layout = react.useMemo(() => (jsxRuntime.jsx(LayoutComponent, { Header: HeaderComponent, Footer: FooterComponent, children: children })), [LayoutComponent, HeaderComponent, FooterComponent, children]);
+    return layout;
+};
+const NestedLayoutRenderComponent = ({ children }) => {
+    const pageService = moduleRouter.usePageService();
+    const NestedLayoutComponent = pageService.resolveComponentFromConfig('nestedLayout');
+    const nestedLayout = react.useMemo(() => jsxRuntime.jsx(NestedLayoutComponent, { children: children }), [NestedLayoutComponent, children]);
+    return nestedLayout;
+};
+const PageRenderComponent = () => {
+    const pageService = moduleRouter.usePageService();
+    const { pageComponent } = pageService.getConfig();
     let PageComponent = pageService.getComponent(pageComponent);
     if (!PageComponent) {
         PageComponent = () => {
             throw new Error(`Page component '${pageComponent}' not found`);
         };
     }
-    // Get components for current page, otherwise use a defaults
-    const LayoutComponent = pageService.resolveComponentFromConfig('layout');
-    const HeaderComponent = pageService.resolveComponentFromConfig('header');
-    const FooterComponent = pageService.resolveComponentFromConfig('footer');
-    return (jsxRuntime.jsx(RootComponent, { HeaderComponent: HeaderComponent, FooterComponent: FooterComponent, LayoutComponent: LayoutComponent, PageComponent: PageComponent }));
+    const page = react.useMemo(() => jsxRuntime.jsx(PageComponent, {}), [PageComponent]);
+    return page;
+};
+const Root = () => {
+    const pageRenderComponent = react.useMemo(() => jsxRuntime.jsx(PageRenderComponent, {}), []);
+    const nestedLayoutRenderComponent = react.useMemo(() => jsxRuntime.jsx(NestedLayoutRenderComponent, { children: pageRenderComponent }), [pageRenderComponent]);
+    return jsxRuntime.jsx(LayoutRenderComponent, { children: nestedLayoutRenderComponent });
 };
 
 function serializeError(error) {
@@ -722,7 +750,8 @@ const initialState = null;
 const PageErrorStore = state.createReducer('pageError', initialState).on(setPageErrorEvent, (state, error) => error && serializeError(error));
 
 const PageErrorBoundary = (props) => {
-    const { children, pageService } = props;
+    const { children } = props;
+    const pageService = react$1.useDi(tokensRouter.PAGE_SERVICE_TOKEN);
     const url = moduleRouter.useUrl();
     const serializedError = state.useStore(PageErrorStore);
     const error = react.useMemo(() => {
@@ -734,9 +763,9 @@ const PageErrorBoundary = (props) => {
     return (jsxRuntime.jsx(react$1.UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi, children: children }));
 };
 
-function renderReact({ pageService, di }, context) {
+function renderReact({ di }, context) {
     const serverState = typeof window !== 'undefined' ? context.getState() : undefined;
-    return (jsxRuntime.jsx(state.Provider, { context: context, serverState: serverState, children: jsxRuntime.jsx(react$1.DIContext.Provider, { value: di, children: jsxRuntime.jsx(PageErrorBoundary, { pageService: pageService, children: jsxRuntime.jsx(Root, { pageService: pageService }) }) }) }));
+    return (jsxRuntime.jsx(state.Provider, { context: context, serverState: serverState, children: jsxRuntime.jsx(react$1.DIContext.Provider, { value: di, children: jsxRuntime.jsx(PageErrorBoundary, { children: jsxRuntime.jsx(Root, {}) }) }) }));
 }
 
 const RENDER_TIMEOUT = 500;
@@ -760,8 +789,7 @@ class HtmlWritable extends stream.Writable {
 }
 class ReactRenderServer {
     // eslint-disable-next-line sort-class-members/sort-class-members
-    constructor({ pageService, context, customRender, extendRender, di, renderMode, logger }) {
-        this.pageService = pageService;
+    constructor({ context, customRender, extendRender, di, renderMode, logger }) {
         this.context = context;
         this.customRender = customRender;
         this.extendRender = extendRender;
@@ -771,7 +799,7 @@ class ReactRenderServer {
     }
     render(extractor) {
         var _a;
-        let renderResult = renderReact({ pageService: this.pageService, di: this.di }, this.context);
+        let renderResult = renderReact({ di: this.di }, this.context);
         each__default["default"]((render) => {
             renderResult = render(renderResult);
         }, (_a = this.extendRender) !== null && _a !== void 0 ? _a : []);
@@ -823,6 +851,7 @@ class ReactRenderServer {
     }
 }
 
+const RenderChildrenComponent = ({ children }) => children;
 let LayoutModule = class LayoutModule {
 };
 LayoutModule = tslib.__decorate([
@@ -841,7 +870,10 @@ LayoutModule = tslib.__decorate([
             {
                 provide: 'componentDefaultList',
                 multi: true,
-                useFactory: (components) => components,
+                useFactory: (components) => ({
+                    ...components,
+                    nestedLayoutDefault: RenderChildrenComponent,
+                }),
                 deps: {
                     layoutDefault: tokensRender.DEFAULT_LAYOUT_COMPONENT,
                     footerDefault: { token: tokensRender.DEFAULT_FOOTER_COMPONENT, optional: true },
@@ -1001,7 +1033,6 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                 useClass: ReactRenderServer,
                 deps: {
                     context: tokensCommon.CONTEXT_TOKEN,
-                    pageService: tokensRouter.PAGE_SERVICE_TOKEN,
                     customRender: { token: tokensRender.CUSTOM_RENDER, optional: true },
                     extendRender: { token: tokensRender.EXTEND_RENDER, optional: true },
                     di: core.DI_TOKEN,

package/lib/shared/pageErrorStore.d.ts

@@ -1,4 +1,4 @@
-declare type AnyError = Error & {
+type AnyError = Error & {
     [key: string]: any;
 };
 export interface SerializedError {
@@ -8,7 +8,7 @@ export interface SerializedError {
 }
 export declare function serializeError(error: AnyError): SerializedError;
 export declare function deserializeError(serializedError: SerializedError): AnyError;
-export declare type IPageErrorStore = SerializedError | null;
+export type IPageErrorStore = SerializedError | null;
 export declare const setPageErrorEvent: import("@tramvai/types-actions-state-context").EventCreator1<AnyError, AnyError>;
 export declare const PageErrorStore: import("@tramvai/state").Reducer<SerializedError, "pageError">;
 export {};

package/lib/shared/types.d.ts

@@ -1,4 +1,4 @@
-declare type RenderModuleConfig = {
+type RenderModuleConfig = {
     polyfillCondition?: string;
     /**
      * @deprecated tramvai will automatically detect React version, and use hydrateRoot API for 18+ version

package/lib/test/unit/resources.d.ts

@@ -1,5 +1,5 @@
 import { getDiWrapper } from '@tramvai/test-helpers';
-declare type Options = Parameters<typeof getDiWrapper>[0];
+type Options = Parameters<typeof getDiWrapper>[0];
 export declare const testPageResources: (options: Options) => {
     render: () => {
         parsed: import("node-html-parser").HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-render",
-  "version": "2.40.0",
+  "version": "2.44.2",
   "description": "",
   "browser": "lib/browser.js",
   "main": "lib/server.js",
@@ -26,13 +26,13 @@
     "@tinkoff/htmlpagebuilder": "0.5.5",
     "@tinkoff/layout-factory": "0.3.4",
     "@tinkoff/url": "0.8.4",
-    "@tinkoff/user-agent": "0.4.90",
-    "@tramvai/module-client-hints": "2.40.0",
-    "@tramvai/module-router": "2.40.0",
-    "@tramvai/react": "2.40.0",
+    "@tinkoff/user-agent": "0.4.99",
+    "@tramvai/module-client-hints": "2.44.2",
+    "@tramvai/module-router": "2.44.2",
+    "@tramvai/react": "2.44.2",
     "@tramvai/safe-strings": "0.5.5",
-    "@tramvai/tokens-render": "2.40.0",
-    "@tramvai/experiments": "2.40.0",
+    "@tramvai/tokens-render": "2.44.2",
+    "@tramvai/experiments": "2.44.2",
     "@types/loadable__server": "^5.12.6",
     "node-fetch": "^2.6.1"
   },
@@ -40,14 +40,14 @@
     "@tinkoff/dippy": "0.8.9",
     "@tinkoff/utils": "^2.1.2",
     "@tinkoff/react-hooks": "0.1.4",
-    "@tramvai/cli": "2.40.0",
-    "@tramvai/core": "2.40.0",
-    "@tramvai/module-common": "2.40.0",
-    "@tramvai/state": "2.40.0",
-    "@tramvai/test-helpers": "2.40.0",
-    "@tramvai/tokens-common": "2.40.0",
-    "@tramvai/tokens-router": "2.40.0",
-    "@tramvai/tokens-server-private": "2.40.0",
+    "@tramvai/cli": "2.44.2",
+    "@tramvai/core": "2.44.2",
+    "@tramvai/module-common": "2.44.2",
+    "@tramvai/state": "2.44.2",
+    "@tramvai/test-helpers": "2.44.2",
+    "@tramvai/tokens-common": "2.44.2",
+    "@tramvai/tokens-router": "2.44.2",
+    "@tramvai/tokens-server-private": "2.44.2",
     "express": "^4.17.1",
     "prop-types": "^15.6.2",
     "react": ">=16.14.0",