Merge pull request #138 from core-ds/docs/module-docs-cleanup

Docs/module docs cleanup
core-ds · Oct 5, 2023 · 2607942 · 2607942
2 parents aa6b9d6 + 6e64c05
commit 2607942
Show file tree

Hide file tree

Showing 16 changed files with 484 additions and 406 deletions.
diff --git a/packages/arui-scripts-modules/global-definitions.d.ts b/packages/arui-scripts-modules/global-definitions.d.ts
@@ -0,0 +1,5 @@
+/* eslint-disable @typescript-eslint/naming-convention,no-underscore-dangle */
+declare const __webpack_share_scopes__: {
+    default: unknown;
+};
+/* eslint-enable @typescript-eslint/naming-convention,no-underscore-dangle */
diff --git a/packages/arui-scripts-modules/src/module-loader/hooks/use-module-mounter.ts b/packages/arui-scripts-modules/src/module-loader/hooks/use-module-mounter.ts
@@ -100,6 +100,8 @@ export function useModuleMounter<LoaderParams, RunParams, ServerState extends Ba
         return function moduleCleanUp() {
             unmountFn?.();
         };
+        // Мы не хотим чтобы loader обновлялся при изменении run-params и loader-params, это осознанное решение
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [targetNode, loader]);
 
     return {

diff --git a/packages/arui-scripts-modules/src/module-loader/types.ts b/packages/arui-scripts-modules/src/module-loader/types.ts
@@ -93,11 +93,3 @@ export type ModuleFederationContainer = {
     init: (...args: unknown[]) => Promise<void>;
     get<T>(id: string): Promise<() => T>;
 };
-
-declare global {
-    /* eslint-disable @typescript-eslint/naming-convention,no-underscore-dangle */
-    const __webpack_share_scopes__: {
-        default: unknown;
-    };
-    /* eslint-enable @typescript-eslint/naming-convention,no-underscore-dangle */
-}
diff --git a/packages/arui-scripts-modules/tsconfig.json b/packages/arui-scripts-modules/tsconfig.json
@@ -9,6 +9,7 @@
     },
     "include": [
         "src/**/*.ts",
+        "global-definitions.d.ts"
     ],
     "exclude": ["build"]
 }
