arui-scripts 23.5.0 → 23.6.0

package/.turbo/turbo-test.log

@@ -1,25 +1,26 @@
 ts-jest[versions] (WARN) Version 6.0.2 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=4.3.0 <6.0.0-0). Please do not report issues in ts-jest if you are using unsupported versions.
 ts-jest[versions] (WARN) Version 6.0.2 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=4.3.0 <6.0.0-0). Please do not report issues in ts-jest if you are using unsupported versions.
 ts-jest[versions] (WARN) Version 6.0.2 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=4.3.0 <6.0.0-0). Please do not report issues in ts-jest if you are using unsupported versions.
-PASS src/templates/__tests__/dockerfile-templates.tests.ts (32.557 s)
+PASS src/templates/__tests__/dockerfile-templates.tests.ts (34.516 s)
+PASS src/plugins/postcss-global-variables/utils/__tests__/add-global-variable.tests.ts
 PASS src/bin/__tests__/create-cli.tests.ts
 PASS src/configs/app-configs/__tests__/update-with-presets.tests.ts
-PASS src/plugins/postcss-global-variables/utils/__tests__/add-global-variable.tests.ts (32.977 s)
 PASS src/configs/util/__tests__/create-watch-ignore-regex.tests.ts
 PASS src/configs/util/__tests__/apply-overrides.tests.ts
 PASS src/configs/app-configs/__tests__/update-with-env.tests.ts
+PASS src/plugins/__tests__/attribute-module-css.tests.ts (42.07 s)
 PASS src/configs/app-configs/__tests__/update-with-package.tests.ts
 PASS src/configs/util/__tests__/compress-with-dcb.test.ts
 PASS src/configs/util/__tests__/get-polyfills.tests.ts
 PASS src/plugins/postcss-global-variables/utils/__tests__/parse-variables.tests.ts
 PASS src/plugins/postcss-global-variables/utils/__tests__/get-media-query-name.tests.ts
 PASS src/configs/app-configs/__tests__/validate-settings-keys.tests.ts
-PASS src/configs/__tests__/webpack-client-modules.tests.ts (10.249 s)
-PASS src/configs/util/__tests__/find-plugin.tests.ts (43.753 s)
+PASS src/configs/util/__tests__/find-plugin.tests.ts (46.322 s)
+PASS src/configs/__tests__/webpack-client-modules.tests.ts (11.433 s)
 A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks. Active timers can also cause this, ensure that .unref() was called on them.
 
-Test Suites: 15 passed, 15 total
-Tests:       45 passed, 45 total
+Test Suites: 16 passed, 16 total
+Tests:       51 passed, 51 total
 Snapshots:   0 total
-Time:        45.756 s
+Time:        49.282 s
 Ran all test suites.

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # arui-scripts
 
