agora-appbuilder-core 2.2.0 → 2.3.0-beta.10

package/template/fpe-api/install.ts

@@ -0,0 +1,138 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import {FpeApiInterface} from './typeDefinition';
+import ReactIs from 'react-is';
+/**
+ *
+ * @param config FPE options to override the UI components and customize the application
+ * @returns config options
+ */
+
+function isString(data: any) {
+  if (data && typeof data === 'string') {
+    return true;
+  }
+  return false;
+}
+
+function isFunction(data: any) {
+  if (data && typeof data === 'function') {
+    return true;
+  }
+  return false;
+}
+
+function isObject(data: any) {
+  if (data && typeof data === 'object') {
+    return true;
+  }
+  return false;
+}
+
+function isComponent(data: any) {
+  if (data && ReactIs.isValidElementType(data)) {
+    return true;
+  }
+  return false;
+}
+
+//These keys value are not react component. so doing indexOf and checking whether its function or not
+const ignoreTheseKeys = ['customLayout', 'useUserContext'];
+
+function validateComponents(components: any) {
+  for (const key in components) {
+    if (ignoreTheseKeys.indexOf(key) === -1) {
+      let comp = components[key];
+      if (comp) {
+        if (isComponent(comp) || isObject(comp)) {
+          if (isObject(comp)) {
+            validateComponents(comp);
+          }
+        } else {
+          console.error(
+            `InstallFPE:Error ${key} should be a react component or object`,
+          );
+        }
+      }
+    } else {
+      let comp = components[key];
+      if (comp && !isFunction(comp)) {
+        console.error(`InstallFPE:Error ${key} should be an function`);
+      }
+    }
+  }
+}
+
+function validateLifecycle(data: any) {
+  for (const key in data) {
+    const callback = data[key];
+    if (callback && !isFunction(callback)) {
+      console.error(
+        `InstallFPE:Error ${key} should be a function that return async function`,
+      );
+    }
+  }
+}
+
+function validateCustomRoutes(routes: any) {
+  if (routes && !Array.isArray(routes)) {
+    console.error(`InstallFPE:Error customRoutes should be an array`);
+  }
+}
+
+function validateAppRoot(data: any) {
+  if (data && !isComponent(data)) {
+    console.error(`InstallFPE:Error appRoot should be a react component`);
+  }
+}
+
+function validatei18n(data: any) {
+  if (data) {
+    if (!Array.isArray(data)) {
+      console.error(`InstallFPE:Error i18n should be an array`);
+    } else {
+      data.map((item) => {
+        const langData = item.data;
+        for (const key in langData) {
+          const value = langData[key];
+          if (value) {
+            if (!(isString(value) || isFunction(value))) {
+              console.error(
+                `InstallFPE:Error ${item.locale} ${key} should be a string or function`,
+              );
+            }
+          }
+        }
+      });
+    }
+  }
+}
+export const installFPE = (config: FpeApiInterface) => {
+  //validating the components
+  config?.components && validateComponents(config.components);
+
+  //validating the custom routes
+  //commented for v1 release
+  //config?.customRoutes && validateCustomRoutes(config.customRoutes);
+
+  //validating the app root
+  config?.appRoot && validateAppRoot(config.appRoot);
+
+  //validating the i18n
+  config?.i18n && validatei18n(config.i18n);
+
+  //validating the lifecycle
+  //commented for v1 release
+  //config?.lifecycle && validateLifecycle(config?.lifecycle);
+
+  return config;
+};

package/template/fpe-api/typeDefinition.ts

