Fix accessing functions on multiple chaynsapi instances

(Fix for modules)

Author: MariusGertdenken

package.json

@@ -44,7 +44,8 @@
     "prettier": {
         "proseWrap": "always",
         "singleQuote": true,
-        "tabWidth": 4
+        "tabWidth": 4,
+        "printWidth": 2000
     },
     "eslintConfig": {
         "extends": "@chayns-toolkit"

src/components/ChaynsProvider.tsx

@@ -8,7 +8,7 @@ import { FrameWrapper } from '../wrapper/FrameWrapper';
 import { ModuleFederationWrapper } from '../wrapper/ModuleFederationWrapper';
 import { SsrWrapper } from '../wrapper/SsrWrapper';
 import { ChaynsContext } from './ChaynsContext';
-import { addModuleWrapper, moduleWrapper, removeModuleWrapper } from './moduleWrapper';
+import { addModuleWrapper, chaynsApis, moduleWrapper, removeModuleWrapper } from './moduleWrapper';
 
 const isServer = typeof window === 'undefined';
 
@@ -28,6 +28,7 @@ export type ChaynsProviderProps = {
     renderedByServer?: boolean,
     isModule?: boolean,
     children?: ReactNode,
+    chaynsApiId?: string
 }
 
 const ChaynsProvider: React.FC<ChaynsProviderProps> = ({
@@ -37,8 +38,10 @@ const ChaynsProvider: React.FC<ChaynsProviderProps> = ({
     customFunctions,
     renderedByServer,
     isModule,
+    chaynsApiId
 }) => {
     const customWrapper = useRef<IChaynsReact>(null!);
+    const idRef = useRef(chaynsApiId ?? crypto?.randomUUID() ?? Math.random().toString());
 
     if (!customWrapper.current) {
         if (isModule) {
@@ -63,6 +66,8 @@ const ChaynsProvider: React.FC<ChaynsProviderProps> = ({
             }
         }
         moduleWrapper.current = customWrapper.current;
+        chaynsApis[idRef.current] = customWrapper.current.functions;
+        customWrapper.current.chaynsApiId = idRef.current;
     }
 
     const [isInitialized, setIsInitialized] = useState<boolean>(!!customWrapper.current?.values);

src/components/moduleWrapper.ts

@@ -1,4 +1,4 @@
-import { IChaynsReact } from '../types/IChaynsReact';
+import { ChaynsReactFunctions, IChaynsReact } from '../types/IChaynsReact';
 
 const moduleWrapperStack: IChaynsReact[] = [];
 let current: IChaynsReact = undefined!;
@@ -13,7 +13,13 @@ export const moduleWrapper: { current: IChaynsReact } = {
     set current(chayns: IChaynsReact) {
         current = chayns;
     }
- }
+}
+
+export const chaynsApis: Record<string, ChaynsReactFunctions> = {};
+
+export const getChaynsApi = (id: string) => {
+    return chaynsApis[id];
+}
 
 export const addModuleWrapper = (chayns: IChaynsReact) => {
     moduleWrapperStack.push(chayns);

src/hooks/context.ts

@@ -3,7 +3,7 @@ import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { ChaynsContext } from '../components/ChaynsContext';
 import { IChaynsReact } from '../types/IChaynsReact';
 
-const createChaynsSelector = <T extends 'values' | 'functions' | 'customFunctions'>(key: T) => <Result>(selector: (value: IChaynsReact[T]) => Result): Result => {
+const createChaynsSelector = <T extends 'values' | 'functions' | 'customFunctions' | 'chaynsApiId'>(key: T) => <Result>(selector: (value: IChaynsReact[T]) => Result): Result => {
     const store = useContext(ChaynsContext);
 
     if (!store) {
@@ -18,3 +18,4 @@ const createChaynsSelector = <T extends 'values' | 'functions' | 'customFunction
 export const useValuesSelector = createChaynsSelector('values');
 export const useFunctionsSelector = createChaynsSelector('functions');
 export const useCustomFunctionsSelector = createChaynsSelector('customFunctions');
+export const useChaynsApiIdSelector = createChaynsSelector('chaynsApiId');

src/hooks/index.ts

@@ -23,3 +23,4 @@ export { useDialogState, useDialogData } from './useDialogState';
 export { useCustomCallbackFunction } from './useCustomCallbackFunction';
 export { useCustomFunction } from './useCustomFunction';
 export { useStyleSettings } from './useStyleSettings';
+export { useChaynsApiId } from './useChaynsApiId';

src/hooks/useChaynsApiId.ts

@@ -0,0 +1,8 @@
+import { useChaynsApiIdSelector } from './context';
+
+/**
+ * @category Hooks
+ */
+export const useChaynsApiId = (): string => {
+    return useChaynsApiIdSelector((chaynsApiId) => chaynsApiId);
+};

src/index.ts

@@ -28,3 +28,5 @@ export * from './util/bindChaynsApi';
 export * from './util/appStorage';
 
 export * from './util/collectCssChunks';
+
+export { getChaynsApi } from './components/moduleWrapper';

src/types/IChaynsReact.ts

@@ -352,6 +352,7 @@ export interface ChaynsReactValues {
     customData: any,
     dialog: { dialogInput: any, isClosingRequested: boolean },
     styleSettings?: ChaynsStyleSettings,
+    chaynsApiId: string
 }
 
 export interface DialogResultFile {
@@ -698,6 +699,7 @@ export interface IChaynsReact {
     getInitialData: () => ChaynsReactValues;
     subscribe: (listener: () => void) => () => void;
     emitChange: () => void;
+    chaynsApiId: string;
 }
 
 export interface OpenUrl {

src/wrapper/AppWrapper.ts

@@ -188,6 +188,8 @@ export class AppWrapper implements IChaynsReact {
     constructor() {
     }
 
+    chaynsApiId: string;
+
     notImplemented(call: string) {
         console.warn(`call ${call} not implement in app`);
     }

src/wrapper/FrameWrapper.ts

@@ -32,6 +32,8 @@ export class FrameWrapper implements IChaynsReact {
 
     values: ChaynsReactValues = null!;
 
+    chaynsApiId: string = null!;
+
     listeners: (() => void)[] =  [];
 
     functions: ChaynsReactFunctions = {