[Themes][app dev][TAE] Find or Create host theme when preparing theme app extension preview

[jamesmengo]

WHY are these changes introduced?

• https://github.com/Shopify/develop-advanced-edits/issues/220

note: This solution uses a placeholder URL rather than the public github URL. Further testing is required - will be tracked here

WHAT is this pull request doing?

flowchart LR
    A[Start] --> B{Is theme provided?}
    B -- Yes --> C[Fetch theme by ID]
    C --> D{Theme found?}
    D -- Yes --> E[Return theme ID]
    D -- No --> F[Throw AbortError]
    B -- No --> G[Look for a host theme]
    G --> H{Host theme found?}
    H -- No --> J[Create a host theme]
    J --> K[Wait for theme to finish processing]
    K --> E
    H -- Yes --> E
    E --> L[End]

Loading

How to test your changes?

Code.-.host-theme-manager.ts.cli.mp4

Measuring impact

How do we know this change was effective? Please choose one:

• n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• Existing analytics will cater for this addition
• PR includes analytics changes to measure impact

Checklist

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

[github-actions]

Thanks for your contribution!

Depending on what you are working on, you may want to request a review from a Shopify team:

• Themes: @shopify/advanced-edits
• UI extensions: @shopify/ui-extensions-cli
  • Checkout UI extensions: @shopify/checkout-ui-extensions-api-stewardship
• Hydrogen: @shopify/hydrogen
• Other: @shopify/app-management

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	73.05% (+0.35% 🔼)	8076/11055
🟡	Branches	69.37% (+0.18% 🔼)	3927/5661
🟡	Functions	71.7% (+0.2% 🔼)	2110/2943
🟡	Lines	73.39% (+0.36% 🔼)	7636/10405

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / host-theme-watcher.ts	100%	85.71%	100%	100%

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / host-theme-manager.ts	100% (+100% 🔼)	66.67% (-33.33% 🔻)	100% (+100% 🔼)	100% (+100% 🔼)
🔴	... / app-management-client.ts	19.57% (-1.2% 🔻)	11.11%	19.57% (-2.78% 🔻)	17.62% (-1.36% 🔻)

Test suite run success

1827 tests passing in 832 suites.

Report generated by 🧪jest coverage report action from ce0342a

[karreiro]

Thank you, @jamesmengo! Great stuff 🔥 🚀 I've left only some minor comments and suggestions :)

[github-actions]

We detected some changes at either packages/*/src or packages/cli-kit/assets/cli-ruby/** and there are no updates in the .changeset.
If the changes are user-facing, run "pnpm changeset add" to track your changes and include them in the next release CHANGELOG.

[karreiro]

Thank you, @jamesmengo! Great stuff :) I've left only one minor suggestion about the src parameter, and the rest of the PR looks awesome :)

[karreiro]

Thank you, @jamesmengo! I've notice a detail about the retry mechanism, please, let me know what you think about that :)

[jamesmengo]

@karreiro I've slightly modified the flow of how we handle the theme flag so that we explicitly handle the case when theme is provided with a non-valid value (e.g. the theme doesn't exist)

[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

We found no new type declarations in this PR

Existing type declarations

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

@@ -1,6 +1,6 @@
 import { AdminSession } from '@shopify/cli-kit/node/session';
 import { Result, Checksum, Key, Theme, ThemeAsset } from '@shopify/cli-kit/node/themes/types';
-export type ThemeParams = Partial<Pick<Theme, 'name' | 'role' | 'processing'>>;
+export type ThemeParams = Partial<Pick<Theme, 'name' | 'role' | 'processing' | 'src'>>;
 export type AssetParams = Pick<ThemeAsset, 'key'> & Partial<Pick<ThemeAsset, 'value' | 'attachment'>>;
 export declare function fetchTheme(id: number, session: AdminSession): Promise<Theme | undefined>;
 export declare function fetchThemes(session: AdminSession): Promise<Theme[]>;

packages/cli-kit/dist/public/node/themes/theme-manager.d.ts

@@ -10,5 +10,6 @@ export declare abstract class ThemeManager {
     constructor(adminSession: AdminSession);
     findOrCreate(): Promise<Theme>;
     fetch(): Promise<Theme | undefined>;
+    generateThemeName(context: string): string;
     create(themeRole?: Role, themeName?: string): Promise<Theme>;
 }
\ No newline at end of file

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

@@ -60,6 +60,10 @@ export interface Theme {
      * The remote role of the theme.
      */
     role: string;
+    /**
+     * A public URL where Shopify can access the theme code.
+     */
+    src?: string;
 }
 /**
  * Represents the remote checksum for a file in a theme.

[karreiro]

Thank you, @jamesmengo! The PR is in excellent shape and works as expected!

Just one minor comment, which we may apply here or in a following PR (when we introduce the other modules that handle the development server): I believe we could move the host-theme-watcher and the host-theme-manager to the packages/app/src/cli/utilities/extensions/theme/ directory :)

Thanks again for this PR!