diff --git a/packages/arui-scripts/docs/modules.md b/packages/arui-scripts/docs/modules.md
diff --git a/packages/example-modules/src/modules/module-abstract/index.ts b/packages/example-modules/src/modules/module-abstract/index.ts
@@ -1,3 +1,5 @@
+import { WindowWithModule } from '@alfalab/scripts-modules';
+
 /**
  * Этот модуль является "абстрактным", то есть он не имеет какой-либо заданной структуры. Он может содержать любые
  * функции, переменные, классы, интерфейсы, типы и т.д.
@@ -9,7 +11,7 @@ export function justSomeRandomFunctionThatWeWantToExport() {
 
 export const someRandomVariableThatWeWantToExport = 'hello';
 
-(window as any).ModuleAbstract = {
+(window as WindowWithModule).ModuleAbstract = {
     justSomeRandomFunctionThatWeWantToExport,
     someRandomVariableThatWeWantToExport,
 };
diff --git a/packages/example-modules/src/modules/module-compat/index.tsx b/packages/example-modules/src/modules/module-compat/index.tsx
@@ -3,21 +3,21 @@
 import React from 'react';
 import { render } from 'react-dom';
 
-import type {
-    ModuleMountFunction,
-    ModuleUnmountFunction,
-    WindowWithMountableModule,
-} from '@alfalab/scripts-modules';
+import type { WindowWithModule } from '@alfalab/scripts-modules';
+import { MountableModule } from '@alfalab/scripts-modules/src/module-loader/module-types';
 
 import { PostcssFeatures } from '#/shared/postcss-features';
 
 import './styles.css';
 
-const mountModule: ModuleMountFunction<any, any> = (targetNode, runParams) => {
-    console.log('ModuleCompat: mount', { runParams });
+type ModuleType = MountableModule<Record<string, unknown>>;
 
-    if (targetNode) {
-        targetNode.innerHTML = `
+const ModuleCompat: ModuleType = {
+    mount: (targetNode, runParams) => {
+        console.log('ModuleCompat: mount', { runParams });
+
+        if (targetNode) {
+            targetNode.innerHTML = `
   <div class="module-ModuleCompat">
     Это модуль ModuleCompat, который был загружен в режиме compat.
 
@@ -32,19 +32,16 @@ const mountModule: ModuleMountFunction<any, any> = (targetNode, runParams) => {
     </div>
   </div>`;
 
-        render(<PostcssFeatures />, document.getElementById('postcss-example'));
-    }
-};
-
-const unmountModule: ModuleUnmountFunction = (targetNode) => {
-    console.log('ModuleCompat: cleanup');
+            render(<PostcssFeatures />, document.getElementById('postcss-example'));
+        }
+    },
+    unmount: (targetNode) => {
+        console.log('ModuleCompat: cleanup');
 
-    if (targetNode) {
-        targetNode.innerHTML = '';
-    }
+        if (targetNode) {
+            targetNode.innerHTML = '';
+        }
+    },
 };
 
-(window as WindowWithMountableModule).ModuleCompat = {
-    mount: mountModule,
-    unmount: unmountModule,
-};
+(window as WindowWithModule<ModuleType>).ModuleCompat = ModuleCompat;
diff --git a/packages/example-modules/src/modules/module/index.tsx b/packages/example-modules/src/modules/module/index.tsx
@@ -5,7 +5,7 @@ import type { ModuleMountFunction, ModuleUnmountFunction } from '@alfalab/script
 
 import { Module } from './Module';
 
-export const mount: ModuleMountFunction<any, any> = (targetNode, runParams, serverState) => {
+export const mount: ModuleMountFunction = (targetNode, runParams, serverState) => {
     console.log('Module: mount', { runParams, serverState });
     if (!targetNode) {
         throw new Error('Target node is not defined for module');

diff --git a/packages/example-modules/src/modules/server-state-module-compat/index.tsx b/packages/example-modules/src/modules/server-state-module-compat/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import type { ModuleMountFunction, ModuleUnmountFunction } from '@alfalab/scripts-modules';
+import type { ModuleMountFunction, ModuleUnmountFunction, WindowWithModule } from '@alfalab/scripts-modules';
 
 import { ServerStateModuleCompat } from '#/modules/server-state-module-compat/server-state-module-compat';
 
-const mountModule: ModuleMountFunction<any, any> = (targetNode, runParams, serverState) => {
+const mountModule: ModuleMountFunction<Record<string, unknown>> = (targetNode, runParams, serverState) => {
     console.log('ServerStateModuleCompat: mount', { runParams, serverState });
 
     ReactDOM.render(
@@ -22,8 +22,7 @@ const unmountModule: ModuleUnmountFunction = (targetNode) => {
     }
 };
 
-// TODO: типизировать
-(window as any).ServerStateModuleCompat = {
+(window as WindowWithModule).ServerStateModuleCompat = {
     mount: mountModule,
     unmount: unmountModule,
 };
diff --git a/...ges/example-modules/src/modules/server-state-module-compat/server-state-module-compat.tsx b/...ges/example-modules/src/modules/server-state-module-compat/server-state-module-compat.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const ServerStateModuleCompat = (props: { runParams: any; serverState: any }) => (
+export const ServerStateModuleCompat = (props: { runParams: Record<string, unknown>; serverState: Record<string, unknown> }) => (
     <div>
         Это модуль ServerStateModuleCompat, который был загружен в режиме compat. Главное его
         отличие от ModuleCompat - это то, что при его загрузке на страницу, он сразу же получает

diff --git a/packages/example-modules/src/modules/server-state-module/index.tsx b/packages/example-modules/src/modules/server-state-module/index.tsx
@@ -5,9 +5,9 @@ import ReactDOM from 'react-dom';
 
 import type { ModuleMountFunction, ModuleUnmountFunction } from '@alfalab/scripts-modules';
 
-import { ServerStateModule } from './ServerStateModule';
+import { ServerStateModule } from './server-state-module';
 
-const mount: ModuleMountFunction<any, any> = (targetNode, runParams, serverState) => {
+const mount: ModuleMountFunction<Record<string, unknown>> = (targetNode, runParams, serverState) => {
     console.log('ServerStateModule: mount', { runParams, serverState });
     ReactDOM.render(
         <ServerStateModule runParams={runParams} serverState={serverState} />,

diff --git a/...server-state-module/ServerStateModule.tsx → ...rver-state-module/server-state-module.tsx b/...server-state-module/ServerStateModule.tsx → ...rver-state-module/server-state-module.tsx
@@ -1,8 +1,6 @@
-/* eslint-disable unicorn/filename-case */
-// TODO: remove eslint-disable
 import React from 'react';
 