+## 23.6.0
+
+### Minor Changes
+
+-   [#532](https://github.com/core-ds/arui-scripts/pull/532) [`b82a10c`](https://github.com/core-ds/arui-scripts/commit/b82a10c4e90e625ff538f47528de0869f798d6d4) Thanks [@heymdall-legal](https://github.com/heymdall-legal)! - CSS module-federation модулей теперь попадает в манифест сборки на уровне каждого модуля.
+    Раньше стили модуля не были привязаны к его записи в манифесте, из-за чего хост-сервер не мог
+    отдать их при серверном рендере, и модуль отрисовывался без стилей до загрузки на клиенте.
+    Теперь стили доступны в записи модуля и могут быть встроены при SSR. Изменение аддитивно: для
+    сборок без модулей и для не-SSR потребления манифест остаётся прежним.
+
+    Подробнее: [SSR-спецификация модулей, раздел 10](../docs/specs/ssr-spec.md#10-addendum-css-delivery-for-module-federation-modules)..
+
+## 23.5.1
+
+### Patch Changes
+
+-   [#574](https://github.com/core-ds/arui-scripts/pull/574) [`2e48012`](https://github.com/core-ds/arui-scripts/commit/2e4801232e988fc8da639faac6e6e5fd716118e8) Thanks [@artemgafarov66](https://github.com/artemgafarov66)! - Исправлено создание ссылки на Yarn при сборке Docker-образа, если бинарник уже существует.
+
 ## 23.5.0
 
 ### Minor Changes

package/build/commands/util/yarn.js

@@ -93,5 +93,5 @@ function getYarnBinSymlinkCommand() {
         return '';
     }
     // WORKDIR в Dockerfile = /src
-    return `ln -s /src/${yarnPath} /usr/local/bin/yarn && \\\n    `;
+    return `ln -sf /src/${yarnPath} /usr/local/bin/yarn && \\\n    `;
 }

package/build/configs/modules-css-manifest.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Разделяемое хранилище css module-federation модулей.
+ *
+ * `AttributeModuleCssPlugin` наполняет его во время сборки (обходя граф чанков),
+ * а `processAssetsPluginOutput` читает при формировании json манифеста и
+ * дописывает css в записи соответствующих модулей.
+ *
+ * Map живёт на уровне модуля, поскольку плагин сборки и обработчик манифеста
+ * работают в одном процессе одной сборки (как и общий между сборками AssetsPlugin).
+ */
+export declare const modulesCssManifest: Map<string, string[]>;

package/build/configs/modules-css-manifest.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.modulesCssManifest = void 0;
+/**
+ * Разделяемое хранилище css module-federation модулей.
+ *
+ * `AttributeModuleCssPlugin` наполняет его во время сборки (обходя граф чанков),
+ * а `processAssetsPluginOutput` читает при формировании json манифеста и
+ * дописывает css в записи соответствующих модулей.
+ *
+ * Map живёт на уровне модуля, поскольку плагин сборки и обработчик манифеста
+ * работают в одном процессе одной сборки (как и общий между сборками AssetsPlugin).
+ */
+exports.modulesCssManifest = new Map();

package/build/configs/modules.js

@@ -40,10 +40,12 @@ exports.getCssPrefixForModule = getCssPrefixForModule;
 exports.getExposeLoadersFormCompatModules = getExposeLoadersFormCompatModules;
 exports.patchWebpackConfigForCompat = patchWebpackConfigForCompat;
 const rspack = __importStar(require("@rspack/core"));
+const attribute_module_css_1 = require("../plugins/attribute-module-css");
 const postcss_prefix_selector_1 = require("../plugins/postcss-prefix-selector");
 const turn_off_split_remote_entry_1 = require("../plugins/turn-off-split-remote-entry");
 const find_loader_1 = require("./util/find-loader");
 const app_configs_1 = require("./app-configs");
+const modules_css_manifest_1 = require("./modules-css-manifest");
 function haveExposedDefaultModules() {
     var _a;
     return (_a = app_configs_1.configs.modules) === null || _a === void 0 ? void 0 : _a.exposes;
@@ -100,10 +102,19 @@ function patchMainRspackConfigForModules(webpackConf, mode) {
             app_configs_1.configs.modules.shared,
         exposes: isProvider ? app_configs_1.configs.modules.exposes : {},
         shareScope: app_configs_1.configs.modules.shareScope,
-    }), new turn_off_split_remote_entry_1.TurnOffSplitRemoteEntry(getModuleFederationContainerName()));
+    }), new turn_off_split_remote_entry_1.TurnOffSplitRemoteEntry(getModuleFederationContainerName()), 
+    // на провайдере добавляем css чанки модулей в манифест
+    ...getModuleCssPlugins(isProvider));
     return webpackConf;
     /* eslint-enable no-param-reassign */
 }
