Adding support for function localizations

[MadhavMakkena]

WHY are these changes introduced?

Adding support for defining a locales directory in your app to supply localized strings. Use t: prefix for your titles and description field (if applicable) in your .toml file to use the localized strings. (Basically rebasing DC's PR to stable/3.49 branch)

Pushing to stable/3.49 branch

WHAT is this pull request doing?

Leveraging the existing helpers for localization.

How to test your changes?

• Test with companion PR in core on branch func-loc.
• Create a script-service spin instance with shopify branch func-loc
• create an app with discounts function
• make the following changes

./app/extension/discoutn_function
  ├── ...
  ├── locales // Create this dir and add locales
  │   ├── en.default.json // The default locale for the extension
  │   └── fr.json // The French language translations for the extension
  ├── package.json
  ├── shopify.extension.toml // The config file for the extension
  ├── ...

• update shopify.extension.toml to have:

name = "t:title"
description = "t:description"

• example en.default.json

{
  "title": "English title",
  "description": "English description"
}

Post-release steps

NOTE: Will have another PR soon to incorporate these changes in cli/main as well.

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
• I've made sure that any changes to dev or deploy have been reflected in the internal flowchart.

[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/theme-code-tools
• UI extensions: @shopify/ui-extensions-cli
  • Checkout UI extensions: @shopify/checkout-ui-extensions-api-stewardship
• Hydrogen: @shopify/hydrogen
• Other: @shopify/cli-foundations

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	73.31%	6021/8213
🟡	Branches	69.83%	2932/4199
🟡	Functions	72.25%	1539/2130
🟡	Lines	74.67%	5711/7648

Test suite run success

1430 tests passing in 669 suites.

Report generated by 🧪jest coverage report action from 301a7f8

[jacobsteves]

LGTM once the server-side PR ships! I'm not sure how merging to stable vs main works but I'll leave reviewing that part to the CLI owners 😅

[jacobsteves]

I was wondering if it would be better to manually encode the expected translation instead of hardcoded the base64. But its not super easy since the translations are string representations and the rest of the CLI seems to use the hardcoded base64 so this is probably fine 🤷‍♂️

[MadhavMakkena]

That's a bigger change as we have to update everythign that uses {loadLocalesConfig} from '../../../utilities/extensions/locales-configuration.js' I think

[alvaro-shopify]

LGTM!

[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/common/version.d.ts

@@ -1 +1 @@
-export declare const CLI_KIT_VERSION = "3.49.1";
\ No newline at end of file
+export declare const CLI_KIT_VERSION = "3.49.3";
\ No newline at end of file

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

@@ -14,11 +14,9 @@ export declare function errorHandler(error: Error & {
 export declare function sendErrorToBugsnag(error: unknown): Promise<{
     reported: false;
     error: unknown;
-    unhandled: unknown;
 } | {
     error: Error;
     reported: true;
-    unhandled: boolean;
 }>;
 /**
  * If the given file path is within a node_modules folder, remove prefix up

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

@@ -74,7 +74,7 @@ export declare function handler(error: unknown): Promise<unknown>;
  */
 export declare function errorMapper(error: unknown): Promise<unknown>;
 /**
- * A function that checks if an error should be reported as unhandled.
+ * A function that checks if an error should be reported.
  *
  * @param error - Error to be checked.
  * @returns A boolean indicating if the error should be reported.

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

@@ -30,7 +30,7 @@ export interface RenderConcurrentOptions extends PartialBy<ConcurrentOutputProps
  * 00:00:00 │ frontend │ third frontend message
  *
  */
-export declare function renderConcurrent({ renderOptions, ...props }: RenderConcurrentOptions): Promise<void>;
+export declare function renderConcurrent({ renderOptions, ...props }: RenderConcurrentOptions): Promise<void | void[]>;
 export type AlertCustomSection = CustomSection;
 export type RenderAlertOptions = Omit<AlertOptions, 'type'>;
 /**

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

@@ -10,16 +10,14 @@ declare class Stderr extends EventEmitter {
 }
 export declare class Stdin extends EventEmitter {
     isTTY: boolean;
-    data: string | null;
     constructor(options?: {
         isTTY?: boolean;
     });
     write: (data: string) => void;
     setEncoding(): void;
     setRawMode(): void;
-    ref(): void;
-    unref(): void;
-    read: () => string | null;
+    resume(): void;
+    pause(): void;
 }
 interface Instance {
     rerender: (tree: ReactElement) => void;

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

@@ -1 +1 @@
-export { getLastFrameAfterUnmount, render, Stdin, waitForInputsToBeReady, waitForContent, sendInputAndWait, sendInputAndWaitForChange, sendInputAndWaitForContent, } from '../../../private/node/testing/ui.js';
\ No newline at end of file
+export { getLastFrameAfterUnmount, render, Stdin, waitForInputsToBeReady, waitForContent, } from '../../../private/node/testing/ui.js';
\ No newline at end of file

[mssalemi]

Code and 🎩 lgtm!