@@ -0,0 +1,144 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React from 'react';
+export type {ChatBubbleProps} from '../src/components/ChatContext';
+import {ChatBubbleProps} from '../src/components/ChatContext';
+import {
+  RenderInterface,
+  RenderStateInterface,
+  UidType,
+} from '../agora-rn-uikit';
+import {i18nInterface} from '../src/language/i18nTypes';
+import {IconsInterface} from '../agora-rn-uikit/src/Controls/Icons';
+export type {
+  ChatTextInputProps,
+  ChatSendButtonProps,
+} from '../src/subComponents/ChatInput';
+import {
+  ChatTextInputProps,
+  ChatSendButtonProps,
+} from '../src/subComponents/ChatInput';
+
+export const CUSTOM_ROUTES_PREFIX = '/r/';
+
+interface BeforeAndAfterInterface {
+  // commented for v1 release
+  // before?: React.ComponentType;
+  // after?: React.ComponentType;
+}
+
+export interface PreCallInterface extends BeforeAndAfterInterface {
+  preview?: React.ComponentType;
+  audioMute?: React.ComponentType;
+  videoMute?: React.ComponentType;
+  meetingName?: React.ComponentType;
+  deviceSelect?: React.ComponentType;
+  joinButton?: React.ComponentType;
+  textBox?: React.ComponentType;
+}
+export interface ChatCmpInterface {
+  //commented for v1 release
+  //extends BeforeAndAfterInterface
+  chatBubble?: React.ComponentType<ChatBubbleProps>;
+  //commented for v1 release
+  //chatInput?: React.ComponentType<ChatTextInputProps>;
+  //chatSentButton?: React.ComponentType<ChatSendButtonProps>;
+}
+
+export interface renderComponentInterface {
+  user: RenderInterface;
+}
+
+export interface renderComponentObjectInterface {
+  [key: string]: React.ComponentType<renderComponentInterface>;
+}
+
+export type layoutComponent = React.ComponentType<{
+  renderData: RenderStateInterface['renderPosition'];
+}>;
+
+export interface layoutObjectBase {
+  name: string;
+  label: string;
+  component: layoutComponent;
+}
+
+export interface layoutObjectWithIcon extends layoutObjectBase {
+  icon: string;
+  iconName?: never;
+}
+export interface layoutObjectWithIconName extends layoutObjectBase {
+  icon?: never;
+  iconName: keyof IconsInterface;
+}
+export type layoutObjectType = layoutObjectWithIcon | layoutObjectWithIconName;
+
+export interface VideoCallInterface extends BeforeAndAfterInterface {
+  // commented for v1 release
+  //topBar?: React.ComponentType;
+  //settingsPanel?: React.ComponentType;
+  participantsPanel?: React.ComponentType;
+  bottomBar?: React.ComponentType;
+  chat?: ChatCmpInterface;
+  customContent?: renderComponentObjectInterface;
+  customLayout?: (layouts: layoutObjectType[]) => layoutObjectType[];
+  useUserContext?: () => void;
+}
+
+export type ComponentsInterface = {
+  // commented for v1 release
+  //precall?: PreCallInterface | React.ComponentType;
+  //create?: React.ComponentType;
+  //share?: React.ComponentType;
+  //join?: React.ComponentType;
+  videoCall?: VideoCallInterface | React.ComponentType;
+};
+
+export interface CustomRoutesInterface {
+  path: string;
+  component: React.ComponentType;
+  exact?: boolean;
+  componentProps?: object;
+  isPrivateRoute?: boolean;
+  routeProps?: object;
+  failureRedirectTo?: string;
+}
+
+export type CustomHookType = () => () => Promise<void>;
+
+export interface FpeApiInterface {
+  /**
+   * components used to replace whole screen or subcomponents
+   */
+  components?: ComponentsInterface;
+  /**
+   * custom routes used to add new page/routes
+   */
+  // commented for v1 release
+  //customRoutes?: CustomRoutesInterface[];
+  /**
+   * Custom context/api provider wrapped in root level
+   */
+  appRoot?: React.ComponentType;
+  /**
+   * Internationlization
+   */
+  i18n?: i18nInterface[];
+  /**
+   * Life cycle events
+   */
+  // commented for v1 release
+  // lifecycle?: {
+  //   useBeforeJoin?: CustomHookType;
+  //   useBeforeCreate?: CustomHookType;
+  // };
+}

package/template/fpe-api/useFpe.tsx

@@ -0,0 +1,35 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React from 'react';
+import fpeConfig from 'test-fpe';
+import {FpeApiInterface} from './typeDefinition';
+import {createHook} from 'fpe-implementation';
+
+const FpeContext: React.Context<FpeApiInterface> =
+  React.createContext(fpeConfig);
+
+export interface FpeProviderInterface {
+  children: React.ReactNode;
+  value: FpeApiInterface;
+}
+
+const FpeProvider = (props: FpeProviderInterface) => {
+  return (
+    <FpeContext.Provider value={props.value}>
+      {props.children}
+    </FpeContext.Provider>
+  );
+};
+
+const useFpe = createHook(FpeContext);
+
+export {useFpe, FpeProvider};

