Faster startup (1/4): Lazy command loading

[gonzaloriestra]

WHY are these changes introduced?

The CLI requires too much time to start working, it feels slow

WHAT is this pull request doing?

Splits the monolithic index.ts (which eagerly imports all 106 commands and their dependency trees) into a lightweight bootstrap.ts entry point and a lazy command-registry.ts. Commands are loaded on-demand via a LazyCommandLoader passed to ShopifyConfig.runCommand().

• Separate bootstrap from index.ts: bootstrap.ts sets up global proxy, signal handlers, and calls runCLI — it does NOT import any command modules
• Lazy command registry: command-registry.ts maps command IDs to dynamic import() expressions, so only the invoked command's module is loaded
• Individual hook files: hooks are moved to separate files so oclif loads them independently instead of through index.ts
• Token-utils extraction: break circular import chains by extracting token-utils.ts from TokenizedText.tsx
• Package exports for hooks: @shopify/app exports hooks via subpath entries so they can be imported individually

Startup time: 1840ms → 710ms (61% faster)

How to test your changes?

• shopify version / shopify help return correct output
• shopify app dev and other commands work normally
• All tests pass

Measuring impact

• n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix

Checklist

• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've considered possible documentation changes

[gonzaloriestra]

/snapit

[gonzaloriestra]

• Faster startup (1/4): Lazy command loading #7010 : 2 dependent PRs (#7015 , #7052 ) 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	76.72%	14625/19062
🟡	Branches	70.38%	7260/10316
🟡	Functions	75.74%	3713/4902
🟡	Lines	78.2%	13825/17678

Test suite run success

3806 tests passing in 1462 suites.

Report generated by 🧪jest coverage report action from 0b00a10

[gonzaloriestra]

/snapit

[github-actions]

🫰✨ Thanks @gonzaloriestra! Your snapshot has been published to npm.

Test the snapshot by installing your package globally:

npm i -g --@shopify:registry=https://registry.npmjs.org @shopify/cli@0.0.0-snapshot-20260313155002

Caution

After installing, validate the version by running shopify version in your terminal.
If the versions don't match, you might have multiple global instances installed.
Use which shopify to find out which one you are running and uninstall it.

[github-actions]

Differences in type declarations

We detected differences in the type declarations generated by Typescript for this branch compared to the baseline ('main' branch). Please, review them to ensure they are backward-compatible. Here are some important things to keep in mind:

• Some seemingly private modules might be re-exported through public modules.
• If the branch is behind main you might see odd diffs, rebase main into this branch.

New type declarations

packages/cli-kit/dist/private/node/ui/components/token-utils.d.ts

/**
 * Lightweight token types and string utilities.
 * This module does NOT import React or Ink — it can be loaded cheaply.
 * The React component (TokenizedText) remains in TokenizedText.tsx and re-exports from here.
 */
export interface LinkToken {
    link: {
        label?: string;
        url: string;
    };
}
export interface UserInputToken {
    userInput: string;
}
export interface ListToken {
    list: {
        title?: TokenItem<InlineToken>;
        items: TokenItem<InlineToken>[];
        ordered?: boolean;
    };
}
export interface BoldToken {
    bold: string;
}
export type Token = string | {
    command: string;
} | LinkToken | {
    char: string;
} | UserInputToken | {
    subdued: string;
} | {
    filePath: string;
} | ListToken | BoldToken | {
    info: string;
} | {
    warn: string;
} | {
    error: string;
};
export type InlineToken = Exclude<Token, ListToken>;
export type TokenItem<T extends Token = Token> = T | T[];
export declare function tokenItemToString(token: TokenItem): string;
export declare function appendToTokenItem(token: TokenItem, suffix: string): TokenItem;

Existing type declarations

packages/cli-kit/dist/public/common/string.d.ts

