@tramvai/module-child-app 1.66.0 → 1.68.1

package/README.md

@@ -129,14 +129,70 @@ State for child-apps will be dehydrated on server as separate variable in the re
 
 Usually child-app cannot read data from root-app stores, but the dangerous workaround that allows to subscribe on any root-app store exists.
 
-It may be done using `CHILD_APP_ROOT_STATE_SUBSCRIPTION_TOKEN` token.
+It may be done using `CHILD_APP_INTERNAL_ROOT_STATE_SUBSCRIPTION_TOKEN` token.
 
-This token is considered dangerous as it leads to high coupling with stores from root-app and this way stores in root-app might not change their public interface. But, in most cases, changes in stores ignore breaking change tracking and often breaks backward-compatibility. So **do not use this token if you can**, and if you should - use as little as possible from root-app and provide some fallback in case of wrong data. 
+This token is considered dangerous as it leads to high coupling with stores from root-app and this way stores in root-app might not change their public interface. But, in most cases, changes in stores ignore breaking change tracking and often breaks backward-compatibility. So **do not use this token if you can**, and if you should - use as little as possible from root-app and provide some fallback in case of wrong data.
+
+[See how to do it](#child_app_internal_root_state_subscription_token)
 
 :::
 
 ## API
 
+### CHILD_APP_INTERNAL_ROOT_STATE_SUBSCRIPTION_TOKEN
+
+Allows to subscribe to any store from the root app and execute actions based on its state, e.g. to fill internal child-app state.
+
+1. Create a new store and a new event within child-app. This store might be used inside child-app as usual store.
+
+   ```ts
+   import { createReducer, createEvent } from '@tramvai/state';
+
+   interface State {
+     value: string;
+   }
+   export const setRootState = createEvent<string>('child-root set state');
+
+   export const rootStore = createReducer('child-root', { value: 'child' } as State).on(
+     setRootState,
+     (state, value) => {
+       return { value };
+     }
+   );
+   ```
+
+2. Add provider for the `CHILD_APP_INTERNAL_ROOT_STATE_SUBSCRIPTION_TOKEN` in order to subscribe to store. In subscription you can dispatch internal event from the child-app
+
+   ```ts
+   provide({
+     provide: CHILD_APP_INTERNAL_ROOT_STATE_SUBSCRIPTION_TOKEN,
+     multi: true,
+     useFactory: ({ context }) => {
+       return {
+         stores: ['root'],
+         listener: (state: Record<string, any>) => {
+           return context.dispatch(setRootState(`root ${state.root.value}`));
+         },
+       };
+     },
+     deps: {
+       context: CONTEXT_TOKEN,
+     },
+   });
+   ```
+
+3. Use internal child-app store anywhere in the child-app
+
+   ```tsx
+   export const StateCmp = () => {
+     const value = useSelector([rootStore], (state) => {
+       return state['child-root'].value;
+     });
+
+     return <div id="child-state">Current Value from Root Store: {value}</div>;
+   };
+   ```
+
 ## How to
 
 ### Connect a child app

package/lib/browser/child/providers.d.ts

@@ -1,3 +1,3 @@
 import type { Container } from '@tinkoff/dippy';
 import type { Provider } from '@tramvai/core';
-export declare const getChildProviders: (appDi: Container) => Provider[];
+export declare const getChildProviders: (_: Container) => Provider[];

package/lib/browser/child/singletonProviders.d.ts

@@ -0,0 +1,3 @@
+import type { Container } from '@tinkoff/dippy';
+import type { Provider } from '@tramvai/core';
+export declare const getChildProviders: (appDi: Container) => Provider[];

package/lib/server/child/singletonProviders.d.ts

@@ -0,0 +1,3 @@
+import type { Container } from '@tinkoff/dippy';
+import type { Provider } from '@tramvai/core';
+export declare const getChildProviders: (appDi: Container) => Provider[];

package/lib/server/render.d.ts

@@ -2,8 +2,9 @@ import type { CUSTOM_RENDER } from '@tramvai/tokens-render';
 import type { Container } from '@tinkoff/dippy';
 import type { ChildAppDiManager, ChildAppPreloadManager, ChildAppRenderManager, ChildAppRequestConfig, CHILD_APP_RESOLVE_CONFIG_TOKEN } from '@tramvai/tokens-child-app';
 import type { LOGGER_TOKEN } from '@tramvai/tokens-common';
-export declare const customRender: ({ renderManager, }: {
+export declare const customRender: ({ renderManager, diManager, }: {
     renderManager: ChildAppRenderManager;
+    diManager: ChildAppDiManager;
 }) => typeof CUSTOM_RENDER;
 export declare class RenderManager implements ChildAppRenderManager {
     private readonly preloadManager;

package/lib/server.browser.js

@@ -14,7 +14,7 @@ import { loadModule } from '@tinkoff/module-loader-client';
 import noop from '@tinkoff/utils/function/noop';
 import { useDi } from '@tramvai/react';
 
-const getChildProviders$1 = (appDi) => {
+const getChildProviders$3 = (appDi) => {
     const context = appDi.get(CONTEXT_TOKEN);
     return [
         {
@@ -56,7 +56,7 @@ const getChildProviders$1 = (appDi) => {
     ];
 };
 
-const getChildProviders = (appDi) => {
+const getChildProviders$2 = (appDi) => {
     const logger = appDi.get(LOGGER_TOKEN);
     return [
         provide({
@@ -70,7 +70,7 @@ const getChildProviders = (appDi) => {
             multi: true,
             useValue: [],
         }),
-        ...getChildProviders$1(appDi),
+        ...getChildProviders$3(appDi),
     ];
 };
 
@@ -137,7 +137,7 @@ class SingletonDiManager {
             },
         ], this.appDi);
         const { modules = [], providers = [], actions = [] } = children;
-        const childProviders = getChildProviders(this.appDi);
+        const childProviders = getChildProviders$2(this.appDi);
         childProviders.forEach((provider) => {
             di.register(provider);
         });
@@ -171,6 +171,14 @@ class SingletonDiManager {
     }
 }
 
+const getChildProviders$1 = (_) => {
+    return [];
+};
+
+const getChildProviders = (appDi) => {
+    return getChildProviders$1();
+};
+
 class DiManager {
     constructor({ appDi, loader, singletonDiManager, }) {
         this.cache = new Map();
@@ -201,7 +209,12 @@ class DiManager {
         if (!singletonDi) {
             return;
         }
-        return new ChildContainer(singletonDi, this.appDi);
+        const di = new ChildContainer(singletonDi, this.appDi);
+        const childProviders = getChildProviders(this.appDi);
+        childProviders.forEach((provider) => {
+            di.register(provider);
+        });
+        return di;
     }
 }
 

package/lib/server.es.js

@@ -1,9 +1,9 @@
 import { __decorate } from 'tslib';
 import { provide, COMMAND_LINE_RUNNER_TOKEN, walkOfModules, getModuleParameters, commandLineListTokens as commandLineListTokens$1, Module } from '@tramvai/core';
 import { Container, ChildContainer, Scope, DI_TOKEN } from '@tinkoff/dippy';
-import { commandLineListTokens, CHILD_APP_INTERNAL_ROOT_STATE_SUBSCRIPTION_TOKEN, CHILD_APP_INTERNAL_ACTION_TOKEN, CHILD_APP_INTERNAL_CONFIG_TOKEN, IS_CHILD_APP_DI_TOKEN, CHILD_APP_INTERNAL_ROOT_DI_BORROW_TOKEN, CHILD_APP_RESOLUTION_CONFIG_MANAGER_TOKEN, CHILD_APP_RESOLUTION_CONFIGS_TOKEN, CHILD_APP_RESOLVE_CONFIG_TOKEN, CHILD_APP_RESOLVE_BASE_URL_TOKEN, CHILD_APP_SINGLETON_DI_MANAGER_TOKEN, CHILD_APP_LOADER_TOKEN, CHILD_APP_DI_MANAGER_TOKEN, CHILD_APP_COMMAND_LINE_RUNNER_TOKEN, CHILD_APP_PRELOAD_MANAGER_TOKEN, CHILD_APP_RENDER_MANAGER_TOKEN, CHILD_APP_STATE_MANAGER_TOKEN, CHILD_APP_INTERNAL_RENDER_TOKEN } from '@tramvai/tokens-child-app';
+import { commandLineListTokens, CHILD_APP_INTERNAL_ACTION_TOKEN, CHILD_APP_INTERNAL_CONFIG_TOKEN, IS_CHILD_APP_DI_TOKEN, CHILD_APP_INTERNAL_ROOT_DI_BORROW_TOKEN, CHILD_APP_INTERNAL_BEFORE_RENDER_TOKEN, CHILD_APP_INTERNAL_ROOT_STATE_SUBSCRIPTION_TOKEN, CHILD_APP_RESOLUTION_CONFIG_MANAGER_TOKEN, CHILD_APP_RESOLUTION_CONFIGS_TOKEN, CHILD_APP_RESOLVE_CONFIG_TOKEN, CHILD_APP_RESOLVE_BASE_URL_TOKEN, CHILD_APP_SINGLETON_DI_MANAGER_TOKEN, CHILD_APP_LOADER_TOKEN, CHILD_APP_DI_MANAGER_TOKEN, CHILD_APP_COMMAND_LINE_RUNNER_TOKEN, CHILD_APP_PRELOAD_MANAGER_TOKEN, CHILD_APP_RENDER_MANAGER_TOKEN, CHILD_APP_STATE_MANAGER_TOKEN, CHILD_APP_INTERNAL_RENDER_TOKEN } from '@tramvai/tokens-child-app';
 export * from '@tramvai/tokens-child-app';
-import { ACTION_PAGE_RUNNER_TOKEN, CONTEXT_TOKEN, LOGGER_TOKEN, DISPATCHER_TOKEN, STORE_TOKEN, COMBINE_REDUCERS, ENV_MANAGER_TOKEN, REGISTER_CLEAR_CACHE_TOKEN, CLEAR_CACHE_TOKEN, ENV_USED_TOKEN, CREATE_CACHE_TOKEN } from '@tramvai/tokens-common';
+import { ACTION_PAGE_RUNNER_TOKEN, LOGGER_TOKEN, DISPATCHER_TOKEN, STORE_TOKEN, CONTEXT_TOKEN, COMBINE_REDUCERS, ENV_MANAGER_TOKEN, REGISTER_CLEAR_CACHE_TOKEN, CLEAR_CACHE_TOKEN, ENV_USED_TOKEN, CREATE_CACHE_TOKEN } from '@tramvai/tokens-common';
 import { RENDER_SLOTS, EXTEND_RENDER, ResourceType, ResourceSlot, RESOURCES_REGISTRY, CUSTOM_RENDER } from '@tramvai/tokens-render';
 import { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
 import flatten from '@tinkoff/utils/array/flatten';
@@ -17,27 +17,8 @@ import noop from '@tinkoff/utils/function/noop';
 import { renderToString } from 'react-dom/server';
 import { useDi } from '@tramvai/react';
 
-const getChildProviders$1 = (appDi) => {
-    const context = appDi.get(CONTEXT_TOKEN);
+const getChildProviders$3 = (appDi) => {
     return [
-        {
-            provide: commandLineListTokens.customerStart,
-            multi: true,
-            useFactory: ({ subscriptions, }) => {
-                return function resolveRootStateForChild() {
-                    if (!subscriptions) {
-                        return;
-                    }
-                    const state = context.getState();
-                    return Promise.all(subscriptions.map((sub) => {
-                        return sub.listener(state);
-                    }));
-                };
-            },
-            deps: {
-                subscriptions: { token: CHILD_APP_INTERNAL_ROOT_STATE_SUBSCRIPTION_TOKEN, optional: true },
-            },
-        },
         provide({
             provide: commandLineListTokens.resolvePageDeps,
             multi: true,
@@ -54,7 +35,7 @@ const getChildProviders$1 = (appDi) => {
     ];
 };
 
-const getChildProviders = (appDi) => {
+const getChildProviders$2 = (appDi) => {
     const logger = appDi.get(LOGGER_TOKEN);
     return [
         provide({
@@ -68,7 +49,7 @@ const getChildProviders = (appDi) => {
             multi: true,
             useValue: [],
         }),
-        ...getChildProviders$1(appDi),
+        ...getChildProviders$3(),
     ];
 };
 
@@ -135,7 +116,7 @@ class SingletonDiManager {
             },
         ], this.appDi);
         const { modules = [], providers = [], actions = [] } = children;
-        const childProviders = getChildProviders(this.appDi);
+        const childProviders = getChildProviders$2(this.appDi);
         childProviders.forEach((provider) => {
             di.register(provider);
         });
@@ -169,6 +150,34 @@ class SingletonDiManager {
     }
 }
 
+const getChildProviders$1 = (appDi) => {
+    const store = appDi.get(STORE_TOKEN);
+    return [
+        {
+            provide: CHILD_APP_INTERNAL_BEFORE_RENDER_TOKEN,
+            multi: true,
+            useFactory: ({ subscriptions, }) => {
+                return function resolveRootStateForChild() {
+                    if (!subscriptions) {
+                        return;
+                    }
+                    const state = store.getState();
+                    return Promise.all(subscriptions.map((sub) => {
+                        return sub.listener(state);
+                    }));
+                };
+            },
+            deps: {
+                subscriptions: { token: CHILD_APP_INTERNAL_ROOT_STATE_SUBSCRIPTION_TOKEN, optional: true },
+            },
+        },
+    ];
+};
+
+const getChildProviders = (appDi) => {
+    return getChildProviders$1(appDi);
+};
+
 class DiManager {
     constructor({ appDi, loader, singletonDiManager, }) {
         this.cache = new Map();
@@ -199,7 +208,12 @@ class DiManager {
         if (!singletonDi) {
             return;
         }
-        return new ChildContainer(singletonDi, this.appDi);
+        const di = new ChildContainer(singletonDi, this.appDi);
+        const childProviders = getChildProviders(this.appDi);
+        childProviders.forEach((provider) => {
+            di.register(provider);
+        });
+        return di;
     }
 }
 
@@ -690,8 +704,16 @@ class StateManager {
 }
 
 const LOAD_TIMEOUT = 500;
-const customRender = ({ renderManager, }) => {
+const customRender = ({ renderManager, diManager, }) => {
     return async (content) => {
+        const promises = [];
+        diManager.forEachChildDi((di) => {
+            const beforeAppRender = di.get(CHILD_APP_INTERNAL_BEFORE_RENDER_TOKEN);
+            if (beforeAppRender) {
+                promises.push(Promise.all(beforeAppRender.map((fn) => fn())));
+            }
+        });
+        await Promise.all(promises);
         let render = renderToString(content);
         let timeouted = false;
         await Promise.race([
@@ -876,6 +898,7 @@ const serverProviders = [
         useFactory: customRender,
         deps: {
             renderManager: CHILD_APP_RENDER_MANAGER_TOKEN,
+            diManager: CHILD_APP_DI_MANAGER_TOKEN,
         },
     }),
     provide({

package/lib/server.js

@@ -27,27 +27,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var applyOrReturn__default = /*#__PURE__*/_interopDefaultLegacy(applyOrReturn);
 var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
 
-const getChildProviders$1 = (appDi) => {
-    const context = appDi.get(tokensCommon.CONTEXT_TOKEN);
+const getChildProviders$3 = (appDi) => {
     return [
-        {
-            provide: tokensChildApp.commandLineListTokens.customerStart,
-            multi: true,
-            useFactory: ({ subscriptions, }) => {
-                return function resolveRootStateForChild() {
-                    if (!subscriptions) {
-                        return;
-                    }
-                    const state = context.getState();
-                    return Promise.all(subscriptions.map((sub) => {
-                        return sub.listener(state);
-                    }));
-                };
-            },
-            deps: {
-                subscriptions: { token: tokensChildApp.CHILD_APP_INTERNAL_ROOT_STATE_SUBSCRIPTION_TOKEN, optional: true },
-            },
-        },
         core.provide({
             provide: tokensChildApp.commandLineListTokens.resolvePageDeps,
             multi: true,
@@ -64,7 +45,7 @@ const getChildProviders$1 = (appDi) => {
     ];
 };
 
-const getChildProviders = (appDi) => {
+const getChildProviders$2 = (appDi) => {
     const logger = appDi.get(tokensCommon.LOGGER_TOKEN);
     return [
         core.provide({
@@ -78,7 +59,7 @@ const getChildProviders = (appDi) => {
             multi: true,
             useValue: [],
         }),
-        ...getChildProviders$1(appDi),
+        ...getChildProviders$3(),
     ];
 };
 
@@ -145,7 +126,7 @@ class SingletonDiManager {
             },
         ], this.appDi);
         const { modules = [], providers = [], actions = [] } = children;
-        const childProviders = getChildProviders(this.appDi);
+        const childProviders = getChildProviders$2(this.appDi);
         childProviders.forEach((provider) => {
             di.register(provider);
         });
@@ -179,6 +160,34 @@ class SingletonDiManager {
     }
 }
 
+const getChildProviders$1 = (appDi) => {
+    const store = appDi.get(tokensCommon.STORE_TOKEN);
+    return [
+        {
+            provide: tokensChildApp.CHILD_APP_INTERNAL_BEFORE_RENDER_TOKEN,
+            multi: true,
+            useFactory: ({ subscriptions, }) => {
+                return function resolveRootStateForChild() {
+                    if (!subscriptions) {
+                        return;
+                    }
+                    const state = store.getState();
+                    return Promise.all(subscriptions.map((sub) => {
+                        return sub.listener(state);
+                    }));
+                };
+            },
+            deps: {
+                subscriptions: { token: tokensChildApp.CHILD_APP_INTERNAL_ROOT_STATE_SUBSCRIPTION_TOKEN, optional: true },
+            },
+        },
+    ];
+};
+
+const getChildProviders = (appDi) => {
+    return getChildProviders$1(appDi);
+};
+
 class DiManager {
     constructor({ appDi, loader, singletonDiManager, }) {
         this.cache = new Map();
@@ -209,7 +218,12 @@ class DiManager {
         if (!singletonDi) {
             return;
         }
-        return new dippy.ChildContainer(singletonDi, this.appDi);
+        const di = new dippy.ChildContainer(singletonDi, this.appDi);
+        const childProviders = getChildProviders(this.appDi);
+        childProviders.forEach((provider) => {
+            di.register(provider);
+        });
+        return di;
     }
 }
 
@@ -700,8 +714,16 @@ class StateManager {
 }
 
 const LOAD_TIMEOUT = 500;
-const customRender = ({ renderManager, }) => {
+const customRender = ({ renderManager, diManager, }) => {
     return async (content) => {
+        const promises = [];
+        diManager.forEachChildDi((di) => {
+            const beforeAppRender = di.get(tokensChildApp.CHILD_APP_INTERNAL_BEFORE_RENDER_TOKEN);
+            if (beforeAppRender) {
+                promises.push(Promise.all(beforeAppRender.map((fn) => fn())));
+            }
+        });
+        await Promise.all(promises);
         let render = server.renderToString(content);
         let timeouted = false;
         await Promise.race([
@@ -886,6 +908,7 @@ const serverProviders = [
         useFactory: customRender,
         deps: {
             renderManager: tokensChildApp.CHILD_APP_RENDER_MANAGER_TOKEN,
+            diManager: tokensChildApp.CHILD_APP_DI_MANAGER_TOKEN,
         },
     }),
     core.provide({

package/lib/shared/child/singletonProviders.d.ts

@@ -0,0 +1,3 @@
+import type { Container } from '@tinkoff/dippy';
+import type { Provider } from '@tramvai/core';
+export declare const getChildProviders: (appDi: Container) => Provider[];

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@tramvai/module-child-app",
-  "version": "1.66.0",
+  "version": "1.68.1",
   "description": "Module for child apps",
   "browser": {
     "./lib/server.js": "./lib/browser.js",
+    "./lib/server/child/singletonProviders.js": "./lib/browser/child/singletonProviders.js",
     "./lib/server/child/providers.js": "./lib/browser/child/providers.js",
     "./lib/server.es.js": "./lib/server.browser.js"
   },
@@ -30,20 +31,20 @@
     "@tinkoff/env-validators": "0.0.3",
     "@tinkoff/module-loader-client": "0.3.25",
     "@tinkoff/module-loader-server": "0.4.41",
-    "@tramvai/child-app-core": "1.66.0",
+    "@tramvai/child-app-core": "1.68.1",
     "@tramvai/safe-strings": "0.4.3",
-    "@tramvai/tokens-child-app": "1.66.0"
+    "@tramvai/tokens-child-app": "1.68.1"
   },
   "devDependencies": {},
   "peerDependencies": {
     "@tinkoff/dippy": "0.7.38",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/core": "1.66.0",
-    "@tramvai/state": "1.66.0",
-    "@tramvai/react": "1.66.0",
-    "@tramvai/tokens-common": "1.66.0",
-    "@tramvai/tokens-render": "1.66.0",
-    "@tramvai/tokens-router": "1.66.0",
+    "@tramvai/core": "1.68.1",
+    "@tramvai/state": "1.68.1",
+    "@tramvai/react": "1.68.1",
+    "@tramvai/tokens-common": "1.68.1",
+    "@tramvai/tokens-render": "1.68.1",
+    "@tramvai/tokens-router": "1.68.1",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "object-assign": "^4.1.1",