@swell/cli 2.0.1-alpha.9 → 2.0.2

package/dist/commands/theme/dev.js

@@ -0,0 +1,164 @@
+import { Flags } from '@oclif/core';
+import BrowserSync from 'browser-sync';
+import { findUp } from 'find-up';
+import getPort, { portNumbers } from 'get-port';
+import { execSync, spawn } from 'node:child_process';
+import fs from 'node:fs';
+import ora from 'ora';
+import { default as localConfig } from '../../lib/config.js';
+import style from '../../lib/style.js';
+import { PushAppCommand } from '../../push-app-command.js';
+const FALLBACK_PORT = 3000;
+export default class AppThemeDev extends PushAppCommand {
+    static examples = [
+        'swell theme dev',
+        'swell theme dev --local',
+        'swell theme dev --bundle',
+        'swell theme dev --storefront-select',
+        'swell theme dev --storefront-id <id>',
+    ];
+    static flags = {
+        bundle: Flags.boolean({
+            description: 'bundle assets',
+        }),
+        local: Flags.boolean({
+            description: 'connect to a running local storefront app dev server',
+        }),
+        'no-push': Flags.boolean({
+            description: 'skip pushing theme files initially',
+        }),
+        'storefront-id': Flags.string({
+            description: 'identify a storefront to preview and push theme files to',
+        }),
+        'storefront-select': Flags.boolean({
+            default: false,
+            description: 'prompt to select a storefront to preview and push theme files to',
+        }),
+    };
+    static orientation = {
+        env: 'test',
+    };
+    static summary = `Run a theme in dev mode from your local machine.`;
+    appType = 'theme';
+    logAppLocalUrl(storeId, sessionId) {
+        this.log(`View it at ${style.link(this.localFrontendUrl(storeId, sessionId))}\n`);
+    }
+    async run() {
+        const { flags } = await this.parse(AppThemeDev);
+        const { local } = flags;
+        const noPush = flags['no-push'];
+        if (!(await this.ensureAppExists(undefined, false))) {
+            return;
+        }
+        if (!noPush) {
+            await this.pushAppConfigs();
+        }
+        await this.getStorefrontToPush(flags);
+        this.logStorefrontConnected();
+        this.saveCurrentStorefront();
+        await this.startThemeDevServer(local);
+    }
+    async findAndInstallDependencies() {
+        const spinner = ora('Locating package.json...').start();
+        try {
+            const packageJsonLockPath = await findUp('package-lock.json', {
+                type: 'file',
+            });
+            if (packageJsonLockPath) {
+                spinner.succeed('package-lock.json found. Skipping npm install.');
+                return null;
+            }
+            const packageJsonPath = await findUp('package.json', { type: 'file' });
+            if (!packageJsonPath) {
+                spinner.info('package.json not found. Skipping bundle process.');
+                return null;
+            }
+            spinner.succeed(`Found package.json at ${packageJsonPath}`);
+            spinner.start('Installing dependencies...');
+            execSync('npm install', { stdio: 'inherit' });
+            spinner.succeed('Dependencies installed');
+            return packageJsonPath;
+        }
+        catch {
+            spinner.fail('Error locating package.json. Skipping bundle process.');
+            return null;
+        }
+    }
+    async findAndTryScriptCommands() {
+        try {
+            const data = await fs.promises.readFile('package.json', 'utf8');
+            const packageJson = JSON.parse(data);
+            if (!packageJson.scripts) {
+                console.error('No scripts found in package.json. Try adding scripts to your package file.');
+                return;
+            }
+            const preferredScripts = ['dev', 'watch'];
+            const scriptName = preferredScripts.find((script) => packageJson.scripts[script]);
+            if (!scriptName) {
+                console.warn('Neither "dev" nor "watch" scripts found in package.json');
+                return;
+            }
+            const childProcess = spawn('npm', ['run', scriptName], {
+                env: { ...process.env, BROWSERSLIST_IGNORE_OLD_DATA: 'true' },
+                shell: true,
+                stdio: 'pipe',
+            });
+            childProcess.stdout.on('data', (data) => {
+                const lines = data.toString().split(/\r?\n/);
+                for (const line of lines) {
+                    const trimmedLine = line.trim();
+                    if (trimmedLine) {
+                        console.log(`${style.success('📦')} ${trimmedLine}`);
+                    }
+                }
+            });
+            childProcess.on('exit', (code) => {
+                if (code === 0) {
+                    console.log(`${scriptName} completed successfully.`);
+                }
+                else {
+                    console.error(`${scriptName} exited with code ${code}.`);
+                }
+            });
+        }
+        catch (error) {
+            console.error('Error processing package.json:', error);
+        }
+    }
+    async startThemeDevServer(local) {
+        const currentStore = localConfig.getDefaultStore();
+        const sessionId = localConfig.getSessionId(currentStore);
+        const spinner = ora();
+        const bundle = process.argv.includes('--bundle');
+        if (bundle) {
+            await this.findAndInstallDependencies();
+            await this.findAndTryScriptCommands();
+        }
+        // Find an open port starting at 3000
+        const freePort = (await getPort({ port: portNumbers(3000, 3100) })) || FALLBACK_PORT;
+        spinner.start(`Starting theme dev server on port ${freePort}...`);
+        const storefrontUrl = local
+            ? this.localFrontendUrl(currentStore, sessionId)
+            : this.storefrontFrontendUrl(currentStore, this.storefront, undefined, true);
+        const bs = BrowserSync.create();
+        bs.init({
+            logLevel: 'silent',
+            notify: false,
+            open: false,
+            proxy: {
+                proxyReq: [
+                    (proxyReq) => {
+                        proxyReq.setHeader('swell-request-id', `${currentStore}_${Date.now()}`);
+                    },
+                ],
+                target: storefrontUrl,
+            },
+            ui: false,
+        });
+        await this.watchForChanges({
+            onChange: () => bs.reload(),
+        });
+        spinner.stop();
+        this.log(`Watching for changes. View your theme at ${style.link(`http://localhost:${freePort}`)}\n`);
+    }
+}

package/dist/commands/theme/init.d.ts

@@ -0,0 +1,9 @@
+import InitApp from '../app/init.js';
+export default class InitTheme extends InitApp {
+    static description: string;
+    static examples: {
+        command: string;
+        description: string;
+    }[];
+    appType: string;
+}

package/dist/commands/theme/init.js

@@ -0,0 +1,15 @@
+import InitApp from '../app/init.js';
+export default class InitTheme extends InitApp {
+    static description = 'Initialize theme swell.json in the current directory.';
+    static examples = [
+        {
+            command: 'swell theme init',
+            description: 'Initialize theme following command prompts.',
+        },
+        {
+            command: 'swell theme init -y',
+            description: 'Initialize theme and accept all default values.',
+        },
+    ];
+    appType = 'theme';
+}

package/dist/commands/theme/pull.d.ts

@@ -0,0 +1,20 @@
+import AppPull from '../app/pull.js';
+export default class AppThemePull extends AppPull {
+    static args: {
+        appId: import("@oclif/core/lib/interfaces/parser.js").Arg<string, Record<string, unknown>>;
+        targetPath: import("@oclif/core/lib/interfaces/parser.js").Arg<string, Record<string, unknown>>;
+    };
+    static delayOrientation: boolean;
+    static description: string;
+    static examples: string[];
+    static flags: {
+        force: import("@oclif/core/lib/interfaces/parser.js").BooleanFlag<boolean>;
+        'storefront-id': import("@oclif/core/lib/interfaces/parser.js").OptionFlag<string | undefined, import("@oclif/core/lib/interfaces/parser.js").CustomOptions>;
+        'storefront-select': import("@oclif/core/lib/interfaces/parser.js").BooleanFlag<boolean>;
+        'sync-app': import("@oclif/core/lib/interfaces/parser.js").BooleanFlag<boolean>;
+    };
+    static orientation: {};
+    static summary: string;
+    appType: string;
+    run(): Promise<void>;
+}

package/dist/commands/theme/pull.js

@@ -0,0 +1,65 @@
+import { Args, Flags } from '@oclif/core';
+import { ThemeConfigPaths } from '../../lib/apps/index.js';
+import style from '../../lib/style.js';
+import AppPull from '../app/pull.js';
+export default class AppThemePull extends AppPull {
+    static args = {
+        appId: Args.string({
+            default: '',
+            description: 'theme app id to pull',
+        }),
+        targetPath: Args.string({
+            default: '',
+            description: 'path to download theme files into',
+        }),
+    };
+    static delayOrientation = true;
+    static description = `Pull all theme files, a specific file, or a specific configuration
+type from a theme in your store's test environment to your local machine.
+
+If APPID is not specified, you will be prompted with a list of themes to choose from.
+
+Theme file directories:
+${Object.values(ThemeConfigPaths)
+        .map((dir) => style.path(`${dir}/`))
+        .join('\n')}`;
+    static examples = [
+        'swell theme pull',
+        'swell theme pull mytheme',
+        'swell theme pull mytheme mytheme-folder',
+        'swell theme pull --force',
+        'swell theme pull --storefront-select',
+        'swell theme pull --storefront-id <id>',
+    ];
+    static flags = {
+        force: Flags.boolean({
+            default: false,
+            description: 'force pull all theme files',
+        }),
+        'storefront-id': Flags.string({
+            description: 'identify a storefront to pull theme files from',
+        }),
+        'storefront-select': Flags.boolean({
+            default: false,
+            description: 'prompt to select a storefront to pull theme files to',
+        }),
+        'sync-app': Flags.boolean({
+            default: false,
+            description: 'pull app files in addition to theme files to',
+        }),
+    };
+    static orientation = {};
+    static summary = 'Pull theme files from Swell to your local machine.';
+    appType = 'theme';
+    async run() {
+        const { args, flags } = await this.parse(AppThemePull);
+        const { force } = flags;
+        this.themeSyncApp = flags['sync-app'];
+        await this.ensureLoggedIn();
+        await this.getStorefrontToPull(args, flags);
+        await this.logOrientation();
+        const { pulled, removed } = await this.pullAppConfigs(force);
+        this.logPulledChanges(pulled, removed);
+        this.saveCurrentStorefront();
+    }
+}

package/dist/commands/theme/push.d.ts

@@ -0,0 +1,19 @@
+import AppPush from '../app/push.js';
+export default class AppThemePush extends AppPush {
+    static args: {
+        file: import("@oclif/core/lib/interfaces/parser.js").Arg<string | undefined, Record<string, unknown>>;
+    };
+    static delayOrientation: boolean;
+    static description: string;
+    static examples: string[];
+    static flags: {
+        force: import("@oclif/core/lib/interfaces/parser.js").BooleanFlag<boolean>;
+        'storefront-id': import("@oclif/core/lib/interfaces/parser.js").OptionFlag<string | undefined, import("@oclif/core/lib/interfaces/parser.js").CustomOptions>;
+        'storefront-select': import("@oclif/core/lib/interfaces/parser.js").BooleanFlag<boolean>;
+        'sync-app': import("@oclif/core/lib/interfaces/parser.js").BooleanFlag<boolean>;
+    };
+    static orientation: {};
+    static summary: string;
+    appType: string;
+    run(): Promise<void>;
+}

package/dist/commands/theme/push.js

@@ -0,0 +1,89 @@
+import { Args, Flags } from '@oclif/core';
+import { ThemeConfigPaths, filePathExists, isPathDirectory, } from '../../lib/apps/index.js';
+import style from '../../lib/style.js';
+import AppPush from '../app/push.js';
+export default class AppThemePush extends AppPush {
+    static args = {
+        file: Args.string({
+            char: 'f',
+            description: 'relative path to a configuration file or directory to push',
+        }),
+    };
+    static delayOrientation = true;
+    static description = `Push all theme files, a specific file, or a specific configuration
+type to an theme in your store's test environment.
+
+If the theme does not exist, it will be created and its global ID saved to a .swellrc file.
+
+- If no file is specified, all configuration files will be pushed to the store.
+  This includes the theme icon (assets/icon.png) and swell.json.
+- If a file is specified, only that file will be pushed to the store.
+- If a directory is specified, only files in that directory will be pushed.
+
+Theme file directories:
+${Object.values(ThemeConfigPaths)
+        .map((dir) => style.path(`${dir}/`))
+        .join('\n')}`;
+    static examples = [
+        'swell theme push',
+        'swell theme push assets',
+        'swell theme push theme/sections',
+        'swell theme push --sync-app',
+        'swell theme push --force',
+        'swell theme push --storefront-select',
+        'swell theme push --storefront-id <id>',
+    ];
+    static flags = {
+        force: Flags.boolean({
+            default: false,
+            description: 'force push all files',
+        }),
+        'storefront-id': Flags.string({
+            description: 'identify a storefront to push theme files to',
+        }),
+        'storefront-select': Flags.boolean({
+            default: false,
+            description: 'prompt to select a storefront to push theme files to',
+        }),
+        'sync-app': Flags.boolean({
+            default: false,
+            description: 'push app files in addition to theme files',
+        }),
+    };
+    static orientation = {};
+    static summary = 'Push local files to your Swell theme.';
+    appType = 'theme';
+    async run() {
+        const { args, flags } = await this.parse(AppThemePush);
+        const { file } = args;
+        const { force } = flags;
+        this.themeSyncApp = flags['sync-app'];
+        if (!(await this.ensureAppExists(file, this.themeSyncApp))) {
+            return;
+        }
+        if (!this.themeSyncApp && this.appCreated) {
+            this.themeSyncApp = true;
+        }
+        await this.getStorefrontToPush(flags);
+        await this.logOrientation();
+        if (file) {
+            const { filePath, relativePath } = this.resolvePushPaths(file);
+            // Push individual files if not referring to the whole app path
+            if (filePath !== this.appPath) {
+                if (!filePathExists(filePath)) {
+                    this.error(`Path ${style.path(file)} does not exist.`);
+                }
+                // Targeting a directory
+                await (isPathDirectory(filePath)
+                    ? this.pushFilePath(relativePath, force)
+                    : this.pushFile(relativePath));
+                this.log();
+                this.logStorefrontFrontendUrl(this.storefront);
+                return;
+            }
+        }
+        await this.pushAppConfigs(force);
+        this.logStorefrontFrontendUrl(this.storefront);
+        this.saveCurrentStorefront();
+    }
+}

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

@@ -0,0 +1,20 @@
+import { SwellCommand } from './swell-command.js';
+export declare abstract class CreateAppCommand extends SwellCommand {
+    static baseFlags: {
+        frontend: import("@oclif/core/lib/interfaces/parser.js").OptionFlag<string | undefined, import("@oclif/core/lib/interfaces/parser.js").CustomOptions>;
+        'storefront-app': import("@oclif/core/lib/interfaces/parser.js").OptionFlag<string | undefined, import("@oclif/core/lib/interfaces/parser.js").CustomOptions>;
+        yes: import("@oclif/core/lib/interfaces/parser.js").BooleanFlag<boolean>;
+    };
+    private devApi;
+    constructor(argv: string[], config: any);
+    createAppConfigFolders(swellConfig: any): Promise<void>;
+    createFrontendApp(swellConfig: any, flags: any, directCreate?: boolean, kind?: string): Promise<boolean>;
+    createStorefrontApp(swellConfig: any, flags: any, directCreate?: boolean): Promise<boolean>;
+    createThemeApp(config: any, flags: any, installedStorefrontApp: any): Promise<boolean>;
+    doesPackageManagerExist(packageManager: string): Promise<boolean>;
+    execWithStdio(cwd: string, command: string, onOutput?: (string: string) => any | false): Promise<void>;
+    findPackageManager(pkg?: string): Promise<string | undefined>;
+    getInstalledStorefrontApps(): Promise<any[] | boolean>;
+    setupPackage(name: string, config: any, pkg: string): Promise<void>;
+    tryPackageSetup(name: string, config: any, pkg: string): Promise<void>;
+}

package/dist/create-app-command.js

@@ -0,0 +1,253 @@
+import { confirm, select } from '@inquirer/prompts';
+import { Flags } from '@oclif/core';
+import { $ } from 'execa';
+import { exec } from 'node:child_process';
+import path from 'node:path';
+import Stream from 'node:stream';
+import { promisify } from 'node:util';
+import ora from 'ora';
+import Api from './lib/api.js';
+import { FrontendProjectTypes, getAllConfigPaths, writeFile, writeJsonFile, } from './lib/apps/index.js';
+import style from './lib/style.js';
+import { SwellCommand } from './swell-command.js';
+const execAsync = promisify(exec);
+export class CreateAppCommand extends SwellCommand {
+    static baseFlags = {
+        frontend: Flags.string({
+            description: `create a starter framework for a hosted frontend`,
+            options: FrontendProjectTypes.map(({ slug }) => slug),
+        }),
+        'storefront-app': Flags.string({
+            description: `id of an installed storefront app to create a theme for, if applicable`,
+        }),
+        yes: Flags.boolean({
+            char: 'y',
+            description: `accept all default values`,
+        }),
+    };
+    devApi;
+    constructor(argv, config) {
+        super(argv, config);
+        this.devApi = new Api(undefined, 'test');
+    }
+    async createAppConfigFolders(swellConfig) {
+        for (const type of getAllConfigPaths(swellConfig.get('type'))) {
+            // Create a config folder
+            // eslint-disable-next-line no-await-in-loop
+            await execAsync(`mkdir -p ${type}`, {
+                cwd: path.dirname(swellConfig.path),
+            });
+        }
+    }
+    async createFrontendApp(swellConfig, flags, directCreate, kind) {
+        const spinner = ora();
+        const configPath = path.dirname(swellConfig.path);
+        const frameworkType = flags.frontend ||
+            (await select({
+                choices: [
+                    ...FrontendProjectTypes.map(({ name, slug }) => ({
+                        name,
+                        value: slug,
+                    })),
+                    ...(directCreate
+                        ? []
+                        : [
+                            {
+                                name: 'Do not install a starter framework',
+                                value: null,
+                            },
+                        ]),
+                ],
+                message: directCreate
+                    ? `Choose a framework for your hosted${kind ? ` ${kind} ` : ' '}app frontend`
+                    : `Install a framework for your hosted${kind ? ` ${kind} ` : ' '}app frontend?`,
+            }));
+        if (frameworkType) {
+            const projectType = FrontendProjectTypes.find((type) => type.slug === frameworkType);
+            if (!projectType) {
+                this.error(`Could not find project type: ${frameworkType}`);
+            }
+            this.log();
+            spinner.start(`Creating ${projectType?.name} frontend app (this may take a while)...`);
+            try {
+                await execAsync(`mkdir -p frontend`, {
+                    cwd: configPath,
+                });
+                await execAsync(projectType.installCommand, {
+                    cwd: configPath,
+                });
+                // Use this command to debug output, i.e.e when command becomes non-responsive
+                /* await this.execWithStdio(
+                  configPath,
+                  projectType.installCommand,
+                ); */
+            }
+            catch (error) {
+                spinner.fail(`Error creating ${projectType?.name} app:\n`);
+                this.log(error.stdout);
+                this.log();
+                return false;
+            }
+            spinner.succeed(`${projectType?.name} initialized app in ${configPath}/frontend/`);
+            if (directCreate) {
+                this.log();
+            }
+            return true;
+        }
+        return false;
+    }
+    async createStorefrontApp(swellConfig, flags, directCreate) {
+        return this.createFrontendApp(swellConfig, flags, directCreate, 'storefront');
+    }
+    async createThemeApp(config, flags, installedStorefrontApp) {
+        const spinner = ora();
+        const configPath = path.dirname(config.path);
+        const defaultThemeConfigs = await this.devApi.get({
+            adminPath: `/client/apps/${installedStorefrontApp.app_id}/theme-template-configs`,
+        });
+        if (defaultThemeConfigs.results?.length > 0) {
+            const { name: appName, version: appVersion } = installedStorefrontApp.app;
+            const shouldCreate = flags.yes ||
+                (await confirm({
+                    message: `Create a theme template for ${style.appConfigValue(appName)} ${appVersion ? `v${appVersion}` : ''}?`,
+                }));
+            if (shouldCreate) {
+                this.log();
+                spinner.start(`Creating theme template...`);
+                try {
+                    await execAsync(`mkdir -p theme`, {
+                        cwd: configPath,
+                    });
+                    for (const themeConfig of defaultThemeConfigs.results) {
+                        const filePath = themeConfig.file_path.replace(/^frontend\/theme-template\//, '');
+                        const fileContent = themeConfig.file_data;
+                        const isJson = filePath.endsWith('.json');
+                        // eslint-disable-next-line no-await-in-loop
+                        await execAsync(`mkdir -p ${path.dirname(filePath)}`, {
+                            cwd: configPath,
+                        });
+                        // eslint-disable-next-line no-await-in-loop
+                        await (isJson
+                            ? writeJsonFile(path.join(configPath, filePath), fileContent)
+                            : writeFile(path.join(configPath, filePath), fileContent));
+                    }
+                }
+                catch (error) {
+                    spinner.fail(`Error creating theme template:\n`);
+                    this.log(error.stdout);
+                    this.log();
+                    return false;
+                }
+                spinner.succeed(`Theme template initialized in ${configPath}/theme/`);
+            }
+        }
+        return true;
+    }
+    async doesPackageManagerExist(packageManager) {
+        try {
+            await execAsync(`${packageManager} --version`);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    async execWithStdio(cwd, command, onOutput) {
+        const $$ = $({
+            cwd,
+            shell: true,
+            stderr: 'inherit',
+            stdin: 'inherit',
+            stdout: 'pipe',
+        });
+        const outStream = new Stream.Writable();
+        outStream._write = (chunk, _encoding, next) => {
+            const string = chunk.toString();
+            const out = onOutput?.(string);
+            if (out !== false) {
+                console.log(string);
+            }
+            next();
+        };
+        try {
+            await $$ `${command}`.pipeStdout?.(outStream);
+        }
+        catch (error) {
+            console.log(error);
+        }
+    }
+    async findPackageManager(pkg = '') {
+        const packageManager = pkg;
+        // Determine if system has yarn or npm install
+        if (packageManager) {
+            if (await this.doesPackageManagerExist(packageManager)) {
+                return packageManager;
+            }
+        }
+        else {
+            if (await this.doesPackageManagerExist('npm')) {
+                return 'npm';
+            }
+            if (await this.doesPackageManagerExist('yarn')) {
+                return 'yarn';
+            }
+        }
+    }
+    async getInstalledStorefrontApps() {
+        const spinner = ora();
+        spinner.start('Retrieving installed storefront apps...');
+        const installedApps = await this.devApi.get({
+            adminPath: `/client/apps`,
+        });
+        const storefrontInstalledApps = installedApps.results.filter((installedApp) => installedApp.app?.type === 'storefront');
+        if (storefrontInstalledApps.length === 0) {
+            spinner.fail(`You must have at least one storefront app installed in your ${style.appEnv('test')} environment before creating a theme.`);
+            return false;
+        }
+        spinner.stop();
+        return storefrontInstalledApps;
+    }
+    async setupPackage(name, config, pkg) {
+        const execAsync = promisify(exec);
+        const configPath = path.dirname(config.path);
+        const packageJson = {
+            description: config.get('description'),
+            devDependencies: {
+                '@swell/app-types': '^1.0.5',
+            },
+            name,
+            scripts: {},
+            version: config.get('version'),
+        };
+        const tsConfig = {
+            compilerOptions: {
+                lib: ['esnext', 'webworker'],
+                module: 'esnext',
+                target: 'esnext',
+                types: ['@swell/app-types'],
+            },
+            exclude: ['node_modules'],
+            include: ['**/*.ts'],
+        };
+        await writeJsonFile(path.join(configPath, 'package.json'), packageJson);
+        await writeJsonFile(path.join(configPath, 'tsconfig.json'), tsConfig);
+        await writeFile(path.join(configPath, '.gitignore'), `node_modules`);
+        try {
+            const packageManager = await this.findPackageManager(pkg);
+            await execAsync(`${packageManager} install`, {
+                cwd: configPath,
+            });
+        }
+        catch (error) {
+            this.error(error.message);
+        }
+    }
+    async tryPackageSetup(name, config, pkg) {
+        try {
+            await this.setupPackage(name, config, pkg);
+        }
+        catch (error) {
+            this.log(`There was an error setting up the package manager: ${error.message}`);
+        }
+    }
+}