@swell/cli 2.0.1-alpha.16 → 2.0.1-alpha.17

package/dist/remote-app-command.js

@@ -1,14 +1,16 @@
 import { inflect } from 'inflection';
-import * as fs from 'node:fs';
 import * as path from 'node:path';
-import ora from 'ora';
+import { default as ora } from 'ora';
+import sortBy from 'lodash/sortBy.js';
+import { confirm } from '@inquirer/prompts';
 import { AppCommand } from './app-command.js';
-import { appConfigFileExists, readRcFile, writeRcFile, } from './lib/app-config.js';
-import { FunctionProcessingError, IgnoringFileError, allConfigFilesPaths, appConfigFromFile, appLogoIcon, batchAppConfigsByType, configFilePath, isAppLogoIcon, } from './lib/apps/index.js';
-import { default as swellConfig } from './lib/config.js';
-import { getLoginHost } from './lib/constants.js';
+import { readRcFile, writeRcFile } from './lib/app-config.js';
+import { AppConfig, SwellJsonFields, FunctionProcessingError, IgnoringFileError, allConfigFilesPaths, allBaseFilesInDir, appConfigFromFile, batchAppFilesByType, writeFile, writeJsonFile, deleteFile, hashFile, } from './lib/apps/index.js';
+import { default as localConfig } from './lib/config.js';
+import { getLoginHost, getAppFrontendHost, getStorefrontFrontendHost, getLocalFrontendHost, } from './lib/constants.js';
 import { toAppId } from './lib/create/index.js';
 import style from './lib/style.js';
