@swell/cli 2.3.1 → 2.3.3

package/dist/commands/app/dev.d.ts

@@ -16,7 +16,10 @@ export default class AppDev extends PushAppCommand {
     functionErrors: Map<string, string>;
     functionPorts: Map<string, number>;
     tmpDir: string;
+    frontendPort: number | null;
+    isCleaningUp: boolean;
     run(): Promise<void>;
+    private cleanupOnExit;
     runAppFrontendDevIfApplicable(frontendPort?: number): Promise<number | void>;
     private createFunctionRouter;
     private createTmpDirectory;

package/dist/commands/app/dev.js

@@ -46,6 +46,10 @@ export default class AppDev extends PushAppCommand {
     functionPorts = new Map();
     // Directory for compiled function files and wrangler context
     tmpDir = '';
+    // Port for frontend dev server (used for routing non-function requests)
+    frontendPort = null;
+    // Guard against multiple cleanup calls
+    isCleaningUp = false;
     async run() {
         const { flags } = await this.parse(AppDev);
         const { port, 'frontend-port': frontendPort } = flags;
@@ -62,6 +66,21 @@ export default class AppDev extends PushAppCommand {
         const serverPort = await this.startProxyServer(port);
         await this.startAppFunctionServer(spinner, serverPort);
         await this.runAppFrontendDevIfApplicable(frontendPort);
+        // Register cleanup handlers to clear local proxy on exit
+        process.on('SIGINT', this.cleanupOnExit.bind(this));
+        process.on('SIGTERM', this.cleanupOnExit.bind(this));
+    }
+    async cleanupOnExit() {
+        if (this.isCleaningUp)
+            return;
+        this.isCleaningUp = true;
+        try {
+            await this.updateLocalProxy(null, this.storefront?.id);
+        }
+        catch {
+            // Ignore errors during cleanup
+        }
+        // Note: proxy.ts signal handlers will call process.exit()
     }
     async runAppFrontendDevIfApplicable(frontendPort) {
         const projectType = this.getFrontendProjectType(false);
@@ -70,6 +89,8 @@ export default class AppDev extends PushAppCommand {
             this.argv.push('--app-dev');
             // add proxy-port flag (use provided port or auto-detect)
             const proxyPort = frontendPort || (await getPort({ port: portNumbers(4000, 4100) }));
+            // Store frontend port for function router to use for fallback routing
+            this.frontendPort = proxyPort;
             this.argv.push('--proxy-port', String(proxyPort));
             this.config.runCommand('app:frontend:dev', this.argv);
             return proxyPort;
@@ -111,6 +132,24 @@ export default class AppDev extends PushAppCommand {
                 });
                 req.pipe(proxyReq);
             }
+            else if (this.frontendPort) {
+                // Proxy non-function requests to frontend dev server
+                const proxyReq = http.request({
+                    hostname: 'localhost',
+                    port: this.frontendPort,
+                    path: req.url,
+                    method: req.method,
+                    headers: req.headers,
+                }, (proxyRes) => {
+                    res.writeHead(proxyRes.statusCode, proxyRes.headers);
+                    proxyRes.pipe(res);
+                });
+                proxyReq.on('error', (error) => {
+                    res.writeHead(502);
+                    res.end(`Frontend dev server error: ${error.message}`);
+                });
+                req.pipe(proxyReq);
+            }
             else {
                 res.writeHead(404);
                 const functionError = this.functionErrors.get(functionName);
@@ -258,6 +297,8 @@ ENVIRONMENT = "development"
         // Get all functions in this app
         const functions = await this.getAppFunctions();
         if (functions.length === 0) {
+            // Create routing server to proxy requests to frontend even without functions
+            await this.createFunctionRouter(serverPort);
             spinner.stop();
             return;
         }
@@ -269,7 +310,7 @@ ENVIRONMENT = "development"
         this.watchForChanges({
             onChange: this.onChangeFunctionWatcher.bind(this),
         });
-        // Create a routing server that proxies requests to function servers
+        // Create routing server after function servers are ready
         await this.createFunctionRouter(serverPort);
         spinner.succeed(`App function server running on port ${serverPort}\n`);
         this.log(`${style.appConfigName(`Functions:`)}`);

package/dist/commands/app/frontend/dev.js

@@ -26,7 +26,7 @@ export default class AppFrontendDev extends PushAppCommand {
         }),
         'app-dev': Flags.boolean({
             description: 'indicates frontend app is running in app dev mode',
-            default: true,
+            default: false,
         }),
     };
     static orientation = {
@@ -57,7 +57,11 @@ export default class AppFrontendDev extends PushAppCommand {
         if (!isAppDev) {
             this.log(`Starting app dev server...\n`);
         }
-        const serverPort = await this.startProxyServer(proxyPort || port);
+        // When running as child of `swell app dev`, don't create a new tunnel.
+        // The parent command already created the tunnel and handles routing.
+        const serverPort = isAppDev && proxyPort
+            ? proxyPort
+            : await this.startProxyServer(proxyPort || port);
         await this.execFrontendProject(serverPort, isAppDev);
     }
     async execFrontendProject(serverPort, isAppDev) {

package/dist/commands/logs.d.ts

@@ -18,7 +18,6 @@ export default class Logs extends SwellCommand {
     static summary: string;
     private output;
     run(): Promise<void>;
-    __run(): Promise<void>;
     private getLogs;
     private getLogsAndWriteToStream;
 }

package/dist/commands/logs.js

@@ -1,5 +1,4 @@
 import { Flags } from '@oclif/core';
-import ora from 'ora';
 import { LineOutput, LoggedItem, TableOutput } from '../lib/logs/index.js';
 import { SwellCommand } from '../swell-command.js';
 // the columns available to display in the table
@@ -19,6 +18,23 @@ const OUTPUT_COLUMNS = [
 const OUTPUT_COLUMNS_DEFAULTS = ['date', 'request', 'data', 'status', 'time'];
 // the interval to poll the API when following logs
 const FOLLOW_POLLING_INTERVAL = 1000 * 2; // 2 seconds
+/**
+ * Converts $in value to array
+ * @param value value to convert
+ * @param op operator
+ * @param convertToNumber true if string value should be converted to number
+ * @returns converted value
+ */
+function convertOperatorValue(value, op, convertToNumber = false) {
+    if (Array.isArray(value)) {
+        return value;
+    }
+    const converted = convertToNumber ? Number.parseInt(value, 10) : value;
+    if (op !== '$in') {
+        return converted;
+    }
+    return [converted];
+}
 /**
  * Builds the request options to send to the API based on the flags passed
  * to the command.
@@ -36,7 +52,7 @@ function buildLogRequestBody(flags) {
     // some filters are simple and can be mapped directly to the API
     const logFilters = [
         { filter: 'app_id', flag: 'app', operator: '$in' },
-        { filter: 'message.status', flag: 'status', operator: '$in' },
+        { filter: 'message.status', flag: 'status', operator: '$in', number: true },
         { filter: 'message.type', flag: 'type', operator: '$in' },
     ];
     // map the flags to the API query
@@ -44,7 +60,9 @@ function buildLogRequestBody(flags) {
         if (flags[filter.flag]) {
             andConditions.push({
                 [filter.filter]: filter.operator
-                    ? { [filter.operator]: flags[filter.flag] }
+                    ? {
+                        [filter.operator]: convertOperatorValue(flags[filter.flag], filter.operator, filter.number),
+                    }
                     : flags[filter.flag],
             });
         }
@@ -145,7 +163,7 @@ export default class Logs extends SwellCommand {
             char: 'p',
             default: false,
             description: 'note that this flag will take more space in the terminal and require more time to load',
-            summary: 'pretty print json data',
+            summary: 'pretty print json data in table output',
         }),
         search: Flags.string({
             char: 's',
@@ -163,10 +181,6 @@ export default class Logs extends SwellCommand {
     static summary = 'Output or stream store logs to the terminal.';
     output;
     async run() {
-        const spinner = ora();
-        spinner.fail('This command is temporarily disabled. Check back soon.');
-    }
-    async __run() {
         const { flags } = await this.parse(Logs);
         // indentify the columns to display
         const columns = flags.columns.split(',');
@@ -175,24 +189,30 @@ export default class Logs extends SwellCommand {
             flags.output === 'table'
                 ? new TableOutput(columns, flags.pretty)
                 : new LineOutput(columns, flags.pretty);
-        // first run for getting the logs
-        // we keep track of the last date we received so we can get logs after that
-        flags.startPolling = await this.getLogsAndWriteToStream(flags);
         // if following, poll the API every FOLLOW_POLLING_INTERVAL seconds and
         // write new logs to the stream
         if (flags.follow) {
+            // first get the latest log to use its date
+            // we keep track of the last date we received so we can get logs after that
+            const previousNumber = flags.number;
+            flags.number = 1; // get the latest log
+            flags.startPolling = await this.getLogsAndWriteToStream(flags, false);
+            flags.number = previousNumber;
             setInterval(async () => {
                 // when polling, we want to get logs after the last date we received
                 flags.startPolling = await this.getLogsAndWriteToStream(flags);
             }, FOLLOW_POLLING_INTERVAL);
         }
+        else {
+            await this.getLogsAndWriteToStream(flags);
+        }
     }
     async getLogs(flags) {
         const body = buildLogRequestBody(flags);
         const response = await this.api.post({ adminPath: `/data/$get/:logs` }, { body });
         return response?.results?.reverse() || [];
     }
-    async getLogsAndWriteToStream(flags) {
+    async getLogsAndWriteToStream(flags, show = true) {
         const logs = await this.getLogs(flags);
         let lastDate = '';
         if (!this.output) {
@@ -200,12 +220,13 @@ export default class Logs extends SwellCommand {
         }
         if (logs.length > 0) {
             lastDate = logs.at(-1).date;
-            for (const log of logs) {
-                this.output.write(this.output.prepareData(new LoggedItem(log)));
+            if (show) {
+                for (const log of logs) {
+                    this.output.write(this.output.prepareData(new LoggedItem(log)));
+                }
             }
         }
-        // if the user is following logs, we want to return the last date we
-        // received
-        return lastDate || flags.startPolling;
+        // if the user is following logs, we want to return the last date we received
+        return lastDate || flags.startPolling || new Date().toISOString();
     }
 }

package/dist/lib/apps/app-config.d.ts

@@ -89,6 +89,12 @@ export declare class AppConfigFunction extends AppConfig {
     isRootFunction(): boolean;
     preparePostData(postData: any): Promise<any>;
 }
+export declare class AppConfigComponent extends AppConfig {
+    hasValues: boolean;
+    type: ConfigType;
+    isRootComponent(): boolean;
+    preparePostData(postData: any): Promise<any>;
+}
 export declare class AppConfigAsset extends AppConfigDefault {
     hasValues: boolean;
     type: ConfigType;

package/dist/lib/apps/app-config.js

@@ -3,7 +3,7 @@ import isEmpty from 'lodash/isEmpty.js';
 import { detectFilenameMime } from 'mime-detect';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
-import { bundleFunction } from '../bundle.js';
+import { bundleFunction, bundleComponent } from '../bundle.js';
 import { AllConfigPaths, ConfigType, filePathExists, hashFile, } from './index.js';
 export class IgnoringFileError extends Error {
     constructor(message) {
@@ -117,6 +117,9 @@ export class AppConfig {
             case ConfigType.THEME: {
                 return new AppConfigTheme(attrs);
             }
+            case ConfigType.COMPONENT: {
+                return new AppConfigComponent(attrs);
+            }
             default: {
                 // the default type is file
                 const defaultConfig = new AppConfigDefault(attrs);
@@ -275,6 +278,43 @@ export class AppConfigFunction extends AppConfig {
         return postData;
     }
 }
+export class AppConfigComponent extends AppConfig {
+    hasValues = true;
+    type = ConfigType.COMPONENT;
+    isRootComponent() {
+        return (this.isRootConfig('components') &&
+            (this.filePath.endsWith('.jsx') || this.filePath.endsWith('.tsx')));
+    }
+    async preparePostData(postData) {
+        if (!this.isRootComponent()) {
+            return postData;
+        }
+        try {
+            // get file contents and if it's empty ignore
+            const fileData = this.prepareFileData();
+            if (!fileData) {
+                return;
+            }
+            const { code, config } = await bundleComponent(this.filePath);
+            if (!config) {
+                throw new IgnoringFileError('Component must export a `config` object.');
+            }
+            // Save the original file and the bundled version
+            postData.file = {
+                data: fileData,
+            };
+            postData.build_file = {
+                content_type: 'application/javascript',
+                data: code,
+            };
+            postData.values = config;
+        }
+        catch (error) {
+            throw new FunctionProcessingError(`Unable to compile component ${this.name}`, error);
+        }
+        return postData;
+    }
+}
 // Assets do not get installed but saved as plain files
 export class AppConfigAsset extends AppConfigDefault {
     hasValues = false;

package/dist/lib/apps/index.d.ts

@@ -93,6 +93,7 @@ export declare enum ConfigType {
     CONTENT = "content",
     FILE = "file",
     FRONTEND = "frontend",
+    COMPONENT = "component",
     FUNCTION = "function",
     MODEL = "model",
     NOTIFICATION = "notification",

package/dist/lib/apps/index.js

@@ -26,6 +26,7 @@ export var ConfigType;
     ConfigType["CONTENT"] = "content";
     ConfigType["FILE"] = "file";
     ConfigType["FRONTEND"] = "frontend";
+    ConfigType["COMPONENT"] = "component";
     ConfigType["FUNCTION"] = "function";
     ConfigType["MODEL"] = "model";
     ConfigType["NOTIFICATION"] = "notification";
@@ -44,6 +45,7 @@ const ConfigTypeBatchOrder = [
     ConfigType.WEBHOOK,
     ConfigType.THEME,
     ConfigType.FRONTEND,
+    ConfigType.COMPONENT,
     ConfigType.FILE,
 ];
 // All available configs
@@ -51,6 +53,7 @@ const AllConfigTypes = [
     'ASSET',
     'CONTENT',
     'FRONTEND',
+    'COMPONENT',
     'FUNCTION',
     'MODEL',
     'NOTIFICATION',

package/dist/lib/bundle.d.ts

@@ -1 +1,2 @@
 export declare function bundleFunction(filePath: string): Promise<any>;
+export declare function bundleComponent(filePath: string): Promise<any>;

package/dist/lib/bundle.js

@@ -36,6 +36,45 @@ export async function bundleFunction(filePath) {
         throw new Error(`Unable to compile function ${filePath}: ${error.message}`);
     }
 }
+export async function bundleComponent(filePath) {
+    try {
+        const content = fs.readFileSync(filePath, 'utf8');
+        const stdinLoader = filePath.endsWith('.tsx') ? 'tsx' : 'jsx';
+        const buildResult = await esbuild.build({
+            stdin: {
+                contents: `
+          ${content}
+          import { render, h } from "preact";
+          export const preact = { render, h };
+        `,
+                loader: stdinLoader,
+                resolveDir: path.dirname(filePath),
+            },
+            bundle: true,
+            minify: true,
+            platform: 'browser',
+            format: 'iife',
+            globalName: 'Component',
+            loader: {
+                '.ts': 'ts',
+                '.jsx': 'jsx',
+                '.tsx': 'tsx',
+            },
+            jsxFactory: 'h',
+            jsxFragment: 'Fragment',
+            write: false,
+            logLevel: 'silent',
+        });
+        const { outputFiles: [{ text: code }], } = buildResult;
+        // eslint-disable-next-line no-new-func
+        const evalFn = new Function(`${code}\nreturn { ...Component }`);
+        const { config } = evalFn();
+        return { code, config };
+    }
+    catch (error) {
+        throw new Error(`Unable to compile component ${filePath}: ${error.message}`);
+    }
+}
 function getSwellFunctionWrapper() {
     const __filename = fileURLToPath(import.meta.url);
     const __dirname = path.dirname(__filename);

package/dist/lib/logs/table-output.js

@@ -79,7 +79,7 @@ export class TableOutput extends Output {
                 width: 6,
             },
         };
-        return columns[column];
+        return columns[column] || { width: 6 };
     }
     prepareColumnDisplay(column, extraWidth) {
         const display = this.displayOptions(column);

package/dist/push-app-command.d.ts

@@ -80,7 +80,7 @@ export declare abstract class PushAppCommand extends RemoteAppCommand {
     setWatchingFiles(): Promise<void>;
     startProxyServer(port?: number): Promise<number>;
     updateFrontendDeployment(currentStore: string, projectType: FrontendProjectType, deploymentUrl: string, deploymentHash: string): Promise<void>;
-    updateLocalProxy(proxyUrl: string, storefrontId?: string): Promise<void>;
+    updateLocalProxy(proxyUrl: string | null, storefrontId?: string): Promise<void>;
     watchForChanges({ logChanges, onChange, syncAll, }?: {
         logChanges?: boolean;
         onChange?: (appConfig?: AppConfig, result?: any) => void;

package/dist/push-app-command.js

@@ -792,14 +792,14 @@ export class PushAppCommand extends RemoteAppCommand {
         let deploymentUrl;
         let interactiveError = false;
         let pagesProjectError = false;
+        let outputBuffer = '';
         this.log(`\nDeploying to Cloudflare...\n`);
         try {
             await this.execFrontend(`npx wrangler deploy`, (string) => {
-                // Dependent on wrangler output
-                // Parse the deployment URL from the wrangler output.
-                const match = string.match(/^\s*(https:\/\/\S+\.workers\.dev)\s*[\S\s]*?Current Version ID: [\w-]+/m);
-                if (match && match.length > 0) {
-                    deploymentUrl = match[1];
+                // Accumulate output for URL parsing after command completes
+                outputBuffer += string;
+                // Suppress workers.dev URL from output (users should use swell domain)
+                if (string.match(/^\s*https:\/\/\S+\.workers\.dev\s*$/m)) {
                     return false;
                 }
                 // Check for Pages project error
@@ -834,6 +834,12 @@ export class PushAppCommand extends RemoteAppCommand {
                 throw error;
             }
         }
+        // Parse deployment URL from accumulated output
+        // Match the workers.dev URL that appears on its own line after "Deployed ... triggers"
+        const urlMatch = outputBuffer.match(/^\s*(https:\/\/\S+\.workers\.dev)\s*$/m);
+        if (urlMatch && urlMatch[1]) {
+            deploymentUrl = urlMatch[1];
+        }
         if (!deploymentUrl) {
             this.error('Unable to retrieve deployment URL.');
         }

package/oclif.manifest.json

@@ -190,7 +190,7 @@
           "char": "p",
           "description": "note that this flag will take more space in the terminal and require more time to load",
           "name": "pretty",
-          "summary": "pretty print json data",
+          "summary": "pretty print json data in table output",
           "allowNo": false,
           "type": "boolean"
         },
@@ -999,7 +999,7 @@
           "name": "targetPath"
         }
       },
-      "description": "Pull all app files, a specific file, or a specific configuration\ntype from an app in your store's test environment to your local machine.\n\nIf APPID is not specified, you will be prompted with a list of apps to choose from.\n\nApp file directories:\nassets/\ncontent/\nfrontend/\nfunctions/\nmodels/\nnotifications/\nsettings/\ntheme/\nwebhooks/\nfrontend/",
+      "description": "Pull all app files, a specific file, or a specific configuration\ntype from an app in your store's test environment to your local machine.\n\nIf APPID is not specified, you will be prompted with a list of apps to choose from.\n\nApp file directories:\nassets/\ncontent/\nfrontend/\ncomponents/\nfunctions/\nmodels/\nnotifications/\nsettings/\ntheme/\nwebhooks/\nfrontend/",
       "examples": [
         "swell app pull",
         "swell app pull example_app",
@@ -1048,7 +1048,7 @@
           "name": "file"
         }
       },
-      "description": "Push all app files, a specific file, or a specific configuration\ntype to an app in your store's test environment.\n\nIf the app does not exist, it will be created and its global ID saved to a .swellrc file.\n\n- If no file is specified, all configuration files will be pushed to the store.\n  This includes the app icon (assets/icon.png) and swell.json.\n- If a file is specified, only that file will be pushed to the store.\n- If a directory is specified, only files in that directory will be pushed.\n\nApp file directories:\nassets/\ncontent/\nfrontend/\nfunctions/\nmodels/\nnotifications/\nsettings/\ntheme/\nwebhooks/",
+      "description": "Push all app files, a specific file, or a specific configuration\ntype to an app in your store's test environment.\n\nIf the app does not exist, it will be created and its global ID saved to a .swellrc file.\n\n- If no file is specified, all configuration files will be pushed to the store.\n  This includes the app icon (assets/icon.png) and swell.json.\n- If a file is specified, only that file will be pushed to the store.\n- If a directory is specified, only files in that directory will be pushed.\n\nApp file directories:\nassets/\ncontent/\nfrontend/\ncomponents/\nfunctions/\nmodels/\nnotifications/\nsettings/\ntheme/\nwebhooks/",
       "examples": [
         "swell app push",
         "swell app push content",
@@ -2875,5 +2875,5 @@
       ]
     }
   },
-  "version": "2.3.1"
+  "version": "2.3.3"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swell/cli",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "type": "module",
   "description": "Swell's command line interface/utility",
   "keywords": [