Add --watch flag to sku translations compile command, update all …

…`@vocab/*` dependencies (#989)

.changeset/brown-suns-hope.md

@@ -0,0 +1,5 @@
+---
+'sku': patch
+---
+
+Update all `@vocab/*` dependencies

.changeset/olive-monkeys-roll.md

@@ -0,0 +1,13 @@
+---
+'sku': minor
+---
+
+Add support for `--watch` flag to `sku translations compile`
+
+The `sku translations compile` command now accepts a `--watch` flag. When this flag is provided, `translations.json` files will be re-compiled whenever changes are detected.
+
+**EXAMPLE USAGE**:
+
+```sh
+sku translations compile --watch
+```

docs/docs/cli.md

@@ -5,7 +5,7 @@ It provides a number of commands to help you develop, test and build your applic
 
 ## CLI Options
 
-| Options         | Description                                                                                                                  |
+| Option          | Description                                                                                                                  |
 | --------------- | ---------------------------------------------------------------------------------------------------------------------------- |
 | `-D, --debug`   | Enable debug logging <br> `sku start --debug`                                                                                |
 | `--config`      | Specify a custom path to your sku config <br> `sku build --config path/to/custom/config`                                     |
@@ -175,6 +175,12 @@ Compile translations defined in `.vocab` directories.
 sku translations compile
 ```
 
+This command supports the following options:
+
+| Option    | Description                                                                                    |
+| --------- | ---------------------------------------------------------------------------------------------- |
+| `--watch` | Re-compile translations whenever changes are detected <br> `sku translations compile  --watch` |
+
 ### `translations push`
 
 Push translations to Phrase.
@@ -186,7 +192,7 @@ sku translations push
 
 This command supports the following options:
 
-| Options                | Description                                                                                           |
+| Option                 | Description                                                                                           |
 | ---------------------- | ----------------------------------------------------------------------------------------------------- |
 | `--delete-unused-keys` | Deletes keys that were not referenced in the upload <br> `sku translations push --delete-unused-keys` |
 

fixtures/translations/package.json

@@ -2,9 +2,9 @@
   "name": "@sku-fixtures/translations",
   "private": true,
   "dependencies": {
-    "@vocab/core": "^1.3.0",
-    "@vocab/react": "^1.1.5",
-    "@vocab/webpack": "^1.2.1",
+    "@vocab/core": "^1.6.2",
+    "@vocab/react": "^1.1.11",
+    "@vocab/webpack": "^1.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/sku/lib/parseArgs.js

@@ -44,6 +44,7 @@ module.exports = (processArgv) => {
         'debug',
         // Passed to Vocab in the `translations` script
         'delete-unused-keys',
+        'watch',
       ],
       // `minimist` does not push unknown flags to `_` even if this function returns `true`, so we
       // need to track them ourselves

packages/sku/package.json

@@ -51,10 +51,10 @@
     "@types/loadable__component": "^5.13.1",
     "@vanilla-extract/jest-transform": "^1.1.0",
     "@vanilla-extract/webpack-plugin": "^2.2.0",
-    "@vocab/core": "^1.3.0",
-    "@vocab/phrase": "^1.2.4",
+    "@vocab/core": "^1.6.2",
+    "@vocab/phrase": "^2.0.0",
     "@vocab/pseudo-localize": "^1.0.1",
-    "@vocab/webpack": "^1.2.1",
+    "@vocab/webpack": "^1.2.9",
     "@zendesk/babel-plugin-react-displayname": "zendesk/babel-plugin-react-displayname#7a837f2",
     "autoprefixer": "^10.3.1",
     "babel-jest": "^29.0.0",
@@ -137,7 +137,7 @@
     "@types/react-dom": "^18.2.3",
     "@types/which": "^3.0.0",
     "@vanilla-extract/css": "^1.0.0",
-    "@vocab/react": "^1.0.1",
+    "@vocab/react": "^1.1.11",
     "braid-design-system": "^32.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/sku/scripts/translations.js

@@ -2,7 +2,11 @@ const envCi = require('env-ci');
 
 const { branch } = envCi();
 const chalk = require('chalk');
-const args = require('../config/args').argv;
+const {
+  argv: args,
+  watch,
+  'delete-unused-keys': deleteUnusedKeys,
+} = require('../config/args');
 const { compile, validate } = require('@vocab/core');
 const { push, pull } = require('@vocab/phrase');
 const { getVocabConfig } = require('../config/vocab/vocab');
@@ -51,16 +55,13 @@ const ensureBranch = () => {
 
   try {
     if (translationSubCommand === 'compile') {
-      compile({ watch: false }, vocabConfig);
+      console.log('Watching for changes to translations');
+      compile({ watch }, vocabConfig);
     }
     if (translationSubCommand === 'validate') {
       validate(vocabConfig);
     }
     if (translationSubCommand === 'push') {
-      const deleteUnusedKeys = commandArguments.includes(
-        '--delete-unused-keys',
-      );
-
       ensureBranch();
       push({ branch, deleteUnusedKeys }, vocabConfig);
     }
@@ -75,5 +76,8 @@ const ensureBranch = () => {
 
     process.exit(1);
   }
-  console.log(chalk.cyan('Translations complete'));
+
+  if (!watch) {
+    console.log(chalk.cyan('Translations complete'));
+  }
 })();