package/template/fpe-api/utils.ts

@@ -0,0 +1,61 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+// commented for v1 release
+//export {default as useIsScreenShare} from '../src/utils/isScreenShareUser';
+export {default as useIsHost} from '../src/utils/isHostUser';
+export {default as useIsAttendee} from '../src/utils/IsAttendeeUser';
+export {default as useIsPSTN} from '../src/utils/isPSTNUser';
+export {default as useUserList} from '../src/utils/useUserList';
+// commented for v1 release
+//export {default as useGroupMessages} from '../src/utils/useGroupMessages';
+//export {default as usePrivateMessages} from '../src/utils/usePrivateMessages';
+export {default as useIsAudioEnabled} from '../src/utils/isAudioEnabled';
+export {default as useIsVideoEnabled} from '../src/utils/isVideoEnabled';
+export {default as useSetName} from '../src/utils/useSetName';
+export {default as useGetName} from '../src/utils/useGetName';
+export {useSidePanel} from '../src/utils/useSidePanel';
+// commented for v1 release
+// export {
+//   default as useUnreadMessageCount,
+//   UNREAD_MESSAGE_COUNT_TYPE,
+// } from '../src/utils/useUnreadMessageCount';
+// export {
+//   default as useSetUnreadMessageCount,
+//   SET_UNREAD_MESSAGE_COUNT_TYPE,
+// } from '../src/utils/useSetUnreadMessageCount';
+export {default as useNavigateTo} from '../src/utils/useNavigateTo';
+export {default as useNavParams} from '../src/utils/useNavParams';
+export {default as useCreateMeeting} from '../src/utils/useCreateMeeting';
+export {default as useJoinMeeting} from '../src/utils/useJoinMeeting';
+// commented for v1 release
+// export {
+//   default as useSendMessage,
+//   MESSAGE_TYPE,
+// } from '../src/utils/useSendMessage';
+// export {controlMessageEnum} from '../src/components/ChatContext';
+// export {
+//   default as useSendControlMessage,
+//   CONTROL_MESSAGE_TYPE,
+// } from '../src/utils/useSendControlMessage';
+export {
+  MUTE_LOCAL_TYPE,
+  default as useMuteToggleLocal,
+} from '../src/utils/useMuteToggleLocal';
+export {default as useRemoteEndcall} from '../src/utils/useRemoteEndCall';
+export {
+  default as useRemoteMute,
+  MUTE_REMOTE_TYPE,
+} from '../src/utils/useRemoteMute';
+export {ToggleState} from '../agora-rn-uikit/src/Contexts/PropsContext';
+
+//export common function
+export * from '../src/utils/common';

package/template/fpe-implementation/createHook.ts

@@ -0,0 +1,33 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React, { useContext } from 'react';
+/**
+ * 
+ * @param context - any context data which we want to extract the data.
+ * @returns useContextWithSelector in which we can pass selector function to extract data from the context that we passed.
+ */
+function createHook<T>(context: React.Context<T>) {
+
+  function useContextWithSelector<U>(contextSelector: (data: T) => U): U;
+  function useContextWithSelector(): T;
+  /**
+   * 
+   * @param contextSelector is used to pass callback function used to select data from the context data
+   * @returns the data selected from the context
+   */
+  function useContextWithSelector<U>(contextSelector?: (data: T) => U): U | T {
+    const data = useContext(context);
+    return contextSelector ? contextSelector(data) : data
+  }
+  return useContextWithSelector;
+}
+export default createHook;

package/template/fpe-implementation/dummyFpe.ts

@@ -0,0 +1,17 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import { installFPE } from "fpe-api/install";
+/**
+ * Dummy FPE used to load when project doesn't have the FPE.
+ */
+const data = installFPE({});
+export default data;

package/template/fpe-implementation/index.ts

@@ -0,0 +1 @@
+export { default as createHook } from './createHook';

package/template/fpe-todo.txt