-export const ServerStateModule = (props: { runParams: any; serverState: any }) => (
+export const ServerStateModule = (props: { runParams: Record<string, unknown>; serverState: Record<string, unknown> }) => (
     <div>
         <h1>ServerStateModule</h1>
 

diff --git a/packages/example/src/module-mounters/abstract-module.tsx b/packages/example/src/module-mounters/abstract-module.tsx
@@ -4,7 +4,12 @@ import { Spinner } from '@alfalab/core-components/spinner';
 import { Underlay } from '@alfalab/core-components/underlay';
 import { createModuleFetcher, createModuleLoader, useModuleLoader } from '@alfalab/scripts-modules';
 
-const loader = createModuleLoader<any>({
+type ModuleType = {
+    justSomeRandomFunctionThatWeWantToExport: () => void;
+    someRandomVariableThatWeWantToExport: string;
+}
+
+const loader = createModuleLoader<ModuleType>({
     hostAppId: 'example',
     moduleId: 'ModuleAbstract',
     getModuleResources: createModuleFetcher({

diff --git a/packages/example/src/module-mounters/compat-module-mounter.tsx b/packages/example/src/module-mounters/compat-module-mounter.tsx
@@ -3,14 +3,13 @@ import React from 'react';
 import { Spinner } from '@alfalab/core-components/spinner';
 import { Underlay } from '@alfalab/core-components/underlay';
 import {
-    BaseModuleState,
     createModuleFetcher,
     createModuleLoader,
     MountableModule,
     useModuleMounter,
 } from '@alfalab/scripts-modules';
 
-const loader = createModuleLoader<MountableModule<any, BaseModuleState>>({
+const loader = createModuleLoader<MountableModule>({
     hostAppId: 'example',
     moduleId: 'ModuleCompat',
     getModuleResources: createModuleFetcher({

diff --git a/packages/example/src/module-mounters/server-state-compat-module-mounter.tsx b/packages/example/src/module-mounters/server-state-compat-module-mounter.tsx
@@ -3,14 +3,17 @@ import React from 'react';
 import { Spinner } from '@alfalab/core-components/spinner';
 import { Underlay } from '@alfalab/core-components/underlay';
 import {
-    BaseModuleState,
     createModuleLoader,
     createServerStateModuleFetcher,
     MountableModule,
     useModuleMounter,
 } from '@alfalab/scripts-modules';
 
-const loader = createModuleLoader<MountableModule<any, BaseModuleState>, { something: string }>({
+type ModuleRunParams = {
+    test: string;
+}
+
+const loader = createModuleLoader<MountableModule<ModuleRunParams>, { something: string }>({
     hostAppId: 'example',
     moduleId: 'ServerStateModuleCompat',
     getModuleResources: createServerStateModuleFetcher({ baseUrl: 'http://localhost:8082' }),

diff --git a/packages/example/src/module-mounters/server-state-factory-module-mounter.tsx b/packages/example/src/module-mounters/server-state-factory-module-mounter.tsx
@@ -16,7 +16,11 @@ type FactoryModuleRunParams = {
     placementId: string;
 };
 
-type ModuleType = FactoryModule<Record<string, any>, FactoryModuleRunParams>;
+type FactoryModuleType = {
+    reloadPage: () => void;
+}
+
+type ModuleType = FactoryModule<FactoryModuleType, FactoryModuleRunParams>;
 
 const loader = createModuleLoader<ModuleType>({
     hostAppId: 'example',