@@ -1,4 +1,4 @@
-import { Token, TokenItem } from '../../private/node/ui/components/TokenizedText.js';
+import { Token, TokenItem } from '../../private/node/ui/components/token-utils.js';
 export type RandomNameFamily = 'business' | 'creative';
 /**
  * Generates a random name by combining an adjective and noun.

packages/cli-kit/dist/public/node/base-command.d.ts

@@ -1,5 +1,5 @@
 import { Command } from '@oclif/core';
-import { OutputFlags, Input, ParserOutput, FlagInput, OutputArgs } from '@oclif/core/parser';
+import type { OutputFlags, Input, ParserOutput, FlagInput, OutputArgs } from '@oclif/core/parser';
 export type ArgOutput = OutputArgs<any>;
 export type FlagOutput = OutputFlags<any>;
 declare abstract class BaseCommand extends Command {

packages/cli-kit/dist/public/node/cli-launcher.d.ts

@@ -1,12 +1,16 @@
+import type { LazyCommandLoader } from './custom-oclif-loader.js';
 interface Options {
     moduleURL: string;
     argv?: string[];
+    lazyCommandLoader?: LazyCommandLoader;
 }
 /**
  * Launches the CLI through our custom OCLIF loader.
+ * Uses a lightweight dispatcher that avoids loading oclif's help module
+ * unless help is actually requested. This saves ~50ms for non-help commands.
  *
- * @param options - Options.
- * @returns A promise that resolves when the CLI has been launched.
+ * @param options - Launch options including moduleURL and optional lazy command loader.
+ * @returns A promise that resolves when the CLI has completed.
  */
 export declare function launchCLI(options: Options): Promise<void>;
 export {};
\ No newline at end of file

packages/cli-kit/dist/public/node/cli.d.ts

@@ -1,3 +1,4 @@
+import type { LazyCommandLoader } from './custom-oclif-loader.js';
 /**
  * IMPORTANT NOTE: Imports in this module are dynamic to ensure that "setupEnvironmentVariables" can dynamically
  * set the DEBUG environment variable before the 'debug' package sets up its configuration when modules
@@ -7,6 +8,8 @@ interface RunCLIOptions {
     /** The value of import.meta.url of the CLI executable module */
     moduleURL: string;
     development: boolean;
+    /** Optional lazy command loader for on-demand command loading */
+    lazyCommandLoader?: LazyCommandLoader;
 }
 /**
  * A function that abstracts away setting up the environment and running
@@ -17,6 +20,7 @@ export declare function runCLI(options: RunCLIOptions & {
     runInCreateMode?: boolean;
 }, launchCLI?: (options: {
     moduleURL: string;
+    lazyCommandLoader?: LazyCommandLoader;
 }) => Promise<void>, argv?: string[], env?: NodeJS.ProcessEnv, versions?: NodeJS.ProcessVersions): Promise<void>;
 /**
  * A function for create-x CLIs that automatically runs the "init" command.
@@ -38,5 +42,5 @@ export declare const jsonFlag: {
 /**
  * Clear the CLI cache, used to store some API responses and handle notifications status
  */
-export declare function clearCache(): void;
+export declare function clearCache(): Promise<void>;
 export {};
\ No newline at end of file

packages/cli-kit/dist/public/node/custom-oclif-loader.d.ts

@@ -1,6 +1,43 @@
 import { Command, Config } from '@oclif/core';
 import { Options } from '@oclif/core/interfaces';
+/**
+ * Optional lazy command loader function.
+ * If set, ShopifyConfig will use it to load individual commands on demand
+ * instead of importing the entire COMMANDS module (which triggers loading all packages).
+ */
+export type LazyCommandLoader = (id: string) => Promise<typeof Command | undefined>;
 export declare class ShopifyConfig extends Config {
+    private lazyCommandLoader?;
     constructor(options: Options);
+    /**
+     * Set a lazy command loader that will be used to load individual command classes on demand,
+     * bypassing the default oclif behavior of importing the entire COMMANDS module.
+     *
+     * @param loader - The lazy command loader function.
+     */
+    setLazyCommandLoader(loader: LazyCommandLoader): void;
+    /**
+     * Override runHook to make init hooks non-blocking for faster startup.
+     * Init hooks (app-init, hydrogen-init) set up LocalStorage and check hydrogen —
+     * these are setup tasks that don't need to complete before commands run.
+     *
+     * @param event - The hook event name.
+     * @param opts - Options to pass to the hook.
+     * @param timeout - Optional timeout for the hook.
+     * @param captureErrors - Whether to capture errors instead of throwing.
+     * @returns The hook result with successes and failures arrays.
+     */
+    runHook(event: string, opts: any, timeout?: number, captureErrors?: boolean): Promise<any>;
+    /**
+     * Override runCommand to use lazy loading when available.
+     * Instead of calling cmd.load() which triggers loading ALL commands via index.js,
+     * we directly import only the needed command module.
+     *
+     * @param id - The command ID to run.
+     * @param argv - The arguments to pass to the command.
+     * @param cachedCommand - An optional cached command loadable.
+     * @returns The command result.
+     */
+    runCommand<T = unknown>(id: string, argv?: string[], cachedCommand?: Command.Loadable | null): Promise<T>;
     customPriority(commands: Command.Loadable[]): Command.Loadable | undefined;
 }
\ No newline at end of file