@@ -0,0 +1,14 @@
+1. test-fpe name should be changed 
+  - template/_gitignore
+  - babel.config.js
+  - webpack.config.js
+  - fpe.config.js
+  - fpe-api index.ts
+  - fpe-api useFPE
+2. What if user called custom context without wrapping provider
+  - useContext will return the default vaule. so we can't identify whether is wrapped with the provider or not.
+3. CustomUserContext 
+4. Add sibling into view without overriding
+5. Translation labels
+  - some of keys
+6.Layout dropdown implementation

package/template/fpe.config.js

@@ -0,0 +1,29 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+/*
+getFpePath - will return test-fpe if exists otherwise it will return the dummy fpe path
+*/
+const fs = require('fs');
+const FpePathTs = './test-fpe/index.ts';
+const FpePathTsx = './test-fpe/index.tsx';
+const FpeDummyPath = './fpe-implementation/dummyFpe.ts';
+const getFpePath = () => {
+  if (fs.existsSync(FpePathTs)) {
+    return FpePathTs;
+  }
+  if (fs.existsSync(FpePathTsx)) {
+    return FpePathTsx;
+  }
+  return FpeDummyPath;
+};
+module.exports = getFpePath;

package/template/global.d.ts

@@ -77,3 +77,7 @@ interface ConfigInterface {
   LOG_ENABLED: boolean;
 }
 declare var $config: ConfigInterface;
+declare module 'test-fpe'{
+  const data:{}
+  export default data;
+}

package/template/index.rsdk.tsx

