@wavemaker/rn-codegen 11.13.0-rc.6255 → 11.14.0-rc.232

package/src/app.generator.js

@@ -79,9 +79,9 @@ const ALLOWED_RESOURCE_EXT = [
 ];
 const pluginOperationConfig = [];
 const operationMap = {
-    'captureImage': { name: 'Camera', method: 'CaptureImageOperation', filename: 'capture-image', hasConstructorParams: true, packages: ['expo-camera', 'expo-file-system'], tagName: ['WmCamera', 'WmBarcodescanner'], removePlugin: true },
-    'captureVideo': { name: 'Camera', method: 'CaptureVideoOperation', filename: 'capture-video', hasConstructorParams: true, packages: ['expo-camera', 'expo-file-system'], tagName: ['WmCamera', 'WmBarcodescanner'], removePlugin: true },
-    'scanBarCode': { name: 'Scan', method: 'ScanOperation', filename: 'scan', hasConstructorParams: true, packages: [], tagName: ['WmBarcodescanner'], removePlugin: true },
+    'captureImage': { name: 'Camera', method: 'CaptureImageOperation', filename: 'capture-image', hasConstructorParams: true, packages: ['expo-camera', 'expo-file-system', 'expo-av'], tagName: ['WmCamera', 'WmBarcodescanner'], removePlugin: true },
+    'captureVideo': { name: 'Camera', method: 'CaptureVideoOperation', filename: 'capture-video', hasConstructorParams: true, packages: ['expo-camera', 'expo-file-system', 'expo-av'], tagName: ['WmCamera', 'WmBarcodescanner'], removePlugin: true },
+    'scanBarCode': { name: 'Scan', method: 'ScanOperation', filename: 'scan', hasConstructorParams: true, packages: ['expo-camera'], tagName: ['WmBarcodescanner'], removePlugin: true },
     'getAppInfo': { name: 'Device', method: 'AppInfoOperation', filename: 'app-info', hasConstructorParams: false, packages: [], tagName: [], removePlugin: false },
     'getDeviceInfo': { name: 'Device', method: 'DeviceInfoOperation', filename: 'device-info', hasConstructorParams: false, packages: ['expo-device'], tagName: [], removePlugin: false },
     'getNetworkInfo': { name: 'Device', method: 'NetworkInfoOperation', filename: 'network-info', hasConstructorParams: false, packages: ['expo-network', '@react-native-community/netinfo'], removePlugin: false },
@@ -92,9 +92,9 @@ const operationMap = {
     'createEvent': { name: 'Calendar', method: 'CreateEventOperation', filename: 'create-event', hasConstructorParams: true, packages: ['expo-calendar'], tagName: [], removePlugin: true },
     'deleteEvent': { name: 'Calendar', method: 'DeleteEventOperation', filename: 'delete-event', hasConstructorParams: true, packages: ['expo-calendar'], tagName: [], removePlugin: true },
     'upload': { name: 'File', method: 'UploadFileOperation', filename: 'upload-file', hasConstructorParams: false, packages: ['expo-document-picker'], tagName: ['WmFileupload'], removePlugin: true },
-    'playAudio': { name: 'Audio', method: 'PlayAudioOperation', filename: '', hasConstructorParams: false, packages: ['expo-av'], tagName: ['WmAudio', 'WmCamera'], removePlugin: true },
+    'playAudio': { name: 'Audio', method: 'PlayAudioOperation', filename: '', hasConstructorParams: false, packages: ['expo-av'], tagName: ['WmAudio'], removePlugin: true },
     'playVideo': { name: 'Video', method: 'PlayVideoOperation', filename: '', hasConstructorParams: false, packages: ['expo-video'], tagName: ['WmVideo'], removePlugin: true },
-    'openFile': { name: 'File', method: 'OpenFileOperation', filename: 'open-file', hasConstructorParams: false, packages: ['expo-sharing', 'expo-file-system'], tagName: ['OpenFileOperation'], removePlugin: true },
+    'openFile': { name: 'File', method: 'OpenFileOperation', filename: 'open-file', hasConstructorParams: false, packages: ['expo-sharing', 'expo-file-system'], tagName: [], removePlugin: true },
 };
 const serviceParams = {
     'Camera': [{
@@ -135,6 +135,7 @@ class AppGenerator {
         this.pluginsInApp = {};
         this.wmxComponents = [];
         this.jsFileImports = new Set();
+        this.shouldNpmInstall = false;
         this.options = options;
         this.isPrefabApp = !!prefabName;
         this.wmxComponents = this.projectService.getWMXComponents();
@@ -174,42 +175,76 @@ class AppGenerator {
      * @description Get the list of packages (from operationMap) that are used in the generated app
      * @returns packagesInAppObj: Record<string, boolean>
      */
-    getListOfPackagesUsedInGeneratedApp() {
-        var _a;
+    async getListOfPackagesUsedInGeneratedApp() {
+        var _a, _b;
         const operations = (0, lodash_1.uniq)((_a = this.projectPackageDependencies) === null || _a === void 0 ? void 0 : _a.map((p) => p.name));
         const packagesInAppObj = {};
-        operations.forEach((operation) => {
-            var _a;
+        // common device operations present in all WaveMaker apps (e.g, getAppInfo, getDeviceInfo, getNetworkInfo)
+        const commonPluginsUsedInApp = ((_b = this.projectPackageDependencies.filter((p) => !p.removePlugin)) === null || _b === void 0 ? void 0 : _b.length) > 0;
+        /**
+         * find all operations/packages (e.g, Camera, Scan, Location)
+         * that are used in the app
+         */
+        await Promise.all(operations.map(async (operation) => {
             let method = "";
-            const hasPluginInApp = ((_a = this.projectPackageDependencies.filter((p) => p.name === operation && !p.removePlugin)) === null || _a === void 0 ? void 0 : _a.length) > 0;
-            const filteredOperations = pluginOperationConfig === null || pluginOperationConfig === void 0 ? void 0 : pluginOperationConfig.filter((config) => {
-                method = config.method;
+            const importedWidgets = await this.getWidgetImports();
+            const deviceVariables = await this.getDeviceVariables();
+            const isWidgetImportedForCurrentOperation = importedWidgets.findIndex((w) => {
+                const widgetName = operation === "File"
+                    ? "WmFileupload"
+                    : operation === "Scan"
+                        ? "WmBarcodescanner"
+                        : `Wm${operation}`;
+                return w.name === widgetName;
+            }) !== -1;
+            // other device operations used in the app
+            // that can be removed if unused (e.g, captureImage, scanBarCode)
+            const deviceOperationsUsedInApp = deviceVariables === null || deviceVariables === void 0 ? void 0 : deviceVariables.filter((config) => {
+                if (config.type === operation) {
+                    method = config.method;
+                }
                 return config.type === operation;
             });
-            const hasOperationInApp = filteredOperations.length > 0;
-            if (operation !== 'File') {
-                packagesInAppObj[`has${operation}Plugin`] = hasPluginInApp || hasOperationInApp;
-            }
-            else {
-                if (filteredOperations.length > 1) {
-                    packagesInAppObj['hasUploadFilePlugin'] = true;
-                    packagesInAppObj['hasOpenFilePlugin'] = true;
-                }
-                else {
-                    if (method === 'UploadFileOperation') {
+            // operation is used if it's widget import is found or the device operation is found
+            const isCurrentOperationUsedInApp = isWidgetImportedForCurrentOperation || deviceOperationsUsedInApp.length > 0;
+            switch (operation) {
+                case 'Device':
+                    packagesInAppObj['hasDevicePlugin'] = commonPluginsUsedInApp;
+                    break;
+                case 'Camera':
+                case 'Scan':
+                case 'Location':
+                case 'Contacts':
+                case 'Calendar':
+                case 'Audio':
+                case 'Video':
+                    packagesInAppObj[`has${operation}Plugin`] = isCurrentOperationUsedInApp;
+                    break;
+                case 'File':
+                    if (deviceOperationsUsedInApp.length >= 2) {
                         packagesInAppObj['hasUploadFilePlugin'] = true;
-                    }
-                    else if (method === 'OpenFileOperation') {
                         packagesInAppObj['hasOpenFilePlugin'] = true;
                     }
-                }
+                    else {
+                        if (method === 'UploadFileOperation' || (operation === 'File' && isWidgetImportedForCurrentOperation)) {
+                            packagesInAppObj['hasUploadFilePlugin'] = true;
+                        }
+                        else if (method === 'OpenFileOperation') {
+                            packagesInAppObj['hasOpenFilePlugin'] = true;
+                        }
+                    }
+                    break;
+                default:
+                    break;
             }
-        });
+        }));
         return packagesInAppObj;
     }
-    generatePluginsOperationConfig() {
+    async generatePluginsOperationConfig() {
         const servicesList = [];
-        deviceVariables.forEach((v) => {
+        // * get all device variables (both app and page level) before processing
+        let allDeviceVariables = await this.getDeviceVariables();
+        allDeviceVariables.forEach((v) => {
             const hasEntry = pluginOperationConfig.find(p => p.operation === v.operation);
             if (hasEntry) {
                 return false;
@@ -269,7 +304,8 @@ class AppGenerator {
             item.filePath = this.getFilePath(item.name);
         });
         // * get plugin list before generating device operation loader
-        this.pluginsInApp = this.getListOfPackagesUsedInGeneratedApp();
+        this.pluginsInApp = await this.getListOfPackagesUsedInGeneratedApp();
+        // previously pluginOperationConfig was only having device variables from app.variables.js, not from Page level variables (e.g, Main.variables.js)
         const output = DEVICE_SERVICES_TEMPLATE({
             pluginOperationConfig: pluginOperationConfig,
             appVersion: appVersion,
@@ -286,19 +322,7 @@ class AppGenerator {
             openFilePlugin: this.pluginsInApp.hasOpenFilePlugin
         });
         (0, utils_1.writeFile)(`${this.projectPath}/src/device-operation-loader.js`, output);
-        // * generate device plugin services & permission service
-        const projectDependencies = this.projectPackageDependencies;
-        projectDependencies.forEach((dep, index) => {
-            var _a;
-            const hasPluginOperation = ((_a = pluginOperationConfig === null || pluginOperationConfig === void 0 ? void 0 : pluginOperationConfig.filter((config) => {
-                var _a;
-                return `Wm${config.type}` === ((_a = dep === null || dep === void 0 ? void 0 : dep.tagName) === null || _a === void 0 ? void 0 : _a.includes(config.type));
-            })) === null || _a === void 0 ? void 0 : _a.length) > 0;
-            if (hasPluginOperation) {
-                projectDependencies[index].removePlugin = false;
-            }
-        });
-        this.projectPackageDependencies = projectDependencies;
+        // * generate device plugin services, permission service & plugin provider
         const pluginServices = DEVICE_PLUGIN_SERVICES_TEMPLATE({
             expoCameraPlugin: this.pluginsInApp.hasCameraPlugin,
             scanPlugin: this.pluginsInApp.hasScanPlugin,
@@ -476,16 +500,17 @@ class AppGenerator {
             appConfig['expo']['jsEngine'] = ((_a = config.preferences) === null || _a === void 0 ? void 0 : _a.enableHermes) === 'false' ? 'jsc' : 'hermes';
             appConfig['expo']['icon'] = './assets/' + config.icon.src;
             appConfig['expo']['android']['adaptiveIcon']['foregroundImage'] = './assets/' + config.icon.src;
+            appConfig['expo']['orientation'] = config.orientation || 'portrait';
             this.updateInSplashConfig(config, appConfig);
         }).then(() => {
             return this.projectService.getAppJSON()
                 .then(appConfigOverride => {
-                var _a;
-                (_a = appConfigOverride === null || appConfigOverride === void 0 ? void 0 : appConfigOverride.expo) === null || _a === void 0 ? void 0 : _a.plugins.forEach((plugin) => {
+                var _a, _b;
+                (_b = (_a = appConfigOverride === null || appConfigOverride === void 0 ? void 0 : appConfigOverride.expo) === null || _a === void 0 ? void 0 : _a.plugins) === null || _b === void 0 ? void 0 : _b.forEach((plugin) => {
                     var _a, _b;
                     if ((_a = appConfig === null || appConfig === void 0 ? void 0 : appConfig.expo) === null || _a === void 0 ? void 0 : _a.plugins) {
                         const presentInIndex = appConfig.expo.plugins.findIndex((item) => item[0] === plugin[0]);
-                        if (presentInIndex > -1) {
+                        if (presentInIndex > -1 && Array.isArray(appConfig.expo.plugins[presentInIndex])) {
                             appConfig.expo.plugins[presentInIndex][1] = plugin[1];
                         }
                         else {
@@ -527,7 +552,7 @@ class AppGenerator {
                     v.publicKeyHashes.push("NoBackUpKey" + v.publicKeyHashes[0].substring(11));
                 }
             });
-            const enableWavePulse = (!!config.preferences.enableWavePulse);
+            const enableWavePulse = (!!config.preferences.enableWavePulse || profile_1.default.targetPlatform === 'web');
             if (!enableWavePulse) {
                 if (fs_extra_1.default.existsSync(`${this.projectPath}/wavepulse`)) {
                     fs_extra_1.default.rmSync(`${this.projectPath}/wavepulse`, {
@@ -633,18 +658,6 @@ class AppGenerator {
                 });
             }
             const imports = (0, lodash_1.sortBy)((0, lodash_1.uniqBy)(transpiledOutput.imports, i => i.name + i.from), i => i.name);
-            const projectDependencies = (0, lodash_1.uniq)([...this.projectPackageDependencies]);
-            projectDependencies.forEach((dep, index) => {
-                const isWmTagImported = imports.findIndex((i) => {
-                    var _a;
-                    const hasTagName = (_a = dep.tagName) === null || _a === void 0 ? void 0 : _a.includes(i === null || i === void 0 ? void 0 : i.name);
-                    return hasTagName;
-                }) >= 0;
-                if (isWmTagImported && projectDependencies[index]) {
-                    projectDependencies[index].removePlugin = false;
-                }
-            });
-            this.projectPackageDependencies = projectDependencies;
             const component = COMPONENT_TEMPLATE({
                 name: name,
                 type: type,
@@ -868,7 +881,8 @@ class AppGenerator {
             encoding: 'utf8'
         });
         const output = BABEL_CONFIG_TEMPLATE({
-            enableLogs: config.preferences.enableLogs
+            enableLogs: config.preferences.enableLogs,
+            isWeb: profile_1.default.targetPlatform === 'web'
         });
         (0, utils_1.writeFile)(`${this.projectPath}/babel.config.js`, output);
     }
@@ -922,11 +936,110 @@ class AppGenerator {
         }
         return arrayOfFiles;
     }
+    /**
+     * @description Get all widget imports in the generated app
+     * @returns array of widgets imported (e.g, WmCamera, WmVideo)
+     */
+    async getWidgetImports() {
+        let widgetImports = [];
+        const pageConfigs = await this.projectService.getPageConfigs();
+        await Promise.all(pageConfigs.map(async (p) => {
+            const info = await this.projectService.getPageInfo(p.name);
+            const transpileArgs = {
+                markup: info.markup,
+                isPartOfPrefab: this.isPrefabApp,
+                rnConfig: this.rnConfig,
+            };
+            const transpiledOutput = (0, transpile_1.transpileMarkup)(transpileArgs);
+            if (info.markup.includes('metadata')) {
+                if (this.isPrefabApp) {
+                    transpiledOutput.imports.push({ name: '{dynamicForm}', from: `../../../../../../component/dynamic/form.generator` });
+                }
+                else {
+                    transpiledOutput.imports.push({ name: '{dynamicForm}', from: `../../../component/dynamic/form.generator` });
+                }
+            }
+            if (this.isPrefabApp) {
+                transpiledOutput.imports.forEach(i => {
+                    if (i.from.indexOf('/prefabs/') > 0) {
+                        i.from = '../../../' + i.from;
+                    }
+                });
+            }
+            const uniqueImports = (0, lodash_1.sortBy)((0, lodash_1.uniqBy)(transpiledOutput.imports, i => i.name + i.from), i => i.name);
+            if (Array.isArray(uniqueImports) && uniqueImports.length > 0) {
+                widgetImports.push(...uniqueImports);
+            }
+        }));
+        const uniqueWidgetImports = (0, lodash_1.uniq)(widgetImports);
+        return uniqueWidgetImports;
+    }
+    /**
+     * Check for widget usage (e.g, WmCamera, WmVideo)
+     * in component files (page, partial, prefab) of the generated app
+     * and remove unused packages accordingly
+     */
+    async checkWidgetUsageInComponentFiles() {
+        if (this.incBuilder) {
+            console.log(`Checking widget usage in component files.`);
+        }
+        const projectDependencies = (0, lodash_1.uniq)([...this.projectPackageDependencies]);
+        const imports = await this.getWidgetImports();
+        projectDependencies.forEach((dep, index) => {
+            const isWmTagImported = imports.findIndex((i) => {
+                var _a;
+                const hasTagName = (_a = dep.tagName) === null || _a === void 0 ? void 0 : _a.includes(i === null || i === void 0 ? void 0 : i.name);
+                return hasTagName;
+            }) >= 0;
+            if (isWmTagImported && projectDependencies[index]) {
+                projectDependencies[index].removePlugin = false;
+            }
+        });
+        this.projectPackageDependencies = projectDependencies;
+    }
+    /**
+     * @description Get the list of device variables used
+     * in the app (App + Page owner)
+     * @returns deviceVariables: any[]
+     */
+    async getDeviceVariables() {
+        let deviceVariables = [];
+        let allPagesDeviceVariables = [];
+        const pageConfigs = await this.projectService.getPageConfigs();
+        const appVariables = await this.projectService.getAppVariables();
+        const appDeviceVariables = Object.values(appVariables).filter((v) => v.category === 'wm.DeviceVariable');
+        await Promise.all(pageConfigs.map(async (p) => {
+            const info = await this.projectService.getPageInfo(p.name);
+            const pageVariables = JSON.parse(info.variables);
+            const pageDeviceVariables = Object.values(pageVariables).filter((v) => v.category === 'wm.DeviceVariable');
+            allPagesDeviceVariables.push(...pageDeviceVariables);
+        }));
+        const allDeviceVariables = [...appDeviceVariables, ...allPagesDeviceVariables];
+        allDeviceVariables.forEach((v) => {
+            const selectedOperation = operationMap[v.operation];
+            if (!selectedOperation) {
+                console.log('Cannot find operation named ' + v.operation);
+            }
+            if (deviceVariables.find((dv) => dv.operation === v.operation)) {
+                return;
+            }
+            deviceVariables.push({
+                'operation': v.operation,
+                'service': v.service,
+                'filename': selectedOperation.filename,
+                'method': selectedOperation.method,
+                'hasparams': selectedOperation.hasConstructorParams,
+                'type': selectedOperation.name
+            });
+        });
+        return deviceVariables;
+    }
     /**
      * Scan all JS files in the project for imports that match packages in operationMap
      */
     scanJSFilesForImports() {
         this.jsFileImports.clear();
+        const scanFileIgnoreList = ['device-operation-loader.js', 'device-permission-service.js', 'device-plugin-service.js', 'plugin-provider.js'];
         // Get all packages from operationMap
         const allOperationPackages = new Set();
         Object.values(operationMap).forEach((operation) => {
@@ -946,6 +1059,10 @@ class AppGenerator {
                 }
                 else if (file.endsWith('.js') || file.endsWith('.ts') || file.endsWith('.tsx')) {
                     try {
+                        // Ignore checking for package imports in ignore list file names
+                        if (scanFileIgnoreList.includes(file)) {
+                            return;
+                        }
                         const content = fs_extra_1.default.readFileSync(fullPath, 'utf-8');
                         // Look for import statements that match operationMap packages
                         allOperationPackages.forEach(packageName => {
@@ -977,7 +1094,16 @@ class AppGenerator {
         scanPaths.forEach(scanPath => {
             scanDirectory(scanPath);
         });
-        console.log(`Found imports for packages: ${Array.from(this.jsFileImports).join(', ')}`);
+        if (this.jsFileImports.size > 0) {
+            console.log(`Found imports for packages in JS files: ${Array.from(this.jsFileImports).join(', ')}`);
+        }
+    }
+    checkPackageUsageInJSFiles() {
+        if (this.incBuilder) {
+            console.log(`Checking package usage in JS files.`);
+        }
+        // Scan JS files for imports before processing package.json
+        this.scanJSFilesForImports();
     }
     generateFontConfig() {
         if (this.incBuilder) {
@@ -1089,39 +1215,129 @@ class AppGenerator {
             fs_extra_1.default.writeFileSync(`${this.projectPath}/package.json`, JSON.stringify(packageOverriden, null, 4));
         }
     }
+    /**
+     * update app.json with expo-video plugin
+     * @param updatedPackageJson
+     */
+    async updateAppJsonWithExpoVideoPlugin(updatedPackageJson) {
+        var _a, _b, _c;
+        const appJson = fs_extra_1.default.readJsonSync(`${this.projectPath}/app.json`, { encoding: 'utf-8' });
+        const hasExpoVideoPackage = !!((_a = updatedPackageJson === null || updatedPackageJson === void 0 ? void 0 : updatedPackageJson.dependencies) === null || _a === void 0 ? void 0 : _a['expo-video']);
+        const customAppJson = await this.projectService.getAppJSON();
+        const customAppJsonExpoVideoPlugin = (_c = (_b = customAppJson === null || customAppJson === void 0 ? void 0 : customAppJson.expo) === null || _b === void 0 ? void 0 : _b.plugins) === null || _c === void 0 ? void 0 : _c.filter((plugin) => Array.isArray(plugin) && plugin[0] === 'expo-video' || typeof plugin === 'string' && plugin === 'expo-video');
+        const hasExpoVideoPluginInCustomAppJson = (customAppJsonExpoVideoPlugin === null || customAppJsonExpoVideoPlugin === void 0 ? void 0 : customAppJsonExpoVideoPlugin.length) > 0;
+        const expoVideoPluginEntry = ["expo-video", { "supportsBackgroundPlayback": true, "supportsPictureInPicture": true }];
+        const pluginExists = appJson.expo.plugins.some((plugin) => {
+            return Array.isArray(plugin) && plugin[0] === "expo-video" || typeof plugin === 'string' && plugin === 'expo-video';
+        });
+        if (pluginExists) {
+            return;
+        }
+        if (hasExpoVideoPackage && !hasExpoVideoPluginInCustomAppJson) {
+            // keep original expo-video plugin array
+            appJson.expo.plugins.push(expoVideoPluginEntry);
+            (0, utils_1.writeFile)(`${this.projectPath}/app.json`, JSON.stringify(appJson, null, 4));
+        }
+        else if (!hasExpoVideoPackage && hasExpoVideoPluginInCustomAppJson) {
+            // keep expo-video plugin array from custom app.json
+            appJson.expo.plugins.push(...customAppJsonExpoVideoPlugin);
+            (0, utils_1.writeFile)(`${this.projectPath}/app.json`, JSON.stringify(appJson, null, 4));
+        }
+        else if (hasExpoVideoPackage && hasExpoVideoPluginInCustomAppJson) {
+            // keep expo-video plugin array from custom app.json
+            appJson.expo.plugins.push(...customAppJsonExpoVideoPlugin);
+            (0, utils_1.writeFile)(`${this.projectPath}/app.json`, JSON.stringify(appJson, null, 4));
+        }
+    }
     /**
      * remove unused dependencies from package.json
      * @param packageJsonData
      * @returns updatedPackageJson, pluginsRemoved
      */
     async removeUnusedPluginsFromPackageJson(packageJsonData) {
+        var _a;
         let updatedPackageJson = (0, lodash_1.cloneDeep)(packageJsonData);
         let pluginsRemoved = false;
+        let removedPackages = [];
         try {
             const dependencies = (0, lodash_1.cloneDeep)(this.projectPackageDependencies);
+            const listOfPackagesUsed = await this.getListOfPackagesUsedInGeneratedApp();
+            const operationsUsed = Object.entries(listOfPackagesUsed)
+                .map(([key, value]) => {
+                if (value) {
+                    return key.replace(/^has/, "").replace(/Plugin$/, "");
+                }
+            })
+                .filter((value) => value !== undefined);
+            // iterating over each operation of the operationMap
             for (let i = 0; i < dependencies.length; i++) {
                 const removePlugin = dependencies[i].removePlugin;
-                if (removePlugin) {
-                    // Check if any packages from this operation are imported in JS files
-                    const hasImportsInJSFiles = dependencies[i].packages.some((pkg) => this.jsFileImports.has(pkg));
-                    // Only remove packages if they're not imported in JS files
-                    if (!hasImportsInJSFiles) {
-                        dependencies[i].packages.forEach((p) => {
-                            delete updatedPackageJson.dependencies[p];
-                        });
-                        pluginsRemoved = true;
-                    }
-                    else {
-                        console.log(`Keeping packages ${dependencies[i].packages.join(', ')} due to imports found in JS files`);
-                    }
+                const deviceOperationName = dependencies[i].name;
+                const deviceOperationMethod = dependencies[i].name === 'File' ? (_a = dependencies[i].method) === null || _a === void 0 ? void 0 : _a.replace('Operation', '') : dependencies[i].name;
+                const operationFound = operationsUsed.includes(deviceOperationMethod);
+                const currentServiceUsedByOtherOperation = dependencies
+                    .filter((dep) => { var _a; return dep.name !== deviceOperationName && ((_a = dep.packages) === null || _a === void 0 ? void 0 : _a.some((p) => dependencies[i].packages.includes(p))); }) // other operations that are using at least one of the packages of the current operation
+                    .filter((dep) => {
+                    var _a;
+                    const depName = dep.name === 'File' ? (_a = dep.method) === null || _a === void 0 ? void 0 : _a.replace('Operation', '') : dep.name;
+                    return operationsUsed.includes(depName);
+                });
+                // Check if any packages from this operation are imported in JS files
+                const hasImportsInJSFiles = dependencies[i].packages.some((pkg) => this.jsFileImports.has(pkg));
+                /**
+                 * Remove package if:
+                 * 1. removePlugin is true
+                 * 2. the current operation is not used in the app
+                 * 3. the packages of the current operation are not imported in JS files
+                 */
+                const removePackage = removePlugin && !operationFound && !hasImportsInJSFiles;
+                // console.log("<---Remove current package--->", "\ndependencies[i].method:", dependencies[i].method, "\nremovePackage:", removePackage, "\nremovePlugin:", removePlugin, "\noperationFound:", operationFound, "\nhasImportsInJSFiles:", hasImportsInJSFiles);
+                if (removePackage) {
+                    dependencies[i].packages.forEach((p) => {
+                        // whether this specific package of the current operation is used by other operations
+                        const isPackageUsedByOtherOperation = currentServiceUsedByOtherOperation.filter((operation) => operation.packages.includes(p)).length > 0;
+                        if (isPackageUsedByOtherOperation) {
+                            return;
+                        }
+                        delete updatedPackageJson.dependencies[p];
+                        if (!removedPackages.includes(p)) {
+                            removedPackages.push(p);
+                        }
+                    });
+                    pluginsRemoved = true;
+                }
+                if (hasImportsInJSFiles) {
+                    console.log(`Keeping packages ${dependencies[i].packages.join(', ')} due to imports found in JS files`);
                 }
             }
         }
         catch (error) {
             console.log('Failed to remove unused plugins from package json: ', error);
         }
+        await this.updateAppJsonWithExpoVideoPlugin(updatedPackageJson);
+        console.log(`Removed the following unused packages: ${removedPackages.join(', ')}`);
         return { updatedPackageJson, pluginsRemoved };
     }
+    async removeUnusedPackages() {
+        if (this.incBuilder) {
+            console.log(`Removing unused packages.`);
+        }
+        let packageJsonToUpdate = fs_extra_1.default.readJSONSync(`${this.projectPath}/package.json`, { encoding: 'utf-8' });
+        const templatePackageJson = fs_extra_1.default.readJSONSync(`${__dirname}/templates/project/package.json`, { encoding: 'utf-8' });
+        const templateDependencies = templatePackageJson.dependencies;
+        // * template dependencies + packages from wm_rn_config.json's plugins
+        const mergedDependencies = (0, lodash_1.merge)(packageJsonToUpdate.dependencies, templateDependencies);
+        packageJsonToUpdate.dependencies = mergedDependencies;
+        const { updatedPackageJson, pluginsRemoved } = await this.removeUnusedPluginsFromPackageJson(packageJsonToUpdate);
+        if (pluginsRemoved) {
+            this.shouldNpmInstall = true;
+        }
+        fs_extra_1.default.writeFileSync(`${this.projectPath}/package.json`, JSON.stringify(updatedPackageJson, null, 4));
+        // * installing packages whenever a package is added or removed
+        if (this.shouldNpmInstall && this.incBuilder) {
+            (0, command_1.npmInstall)(`${this.projectPath}`);
+        }
+    }
     async copyPackageLockJson() {
         if (fs_extra_1.default.existsSync(`${this.projectPath}/package-lock.json`)) {
             return;
@@ -1200,8 +1416,6 @@ class AppGenerator {
         if (this.incBuilder) {
             console.log(`Adding custom plugins.`);
         }
-        // Scan JS files for imports before processing package.json
-        this.scanJSFilesForImports();
         await this.projectService.getExpoPlugins().then(src => {
             if (src) {
                 fs_extra_1.default.mkdirsSync(`${this.projectPath}/expo-plugins`);
@@ -1250,11 +1464,10 @@ class AppGenerator {
                         }
                     }
                 });
-                const { updatedPackageJson, pluginsRemoved } = await this.removeUnusedPluginsFromPackageJson(jsonData);
-                if (pluginsRemoved) {
-                    shouldNpmInstall = true;
+                if (shouldNpmInstall) {
+                    this.shouldNpmInstall = true;
                 }
-                fs_extra_1.default.writeFileSync(`${this.projectPath}/package.json`, JSON.stringify(updatedPackageJson, null, 4));
+                fs_extra_1.default.writeFileSync(`${this.projectPath}/package.json`, JSON.stringify(jsonData, null, 4));
             });
         }
         else {
@@ -1274,15 +1487,10 @@ class AppGenerator {
                     }
                 }
             });
-            const { updatedPackageJson, pluginsRemoved } = await this.removeUnusedPluginsFromPackageJson(jsonData);
-            if (pluginsRemoved) {
-                shouldNpmInstall = true;
+            if (shouldNpmInstall) {
+                this.shouldNpmInstall = true;
             }
-            fs_extra_1.default.writeFileSync(`${this.projectPath}/package.json`, JSON.stringify(updatedPackageJson, null, 4));
-        }
-        // * installing packages whenever a plugin is added or removed
-        if (shouldNpmInstall && this.incBuilder) {
-            (0, command_1.npmInstall)(`${this.projectPath}`);
+            fs_extra_1.default.writeFileSync(`${this.projectPath}/package.json`, JSON.stringify(jsonData, null, 4));
         }
     }
     async generateAppTheme() {
@@ -1404,15 +1612,18 @@ class AppGenerator {
                 return Promise.all(components.map(c => this.generateWMXComponents(c, true)));
             }
         }).then(() => !this.incBuilder)
-            .then((build) => (build && this.prepareDeviceOperationLoader()))
+            .then((build) => (this.prepareDeviceOperationLoader()))
             .then(() => !this.incBuilder
             || this.incBuilder.isConfigModified()
             || this.incBuilder.isPrefabModified())
             .then((build) => (build && this.addCustomPluginsToPackageJson()))
-            .then(() => !this.incBuilder)
-            .then((build) => (build && this.prettify()))
             .then(() => this.mergePackageJson())
             .then(() => this.copyPackageLockJson())
+            .then(() => this.checkWidgetUsageInComponentFiles())
+            .then(() => this.checkPackageUsageInJSFiles())
+            .then(() => this.removeUnusedPackages())
+            .then(() => !this.incBuilder)
+            .then((build) => (build && this.prettify()))
             .then(() => this.projectService.copyNpmPackages(this.projectPath))
             .then(() => this.copyScreenCapturePluginIfNeeded())
             .then(() => console.log('code generated at ' + this.projectPath));