+function getModuleCssPlugins(isProvider) {
+    var _a;
+    if (!isProvider || !((_a = app_configs_1.configs.modules) === null || _a === void 0 ? void 0 : _a.exposes)) {
+        return [];
+    }
+    return [new attribute_module_css_1.AttributeModuleCssPlugin(app_configs_1.configs.modules.exposes, modules_css_manifest_1.modulesCssManifest)];
+}
 /** @deprecated используйте `patchMainRspackConfigForModules` */
 exports.patchMainWebpackConfigForModules = patchMainRspackConfigForModules;
 function getCssPrefixForModule(module) {

package/build/configs/process-assets-plugin-output.js

@@ -7,6 +7,7 @@ exports.processAssetsPluginOutput = processAssetsPluginOutput;
 const path_1 = __importDefault(require("path"));
 const app_configs_1 = require("./app-configs");
 const modules_1 = require("./modules");
+const modules_css_manifest_1 = require("./modules-css-manifest");
 function processAssetsPluginOutput(assets) {
     var _a;
     const adjustedAssets = assets;
@@ -23,10 +24,15 @@ function processAssetsPluginOutput(assets) {
         if ((_b = (_a = app_configs_1.configs.compatModules) === null || _a === void 0 ? void 0 : _a.exposes) === null || _b === void 0 ? void 0 : _b[moduleName]) {
             throw new Error(`Модуль ${moduleName} определен как module и как compat. Поменяйте название одного из модулей или удалите его`);
         }
-        adjustedAssets[moduleName] = {
-            mode: 'default',
-            js: path_1.default.join(app_configs_1.configs.publicPath, modules_1.MODULES_ENTRY_NAME),
-        };
+        // css собирает AttributeModuleCssPlugin (обход графа чанков).
+        // Пути в манифесте держим с publicPath, как и remoteEntry.js.
+        const moduleCss = modules_css_manifest_1.modulesCssManifest.get(moduleName);
+        // css здесь массив (per-expose может быть несколько css-чанков), что шире
+        // строкового индекса типа Assets, но манифест сериализуется в json, а читатели
+        // (AruiAppManifest, createGetModulesMethod) уже принимают string | string[].
+        adjustedAssets[moduleName] = Object.assign({ mode: 'default', js: path_1.default.join(app_configs_1.configs.publicPath, modules_1.MODULES_ENTRY_NAME) }, (moduleCss && moduleCss.length > 0
+            ? { css: moduleCss.map((file) => path_1.default.join(app_configs_1.configs.publicPath, file)) }
+            : {}));
     });
     const result = Object.assign(Object.assign({}, adjustedAssets), { __metadata__: {
             version: app_configs_1.configs.version,

package/build/plugins/attribute-module-css.d.ts

@@ -0,0 +1,35 @@
+import { type Compiler, type RspackPluginInstance } from '@rspack/core';
+/** Формат значения одного экспоуза в конфиге module federation. */
+type ExposeConfigValue = string | string[] | {
+    import: string | string[];
+    name?: string;
+};
+/**
+ * Плагин добавляет css module-federation модулей в манифест сборки.
+ *
+ * По умолчанию для default-модулей `getModuleResources` отдаёт только `remoteEntry.js`,
+ * а css-чанки экспоузов остаются в безымянной ("") записи манифеста и не привязаны к
+ * конкретному модулю. Из-за этого хост-сервер при SSR не знает, какие стили встроить,
+ * и серверная разметка модуля отрисовывается без стилей до загрузки модуля на клиенте.
+ *
+ * Плагин обходит граф чанков от каждого экспоуза (async-блоки контейнерного энтрипоинта
+ * module federation), собирает css чанк-группы экспоуза (включая её синхронные части —
+ * splitChunks добавляет их в ту же чанк-группу) и записывает их в разделяемый map,
+ * откуда `processAssetsPluginOutput` дописывает css в запись модуля манифеста.
+ * Обход именно по графу чанков (а не по именам чанков) — имена вида
+ * `wmf-…_index_tsx.css` это деталь реализации. Css асинхронных чанков внутри экспоуза
+ * исключается: лениво подгружаемые компоненты не входят в SSR-html и грузят свой css
+ * на клиенте как и раньше (их чанк-группы — дочерние, мы в них не спускаемся).
+ */
+export declare class AttributeModuleCssPlugin implements RspackPluginInstance {
+    name: string;
+    /** map: import-путь экспоуза -> имя экспоуза (moduleId в манифесте) */
+    private importToExposeName;
+    /** разделяемый map: имя экспоуза -> css-файлы (сырые имена, без publicPath) */
+    private target;
+    constructor(exposes: Record<string, ExposeConfigValue>, target: Map<string, string[]>);
+    apply(compiler: Compiler): void;
+    private collect;
+    private getBlockExposeName;
+}
+export {};

package/build/plugins/attribute-module-css.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributeModuleCssPlugin = void 0;
+const core_1 = require("@rspack/core");
+const CSS_FILE_REGEXP = /\.css(\?.*)?$/i;
+/**
+ * Плагин добавляет css module-federation модулей в манифест сборки.
+ *
+ * По умолчанию для default-модулей `getModuleResources` отдаёт только `remoteEntry.js`,
+ * а css-чанки экспоузов остаются в безымянной ("") записи манифеста и не привязаны к
+ * конкретному модулю. Из-за этого хост-сервер при SSR не знает, какие стили встроить,
+ * и серверная разметка модуля отрисовывается без стилей до загрузки модуля на клиенте.
+ *
+ * Плагин обходит граф чанков от каждого экспоуза (async-блоки контейнерного энтрипоинта
+ * module federation), собирает css чанк-группы экспоуза (включая её синхронные части —
+ * splitChunks добавляет их в ту же чанк-группу) и записывает их в разделяемый map,
+ * откуда `processAssetsPluginOutput` дописывает css в запись модуля манифеста.
+ * Обход именно по графу чанков (а не по именам чанков) — имена вида
+ * `wmf-…_index_tsx.css` это деталь реализации. Css асинхронных чанков внутри экспоуза
+ * исключается: лениво подгружаемые компоненты не входят в SSR-html и грузят свой css
+ * на клиенте как и раньше (их чанк-группы — дочерние, мы в них не спускаемся).
+ */
+class AttributeModuleCssPlugin {
+    constructor(exposes, target) {
+        this.name = 'AttributeModuleCssPlugin';
+        this.target = target;
+        this.importToExposeName = new Map();
+        Object.entries(exposes).forEach(([exposeName, value]) => {
+            getExposeImports(value).forEach((importPath) => {
+                this.importToExposeName.set(importPath, exposeName);
+            });
+        });
+    }
+    apply(compiler) {
+        compiler.hooks.thisCompilation.tap(this.name, (compilation) => {
+            compilation.hooks.processAssets.tap({
+                name: this.name,
+                // на этой стадии граф чанков и имена файлов уже финальные
+                stage: core_1.Compilation.PROCESS_ASSETS_STAGE_REPORT,
+            }, () => this.collect(compilation));
+        });
+    }
+    collect(compilation) {
+        // watch-пересборки переиспользуют инстанс — очищаем предыдущий результат
+        this.target.clear();
+        const containerModule = findContainerEntryModule(compilation);
+        if (!containerModule) {
+            return;
+        }
+        (containerModule.blocks || []).forEach((block) => {
+            var _a;
+            const exposeName = this.getBlockExposeName(block);
+            if (!exposeName) {
+                return;
+            }
+            const group = compilation.chunkGraph.getBlockChunkGroup(block);
+            if (!group) {
+                return;
+            }
+            const css = collectGroupCss(group);
+            if (css.length > 0) {
+                const existing = (_a = this.target.get(exposeName)) !== null && _a !== void 0 ? _a : [];
+                this.target.set(exposeName, unique([...existing, ...css]));
+            }
+        });
+    }
+    getBlockExposeName(block) {
+        for (const dependency of block.dependencies) {
+            const { request } = dependency;
+            if (request && this.importToExposeName.has(request)) {
+                return this.importToExposeName.get(request);
+            }
+        }
+        return undefined;
+    }
+}
+exports.AttributeModuleCssPlugin = AttributeModuleCssPlugin;
+function findContainerEntryModule(compilation) {
+    for (const module of compilation.modules) {
+        // идентификатор контейнерного энтрипоинта MF начинается с "container entry"
+        if (module.identifier().startsWith('container entry')) {
+            return module;
+        }
+    }
+    return undefined;
+}
+function getExposeImports(value) {
+    if (typeof value === 'string') {
+        return [value];
+    }
+    if (Array.isArray(value)) {
+        return value;
+    }
+    return Array.isArray(value.import) ? value.import : [value.import];
+}
+function collectGroupCss(group) {
+    const files = new Set();
+    group.chunks.forEach((chunk) => {
+        chunk.files.forEach((file) => {
+            if (CSS_FILE_REGEXP.test(file)) {
+                files.add(file);
+            }
+        });
+    });
+    return Array.from(files);
+}
+function unique(values) {
+    return Array.from(new Set(values));
+}

package/docs/modules.md

@@ -332,6 +332,228 @@ export const MyAwesomeComponent = () => {
 }
 ```
 
+# Подключение модулей с использованием react.lazy
+Для того чтобы подключить модуль используя механизм [suspense](https://react.dev/reference/react/Suspense), библиотека предоставляет функцию-хелпер `createLazyMounter`:
+
+```tsx
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import {
+    createLazyMounter,
+    createModuleLoader,
+    MountableModule,
+} from '@alfalab/scripts-modules';
+
+type ModuleRunParams = {
+    username: string;
+};
+
+const loader = createModuleLoader<MountableModule<ModuleRunParams>>({
+    // ...
+});
+const LazyModule = React.lazy(createLazyMounter({
+    loader,
+    loaderParams: {}, // опционально
+}));
+
+const MyApp = () => (
+    <ErrorBoundary fallback={ <div>Ошибка!</div> }>
+        <React.Suspense fallback={ <div>Загрузка...</div> }>
+            <LazyModule
+                username="Unknown" // props определяется по ModuleRunParams
+            />
+        </React.Suspense>
+    </ErrorBoundary>
+);
+```
+
+У такого способа подключения есть ряд ограничений:
+1. Нет поддержки shadow DOM
+2. `loaderParams` будет передаваться в модуль только один раз, их изменения не будут приводить к перемонтированию модуля
+3. Модуль никогда не будет удаляться из DOM.
+4. Менее гибкая обработка ошибок - при подключении через `useModuleMounter` вы легко можете добавить механизм ретраев, с `lazy` - только показать сообщение об ошибке
+
+Использовать такой способ стоит только для "статичных" модулей, которые всегда остаются на странице и при этом не зависят от loaderParams.
+
+# Серверный рендеринг модулей
+
+Если приложение-хост само рендерится на сервере (например через React 18 streaming), оно может
+включить HTML модуля в первый ответ сервера. Для этого используется отдельный API
+`createSsrMounter` из `@alfalab/scripts-modules/ssr`.
+
+SSR модулей работает по схеме HTML-over-the-wire:
+
+1. сервер хоста вызывает серверный эндпоинт модуля с флагом `ssr`;
+2. сервер модуля возвращает обычные ресурсы, серверное состояние и готовый HTML модуля;
+3. хост вставляет HTML модуля, инлайнит стили и сериализует payload ресурсов в страницу;
+4. клиент читает встроенный payload, не делает повторный запрос за ресурсами и вызывает
+   `hydrate` модуля, если он экспортирован.
+
+SSR поддерживается только для монтируемых модулей (`MountableModule`). Абстрактные модули,
+модули-фабрики и `useShadowDom: true` остаются client-side сценариями.
+
+## Серверный провайдер
+
+SSR-модули используют кэш ресурсов в рамках одного HTTP-запроса. Поэтому в серверной точке
+входа хоста нужно обернуть дерево в `ModuleSsrRequestProvider` из
+`@alfalab/scripts-modules/ssr` и передать уникальный `requestId` для каждого запроса:
+
+```tsx
+import { ModuleSsrRequestProvider } from '@alfalab/scripts-modules/ssr';
+
+// Внутри обработчика HTTP-запроса хоста:
+const requestId = crypto.randomUUID();
+
+renderToPipeableStream(
+    <AppHtml>
+        <ModuleSsrRequestProvider requestId={requestId}>
+            <App />
+        </ModuleSsrRequestProvider>
+    </AppHtml>,
+    // ...
+);
+```
+
+Генерируйте `requestId` один раз на запрос, а не во время рендера: он должен оставаться
+стабильным при повторных попытках рендера Suspense. Идентификаторы разных запросов должны
+отличаться, иначе `moduleState` и ресурсы одного пользователя могут попасть в другой запрос.
+На клиенте провайдер не нужен: он не создаёт DOM-узлов и не влияет на гидрацию. Если SSR-модуль
+отрендерится на сервере без провайдера, `createSsrMounter` выбросит ошибку.
+
+## Подключение SSR-модуля в приложении-потребителе
+
+```tsx
+import React from 'react';
+
+import { createServerStateModuleFetcher } from '@alfalab/scripts-modules';
+import { createSsrMounter } from '@alfalab/scripts-modules/ssr';
+
+type ModuleRunParams = {
+    name: string;
+    counter: number;
+    onClick?: () => void;
+};
+
+type ModuleSsrRunParams = {
+    name: string;
+    counter: number;
+};
+
+const { ModuleComponent } = createSsrMounter<ModuleRunParams, ModuleSsrRunParams>({
+    hostAppId: 'bar-app',
+    moduleId: 'ServerStateModule',
+    getModuleResources: createServerStateModuleFetcher({
+        baseUrl: 'https://example.com/foo-app',
+    }),
+});
+
+export const MyAwesomeComponent = () => {
+    const ssrRunParams = { name: 'Ivan', counter: 1 };
+
+    return (
+        <React.Suspense fallback={<div>pending...</div>}>
+            <ModuleComponent
+                instanceId='server-state-main'
+                ssrRunParams={ssrRunParams}
+                runParams={{
+                    ...ssrRunParams,
+                    onClick: () => console.log('client-only callback'),
+                }}
+            />
+        </React.Suspense>
+    );
+};
+```
+
+`ssrRunParams` - это сериализуемое подмножество `runParams`, с которым модуль рендерится на
+сервере. В него нельзя класть callback, ref, DOM-ноды и другие клиентские значения. Такие
+значения передаются только в `runParams` и становятся доступны при `hydrate`, `mount` или
+`update`.
+
+Если один и тот же модуль рендерится на странице несколько раз, задавайте стабильный
+`instanceId`, чтобы клиент нашел правильный встроенный payload для каждого инстанса. Он также
+должен быть уникальным среди одновременно отрендеренных экземпляров одного модуля. Если не
+передать `instanceId`, он вычисляется из `ssrRunParams`; поэтому у нескольких экземпляров с
+одинаковыми параметрами обязательно задавайте разные явные идентификаторы.
+
+## Что должен сделать автор SSR-модуля
+
+На сервере модуля нужно добавить `renderToHtml` в описание модуля:
+
+```tsx
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+
+import { createGetModulesExpress } from '@alfalab/scripts-server/build/express';
+
+import { ServerStateModule } from './modules/server-state-module';
+
+const modulesRouter = createGetModulesExpress({
+    ServerStateModule: {
+        mountMode: 'default',
+        version: '1.0.0',
+        getModuleState: async () => ({
+            baseUrl: 'https://example.com/foo-app',
+            someData: 'server data',
+        }),
+        renderToHtml: async ({ moduleState, ssrRunParams }) =>
+            renderToString(
+                <ServerStateModule
+                    serverState={moduleState}
+                    runParams={(ssrRunParams ?? {}) as Record<string, unknown>}
+                />,
+            ),
+    },
+});
+```
+
+В клиентском экспорте модуля нужно добавить `hydrate`, а если модуль должен обновляться при
+изменении `runParams` без полного перемонтирования - еще и `update`:
+
+```tsx
+import React from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+
+import type { ModuleMountFunction, ModuleUnmountFunction } from '@alfalab/scripts-modules';
+
+let root: ReturnType<typeof createRoot>;
+
+export const mount: ModuleMountFunction = (targetNode, runParams, serverState) => {
+    root = createRoot(targetNode);
+    root.render(<App runParams={runParams} serverState={serverState} />);
+};
+
+export const hydrate: ModuleMountFunction = (targetNode, runParams, serverState) => {
+    root = hydrateRoot(targetNode, <App runParams={runParams} serverState={serverState} />);
+};
+
+export const update: ModuleMountFunction = (targetNode, runParams, serverState) => {
+    root.render(<App runParams={runParams} serverState={serverState} />);
+};
+
+export const unmount: ModuleUnmountFunction = () => {
+    root?.unmount();
+};
+```
+
+Если модуль вернул HTML, но не экспортирует `hydrate`, клиент очистит серверную разметку и
+вызовет обычный `mount`. Это корректный fallback, но пользователь может увидеть мигание.
+
+При клиентской навигации серверной разметки и встроенного payload может не быть. В этом случае
+`createSsrMounter` создаст пустой outlet, получит ресурсы обычным `getModuleResources`-запросом
+и вызовет `mount`. Таким образом, SSR-модуль остаётся совместимым с client-side переходами.
+
+По умолчанию стили SSR-модуля инлайнятся в HTML хоста как `<style>` рядом с разметкой
+модуля, чтобы Suspense-boundary раскрывался сразу с готовыми стилями. Если хосту важнее
+меньший HTML и browser cache для CSS, можно передать `stylesMode: 'link'` в
+`createSsrMounter`: сервер отдаст `<link rel='stylesheet' type='text/css'>` с SSR-атрибутами,
+а клиент переиспользует эти теги и не добавит дубликаты. На React 18 Suspense-boundary может
+раскрыться до окончания загрузки CSS, поэтому `inline` остается значением по умолчанию.
+
+Подробное описание API, матрица поведения гидрации и дополнительные ограничения описаны в
+README пакета `@alfalab/scripts-modules`.
+
 # Изоляция стилей
 Если ваши приложения активно используют глобальные стили (то есть не с css-modules или css-in-js), вы вполне
 можете столкнуться с проблемой конфликтов стилей между модулями и приложением-потребителем.
@@ -585,6 +807,10 @@ const loader = createModuleLoader({
 
 **Внимание!** Использование `resourcesCache: 'single-item'` не будет работать вместе с `useShadowDom` из-за особенностей работы со стилями.
 
+## Кеширование при использовании `createLazyMounter`
+
+Если вы используете `createLazyMounter` - модуль будет загружаться лишь один раз, не зависимо от используемых `loaderParams`.
+
 # Другие типы модулей
 
 Помимо создания монтируемых модулей, есть возможность создавать и другие типы модулей, более подходящие для некоторых вариантов использования.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arui-scripts",
-  "version": "23.5.0",
+  "version": "23.6.0",
   "main": "./build/index.js",
   "typings": "./build/index.d.ts",
   "exports": {