agora-appbuilder-core 4.0.0-spl.27 → 4.0.0-spl.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-spl.27",
+  "version": "4.0.0-spl.28",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/Gulpfile.js

@@ -48,8 +48,6 @@ const TS_DEFS_BUILD_PATH =
     : process.env.TARGET === 'android'
     ? path.join(__dirname, '../Builds/ts-defs/android')
     : path.join(__dirname, '../Builds/ts-defs/.electron');
-const GraphqlFolderName = '__generated__';
-const GraphqlFolderPath = `./src/assets/${GraphqlFolderName}`;
 
 const debugFlag = process.argv.indexOf('--debug') !== -1;
 
@@ -191,9 +189,6 @@ declare module 'customization' {
   generateNpmPackage: (cb) => {
     runCli(`cd ${BUILD_PATH} && npm pack`, cb);
   },
-  copyGqlFiles: (cb) => {
-    runCli(`cp -r ${GraphqlFolderPath} ${BUILD_PATH}`, cb);
-  },
 };
 
 const electron = {
@@ -366,7 +361,6 @@ module.exports.reactSdk = series(
   reactSdk.generateSdkTypedefs,
   reactSdk.bundleSdkTypedefs,
   general.cleanTempFiles,
-  general.copyGqlFiles,
   general.generateNpmPackage,
 );
 

package/template/customization-api/__tests__/module-boundaries.test.js

@@ -0,0 +1,112 @@
+const fs = require('fs');
+const path = require('path');
+const babel = require('@babel/core');
+
+const templateRoot = path.resolve(__dirname, '../..');
+
+const compile = (relativePath) => {
+  const filename = path.join(templateRoot, relativePath);
+
+  return babel.transformSync(fs.readFileSync(filename, 'utf8'), {
+    babelrc: false,
+    configFile: false,
+    filename,
+    presets: [
+      '@babel/preset-react',
+      [
+        '@babel/preset-typescript',
+        {
+          allExtensions: true,
+          isTSX: true,
+        },
+      ],
+      [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: 'current',
+          },
+        },
+      ],
+    ],
+  }).code;
+};
+
+const runtimeDependencies = (compiledCode) =>
+  Array.from(compiledCode.matchAll(/require\(["']([^"']+)["']\)/g), (match) =>
+    match[1],
+  );
+
+describe('web module boundaries', () => {
+  test('SDK method events do not load the DeviceConfigure React component', () => {
+    const dependencies = runtimeDependencies(
+      compile('src/utils/SdkMethodEvents.ts'),
+    );
+
+    expect(dependencies).not.toContain('../components/DeviceConfigure');
+  });
+
+  test('customization app state delegates core hook creation to a leaf module', () => {
+    const dependencies = runtimeDependencies(
+      compile('customization-api/app-state.ts'),
+    );
+
+    expect(dependencies).not.toContain('../agora-rn-uikit');
+    expect(dependencies).toContain('./core-contexts');
+  });
+
+  test.each([
+    'src/app-state/useLocalUserInfo.ts',
+    'src/subComponents/recording/useRecording.tsx',
+    'src/components/chat-messages/useChatMessages.tsx',
+    'src/components/useUserPreference.tsx',
+  ])('%s does not load the public customization API barrel', (filename) => {
+    const dependencies = runtimeDependencies(compile(filename));
+
+    expect(dependencies).not.toContain('customization-api');
+  });
+
+  test.each([
+    [
+      'src/components/meeting-info/useMeetingInfo.tsx',
+      '../../../customization-implementation/createHook',
+    ],
+    [
+      'src/subComponents/recording/useRecording.tsx',
+      '../../../customization-implementation/createHook',
+    ],
+    [
+      'src/components/chat-ui/useChatUIControl.tsx',
+      '../../../customization-implementation/createHook',
+    ],
+    [
+      'src/components/chat-notification/useChatNotification.tsx',
+      '../../../customization-implementation/createHook',
+    ],
+    [
+      'src/components/chat-messages/useChatMessages.tsx',
+      '../../../customization-implementation/createHook',
+    ],
+    [
+      'src/components/useUserPreference.tsx',
+      '../../customization-implementation/createHook',
+    ],
+    [
+      'src/utils/useLayout.tsx',
+      '../../customization-implementation/createHook',
+    ],
+    [
+      'src/utils/useSidePanel.tsx',
+      '../../customization-implementation/createHook',
+    ],
+  ])(
+    '%s imports createHook without loading the customization implementation barrel',
+    (filename, createHookPath) => {
+      const dependencies = runtimeDependencies(compile(filename));
+
+      expect(dependencies).not.toContain('customization-implementation');
+      expect(dependencies).toContain(createHookPath);
+    },
+  );
+
+});

package/template/customization-api/app-state.ts

@@ -1,8 +1,7 @@
 /**
  * Core contexts
  */
-import {createHook} from 'customization-implementation';
-import {RtcContext, RenderContext} from '../agora-rn-uikit';
+import {useRtc, useRender} from './core-contexts';
 
 // commented for v1 release
 //import {default as DeviceContext} from '../src/components/DeviceContext';
