@shoper/cli 0.7.1-1 → 0.8.1-10

package/build/theme/class/browser/browser.js

@@ -18,7 +18,8 @@ export class Browser {
                 this.#onInfo?.(`Launching browser...`);
                 this.#browser = await puppeteer.launch({
                     headless: false,
-                    defaultViewport: null
+                    defaultViewport: null,
+                    args: process.platform === 'linux' ? ['--no-sandbox'] : []
                 });
                 this.#browser.on('disconnected', () => {
                     this.#onDisconnected?.('Browser disconnected');
@@ -43,6 +44,7 @@ export class Browser {
             const id = tabId ?? `tab-${uuid()}`;
             this.#onInfo?.(`Opening new tab ${id}: ${url}`);
             const page = await this.#browser.newPage();
+            await page.setCacheEnabled(false);
             await page.goto(url, { waitUntil: 'networkidle2' });
             this.#tabs.set(id, { page, url });
             this.#onInfo?.(`Tab ${id} opened successfully`);
@@ -68,6 +70,10 @@ export class Browser {
             throw error;
         }
     }
+    async refreshAll() {
+        const openTabs = this.getOpenTabs();
+        await Promise.allSettled(openTabs.map((tabId) => this.refresh(tabId)));
+    }
     async closeTab(tabId) {
         const tab = this.#tabs.get(tabId);
         if (!tab) {

package/build/theme/commands/watch/theme_watch_command.js

@@ -21,8 +21,9 @@ import { LOGGER_API_NAME } from '../../../cli/utilities/features/logger/logger_c
 import { Watch } from './watch.js';
 import { Flags } from '@oclif/core';
 import { ThemeError } from '../ui/theme_error.js';
+import { retro } from 'gradient-string';
 export class ThemeWatchCommand extends BaseThemeCommand {
-    static summary = 'Watch local theme files for changes and update your store preview in real time.';
+    static summary = `Watch local theme files for changes and update your store preview in real time. ${retro('[BETA]')}`;
     static description = `Continuously monitors your local theme files for any changes and uploads them automatically to your store. Your store preview will refresh in real time to reflect updates immediately.\n\nYou must run this command from a specific theme directory (ID not needed).`;
     static examples = [
         {

package/build/theme/features/theme/actions/theme_actions_utils.js

@@ -9,7 +9,8 @@ export class ThemeActionsUtils {
     static getFilesGlobsThatMatchesAction({ filesStructure, actionValue, actionType }) {
         return Object.entries(filesStructure).reduce((acc, [filePath, fileStructureItem]) => {
             if (fileStructureItem._links?.[actionType] && this._doesActionValueMatch(fileStructureItem._links[actionType], actionValue)) {
-                return [...acc, toUnixPath(filePath)];
+                const normalizedPath = this._normalizeFileGlob(toUnixPath(filePath));
+                return [...acc, normalizedPath];
             }
             return acc;
         }, []);
@@ -104,6 +105,12 @@ export class ThemeActionsUtils {
     //
     //     return fileRecords;
     // }
+    static _normalizeFileGlob(fileGlob) {
+        if (fileGlob.endsWith('/')) {
+            return `${fileGlob}${THEME_PUSH_WILDCARD_GLOBS_FOR_FILES}`;
+        }
+        return fileGlob;
+    }
     static _doesActionValueMatch(currentActionValue, valuesToMatch) {
         if (typeof valuesToMatch === 'string') {
             return currentActionValue === valuesToMatch || valuesToMatch === THEME_ALL_ACTIONS_NAME;

package/build/theme/features/theme/push/theme_push_utils.js

@@ -2,6 +2,7 @@ import globs from 'fast-glob';
 import { AppError } from '../../../../cli/utilities/features/logger/logs/app_error.js';
 import { toUnixPath } from '../../../../utils/path_utils.js';
 import { ThemeFilesUtils } from '../utils/files/theme_files_utils.js';
+import { THEME_PUSH_WILDCARD_GLOBS_FOR_FILES } from './service/theme_push_service_constants.js';
 export class ThemePushUtils {
     static async getAllFilesThatAreSendToRemote(themeDir) {
         const filesStructure = await ThemeFilesUtils.getThemeFilesStructure(themeDir);
@@ -12,7 +13,7 @@ export class ThemePushUtils {
             });
         //need unix styles globs
         const filesToArchive = Object.keys(filesStructure)
-            .map((path) => toUnixPath(path))
+            .map((path) => ThemePushUtils._normalizeFileGlob(toUnixPath(path)))
             .filter((path) => path !== '*');
         //need unix styles globs
         filesToArchive.push('styles/src/**/*');
@@ -22,4 +23,10 @@ export class ThemePushUtils {
             cwd: themeDir
         }).then((files) => files.sort());
     }
+    static _normalizeFileGlob(fileGlob) {
+        if (fileGlob.endsWith('/')) {
+            return `${fileGlob}${THEME_PUSH_WILDCARD_GLOBS_FOR_FILES}`;
+        }
+        return fileGlob;
+    }
 }

package/build/theme/features/theme/watch/service/theme_watch_service.js

@@ -2,7 +2,7 @@ import { AppLog } from '../../../../../cli/utilities/features/logger/logs/app_lo
 import chokidar from 'chokidar';
 import { APP_LOGS_TYPES } from '../../../../../cli/utilities/features/logger/logs/app_logs_constants.js';
 import { relative } from '../../../../../utils/path_utils.js';
-import { SHOP_BROWSER_TAB_ID, THEME_BATCH_DELAY_MS } from '../theme_watch_constants.js';
+import { SHOP_BROWSER_TAB_ID, STORE_FRONT_BROWSER_TAB_ID, THEME_BATCH_DELAY_MS } from '../theme_watch_constants.js';
 import { FILE_STATES } from '../../../../../utils/fs/fs_constants.js';
 export class ThemeWatchService {
     #themePushApi;
@@ -14,6 +14,7 @@ export class ThemeWatchService {
     #changedFiles = new Set();
     #watcher = null;
     #urlForWatchedTheme = null;
+    #storeFrontUrl = null;
     constructor({ themePushApi, browserClient }) {
         this.#themePushApi = themePushApi;
         this.#browserApi = new browserClient({
@@ -26,9 +27,11 @@ export class ThemeWatchService {
         this.#onMessage = onMessage || null;
         const themePath = executionContext.themeRootDir;
         this.#urlForWatchedTheme = `${credentials.shopUrl}/admin/configSkins/skin-preview/id/${executionContext.themeId}`;
+        this.#storeFrontUrl = credentials.shopUrl;
         if (openBrowser) {
             await this.#browserApi.launch();
             await this.#browserApi.openTab(this.#urlForWatchedTheme, SHOP_BROWSER_TAB_ID);
+            await this.#browserApi.openTab(this.#storeFrontUrl, STORE_FRONT_BROWSER_TAB_ID);
         }
         this._onInfoMessage(`Watching for changes in: ${themePath}`);
         this.#watcher = chokidar.watch(themePath, {
@@ -46,7 +49,7 @@ export class ThemeWatchService {
             const fileState = await themeChecksums.getFileState(relativePath);
             if (fileState == FILE_STATES.unchanged)
                 return;
-            this._onInfoMessage(`Detected change in: ${relativePath} ${fileState}`);
+            this._onInfoMessage(`Detected change in: ${relativePath}`);
             this.#changedFiles.add(relativePath);
             if (this.#batchTimeout)
                 this._clearQueuedBatch();
@@ -82,21 +85,30 @@ export class ThemeWatchService {
             .on('ready', () => this._onInfoMessage('Initial scan complete. Ready for changes.'));
     }
     async ensureBrowserTabOpen() {
-        if (!this.#urlForWatchedTheme)
+        if (!this.#urlForWatchedTheme || !this.#storeFrontUrl)
             return;
         if (!this.#browserApi.isBrowserOpen()) {
             this._onInfoMessage(`Browser is not open, launching...`);
             await this.#browserApi.launch();
             await this.#browserApi.openTab(this.#urlForWatchedTheme, SHOP_BROWSER_TAB_ID);
-            this._onInfoMessage(`Browser opened with new tab`);
+            await this.#browserApi.openTab(this.#storeFrontUrl, STORE_FRONT_BROWSER_TAB_ID);
+            this._onInfoMessage(`Browser opened with new tabs`);
             return;
         }
+        let reopened = false;
         if (!this.#browserApi.isTabOpen(SHOP_BROWSER_TAB_ID)) {
-            this._onInfoMessage(`Tab was closed, reopening...`);
+            this._onInfoMessage(`Admin preview tab was closed, reopening...`);
             await this.#browserApi.openTab(this.#urlForWatchedTheme, SHOP_BROWSER_TAB_ID);
-            return;
+            reopened = true;
+        }
+        if (!this.#browserApi.isTabOpen(STORE_FRONT_BROWSER_TAB_ID)) {
+            this._onInfoMessage(`Store front tab was closed, reopening...`);
+            await this.#browserApi.openTab(this.#storeFrontUrl, STORE_FRONT_BROWSER_TAB_ID);
+            reopened = true;
+        }
+        if (!reopened) {
+            this._onInfoMessage(`Browser and tabs already open`);
         }
-        this._onInfoMessage(`Browser and tab already open`);
     }
     async stopWatching() {
         this._onInfoMessage('Shutting down...');
@@ -105,6 +117,7 @@ export class ThemeWatchService {
         await this.#watcher?.close();
         await this.#browserApi.close();
         this.#urlForWatchedTheme = null;
+        this.#storeFrontUrl = null;
     }
     _clearQueuedBatch() {
         if (this.#batchTimeout) {
@@ -112,13 +125,14 @@ export class ThemeWatchService {
             this.#batchTimeout = null;
         }
     }
-    async _refreshBrowserTab() {
-        if (!SHOP_BROWSER_TAB_ID || !this.#browserApi.isTabOpen(SHOP_BROWSER_TAB_ID))
+    async _refreshBrowserTabs() {
+        const openTabs = this.#browserApi.getOpenTabs();
+        if (openTabs.length === 0)
             return;
         try {
-            this._onInfoMessage(`Refreshing browser tab...`);
-            await this.#browserApi.refresh(SHOP_BROWSER_TAB_ID);
-            this._onInfoMessage(`Browser tab refreshed`);
+            this._onInfoMessage(`Refreshing browser tabs...`);
+            await this.#browserApi.refreshAll();
+            this._onInfoMessage(`Browser tabs refreshed`);
         }
         catch (error) {
             this._onErrorMessage(`Error refreshing browser:`, error);
@@ -132,7 +146,7 @@ export class ThemeWatchService {
             this._onInfoMessage(`Pushing theme...`);
             await this.#themePushApi.partialPush(params);
             this._onSuccessMessage(`Theme pushed successfully`);
-            await this._refreshBrowserTab();
+            await this._refreshBrowserTabs();
             if (this.#pendingPush) {
                 this._onInfoMessage(`Executing queued push...`);
                 this.#isPushing = false;

package/build/theme/features/theme/watch/theme_watch_constants.js

@@ -2,3 +2,4 @@ export const THEME_WATCH_FEATURE_NAME = 'ThemeWatch';
 export const THEME_WATCH_API_NAME = 'ThemeWatchApi';
 export const THEME_BATCH_DELAY_MS = 750;
 export const SHOP_BROWSER_TAB_ID = 'shop-page';
+export const STORE_FRONT_BROWSER_TAB_ID = 'store-front';

package/package.json

@@ -2,7 +2,7 @@
     "name": "@shoper/cli",
     "packageManager": "yarn@3.2.0",
     "sideEffects": false,
-    "version": "0.7.1-1",
+    "version": "0.8.1-10",
     "description": "CLI tool for Shoper",
     "author": "Joanna Firek",
     "license": "MIT",
@@ -79,7 +79,8 @@
         "yauzl": "3.2.0",
         "figlet": "1.9.4",
         "yazl": "3.3.1",
-        "puppeteer": "24.31.0"
+        "puppeteer": "24.31.0",
+        "gradient-string": "3.0.0"
     },
     "devDependencies": {
         "@babel/core": "7.27.1",