@tramvai/module-render 2.70.0 → 2.72.0

package/lib/browser.js

@@ -1,238 +1,14 @@
 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, 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';
+import { STORE_TOKEN, LOGGER_TOKEN, CONTEXT_TOKEN } from '@tramvai/tokens-common';
+import { 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';
-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 { useUrl, usePageService } from '@tramvai/module-router';
-import debounce from '@tinkoff/utils/function/debounce';
-import { useIsomorphicLayoutEffect } from '@tinkoff/react-hooks';
-import { composeLayoutOptions, createLayout } from '@tinkoff/layout-factory';
-
-function serializeError(error) {
-    return {
-        ...error,
-        message: error.message,
-        stack: error.stack,
-    };
-}
-function deserializeError(serializedError) {
-    const error = new Error(serializedError.message);
-    Object.assign(error, serializedError);
-    return error;
-}
-const setPageErrorEvent = createEvent('setPageError');
-const initialState = null;
-const PageErrorStore = createReducer('pageError', initialState).on(setPageErrorEvent, (state, error) => error && serializeError(error));
-
-const PageErrorBoundary = (props) => {
-    const { children } = props;
-    const pageService = useDi(PAGE_SERVICE_TOKEN);
-    const url = useUrl();
-    const serializedError = useStore(PageErrorStore);
-    const error = useMemo(() => {
-        return serializedError && deserializeError(serializedError);
-    }, [serializedError]);
-    const errorHandlers = useDi({ token: ERROR_BOUNDARY_TOKEN, optional: true });
-    const fallbackFromDi = useDi({ token: ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, optional: true });
-    const fallback = pageService.resolveComponentFromConfig('errorBoundary');
-    return (jsx(UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi, children: children }));
-};
-
-/**
- * Result component structure:
- *
- * <Root>
- *   <RootComponent>
- *    <LayoutComponent>
- *      <NestedLayoutComponent>
- *        <ErrorBoundaryComponent>
- *          <PageComponent />
- *        </ErrorBoundaryComponent>
- *      </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`);
-        };
-    }
-    const page = useMemo(() => (jsx(PageErrorBoundary, { children: 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 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(Root, {}) }) }));
-}
-
-let hydrateRoot;
-let startTransition;
-try {
-    // eslint-disable-next-line import/no-unresolved, import/extensions
-    hydrateRoot = require('react-dom/client').hydrateRoot;
-    startTransition = require('react').startTransition;
-}
-catch { }
-const ExecuteRenderCallback = ({ children, callback, }) => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useIsomorphicLayoutEffect(callback, []);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return children;
-};
-const renderer = ({ element, container, callback, log }) => {
-    if (process.env.__TRAMVAI_CONCURRENT_FEATURES && typeof hydrateRoot === 'function') {
-        const wrappedElement = createElement(ExecuteRenderCallback, { callback }, element);
-        let allErrors = new Map();
-        const logHydrateRecoverableError = debounce(50, () => {
-            if (allErrors.size === 0) {
-                return;
-            }
-            const [{ error, errorInfo }, ...otherErrors] = Array.from(allErrors.values());
-            allErrors = new Map();
-            log.error({
-                event: 'hydrate:recover-after-error',
-                error,
-                errorInfo,
-                otherErrors,
-            });
-        });
-        return startTransition(() => {
-            hydrateRoot(container, wrappedElement, {
-                onRecoverableError: (error, errorInfo) => {
-                    // deduplicate by unique important string values
-                    allErrors.set((error === null || error === void 0 ? void 0 : error.message) + (errorInfo === null || errorInfo === void 0 ? void 0 : errorInfo.componentStack), { error, errorInfo });
-                    logHydrateRecoverableError();
-                },
-            });
-        });
-    }
-    const { hydrate } = require('react-dom');
-    return hydrate(element, container, callback);
-};
-
-function rendering({ logger, consumerContext, customRender, extendRender, di, useStrictMode, rendererCallback, }) {
-    const log = logger('module-render');
-    return new Promise((resolve, reject) => {
-        let renderResult = renderReact({ di }, consumerContext);
-        if (extendRender) {
-            each((render) => {
-                renderResult = render(renderResult);
-            }, extendRender);
-        }
-        if (customRender) {
-            return customRender(renderResult);
-        }
-        if (useStrictMode) {
-            renderResult = createElement(StrictMode, null, renderResult);
-        }
-        const container = document.querySelector('.application');
-        const executeRendererCallbacks = (renderErr) => rendererCallback === null || rendererCallback === void 0 ? void 0 : rendererCallback.forEach((cb) => {
-            try {
-                cb(renderErr);
-            }
-            catch (cbError) {
-                // eslint-disable-next-line no-console
-                console.error(cbError);
-            }
-        });
-        const callback = () => {
-            log.debug('App rendering');
-            document.querySelector('html').classList.remove('no-js');
-            executeRendererCallbacks();
-            resolve();
-        };
-        const params = { element: renderResult, container, callback, log };
-        try {
-            renderer(params);
-        }
-        catch (e) {
-            executeRendererCallbacks(e);
-            reject(e);
-        }
-    });
-}
-
-const RenderChildrenComponent = ({ children }) => children;
-let LayoutModule = class LayoutModule {
-};
-LayoutModule = __decorate([
-    Module({
-        providers: [
-            {
-                provide: DEFAULT_LAYOUT_COMPONENT,
-                useFactory: ({ layoutOptions }) => {
-                    const options = composeLayoutOptions(layoutOptions);
-                    return createLayout(options);
-                },
-                deps: {
-                    layoutOptions: { token: LAYOUT_OPTIONS, optional: true },
-                },
-            },
-            {
-                provide: 'componentDefaultList',
-                multi: true,
-                useFactory: (components) => ({
-                    ...components,
-                    nestedLayoutDefault: RenderChildrenComponent,
-                }),
-                deps: {
-                    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 },
-                },
-            },
-        ],
-    })
-], LayoutModule);
-
-const providers = [
-    provide({
-        provide: COMBINE_REDUCERS,
-        multi: true,
-        useValue: PageErrorStore,
-    }),
-    provide({
-        provide: TRAMVAI_RENDER_MODE,
-        useValue: 'ssr',
-    }),
-];
+import { ROUTER_TOKEN } from '@tramvai/tokens-router';
+import { rendering } from './client/index.browser.js';
+import { LayoutModule } from './shared/LayoutModule.browser.js';
+import { providers } from './shared/providers.browser.js';
+import { PageErrorStore, setPageErrorEvent } from './shared/pageErrorStore.browser.js';
+export { PageErrorStore, deserializeError, serializeError, setPageErrorEvent } from './shared/pageErrorStore.browser.js';
 
 var RenderModule_1;
 const DEFAULT_POLYFILL_CONDITION = '';
@@ -339,4 +115,4 @@ RenderModule = RenderModule_1 = __decorate([
     })
 ], RenderModule);
 
-export { DEFAULT_POLYFILL_CONDITION, PageErrorStore, RenderModule, deserializeError, serializeError, setPageErrorEvent };
+export { DEFAULT_POLYFILL_CONDITION, RenderModule };

package/lib/client/index.browser.js

@@ -0,0 +1,48 @@
+import each from '@tinkoff/utils/array/each';
+import { createElement, StrictMode } from 'react';
+import { renderReact } from '../react/index.browser.js';
+import { renderer } from './renderer.browser.js';
+
+function rendering({ logger, consumerContext, customRender, extendRender, di, useStrictMode, rendererCallback, }) {
+    const log = logger('module-render');
+    return new Promise((resolve, reject) => {
+        let renderResult = renderReact({ di }, consumerContext);
+        if (extendRender) {
+            each((render) => {
+                renderResult = render(renderResult);
+            }, extendRender);
+        }
+        if (customRender) {
+            return customRender(renderResult);
+        }
+        if (useStrictMode) {
+            renderResult = createElement(StrictMode, null, renderResult);
+        }
+        const container = document.querySelector('.application');
+        const executeRendererCallbacks = (renderErr) => rendererCallback === null || rendererCallback === void 0 ? void 0 : rendererCallback.forEach((cb) => {
+            try {
+                cb(renderErr);
+            }
+            catch (cbError) {
+                // eslint-disable-next-line no-console
+                console.error(cbError);
+            }
+        });
+        const callback = () => {
+            log.debug('App rendering');
+            document.querySelector('html').classList.remove('no-js');
+            executeRendererCallbacks();
+            resolve();
+        };
+        const params = { element: renderResult, container, callback, log };
+        try {
+            renderer(params);
+        }
+        catch (e) {
+            executeRendererCallbacks(e);
+            reject(e);
+        }
+    });
+}
+
+export { rendering };

package/lib/client/renderer.browser.js

@@ -0,0 +1,50 @@
+import debounce from '@tinkoff/utils/function/debounce';
+import { createElement } from 'react';
+import { useIsomorphicLayoutEffect } from '@tinkoff/react-hooks';
+
+let hydrateRoot;
+let startTransition;
+try {
+    // eslint-disable-next-line import/no-unresolved, import/extensions
+    hydrateRoot = require('react-dom/client').hydrateRoot;
+    startTransition = require('react').startTransition;
+}
+catch { }
+const ExecuteRenderCallback = ({ children, callback, }) => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useIsomorphicLayoutEffect(callback, []);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return children;
+};
+const renderer = ({ element, container, callback, log }) => {
+    if (process.env.__TRAMVAI_CONCURRENT_FEATURES && typeof hydrateRoot === 'function') {
+        const wrappedElement = createElement(ExecuteRenderCallback, { callback }, element);
+        let allErrors = new Map();
+        const logHydrateRecoverableError = debounce(50, () => {
+            if (allErrors.size === 0) {
+                return;
+            }
+            const [{ error, errorInfo }, ...otherErrors] = Array.from(allErrors.values());
+            allErrors = new Map();
+            log.error({
+                event: 'hydrate:recover-after-error',
+                error,
+                errorInfo,
+                otherErrors,
+            });
+        });
+        return startTransition(() => {
+            hydrateRoot(container, wrappedElement, {
+                onRecoverableError: (error, errorInfo) => {
+                    // deduplicate by unique important string values
+                    allErrors.set((error === null || error === void 0 ? void 0 : error.message) + (errorInfo === null || errorInfo === void 0 ? void 0 : errorInfo.componentStack), { error, errorInfo });
+                    logHydrateRecoverableError();
+                },
+            });
+        });
+    }
+    const { hydrate } = require('react-dom');
+    return hydrate(element, container, callback);
+};
+
+export { renderer };

package/lib/react/index.browser.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { Provider } from '@tramvai/state';
+import { DIContext } from '@tramvai/react';
+import { Root } from './root.browser.js';
+
+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(Root, {}) }) }));
+}
+
+export { renderReact };

package/lib/react/index.es.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { Provider } from '@tramvai/state';
+import { DIContext } from '@tramvai/react';
+import { Root } from './root.es.js';
+
+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(Root, {}) }) }));
+}
+
+export { renderReact };

package/lib/react/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var state = require('@tramvai/state');
+var react = require('@tramvai/react');
+var root = require('./root.js');
+
+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.DIContext.Provider, { value: di, children: jsxRuntime.jsx(root.Root, {}) }) }));
+}
+
+exports.renderReact = renderReact;

package/lib/react/pageErrorBoundary.browser.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useDi, ERROR_BOUNDARY_TOKEN, ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, UniversalErrorBoundary } from '@tramvai/react';
+import { useUrl } from '@tramvai/module-router';
+import { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
+import { useStore } from '@tramvai/state';
+import { PageErrorStore, deserializeError } from '../shared/pageErrorStore.browser.js';
+
+const PageErrorBoundary = (props) => {
+    const { children } = props;
+    const pageService = useDi(PAGE_SERVICE_TOKEN);
+    const url = useUrl();
+    const serializedError = useStore(PageErrorStore);
+    const error = useMemo(() => {
+        return serializedError && deserializeError(serializedError);
+    }, [serializedError]);
+    const errorHandlers = useDi({ token: ERROR_BOUNDARY_TOKEN, optional: true });
+    const fallbackFromDi = useDi({ token: ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, optional: true });
+    const fallback = pageService.resolveComponentFromConfig('errorBoundary');
+    return (jsx(UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi, children: children }));
+};
+
+export { PageErrorBoundary };

package/lib/react/pageErrorBoundary.es.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useDi, ERROR_BOUNDARY_TOKEN, ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, UniversalErrorBoundary } from '@tramvai/react';
+import { useUrl } from '@tramvai/module-router';
+import { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
+import { useStore } from '@tramvai/state';
+import { PageErrorStore, deserializeError } from '../shared/pageErrorStore.es.js';
+
+const PageErrorBoundary = (props) => {
+    const { children } = props;
+    const pageService = useDi(PAGE_SERVICE_TOKEN);
+    const url = useUrl();
+    const serializedError = useStore(PageErrorStore);
+    const error = useMemo(() => {
+        return serializedError && deserializeError(serializedError);
+    }, [serializedError]);
+    const errorHandlers = useDi({ token: ERROR_BOUNDARY_TOKEN, optional: true });
+    const fallbackFromDi = useDi({ token: ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, optional: true });
+    const fallback = pageService.resolveComponentFromConfig('errorBoundary');
+    return (jsx(UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi, children: children }));
+};
+
+export { PageErrorBoundary };

package/lib/react/pageErrorBoundary.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('react');
+var react = require('@tramvai/react');
+var moduleRouter = require('@tramvai/module-router');
+var tokensRouter = require('@tramvai/tokens-router');
+var state = require('@tramvai/state');
+var pageErrorStore = require('../shared/pageErrorStore.js');
+
+const PageErrorBoundary = (props) => {
+    const { children } = props;
+    const pageService = react.useDi(tokensRouter.PAGE_SERVICE_TOKEN);
+    const url = moduleRouter.useUrl();
+    const serializedError = state.useStore(pageErrorStore.PageErrorStore);
+    const error = react$1.useMemo(() => {
+        return serializedError && pageErrorStore.deserializeError(serializedError);
+    }, [serializedError]);
+    const errorHandlers = react.useDi({ token: react.ERROR_BOUNDARY_TOKEN, optional: true });
+    const fallbackFromDi = react.useDi({ token: react.ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, optional: true });
+    const fallback = pageService.resolveComponentFromConfig('errorBoundary');
+    return (jsxRuntime.jsx(react.UniversalErrorBoundary, { url: url, error: error, errorHandlers: errorHandlers, fallback: fallback, fallbackFromDi: fallbackFromDi, children: children }));
+};
+
+exports.PageErrorBoundary = PageErrorBoundary;

package/lib/react/root.browser.js

@@ -0,0 +1,58 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { usePageService } from '@tramvai/module-router';
+import { PageErrorBoundary } from './pageErrorBoundary.browser.js';
+
+/**
+ * Result component structure:
+ *
+ * <Root>
+ *   <RootComponent>
+ *    <LayoutComponent>
+ *      <NestedLayoutComponent>
+ *        <ErrorBoundaryComponent>
+ *          <PageComponent />
+ *        </ErrorBoundaryComponent>
+ *      </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`);
+        };
+    }
+    const page = useMemo(() => (jsx(PageErrorBoundary, { children: 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 });
+};
+
+export { Root };

package/lib/react/root.es.js

@@ -0,0 +1,58 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { usePageService } from '@tramvai/module-router';
+import { PageErrorBoundary } from './pageErrorBoundary.es.js';
+
+/**
+ * Result component structure:
+ *
+ * <Root>
+ *   <RootComponent>
+ *    <LayoutComponent>
+ *      <NestedLayoutComponent>
+ *        <ErrorBoundaryComponent>
+ *          <PageComponent />
+ *        </ErrorBoundaryComponent>
+ *      </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`);
+        };
+    }
+    const page = useMemo(() => (jsx(PageErrorBoundary, { children: 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 });
+};
+
+export { Root };

package/lib/react/root.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var moduleRouter = require('@tramvai/module-router');
+var pageErrorBoundary = require('./pageErrorBoundary.js');
+
+/**
+ * Result component structure:
+ *
+ * <Root>
+ *   <RootComponent>
+ *    <LayoutComponent>
+ *      <NestedLayoutComponent>
+ *        <ErrorBoundaryComponent>
+ *          <PageComponent />
+ *        </ErrorBoundaryComponent>
+ *      </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`);
+        };
+    }
+    const page = react.useMemo(() => (jsxRuntime.jsx(pageErrorBoundary.PageErrorBoundary, { children: 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 });
+};
+
+exports.Root = Root;

package/lib/resourcesInliner/externalFilesHelper.es.js

@@ -0,0 +1,17 @@
+import fetch from 'node-fetch';
+
+const thirtySeconds = 1000 * 30;
+const getFileContentLength = async (url) => {
+    const info = await fetch(url, { method: 'HEAD', timeout: thirtySeconds });
+    return info.headers.get('content-length');
+};
+const getFile = async (url) => {
+    const fileResponse = await fetch(url, { timeout: thirtySeconds });
+    if (fileResponse.ok) {
+        const file = await fileResponse.text();
+        return file;
+    }
+    return undefined;
+};
+
+export { getFile, getFileContentLength };