@@ -10,11 +9,11 @@ import {RtcContext, RenderContext} from '../agora-rn-uikit';
 /**
  * The RTC app state exposes the internal RtcEngine object as well as dispatch interface to perform various actions.
  */
-export const useRtc = createHook(RtcContext);
+export {useRtc};
 /**
  * The Render app state governs the information necessary to render each user content view displayed in the videocall screen.
  */
-export const useRender = createHook(RenderContext);
+export {useRender};
 
 export {useLocalUserInfo} from '../src/app-state/useLocalUserInfo';
 

package/template/customization-api/core-contexts.ts

@@ -0,0 +1,10 @@
+import createHook from '../customization-implementation/createHook';
+import RtcContext from '../agora-rn-uikit/src/Contexts/RtcContext';
+import RenderContext from '../agora-rn-uikit/src/Contexts/RenderContext';
+
+/**
+ * Core hooks live in a dependency-free module so internal application code can
+ * consume them without evaluating the public customization API barrel.
+ */
+export const useRtc = createHook(RtcContext);
+export const useRender = createHook(RenderContext);

package/template/src/app-state/useLocalUserInfo.ts

@@ -1,5 +1,5 @@
 import {useLocalUid} from '../../agora-rn-uikit';
-import {useRender} from 'customization-api';
+import {useRender} from '../../customization-api/core-contexts';
 
 /**
  * The LocalUserInfo app state contains the local user information like uid, audio and video mute states etc.

package/template/src/components/chat-messages/useChatMessages.tsx

@@ -9,9 +9,9 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {createHook} from 'customization-implementation';
+import createHook from '../../../customization-implementation/createHook';
 import React, {useState, useEffect, useRef} from 'react';
-import {useRender, useRtc} from 'customization-api';
+import {useRender, useRtc} from '../../../customization-api/core-contexts';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
 import {useLocalUid, UidType, RenderInterface} from '../../../agora-rn-uikit';
 import events, {EventPersistLevel} from '../../rtm-events-api';

package/template/src/components/chat-notification/useChatNotification.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {createHook} from 'customization-implementation';
+import createHook from '../../../customization-implementation/createHook';
 import React, {SetStateAction, useState, useEffect} from 'react';
 
 export interface individualUnreadMessageCount {

package/template/src/components/chat-ui/useChatUIControl.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {createHook} from 'customization-implementation';
+import createHook from '../../../customization-implementation/createHook';
 import React, {SetStateAction, useState} from 'react';
 import {UidType} from '../../../agora-rn-uikit';
 

package/template/src/components/meeting-info/useMeetingInfo.tsx

@@ -10,7 +10,7 @@
 *********************************************
 */
 import React, {createContext} from 'react';
-import {createHook} from 'customization-implementation';
+import createHook from '../../../customization-implementation/createHook';
 import {UidType} from '../../../agora-rn-uikit';
 export interface MeetingInfoContextInterface {
   isJoinDataFetched?: boolean;

package/template/src/components/popups/InvitePopup.tsx

@@ -25,6 +25,7 @@ import {isMobileUA, useIsDesktop} from '../../utils/common';
 import {useVideoCall} from '../useVideoCall';
 import {useParams} from '../Router';
 import useGetMeetingPhrase from '../../utils/useGetMeetingPhrase';
+import {SDK_MEETING_TAG} from '../SdkApiContext';
 
 const InvitePopup = () => {
   const {setShowInvitePopup, showInvitePopup} = useVideoCall();
@@ -33,8 +34,14 @@ const InvitePopup = () => {
   const {phrase} = useParams<{phrase: string}>();
   const getMeeting = useGetMeetingPhrase();
   useEffect(() => {
-    getMeeting(phrase);
-  }, [phrase]);
+    if (!phrase || phrase === SDK_MEETING_TAG) {
+      return;
+    }
+
+    getMeeting(phrase).catch((error) => {
+      console.error('Unable to load invite information', error);
+    });
+  }, [getMeeting, phrase]);
   return (
     <Popup
       modalVisible={showInvitePopup}

package/template/src/components/useUserPreference.tsx

@@ -16,9 +16,9 @@ import StorageContext from './StorageContext';
 import events, {EventPersistLevel} from '../rtm-events-api';
 import {EventNames} from '../rtm-events';
 import useLocalScreenShareUid from '../utils/useLocalShareScreenUid';
-import {createHook} from 'customization-implementation';
+import createHook from '../../customization-implementation/createHook';
 import ChatContext from './ChatContext';
-import {useRtc} from 'customization-api';
+import {useRtc} from '../../customization-api/core-contexts';
 
 interface UserPreferenceContextInterface {
   displayName: string;

package/template/src/components/useVideoCall.tsx

@@ -73,7 +73,7 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
         setShowLayoutOption,
       }}>
       <StopRecordingPopup />
-      <InvitePopup />
+      {showInvitePopup ? <InvitePopup /> : null}
       {props.children}
     </VideoCallContext.Provider>
   );