packages/cli-kit/dist/public/node/error.d.ts

@@ -1,6 +1,6 @@
-import { AlertCustomSection } from './ui.js';
 import { OutputMessage } from './output.js';
-import { InlineToken, TokenItem } from '../../private/node/ui/components/TokenizedText.js';
+import { InlineToken, TokenItem } from '../../private/node/ui/components/token-utils.js';
+import type { AlertCustomSection } from './ui.js';
 export { ExtendableError } from 'ts-error';
 export declare enum FatalErrorType {
     Abort = 0,

packages/cli-kit/dist/public/node/is-global.d.ts

@@ -1,4 +1,4 @@
-import { PackageManager } from './node-package-manager.js';
+import type { PackageManager } from './node-package-manager.js';
 /**
  * Returns true if the current process is running in a global context.
  *

packages/cli-kit/dist/public/node/output.d.ts

@@ -1,8 +1,8 @@
-import { PackageManager } from './node-package-manager.js';
 import { AbortSignal } from './abort.js';
-import { TokenItem } from './ui.js';
 import { ColorContentToken, CommandContentToken, ContentToken, ErrorContentToken, HeadingContentToken, ItalicContentToken, JsonContentToken, LinesDiffContentToken, LinkContentToken, PathContentToken, RawContentToken, SubHeadingContentToken } from '../../private/node/content-tokens.js';
 import { Writable } from 'stream';
+import type { PackageManager } from './node-package-manager.js';
+import type { TokenItem } from '../../private/node/ui/components/token-utils.js';
 import type { Change } from 'diff';
 export type Logger = Writable | ((message: string, logLevel?: LogLevel) => void);
 export declare class TokenizedString {

packages/cli-kit/dist/private/node/ui/utilities.d.ts

@@ -1,16 +1,16 @@
-import { TokenItem } from './components/TokenizedText.js';
-export declare function messageWithPunctuation(message: TokenItem): string | {
+import { TokenItem } from './components/token-utils.js';
+export declare function messageWithPunctuation(message: TokenItem): string | import("./components/token-utils.js").LinkToken | import("./components/token-utils.js").UserInputToken | import("./components/token-utils.js").ListToken | {
     command: string;
-} | import("./components/TokenizedText.js").LinkToken | {
+} | {
     char: string;
-} | import("./components/TokenizedText.js").UserInputToken | {
+} | {
     subdued: string;
 } | {
     filePath: string;
-} | import("./components/TokenizedText.js").ListToken | import("./components/TokenizedText.js").BoldToken | {
+} | import("./components/token-utils.js").BoldToken | {
     info: string;
 } | {
     warn: string;
 } | {
     error: string;
-} | import("./components/TokenizedText.js").Token[];
\ No newline at end of file
+} | import("./components/token-utils.js").Token[];
\ No newline at end of file

packages/cli-kit/dist/public/node/hooks/postrun.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Postrun hook — uses dynamic imports to avoid loading heavy modules (base-command, analytics)
+ * at module evaluation time. These are only needed after the command has already finished.
+ */
 import { Hook } from '@oclif/core';
 /**
  * Check if post run hook has completed.

packages/cli-kit/dist/private/node/ui/components/TokenizedText.d.ts

@@ -1,42 +1,7 @@
 import { FunctionComponent } from 'react';
-export interface LinkToken {
-    link: {
-        label?: string;
-        url: string;
-    };
-}
-export interface UserInputToken {
-    userInput: string;
-}
-export interface ListToken {
-    list: {
-        title?: TokenItem<InlineToken>;
-        items: TokenItem<InlineToken>[];
-        ordered?: boolean;
-    };
-}
-export interface BoldToken {
-    bold: string;
-}
-export type Token = string | {
-    command: string;
-} | LinkToken | {
-    char: string;
-} | UserInputToken | {
-    subdued: string;
-} | {
-    filePath: string;
-} | ListToken | BoldToken | {
-    info: string;
-} | {
-    warn: string;
-} | {
-    error: string;
-};
-export type InlineToken = Exclude<Token, ListToken>;
-export type TokenItem<T extends Token = Token> = T | T[];
-export declare function tokenItemToString(token: TokenItem): string;
-export declare function appendToTokenItem(token: TokenItem, suffix: string): TokenItem;
+import type { TokenItem } from './token-utils.js';
+export type { LinkToken, UserInputToken, ListToken, BoldToken, Token, InlineToken, TokenItem } from './token-utils.js';
+export { tokenItemToString } from './token-utils.js';
 interface TokenizedTextProps {
     item: TokenItem;
 }