@@ -0,0 +1,27 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.
+ Use without a license or in violation of any license terms and conditions (including use for
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more
+ information visit https://appbuilder.agora.io.
+*********************************************
+*/
+/**
+ * @format
+ */
+import SDKAppWrapper,{AppBuilderSdkApi,AppBuilderSdkApiInterface} from './src/SDKAppWrapper';
+import React from 'react';
+export * from 'fpe-api';
+
+interface AppBuilderReactSdkInterface extends AppBuilderSdkApiInterface {
+  View: React.FC;
+}
+
+const AppBuilderReactSdkApi: AppBuilderReactSdkInterface = {
+    ...AppBuilderSdkApi,
+    View: SDKAppWrapper,
+  }
+export default AppBuilderReactSdkApi;

package/template/index.wsdk.tsx

@@ -0,0 +1,27 @@
+import {AppRegistry} from 'react-native';
+import SDKAppWrapper,{AppBuilderSdkApi,AppBuilderSdkApiInterface} from './src/SDKAppWrapper';
+export * from 'fpe-api';
+
+interface AppBuilderWebSdkInterface extends AppBuilderSdkApiInterface {
+}
+
+const AppBuilderWebSdkApi: AppBuilderWebSdkInterface = AppBuilderSdkApi;
+
+// init code
+class AppBuilder extends HTMLElement {
+  connectedCallback() {
+    this.style.height = '100%';
+    this.style.width = '100%';
+    this.style.display = 'flex';
+    this.style.flex = '1';
+    AppRegistry.registerComponent('App', () => SDKAppWrapper);
+    AppRegistry.runApplication('App', {
+      // initialProps: {passphrase: this.getAttribute('passphrase')},
+      rootTag: this,
+    });
+  }
+}
+
+customElements.define('app-builder', AppBuilder);
+
+export default AppBuilderWebSdkApi;

package/template/package.json

@@ -6,15 +6,20 @@
   "scripts": {
     "android": "react-native run-android",
     "android:build": "npm run android:build:unix",
-    "android:build:unix": "cd android && ./gradlew assembleRelease",
-    "android:build:windows": "cd android && gradlew.bat assembleRelease",
+    "android:build:unix": "cross-env TARGET=android gulp androidUnix",
+    "android:build:windows": "cross-env TARGET=android gulp androidWin",
     "ios": "cd ios && ls | grep .xcworkspace | xargs open",
     "ios:build": "cd ios && ls | grep .xcworkspace | xargs open",
     "start": "react-native start",
     "web": "cross-env TARGET=web NODE_ENV=development webpack-dev-server --hot --open --config webpack.web.config.js",
+    "ts": "cross-env TARGET=web NODE_ENV=production webpack --config webpack.ts.config.js",
     "web:build": "cross-env TARGET=web NODE_ENV=production webpack --config webpack.web.config.js",
-    "electron:start": "cross-env NODE_ENV=development gulp development",
-    "electron:build": "cross-env NODE_ENV=production gulp build",
+    "web-sdk": "cross-env TARGET=wsdk NODE_ENV=development gulp webSdk",
+    "web-sdk:build": "cross-env TARGET=wsdk NODE_ENV=production gulp webSdk",
+    "react-sdk": "cross-env TARGET=rsdk NODE_ENV=development gulp reactSdk",
+    "react-sdk:build": "cross-env TARGET=rsdk NODE_ENV=production gulp reactSdk",
+    "electron:start": "cross-env NODE_ENV=development gulp electron_development",
+    "electron:build": "cross-env NODE_ENV=production gulp electron_build",
     "windows": "cross-env TARGET=windows npm run electron:start",
     "windows:build": "cross-env TARGET=windows npm run electron:build",
     "mac": "cross-env TARGET=mac npm run electron:start",
@@ -26,7 +31,9 @@
     "icons:android": "react-native set-icon --path ./build/icon.png",
     "icons:ios": "react-native set-icon --path ./build/icon.png",
     "package:mac": "npm run mac:build && electron-builder --publish=always",
-    "release": "electron-builder --mac --windows --linux --publish always --config ./electron-builder.js "
+    "release": "electron-builder --mac --windows --linux --publish always --config ./electron-builder.js ",
+    "make-rsdk-ts-defs": "cross-env TARGET=rsdk NODE_ENV=production gulp makeRsdkTsDefs",
+    "make-wsdk-ts-defs": "cross-env TARGET=wsdk NODE_ENV=production gulp makeWsdkTsDefs"
   },
   "publish": [
     {
@@ -58,6 +65,7 @@
     "nosleep.js": "0.12.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-is": "18.0.0",
     "react-native": "0.63.3",
     "react-native-agora": "3.4.2",
     "react-native-hyperlink": "0.0.19",
@@ -78,20 +86,23 @@
     "@babel/preset-typescript": "7.13.0",
     "@babel/runtime": "7.14.0",
     "@bam.tech/react-native-make": "3.0.3",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.3.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
     "@react-native-community/eslint-config": "1.1.0",
     "@types/jest": "25.2.3",
+    "@types/react-is": "17.0.3",
     "@types/react-native": "0.67.6",
     "@types/react-native-keep-awake": "2.0.2",
     "@types/react-router-dom": "5.1.7",
     "@types/react-router-native": "5.1.0",
     "@types/react-test-renderer": "16.9.5",
     "@types/webpack-dev-server": "3.11.4",
+    "@types/webpack-env": "^1.16.4",
     "@typescript-eslint/eslint-plugin": "2.34.0",
     "@typescript-eslint/parser": "2.34.0",
-    "babel-jest": "25.5.1",
-    "babel-loader": "8.2.2",
-    "babel-plugin-transform-define": "2.0.0",
+    "babel-jest": "27.5.1",
+    "babel-loader": "8.2.4",
+    "babel-plugin-module-resolver": "4.1.0",
+    "babel-plugin-transform-define": "2.0.1",
     "cross-env": "7.0.3",
     "del": "5.1.0",
     "electron": "16.0.1",
@@ -100,18 +111,24 @@
     "eslint": "6.8.0",
     "file-loader": "6.2.0",
     "gulp": "4.0.2",
+    "gulp-concat": "^2.6.1",
+    "gulp-header": "^2.0.9",
+    "gulp-replace": "^1.1.3",
     "html-webpack-plugin": "4.5.2",
+    "ignore-loader": "^0.1.2",
     "jest": "25.5.4",
     "metro-react-native-babel-preset": "0.59.0",
     "prettier": "2.3.1",
     "react-devtools-electron": "4.7.0",
-    "react-refresh": "0.8.3",
+    "react-refresh": "0.12.0",
     "react-test-renderer": "16.13.1",
+    "ts-loader": "^8.3.0",
     "typescript": "3.9.9",
-    "webpack": "4.46.0",
-    "webpack-cli": "3.3.12",
-    "webpack-dev-server": "3.11.2",
+    "webpack": "5.72.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "4.8.1",
     "webpack-merge": "5.8.0",
+    "webpack-node-externals": "3.0.0",
     "yargs": "15.4.1"
   },
   "jest": {