package/template/src/subComponents/recording/useRecording.tsx

@@ -21,14 +21,14 @@ import {gql, useMutation} from '@apollo/client';
 import {useParams} from '../../components/Router';
 import {PropsContext} from '../../../agora-rn-uikit';
 import Toast from '../../../react-native-toast-message';
-import {createHook} from 'customization-implementation';
+import createHook from '../../../customization-implementation/createHook';
 import {useString} from '../../utils/useString';
 import ChatContext from '../../components/ChatContext';
 import events, {EventPersistLevel} from '../../rtm-events-api';
 import {EventActions, EventNames} from '../../rtm-events';
 import useRecordingLayoutQuery from './useRecordingLayoutQuery';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
-import {useRender} from 'customization-api';
+import {useRender} from '../../../customization-api/core-contexts';
 import {trimText} from '../../utils/common';
 
 export interface RecordingContextInterface {

package/template/src/utils/SdkMethodEvents.ts

@@ -1,9 +1,9 @@
 import {createNanoEvents, Emitter} from 'nanoevents';
-import {
+import type {
   CustomizationApiInterface,
   MeetingInfoContextInterface,
 } from 'customization-api';
-import {deviceId} from '../components/DeviceConfigure';
+import type {deviceId} from '../components/DeviceConfigure';
 
 export interface SdkMethodEvents {
   customize: (customization: CustomizationApiInterface) => void;

package/template/src/utils/useGetMeetingPhrase.ts

@@ -1,4 +1,4 @@
-import {useContext} from 'react';
+import {useCallback, useContext} from 'react';
 import {gql} from '@apollo/client';
 import {MeetingInfoContextInterface} from '../components/meeting-info/useMeetingInfo';
 import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
@@ -24,48 +24,51 @@ const SHARE = gql`
 export default function useGetMeetingPhrase() {
   const {setMeetingInfo} = useSetMeetingInfo();
   const {client} = useContext(GraphQLContext);
-  return async (phrase: string) => {
-    const response = await client.query({
-      query: SHARE,
-      variables: {
-        passphrase: phrase,
-      },
-    });
-    if (response.error) {
-      throw response.error;
-    } else {
-      try {
-        if (response && response.data) {
-          let data = response.data;
-          let meetingInfo: Partial<MeetingInfoContextInterface['data']> = {
-            roomId: {attendee: ''},
-          };
-          if (data?.share?.passphrase?.view) {
-            meetingInfo.roomId.attendee = data.share.passphrase.view;
-          }
-          if (data?.share?.passphrase?.host) {
-            meetingInfo.roomId.host = data.share.passphrase.host;
-          }
-          if (data?.share?.pstn) {
-            meetingInfo.pstn = {
-              number: data.share.pstn.number,
-              pin: data.share.pstn.dtmf,
+  return useCallback(
+    async (phrase: string) => {
+      const response = await client.query({
+        query: SHARE,
+        variables: {
+          passphrase: phrase,
+        },
+      });
+      if (response.error) {
+        throw response.error;
+      } else {
+        try {
+          if (response && response.data) {
+            let data = response.data;
+            let meetingInfo: Partial<MeetingInfoContextInterface['data']> = {
+              roomId: {attendee: ''},
             };
+            if (data?.share?.passphrase?.view) {
+              meetingInfo.roomId.attendee = data.share.passphrase.view;
+            }
+            if (data?.share?.passphrase?.host) {
+              meetingInfo.roomId.host = data.share.passphrase.host;
+            }
+            if (data?.share?.pstn) {
+              meetingInfo.pstn = {
+                number: data.share.pstn.number,
+                pin: data.share.pstn.dtmf,
+              };
+            }
+            setMeetingInfo((prevState) => {
+              return {
+                ...prevState,
+                data: {
+                  ...prevState.data,
+                  roomId: meetingInfo.roomId,
+                  pstn: meetingInfo?.pstn,
+                },
+              };
+            });
           }
-          setMeetingInfo((prevState) => {
-            return {
-              ...prevState,
-              data: {
-                ...prevState.data,
-                roomId: meetingInfo.roomId,
-                pstn: meetingInfo?.pstn,
-              },
-            };
-          });
+        } catch (error) {
+          throw new Error('An error occurred in parsing the channel data.');
         }
-      } catch (error) {
-        throw new Error('An error occurred in parsing the channel data.');
       }
-    }
-  };
+    },
+    [client, setMeetingInfo],
+  );
 }

package/template/src/utils/useLayout.tsx

@@ -11,7 +11,7 @@
 */
 
 import React, {SetStateAction} from 'react';
-import {createHook} from 'customization-implementation';
+import createHook from '../../customization-implementation/createHook';
 
 export interface LayoutContextInterface {
   currentLayout: string;

package/template/src/utils/useSidePanel.tsx

@@ -12,7 +12,7 @@
 
 import React, {SetStateAction} from 'react';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
-import {createHook} from 'customization-implementation';
+import createHook from '../../customization-implementation/createHook';
 
 export interface SidePanelContextInterface {
   sidePanel: SidePanelType;