fix(modules): scope SSR markup by module

Author: Heymdall

packages/arui-scripts-modules/src/module-loader/utils/get-embedded-module-resources.ts

@@ -32,6 +32,11 @@ export const MODULE_DATA_HREF_ATTRIBUTE = 'data-href';
  * снять с неё снапшот при гидрации.
  */
 export const MODULE_SSR_ROOT_ATTRIBUTE = 'data-module-ssr-root';
+/**
+ * Атрибут SSR-обёртки, различающий разные модули с одинаковым `instanceId`.
+ * Вместе с `data-module-ssr-root` образует уникальный ключ серверной разметки.
+ */
+export const MODULE_SSR_MODULE_ATTRIBUTE = 'data-module-ssr-module';
 /**
  * Атрибут outlet-элемента (внутри обёртки), в который смонтирован/гидрирован модуль.
  * Значение — `instanceId`.

packages/arui-scripts-modules/src/ssr/__tests__/create-ssr-mounter.tests.tsx

@@ -329,6 +329,52 @@ describe('createSsrMounter', () => {
         ]);
     });
 
+    it('does not use another module SSR markup when instance ids match', async () => {
+        const firstModuleId = 'FirstModule';
+        const secondModuleId = 'SecondModule';
+        const firstModule = { hydrate: jest.fn(), mount: jest.fn(), unmount: jest.fn() };
+        const secondModule = { hydrate: jest.fn(), mount: jest.fn(), unmount: jest.fn() };
+
+        (window as unknown as Record<string, unknown>)[firstModuleId] = firstModule;
+        (window as unknown as Record<string, unknown>)[secondModuleId] = secondModule;
+
+        const { ModuleComponent: FirstModuleComponent } = createSsrMounter<RunParams>({
+            moduleId: firstModuleId,
+            hostAppId: 'host',
+            getModuleResources: jest
+                .fn()
+                .mockResolvedValue(buildResources({ appName: firstModuleId })),
+        });
+        const { ModuleComponent: SecondModuleComponent } = createSsrMounter<RunParams>({
+            moduleId: secondModuleId,
+            hostAppId: 'host',
+            getModuleResources: jest.fn().mockResolvedValue(
+                buildResources({
+                    appName: secondModuleId,
+                    html: undefined,
+                }),
+            ),
+        });
+        const element = (
+            <Suspense fallback={<span>loading</span>}>
+                <FirstModuleComponent instanceId='shared' />
+                <SecondModuleComponent instanceId='shared' />
+            </Suspense>
+        );
+
+        container.innerHTML = await renderServerHtml(element);
+
+        await act(async () => {
+            hydrateRoot(container, element);
+        });
+
+        await waitFor(() => {
+            expect(secondModule.mount).toHaveBeenCalledTimes(1);
+        });
+
+        expect(secondModule.hydrate).not.toHaveBeenCalled();
+    });
+
     it('falls back to mount (clearing the outlet) when the module has no hydrate', async () => {
         jest.spyOn(console, 'warn').mockImplementation(() => {});
         const getModuleResources = jest.fn().mockResolvedValue(buildResources());

packages/arui-scripts-modules/src/ssr/create-ssr-mounter.tsx

@@ -12,6 +12,7 @@ import {
     MODULE_DATA_HREF_ATTRIBUTE,
     MODULE_SSR_HREF_ATTRIBUTE,
     MODULE_SSR_INSTANCE_ATTRIBUTE,
+    MODULE_SSR_MODULE_ATTRIBUTE,
     MODULE_SSR_MOUNT_ID_ATTRIBUTE,
     MODULE_SSR_PAYLOAD_ATTRIBUTE,
     MODULE_SSR_ROOT_ATTRIBUTE,
@@ -209,7 +210,12 @@ export function createSsrMounter<
 
         /* eslint-disable react/no-danger -- мы получаем много разметки не из реакта при работе с модулями */
         return (
-            <div {...{ [MODULE_SSR_ROOT_ATTRIBUTE]: instanceId }}>
+            <div
+                {...{
+                    [MODULE_SSR_ROOT_ATTRIBUTE]: instanceId,
+                    [MODULE_SSR_MODULE_ATTRIBUTE]: moduleId,
+                }}
+            >
                 {stylesMode === 'inline'
                     ? inlineStyles.map((style) => (
                           <style
@@ -275,7 +281,7 @@ export function createSsrMounter<
         const hadServerHtmlRef = useRef(false);
 
         if (snapshotRef.current === null) {
-            const { snapshot, hadServerHtml } = readServerMarkup(instanceId);
+            const { snapshot, hadServerHtml } = readServerMarkup(moduleId, instanceId);
 
             snapshotRef.current = snapshot;
             hadServerHtmlRef.current = hadServerHtml;
@@ -378,7 +384,10 @@ export function createSsrMounter<
             return (
                 <div
                     ref={rootRef}
-                    {...{ [MODULE_SSR_ROOT_ATTRIBUTE]: instanceId }}
+                    {...{
+                        [MODULE_SSR_ROOT_ATTRIBUTE]: instanceId,
+                        [MODULE_SSR_MODULE_ATTRIBUTE]: moduleId,
+                    }}
                     dangerouslySetInnerHTML={{ __html: snapshotRef.current }}
                     suppressHydrationWarning={true}
                 />
@@ -388,7 +397,13 @@ export function createSsrMounter<
         // Нет серверной разметки (например, клиентский SPA-переход) — рендерим пустой outlet
         // для обычного монтирования.
         return (
-            <div ref={rootRef} {...{ [MODULE_SSR_ROOT_ATTRIBUTE]: instanceId }}>
+            <div
+                ref={rootRef}
+                {...{
+                    [MODULE_SSR_ROOT_ATTRIBUTE]: instanceId,
+                    [MODULE_SSR_MODULE_ATTRIBUTE]: moduleId,
+                }}
+            >
                 <div {...{ [MODULE_SSR_MOUNT_ID_ATTRIBUTE]: instanceId }} />
             </div>
         );
@@ -415,13 +430,17 @@ function safeStringify(value: unknown): string {
     }
 }
 
-function readServerMarkup(instanceId: string): { snapshot: string; hadServerHtml: boolean } {
+function readServerMarkup(
+    moduleId: string,
+    instanceId: string,
+): { snapshot: string; hadServerHtml: boolean } {
     if (typeof document === 'undefined') {
         return { snapshot: '', hadServerHtml: false };
     }
 
     const root = document.querySelector(
-        `[${MODULE_SSR_ROOT_ATTRIBUTE}="${cssEscape(instanceId)}"]`,
+        `[${MODULE_SSR_ROOT_ATTRIBUTE}="${cssEscape(instanceId)}"]` +
+            `[${MODULE_SSR_MODULE_ATTRIBUTE}="${cssEscape(moduleId)}"]`,
     );
 
     if (!root) {