Add locale command

README.md

@@ -20,11 +20,11 @@ You'll need to ensure you have the following installed on your local development
 ### Installation
 
 Install the Shopify CLI plugin:
+
 ```bash
 shopify plugins install plugin-theme-component
 ```
 
-
 ## List of commands
 
 <!-- commands -->
@@ -36,6 +36,8 @@ shopify plugins install plugin-theme-component
 * [`shopify theme component map THEMEDIR [COMPONENTSELECTOR]`](#shopify-theme-component-map-themedir-componentselector)
 * [`shopify theme generate import-map [THEMEDIR]`](#shopify-theme-generate-import-map-themedir)
 * [`shopify theme generate template-map [THEMEDIR]`](#shopify-theme-generate-template-map-themedir)
+* [`shopify theme locale clean [THEMEDIR]`](#shopify-theme-locale-clean-themedir)
+* [`shopify theme locale sync [THEMEDIR]`](#shopify-theme-locale-sync-themedir)
 
 ## `shopify theme component`
 
@@ -66,7 +68,7 @@ ARGUMENTS
   THEMEDIR  [default: .] path to theme directory
 
 FLAGS
-  -q, --[no-]quiet  suppress non-essential output
+  -q, --[no-]quiet  Suppress non-essential output
 
 DESCRIPTION
   Remove unused component files in a theme
@@ -89,8 +91,8 @@ ARGUMENTS
   THEMEDIR  path to theme directory
 
 FLAGS
-  -n, --collection-name=<value>     name of the component collection
-  -v, --collection-version=<value>  version of the component collection
+  -n, --collection-name=<value>     Name of the component collection
+  -v, --collection-version=<value>  Version of the component collection
 
 DESCRIPTION
   Copy files from a component collection into a theme
@@ -115,15 +117,15 @@ ARGUMENTS
   COMPONENTSELECTOR  [default: *] component name or names (comma-separated) or "*" for all components
 
 FLAGS
-  -i, --generate-import-map         generate import map
-  -m, --generate-template-map       generate template map
-  -n, --collection-name=<value>     name of the component collection
-  -s, --[no-]setup-files            copy setup files to theme directory
-  -t, --theme-dir=<value>           [default: https://github.com/archetype-themes/explorer] directory that contains
+  -i, --generate-import-map         Generate import map
+  -m, --generate-template-map       Generate template map
+  -n, --collection-name=<value>     Name of the component collection
+  -s, --[no-]setup-files            Copy setup files to theme directory
+  -t, --theme-dir=<value>           [default: https://github.com/archetype-themes/explorer] Directory that contains
                                     theme files for development
-  -v, --collection-version=<value>  version of the component collection
-  -w, --[no-]watch                  watch for changes in theme and component directories
-  -y, --[no-]preview                sync changes to theme directory
+  -v, --collection-version=<value>  Version of the component collection
+  -w, --[no-]watch                  Watch for changes in theme and component directories
+  -y, --[no-]preview                Sync changes to theme directory
       --environment=<value>         The environment to apply to the current command.
       --host=<value>                Set which network interface the web server listens on. The default value is
                                     127.0.0.1.
@@ -160,8 +162,8 @@ ARGUMENTS
   COMPONENTSELECTOR  [default: *] component name or names (comma-separated) or "*" for all components
 
 FLAGS
-  -n, --collection-name=<value>     name of the component collection
-  -v, --collection-version=<value>  version of the component collection
+  -n, --collection-name=<value>     Name of the component collection
+  -v, --collection-version=<value>  Version of the component collection
 
 DESCRIPTION
   Runs the map, copy, clean, and generate import-map commands in sequence
@@ -189,10 +191,10 @@ ARGUMENTS
   COMPONENTSELECTOR  [default: *] component name or names (comma-separated) or "*" for all components
 
 FLAGS
-  -f, --ignore-conflicts            ignore conflicts when mapping components
-  -n, --collection-name=<value>     name of the component collection
-  -o, --ignore-overrides            ignore overrides when mapping components
-  -v, --collection-version=<value>  version of the component collection
+  -f, --ignore-conflicts            Ignore conflicts when mapping components
+  -n, --collection-name=<value>     Name of the component collection
+  -o, --ignore-overrides            Ignore overrides when mapping components
+  -v, --collection-version=<value>  Version of the component collection
 
 DESCRIPTION
   Generates or updates a component.manifest.json file with the component collection details and a file map
@@ -219,7 +221,7 @@ ARGUMENTS
   THEMEDIR  [default: .] path to theme directory
 
 FLAGS
-  -q, --[no-]quiet  suppress non-essential output
+  -q, --[no-]quiet  Suppress non-essential output
 
 DESCRIPTION
   Generate an import map for JavaScript files in the assets directory
@@ -239,13 +241,96 @@ ARGUMENTS
   THEMEDIR  [default: .] path to theme directory
 
 FLAGS
-  -q, --[no-]quiet  suppress non-essential output
+  -q, --[no-]quiet  Suppress non-essential output
 
 DESCRIPTION
   Generate a template map for component routes in the templates directory
 ```
 
 _See code: [src/commands/theme/generate/template-map.ts](https://github.com/archetype-themes/plugin-theme-component/blob/v5.0.8/src/commands/theme/generate/template-map.ts)_
+
+## `shopify theme locale clean [THEMEDIR]`
+
+Remove unreferenced translations from theme locale files
+
+```
+USAGE
+  $ shopify theme locale clean [THEMEDIR] [--format] [--target all|schema|storefront]
+
+ARGUMENTS
+  THEMEDIR  [default: .] path to theme directory
+
+FLAGS
+  --format           Format locale files by sorting keys alphabetically
+  --target=<option>  [default: all] Target locale files to process:
+                     - all: Process all locale files
+                     - schema: Process only schema translations (*.schema.json)
+                     - storefront: Process only storefront translations
+                     <options: all|schema|storefront>
+
+DESCRIPTION
+  Remove unreferenced translations from theme locale files
+
+EXAMPLES
+  $ shopify theme locale clean theme-directory
+
+  $ shopify theme locale clean theme-directory --target=schema
+
+  $ shopify theme locale clean theme-directory --target=storefront
+```
+
+_See code: [src/commands/theme/locale/clean.ts](https://github.com/archetype-themes/plugin-theme-component/blob/v5.0.8/src/commands/theme/locale/clean.ts)_
+
+## `shopify theme locale sync [THEMEDIR]`
+
+Sync theme locale files with source translations
+
+```
+USAGE
+  $ shopify theme locale sync [THEMEDIR] [-c] [--format] [-l <value>] [-m
+    add-missing|add-and-override|replace-existing] [--target all|schema|storefront]
+
+ARGUMENTS
+  THEMEDIR  [default: .] path to theme directory
+
+FLAGS
+  -c, --clean
+      Remove unreferenced translations from theme locale files
+
+  -l, --locales-source=<value>
+      [default: https://github.com/archetype-themes/locales] Directory that contains a "locales" folder with locale files
+
+  -m, --mode=<option>
+      [default: add-missing] Sync mode for locale files (only translations used in the theme will be processed):
+      - add-missing: Only add new translations that do not exist in theme locale files
+      - add-and-override: Add new translations and override existing ones with source values
+      - replace-existing: Replace values of existing translations with source values
+      <options: add-missing|add-and-override|replace-existing>
+
+  --format
+      Format locale files by sorting keys alphabetically
+
+  --target=<option>
+      [default: all] Target locale files to process:
+      - all: Process all locale files
+      - schema: Process only schema translations (*.schema.json)
+      - storefront: Process only storefront translations
+      <options: all|schema|storefront>
+
+DESCRIPTION
+  Sync theme locale files with source translations
+
+EXAMPLES
+  $ shopify theme locale sync theme-directory
+
+  $ shopify theme locale sync theme-directory --clean
+
+  $ shopify theme locale sync theme-directory --clean --target=schema
+
+  $ shopify theme locale sync theme-directory --locales-source=path/to/directory
+```
+
+_See code: [src/commands/theme/locale/sync.ts](https://github.com/archetype-themes/plugin-theme-component/blob/v5.0.8/src/commands/theme/locale/sync.ts)_
 <!-- commandsstop -->
 
 ## Contributing
@@ -259,6 +344,7 @@ If you notice a bug, or want to contribute to the codebase, feel free to do so i
 If you already have the plugin installed via npm, you'll need to [uninstall](#uninstalling-the-plugin) the plugin before being able to develop the plugin locally.
 
 Once this is done, follow these steps to ensure the Shopify CLI is running the local version of the plugin:
+
 - `git clone https://github.com/archetype-themes/plugin-theme-component.git`
 - `cd plugin-theme-component`
 - `npm i`

src/commands/theme/component/clean.ts

@@ -1,14 +1,14 @@
 /**
  * This command cleans up component files in a theme directory.
- * 
+ *
  * - Removes component files (snippets and assets) that are not listed in the component map
  * - Ensures the theme directory only contains necessary component files
  */
 
 import fs from 'node:fs'
 import path from 'node:path'
 
-import Args from '../../../utilities/args.js'    
+import Args from '../../../utilities/args.js'
 import BaseCommand from '../../../utilities/base-command.js'
 import { getManifest } from '../../../utilities/manifest.js'
 import { getThemeNodes } from '../../../utilities/nodes.js'
@@ -30,7 +30,7 @@ export default class Clean extends BaseCommand {
 
   public async run(): Promise<void> {
     const themeDir = path.resolve(process.cwd(), this.args[Args.THEME_DIR])
-    
+
     const manifest = getManifest(path.join(themeDir, 'component.manifest.json'))
     const themeNodes = await getThemeNodes(themeDir)
 

src/commands/theme/component/copy.ts

@@ -1,20 +1,20 @@
 /**
  * This command copies component files into a theme directory.
- * 
+ *
  * - Copies rendered component files (snippets and assets) into the theme directory
  * - Updates the theme CLI config (shopify.theme.json) with the component collection details
  */
 
 import fs from 'node:fs'
 import path from 'node:path'
 
-import Args from '../../../utilities/args.js'    
+import Args from '../../../utilities/args.js'
 import BaseCommand from '../../../utilities/base-command.js'
 import { copyFileIfChanged } from '../../../utilities/files.js';
 import Flags from '../../../utilities/flags.js'
 import { getManifest } from '../../../utilities/manifest.js'
 import { getCollectionNodes } from '../../../utilities/nodes.js'
-import { getNameFromPackageJson , getVersionFromPackageJson } from '../../../utilities/package-json.js'
+import { getNameFromPackageJson, getVersionFromPackageJson } from '../../../utilities/package-json.js'
 
 export default class Copy extends BaseCommand {
   static override args = Args.getDefinitions([
@@ -52,7 +52,7 @@ export default class Copy extends BaseCommand {
     if (!fs.existsSync(path.join(themeDir, 'component.manifest.json'))) {
       this.error('Error: component.manifest.json file not found in the theme directory. Run "shopify theme component map" to generate a component.manifest.json file.');
     }
-    
+
     const manifest = getManifest(path.join(themeDir, 'component.manifest.json'))
     const componentNodes = await getCollectionNodes(currentDir)
 

src/commands/theme/component/dev.ts

@@ -1,18 +1,17 @@
 /**
  * This command sets up a sandboxed development environment for components.
- * 
+ *
  * - Removes any existing development directory
  * - Copies dev theme files and rendered component files into a temporary development directory
  * - Watches for changes to synchronize updates
  * - Runs 'shopify theme dev' on the temporary development directory to preview your work
  */
 
-
 import chokidar from 'chokidar'
 import path from 'node:path'
 import { URL } from 'node:url'
 
-import Args from '../../../utilities/args.js'    
+import Args from '../../../utilities/args.js'
 import BaseCommand from '../../../utilities/base-command.js'
 import { cleanDir, syncFiles } from '../../../utilities/files.js'
 import Flags from '../../../utilities/flags.js'
@@ -82,14 +81,14 @@ export default class Dev extends BaseCommand {
     const themeDir = await this.getThemeDirectory(devDir)
 
     this.log(`Building theme in ${devDir}...`)
-    
+
     const buildThemeParams: BuildThemeParams = {
       componentSelector,
       generateTemplateMap,
       setupFiles,
       themeDir
     }
-    
+
     await this.buildTheme(devDir, buildThemeParams)
 
     // Run shopify theme dev if preview is enabled
@@ -111,12 +110,12 @@ export default class Dev extends BaseCommand {
     // Copy the component setup files if needed
     if (params.setupFiles) {
       await copySetupComponentFiles(
-        process.cwd(), 
-        destination, 
+        process.cwd(),
+        destination,
         params.componentSelector
       )
     }
-    
+
     // Install the components
     await Install.run([destination])
 
@@ -154,24 +153,24 @@ export default class Dev extends BaseCommand {
   private async getThemeDirectory(devDir: string): Promise<string> {
     if (this.flags[Flags.THEME_DIR].startsWith('http')) {
       const url = new URL(this.flags[Flags.THEME_DIR])
-      const {host} = url
-      
+      const { host } = url
+
       if (host === 'github.com' || host.endsWith('.github.com')) {
         const themeDir = path.join(devDir, '.repo')
         this.log(`Cloning theme from ${this.flags[Flags.THEME_DIR]} into dev directory ${devDir}`)
         await cloneTheme(this.flags[Flags.THEME_DIR], themeDir)
         return themeDir
       }
-      
+
       throw new Error(`Unsupported theme URL: ${this.flags[Flags.THEME_DIR]}`)
     }
-    
+
     return path.resolve(process.cwd(), this.flags[Flags.THEME_DIR])
   }
 
   private setupWatcher(devDir: string, themeDir: string, componentsDir: string, buildThemeParams: BuildThemeParams): Promise<void> {
     const watchDir = path.join(devDir, '.watch')
-    
+
     // Need to access chokidar as a default import so it can be mocked in tests
     // eslint-disable-next-line import/no-named-as-default-member
     const themeWatcher = chokidar.watch([themeDir, componentsDir], {

src/commands/theme/component/index.ts

@@ -22,8 +22,8 @@ export default class Component extends Command {
     } else {
       this.log(
         '\nWelcome To The Theme Component Plugin by Archetype Themes.' +
-          '\n\nUse the "--help" or "-h" flag to list available commands'
+        '\n\nUse the "--help" or "-h" flag to list available commands'
       )
     }
   }
-}
+}

src/commands/theme/component/install.ts

@@ -1,13 +1,13 @@
 /**
  * This command installs component files into a theme directory.
- * 
+ *
  * - Maps the components in the theme directory
  * - Copies rendered component files (snippets and assets) into the theme directory
  * - Cleans up unnecessary component files in the theme directory
  * - Generates an import-map.liquid snippet file based on JS assets
  */
 
-import Args from '../../../utilities/args.js'    
+import Args from '../../../utilities/args.js'
 import BaseCommand from '../../../utilities/base-command.js'
 import Flags from '../../../utilities/flags.js'
 import GenerateImportMap from '../generate/import-map.js'
@@ -44,4 +44,4 @@ export default class Install extends BaseCommand {
     await Clean.run([this.args[Args.THEME_DIR]!])
     await GenerateImportMap.run([this.args[Args.THEME_DIR]!, '--quiet'])
   }
-}
+}