+const PUSH_CONCURRENCY = 3;
 /**
  * Extends the AppCommand with methods that ease managing remote apps and
  * configurations.
@@ -17,44 +19,85 @@ export class RemoteAppCommand extends AppCommand {
     // allows child commands to set orientation
     // most of the times this will be the target environment
     static orientation;
-    // an API instance of the current app definition
+    static delayOrientation = false;
+    appType = 'any';
+    // API instance of the current app definition
     app = {};
+    // Indicates the app was created during the command execution
+    appCreated = false;
+    // API instance of the target storefront, if applicable
+    storefront = null;
+    // Indicates app configs are being synced along with theme configs
+    themeSyncApp = false;
     dashboardUrl(flags = {}, storeId) {
         const { env } = flags;
         const envFlag = env || this.ctor.orientation?.env;
         const outputEnv = envFlag === 'live' ? '' : envFlag ? 'test' : '';
         return `${getLoginHost(storeId)}/admin/${outputEnv ? `${outputEnv}/` : ''}apps/${this.app.id}`;
     }
-    async deleteConfig(configId) {
-        if (!this.app) {
-            this.error('App is not defined');
-        }
-        return this.api.delete({
-            adminPath: `/apps/${this.app.id}/configs/${configId}`,
-        });
+    appFrontendUrl(storeId, installedAppId) {
+        return getAppFrontendHost(storeId, installedAppId);
+    }
+    storefrontFrontendUrl(storeId, storefront, branchId, preview = true, editor = false) {
+        const storefrontSlug = storefront && preview
+            ? `${storeId}--${storefront.id.toLowerCase()}`
+            : storefront && editor
+                ? `${storeId}--${storefront.id.toLowerCase()}--dev`
+                : storeId;
+        return getStorefrontFrontendHost(storefrontSlug, branchId);
+    }
+    localFrontendUrl(storeId, sessionId) {
+        return getLocalFrontendHost(storeId, sessionId);
     }
     async getApp(id = '') {
         const app = await this.api.get({ adminPath: `/apps/${id}` });
-        // Get app configs for processing
-        app.configs = [];
-        const configsResponse = await this.api.get({ adminPath: `/apps/${id}/configs` }, { query: { limit: 1000 } });
-        this.debugJson('getApp: configsResponse', configsResponse);
-        // for each config, we check if there's a local file and we add it to the
-        // AppConfig object
-        for (const config of configsResponse.results || []) {
-            const localPath = configFilePath(this.appPath, config);
-            if (appConfigFileExists(localPath)) {
-                config.localPath = localPath;
+        const themeId = this.appType === 'theme' && this.storefront?.theme_id;
+        const canPullConfigs = themeId || app.owned;
+        if (canPullConfigs) {
+            // TODO: paginate configs to support up to 10,000 (otherwise 1,000)
+            // Get app configs for processing
+            const configs = await this.api.get({ adminPath: `/apps/${id}/configs` }, {
+                query: {
+                    limit: 1000,
+                    ...(themeId ? { theme_id: themeId } : undefined),
+                },
+            });
+            // Instantiate AppConfig for each object
+            app.configs = (configs.results || []).map((config) => AppConfig.create({
+                ...config,
+                appPath: this.appPath,
+            }));
+            // Pull app configs to compare with theme for push/pull
+            if (themeId && this.themeSyncApp) {
+                const appConfigs = await this.api.get({ adminPath: `/apps/${id}/configs` }, { query: { limit: 1000 } });
+                for (const appConfig of appConfigs.results || []) {
+                    const themeConfig = app.configs.find((config) => config.filePath === appConfig.file_path);
+                    if (themeConfig && themeConfig.fileHash !== appConfig.hash) {
+                        themeConfig.hash = appConfig.hash;
+                    }
+                    else if (!themeConfig && appConfig) {
+                        app.configs.push(AppConfig.create({
+                            ...appConfig,
+                            appPath: this.appPath,
+                            appConfigId: appConfig.id,
+                            id: undefined,
+                        }));
+                    }
+                }
+                for (const themeConfig of app.configs) {
+                    const appConfig = appConfigs.results.find((config) => themeConfig.filePath === config.file_path);
+                    if (!appConfig) {
+                        themeConfig.hash = 'x';
+                    }
+                }
             }
-            app.configs.push(config);
         }
-        this.debugJson('getApp: remote app', app);
         return app;
     }
     async getAppWithConfig(id = '') {
         const swellId = this.app?.id;
-        const appConfigId = this.appConfig.get('id');
-        if (!appConfigId) {
+        const swellConfigId = this.swellConfig.get('id');
+        if (!swellConfigId) {
             this.error(`App ${style.appConfigName('id')} is not defined in swell.json.`);
         }
         let appId = id || swellId;
@@ -63,8 +106,8 @@ export class RemoteAppCommand extends AppCommand {
             if (!privateId) {
                 this.error(`App ${style.appConfigName('id')} is not defined in swell.json.`);
             }
-            if (privateId !== appConfigId) {
-                this.error(`App ${style.appConfigName('id')} must be declared in snake_case: ${style.appConfigValue(appConfigId)}.`);
+            if (privateId !== swellConfigId) {
+                this.error(`App ${style.appConfigName('id')} must be declared in snake_case: ${style.appConfigValue(swellConfigId)}.`);
             }
             appId = privateId;
         }
@@ -72,9 +115,9 @@ export class RemoteAppCommand extends AppCommand {
         let app = {};
         try {
             app = await this.getApp(appId);
+            this.app.id = app.id;
         }
         catch (error) {
-            this.debug('getApp: app not found', error);
             let errorJson;
             try {
                 errorJson = JSON.parse(error.message);
@@ -105,98 +148,126 @@ export class RemoteAppCommand extends AppCommand {
     }
     async getCreateUpdateApp(updateApp) {
         const spinner = ora();
-        let remoteApp;
+        let sourceApp;
         try {
-            remoteApp = await readRcFile(this.swellRcPath());
+            sourceApp = await readRcFile(this.swellRcPath());
         }
         catch (error) {
             if (error.code !== 'ENOENT') {
                 throw error;
             }
         }
+        if (!this.swellConfig.store.id) {
+            throw new Error('App swell.json is missing or `id` is not defined.');
+        }
         /* eslint-disable camelcase */
         const body = {
-            ...this.appConfig.store,
+            ...this.swellConfig.store,
             // we store locally the private id as the id, but we need to switch it
             // when posting to the API
             id: undefined,
-            logo_icon: null,
-            ...(this.appConfig.store.id
-                ? { private_id: this.appConfig.store.id }
+            ...(this.swellConfig.store.id
+                ? { private_id: this.swellConfig.store.id }
                 : undefined),
-            ...(remoteApp?.id ? { source_id: remoteApp.id } : undefined),
+            ...(sourceApp?.id ? { source_id: sourceApp.id } : undefined),
         };
-        const logoIcon = appLogoIcon(this.appPath);
-        if (logoIcon) {
-            const icon = fs.readFileSync(logoIcon, { encoding: 'base64' });
-            body.logo_icon = icon;
-        }
+        const appLabel = this.app.type === 'theme' ? 'theme' : 'app';
         /* eslint-enable camelcase */
         let app = updateApp || {};
-        let appCreated = false;
         if (!app.id) {
             // May already have a dev instance
             let existingDevApp;
             try {
                 existingDevApp = await this.api.get({
-                    adminPath: `/apps/${this.appConfig.store.id}`,
+                    adminPath: `/apps/${this.swellConfig.store.id}`,
                 });
             }
             catch {
                 // noop
             }
-            spinner.start(`Creating app...`);
+            spinner.start(`Creating ${appLabel}...`);
             if (existingDevApp) {
-                app = await this.handleRequestErrors(async () => this.api.put({ adminPath: `/apps/${existingDevApp.id}` }, { body }), () => spinner.fail('Error creating app'));
+                app = await this.handleRequestErrors(async () => this.api.put({ adminPath: `/apps/${existingDevApp.id}` }, { body }), () => spinner.fail('Error updating app.'));
             }
             else {
-                app = await this.handleRequestErrors(async () => this.api.post({ adminPath: '/apps' }, { body }), () => spinner.fail('Error creating app'));
-                appCreated = true;
+                app = await this.handleRequestErrors(async () => this.api.post({ adminPath: '/apps' }, { body }), () => spinner.fail('Error creating app.'));
+                this.appCreated = true;
             }
         }
         else if (app.id) {
-            spinner.start(`Updating app...`);
-            app = await this.handleRequestErrors(async () => this.api.put({ adminPath: `/apps/${app.id}` }, { body }), () => spinner.fail('Error updating app'));
+            spinner.start(`Updating ${appLabel}...`);
+            app = await this.handleRequestErrors(async () => this.api.put({ adminPath: `/apps/${app.id}` }, { body }), () => spinner.fail('Error updating app.'));
         }
         if (app?.id) {
-            await writeRcFile(this.swellRcPath(), { id: app.id });
+            if (!sourceApp) {
+                await writeRcFile(this.swellRcPath(), { id: app.id });
+            }
             // if not failed, we want to display correct messaging
             if (spinner.isSpinning) {
-                if (appCreated) {
-                    spinner.succeed('Development app created.');
-                    this.log();
+                if (this.appCreated) {
+                    spinner.succeed(`Development ${appLabel} created.`);
                 }
                 else {
-                    spinner.stop();
-                }
-                this.log('App details');
-                spinner.succeed('app details');
-                if (logoIcon) {
-                    spinner.succeed('app logo');
+                    spinner.succeed(`${appLabel === 'theme' ? 'Theme app' : 'App'} details up to date.`);
                 }
+                this.log();
             }
-            this.log();
-            return app;
+            return this.getApp(app.id);
         }
         return {};
     }
+    async getInstalledApp() {
+        // check if app is already installed on store
+        return this.api.get({ adminPath: `/client/apps/${this.app.id}` }, {});
+    }
+    async installApp(version, spinner) {
+        return this.api.post({ adminPath: `/client/apps` }, 
+        // eslint-disable-next-line camelcase
+        {
+            body: { app_id: this.app.id, version },
+            spinner,
+            onAsyncGetPath: (response) => ({
+                adminPath: `/client/app-async-status/${response.id}`,
+            }),
+        });
+    }
+    async updateInstalledApp(version, spinner) {
+        await this.api.put({ adminPath: `/client/apps/${this.app.id}` }, {
+            body: { version },
+            spinner,
+            onAsyncGetPath: (response) => ({
+                adminPath: `/client/app-async-status/${response.id}`,
+            }),
+        });
+    }
     async getVersions(version) {
         const versionsResponse = await this.api.get({ adminPath: `/apps/${this.app.id}/versions` }, {
             query: {
-                limit: 1000,
-                sort: 'version desc',
                 ...(version ? { version } : undefined),
             },
         });
-        this.debugJson('getApp: versionsResponse', versionsResponse);
         return versionsResponse.results || [];
     }
+    async getVersion(version) {
+        const versionsResponse = await this.api.get({ adminPath: `/apps/${this.app.id}/versions` }, {
+            query: {
+                limit: 1,
+                ...(version ? { version } : undefined),
+            },
+        });
+        return versionsResponse.results?.[0];
+    }
+    async updateVersion(version, body, spinner) {
+        await this.handleRequestErrors(async () => this.api.put({ adminPath: `/apps/${this.app.id}/versions` }, { body: { version, ...body } }), () => spinner?.fail('Error updating version.'));
+    }
     async handleRequestErrors(request, spinnerError) {
+        let showedErrors = false;
         try {
             const response = await request();
             if (response?.status !== 200 && response?.errors) {
                 this.showErrors(response.errors, spinnerError);
-                this.error('API request failed');
+                showedErrors = true;
+                this.error('Something went wrong.');
             }
             return response;
         }
@@ -208,13 +279,13 @@ export class RemoteAppCommand extends AppCommand {
             catch {
                 // noop, likely JSON parse error
             }
-            if (jsonError && jsonError.error) {
-                this.showErrors(jsonError, spinnerError);
-                this.error('API request failed');
-            }
-            else if (typeof error.message === 'string') {
-                this.showErrors(error, spinnerError);
-                this.error(error.message);
+            if (!showedErrors) {
+                if (jsonError && jsonError.error) {
+                    this.showErrors(jsonError, spinnerError);
+                }
+                else if (typeof error.message === 'string') {
+                    this.showErrors(error, spinnerError);
+                }
             }
             throw error;
         }
@@ -222,63 +293,107 @@ export class RemoteAppCommand extends AppCommand {
     async init() {
         await super.init();
         this.app = this.initApp();
+        this.storefront = null;
+        const klass = this.ctor;
+        if (klass.orientation && !klass.delayOrientation) {
+            await this.logOrientation();
+        }
+    }
+    async logOrientation() {
         const klass = this.ctor;
         const { flags } = await this.parse(klass);
         if (klass.orientation) {
             this.showOrientation(klass.orientation, flags);
         }
     }
-    async postConfig(configJson) {
-        if (!this.app) {
-            this.error('App is not defined');
-        }
-        this.debug('postConfig: configJson', configJson);
-        return this.api.post({ adminPath: `/apps/${this.app.id}/configs` }, { body: configJson });
+    async postConfigData(configJson) {
+        const themeId = this.app.type === 'theme' && this.storefront?.theme_id;
+        return this.api.post({ adminPath: `/apps/${this.app.id}/configs` }, {
+            body: {
+                ...configJson,
+                ...(themeId ? { theme_id: themeId } : undefined),
+                ...(this.themeSyncApp ? { $sync_app: true } : undefined),
+            },
+        });
+    }
+    async getConfigData(configId) {
+        const themeId = this.app.type === 'theme' && this.storefront?.theme_id;
+        return await this.api.get({
+            adminPath: `/apps/${this.app.id}/configs/${configId}/data`,
+        }, { query: { ...(themeId ? { theme_id: themeId } : undefined) } });
     }
-    async pushConfigFile(appConfig) {
-        const { localPath } = appConfig;
+    async deleteConfig(configId, filePath, appConfigId) {
+        const themeId = this.app.type === 'theme' && this.storefront?.theme_id;
+        return this.api.delete({
+            adminPath: `/apps/${this.app.id}/configs/${appConfigId || configId}`,
+        }, {
+            query: {
+                ...(filePath ? { file_path: filePath } : undefined),
+                ...(themeId ? { theme_id: themeId } : undefined),
+                ...(appConfigId ? { app_config_id: appConfigId } : undefined),
+                ...(this.themeSyncApp ? { $sync_app: true } : undefined),
+            },
+        });
+    }
+    async pushRemoteFile(config, log = true) {
         const spinner = ora();
-        let postData;
-        if (!localPath) {
-            throw new Error('Missing local config path');
-        }
-        // we don't want to treat the app logo asset as config file
-        // it is dealt with at the app level
-        if (isAppLogoIcon(localPath)) {
-            return;
-        }
-        const pathDesc = localPath.split('/').slice(-2).join('/');
-        spinner.start(`Pushing ${pathDesc}`);
+        log && spinner.start(`Pushing ${config.filePath}`);
         try {
-            postData = await appConfig.postData();
+            const postData = await config.postData();
             if (!postData) {
                 spinner.stop();
                 return;
             }
+            const result = await this.handleRequestErrors(async () => this.postConfigData(postData), () => log && spinner.fail(`Error pushing ${config.filePath}`));
+            log && spinner.succeed(`${this.timestampStyled()} ${config.filePath}`);
+            return result;
         }
         catch (error) {
             if (error instanceof IgnoringFileError) {
-                spinner.fail(`Ignoring file: ${error.message} in ${localPath}`);
+                log &&
+                    spinner.fail(`Ignoring file: ${error.message} in ${config.filePath}`);
                 return;
             }
             if (error instanceof FunctionProcessingError) {
-                this.debug(error);
-                this.debug(error.originalError);
-                spinner.fail(`${error.message} ${error.originalError?.message?.toLowerCase()}`);
+                log &&
+                    spinner.fail(`${error.message} ${error.originalError?.message?.toLowerCase()}`);
                 return;
             }
-            spinner.fail(error.message);
+            log && spinner.fail(error.message);
+            throw error;
+        }
+    }
+    async pullRemoteFile(config, log = true) {
+        const spinner = ora();
+        log && spinner.start(`Pulling ${config.filePath}`);
+        try {
+            const result = await this.handleRequestErrors(async () => this.getConfigData(config.id), () => log && spinner.fail(`Error pulling ${config.filePath}`));
+            await writeFile(config.appPath, result);
+            log && spinner.succeed(`${this.timestampStyled()} ${config.filePath}`);
+            return result;
+        }
+        catch (error) {
+            log && spinner.fail(error.message);
             throw error;
         }
-        const result = await this.handleRequestErrors(async () => this.postConfig(postData), () => spinner.fail(`Error pushing ${pathDesc}`));
-        spinner.succeed(`Pushed ${pathDesc}`);
+    }
+    async removeRemoteFile(config, log = true) {
+        const spinner = ora();
+        log && spinner.start(`Removing ${config.filePath}`);
+        const result = await this.handleRequestErrors(async () => this.deleteConfig(config.id, config.filePath, config.appConfigId), () => log && spinner.fail(`Error removing ${config.filePath}`));
+        log &&
+            spinner.warn(`${this.timestampStyled()} ${style.strike(config.filePath)}`);
         return result;
     }
-    async removeConfig(config) {
+    async removeLocalFile(config, log = true) {
+        if (!config.fileData) {
+            return;
+        }
         const spinner = ora();
-        spinner.start(`Removing ${config.type} ${config.name}`);
-        const result = await this.handleRequestErrors(async () => this.deleteConfig(config.id), () => spinner.fail(`Error removing ${config.type} ${config.name}`));
-        spinner.warn(`Removed ${config.type} ${config.name}`);
+        log && spinner.start(`Removing ${config.filePath}`);
+        const result = await this.handleRequestErrors(async () => deleteFile(config.appPath), () => log && spinner.fail(`Error removing ${config.filePath}`));
+        log &&
+            spinner.warn(`${this.timestampStyled()} ${style.strike(config.filePath)}`);
         return result;
     }
     showErrors(errors, spinnerError) {
@@ -290,6 +405,8 @@ export class RemoteAppCommand extends AppCommand {
             this.logError(inflect('Error', actualErrors.length));
         }
         for (const err of actualErrors) {
+            if (!errors[err]?.message)
+                continue;
             // we need to display `id` instead of `private_id`
             // developers don't have any knowledge of private ids
             const displayErr = err === 'private_id' ? 'id' : err;
@@ -305,45 +422,202 @@ export class RemoteAppCommand extends AppCommand {
     swellRcPath() {
         return path.join(this.appPath, '.swellrc');
     }
-    async syncAppConfigs() {
-        const configsToPush = [];
-        const installed = [];
-        const removed = [];
+    getLocalAppConfigs() {
+        const localConfigs = [];
         for (const { configFile, configType } of allConfigFilesPaths(this.appPath)) {
-            // skip logo icon as it is dealt with at the app level
-            if (isAppLogoIcon(configFile)) {
+            const config = appConfigFromFile(configFile, configType, this.appPath);
+            localConfigs.push(config);
+        }
+        for (const filePath of allBaseFilesInDir(this.appPath)) {
+            const config = appConfigFromFile(filePath, 'file', this.appPath);
+            localConfigs.push(config);
+        }
+        return localConfigs;
+    }
+    async pushAppConfigs(force) {
+        const pushed = [];
+        const removed = [];
+        const localConfigs = this.getLocalAppConfigs();
+        const remoteConfigs = await this.cleanRemoteConfigs(this.app?.configs || []);
+        // Do not allow more than 10K files
+        if (localConfigs.length > 10000) {
+            this.error(`Apps only support up to 10,000 files. Found ${localConfigs.length} files.`);
+        }
+        const batches = batchAppFilesByType(localConfigs);
+        for (const batch of batches) {
+            const remoteBatchConfigs = remoteConfigs.filter((config) => config.type === batch.type);
+            const pushFiles = batch.configs.filter((batchConfig) => {
+                const remoteConfig = remoteBatchConfigs.find((config) => {
+                    return batchConfig.filePath === config.filePath;
+                });
+                return Boolean(force || !remoteConfig || remoteConfig.hash !== batchConfig.hash);
+            });
+            const filesToRemove = remoteBatchConfigs.filter((config) => {
+                return !batch.configs.find((batchConfig) => {
+                    return batchConfig.filePath === config.filePath;
+                });
+            });
+            // Skip if there are no config changes
+            if (!pushFiles.length && !filesToRemove.length) {
                 continue;
             }
-            const appConfig = appConfigFromFile(configFile, configType);
-            configsToPush.push(appConfig);
+            const updatedLog = pushFiles.length > 0
+                ? remoteBatchConfigs.length > 0
+                    ? `(${pushFiles.length}/${batch.configs.length})`
+                    : `(${pushFiles.length})`
+                : '';
+            if (pushFiles.length > 0 || filesToRemove.length > 0) {
+                this.log(`${style.appConfigName(`${batch.label} ${updatedLog}`)}`);
+            }
+            if (pushFiles.length > 0) {
+                const pushConcurrency = batch.type === 'ASSET' ? 1 : PUSH_CONCURRENCY;
+                while (pushFiles.length) {
+                    await Promise.all(pushFiles
+                        .splice(0, pushConcurrency)
+                        .map(async (config) => {
+                        const pushedConfig = await this.pushRemoteFile(config);
+                        if (pushedConfig) {
+                            pushed.push(pushedConfig.id);
+                            if (config.filePath === 'swell.json') {
+                                this.app = await this.getApp(this.app.id);
+                            }
+                        }
+                    }));
+                }
+            }
+            // Remove any deleted files
+            if (filesToRemove.length > 0) {
+                while (filesToRemove.length) {
+                    await Promise.all(filesToRemove.splice(0, PUSH_CONCURRENCY).map(async (config) => {
+                        await this.removeRemoteFile(config);
+                        removed.push(config.id);
+                    }));
+                }
+            }
+            this.log();
         }
-        const batches = batchAppConfigsByType(configsToPush);
+        if (pushed.length === 0 && removed.length === 0) {
+            this.log(`${style.success('✔')} All files up to date.\n`);
+        }
+        return { pushed, removed };
+    }
+    async pullAppConfigs(force, confirmRemove = true) {
+        const pulled = [];
+        const removed = [];
+        const localConfigs = this.getLocalAppConfigs();
+        const remoteConfigs = await this.cleanRemoteConfigs(await this.pullAppJsonAndRemoteConfigs(), false);
+        const batches = batchAppFilesByType(remoteConfigs);
         for (const batch of batches) {
-            this.log(style.appConfigName(batch.label));
-            for (const appConfig of batch.configs) {
-                // eslint-disable-next-line no-await-in-loop
-                const installedConfig = await this.pushConfigFile(appConfig);
-                if (installedConfig)
-                    installed.push(installedConfig.id);
+            const remoteBatchConfigs = remoteConfigs.filter((config) => config.type === batch.type);
+            const localBatchConfigs = localConfigs.filter((config) => config.type === batch.type);
+            const pullFiles = batch.configs.filter((batchConfig) => {
+                if (force)
+                    return true;
+                try {
+                    const localConfig = localBatchConfigs.find((config) => config.filePath === batchConfig.filePath);
+                    if (localConfig) {
+                        const hash = hashFile(batchConfig.appPath);
+                        if (hash === batchConfig.hash) {
+                            return false;
+                        }
+                    }
+                }
+                catch { }
+                return true;
+            });
+            const filesToRemove = localBatchConfigs.filter((config) => {
+                return !batch.configs.find((batchConfig) => {
+                    return batchConfig.filePath === config.filePath;
+                });
+            });
+            // Skip if there are no config changes
+            if (!pullFiles.length && !filesToRemove.length) {
+                continue;
+            }
+            const updatedLog = pullFiles.length > 0
+                ? `(${pullFiles.length}/${remoteBatchConfigs.length})`
+                : '';
+            if (pullFiles.length > 0 || filesToRemove.length > 0) {
+                this.log(`${style.appConfigName(`${batch.label} ${updatedLog}`)}`);
+            }
+            if (pullFiles.length > 0) {
+                while (pullFiles.length) {
+                    await Promise.all(pullFiles
+                        .splice(0, PUSH_CONCURRENCY)
+                        .map(async (config) => {
+                        await this.pullRemoteFile(config);
+                        pulled.push(config.id);
+                    }));
+                }
+            }
+            // Remove any deleted files
+            if (filesToRemove.length > 0) {
+                if (confirmRemove && !force) {
+                    const removeList = filesToRemove
+                        .map((config) => config.filePath)
+                        .join('\n');
+                    const confirmed = await confirm({
+                        message: `The following files are not in the remote app:\n\n${removeList}\n\nDo you want to delete these files locally?`,
+                        default: false,
+                    });
+                    if (!confirmed) {
+                        filesToRemove.splice(0);
+                    }
+                }
+                while (filesToRemove.length) {
+                    await Promise.all(filesToRemove.splice(0, PUSH_CONCURRENCY).map(async (config) => {
+                        await this.removeLocalFile(config);
+                        removed.push(config.id);
+                    }));
+                }
             }
             this.log();
         }
-        // pull the app again after the latest push
-        // this allows us to get the latest configs updates that the remote app
-        // might have done
-        this.app = await this.getAppWithConfig(this.app.id);
-        this.debugJson('syncAppConfigs: app', this.app);
-        // if the remote app has configs that are not in the local app, we want to
-        // remove them
-        for (const config of this.app?.configs || []) {
-            const appConfig = config;
-            if (!appConfig.localPath) {
-                // eslint-disable-next-line no-await-in-loop
-                await this.removeConfig(appConfig);
-                removed.push(appConfig.id);
+        if (pulled.length === 0 && removed.length === 0) {
+            this.log(`${style.success('✔')} All files up to date.\n`);
+        }
+        return { pulled, removed };
+    }
+    async pullAppJsonAndRemoteConfigs() {
+        const configs = this.app.configs || [];
+        const allOtherConfigs = sortBy(configs.filter((config) => config.filePath !== 'swell.json'), 'filePath');
+        const swellJson = configs.find((config) => config.filePath === 'swell.json');
+        if (swellJson) {
+            await this.pullRemoteFile(swellJson, false);
+        }
+        else {
+            const swellConfigJson = {};
+            for (const key in SwellJsonFields) {
+                const configKey = SwellJsonFields[key];
+                swellConfigJson[configKey] = this.app[configKey];
+            }
+            swellConfigJson.id = toAppId(this.app.private_id);
+            await writeJsonFile(path.join(this.appPath, 'swell.json'), swellConfigJson);
+        }
+        const swellConfig = appConfigFromFile('swell.json', 'file', this.appPath);
+        swellConfig.id = swellJson?.id;
+        return [swellConfig, ...allOtherConfigs];
+    }
+    isConfigDeprecated(config) {
+        return !config.file_path;
+    }
+    async cleanRemoteConfigs(remoteConfigs, deleteDeprecated = true) {
+        // Delete remote configs that do not have file_path etc
+        const deprecatedConfigs = remoteConfigs.filter((config) => this.isConfigDeprecated(config));
+        if (deleteDeprecated && deprecatedConfigs.length > 0) {
+            const spinner = ora();
+            spinner.start('Cleaning up deprecated configurations, please wait...');
+            for (const config of deprecatedConfigs) {
+                await this.removeRemoteFile(config, false);
             }
+            spinner.stop();
         }
-        return { installed, removed };
+        const validConfigs = remoteConfigs.filter((config) => !this.isConfigDeprecated(config));
+        return validConfigs;
+    }
+    timestampStyled() {
+        const date = new Date();
+        return style.dim(`[${date.toLocaleTimeString()}]`);
     }
     /**
      * Reads the .swellrc file and sets up the remote app configuration.
@@ -351,30 +625,28 @@ export class RemoteAppCommand extends AppCommand {
      * @returns App
      */
     initApp() {
-        let remoteApp = {};
-        try {
-            this.debug('initApp: swellRcPath', this.swellRcPath());
-            remoteApp = readRcFile(this.swellRcPath());
-            this.debug('initApp: remoteApp', remoteApp);
-        }
-        catch (error) {
-            // if the file doesn't exist, we don't want to throw an error as we might
-            // want to create it later.
-            if (error.code !== 'ENOENT') {
-                throw error;
-            }
-        }
-        if (this.appConfig.get('id')) {
+        let app = this.swellConfig.store || {};
+        // id refers to remote app id, so it's undefined initially
+        app.id = undefined;
+        // swell.json id refers to private id
+        if (this.swellConfig.get('id')) {
             // use the same formula as the backend api
             // eslint-disable-next-line camelcase
-            remoteApp.private_id = toAppId(this.appConfig.get('id'));
+            app.private_id = toAppId(this.swellConfig.get('id'));
+        }
+        // Default name to private id
+        if (!app.name) {
+            app.name = app.private_id || app.id;
         }
-        return remoteApp;
+        return app;
     }
     showOrientation(orientation, flags) {
         const orientationOutput = [];
-        const currentStore = swellConfig.getDefaultStore();
+        const currentStore = localConfig.getDefaultStore();
         const { env, store } = flags;
+        orientationOutput.push(`[${this.app.type === 'theme' ? 'theme' : 'app'}] ${style.appName(this.app.name)}${this.app.version ? ` v${this.app.version}` : ''}${this.storefront && this.storefront.name !== this.app.name
+            ? ` [storefront] ${style.appName(this.storefront.name)}`
+            : ``}`);
         if (store) {
             orientationOutput.push(`[store] ${style.storeId(store)}`);
         }