@vocab/core 1.6.2 → 1.6.4

package/README.md

@@ -13,6 +13,17 @@ Vocab helps you ship multiple languages without compromising the reliability of
 - **Strongly typed with TypeScript**\
   When using translations TypeScript will ensure code only accesses valid translations and translations are passed all required dynamic values.
 
+## Table of contents
+
+- [Getting started](#getting-started)
+  - [Step 1: Install Dependencies](#step-1-install-dependencies)
+  - [Step 2: Configure Vocab](#step-2-configure-vocab)
+  - [Step 3: Set the language using the React Provider](#step-3-set-the-language-using-the-react-provider)
+  - [Step 4: Create translations](#step-4-create-translations)
+  - [Step 5: Compile and consume translations](#step-5-compile-and-consume-translations)
+  - [Step 6: [Optional] Set up plugin](#step-6-optional-set-up-plugin)
+  - [Step 7: [Optional] Optimize for fast page loading](#step-7-optional-optimize-for-fast-page-loading)
+
 ## Getting started
 
 ### Step 1: Install Dependencies
@@ -39,8 +50,8 @@ This is the language Vocab will assume when it sees a `translation.json` file wi
 ```js
 // vocab.config.js
 module.exports = {
-  languages: [{ name: 'en' }, { name: 'fr' }]
-  devLanguage: 'en',
+  languages: [{ name: 'en' }, { name: 'fr' }],
+  devLanguage: 'en'
 };
 ```
 
@@ -159,7 +170,9 @@ function MyComponent({ children }) {
 }
 ```
 
-### Step 6: [Optional] Set up Webpack plugin
+### Step 6: [Optional] Set up plugin
+
+#### Webpack Plugin
 
 With the default setup, every language is loaded into your web application all the time, potentially leading to a large bundle size.
 Ideally you will want to switch out the Node.js/default runtime for the web runtime, which only loads the active language.
@@ -181,6 +194,85 @@ module.exports = {
 };
 ```
 
+#### Vite Plugin _(this plugin is experimental)_
+
+> [!NOTE]
+> This plugin is still experimental and may not work in all cases. If you encounter any issues, please open an issue on the Vocab GitHub repository.
+
+Vocab also provides a Vite plugin to handle the same functionality as the Webpack plugin.
+
+```shell
+npm i --save-dev @vocab/vite
+```
+
+default usage
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite';
+import { vocabPluginVite } from '@vocab/vite';
+import vocabConfig from './vocab.config.cjs';
+
+export default defineConfig({
+  plugins: [
+    vocabPluginVite({
+      vocabConfig
+    })
+  ]
+});
+```
+
+#### createVocabChunks
+
+If you want to combine all language files into a single chunk, you can use the `createVocabChunks` function.
+Simply use the function in your `manualChunks` configuration.
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite';
+import { vocabPluginVite } from '@vocab/vite';
+import { createVocabChunks } from '@vocab/vite/create-vocab-chunks';
+import vocabConfig from './vocab.config.cjs';
+
+export default defineConfig({
+  plugins: [
+    vocabPluginVite({
+      vocabConfig
+    })
+  ],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: (id, ctx) => {
+          // handle your own manual chunks before or after the vocab chunks.
+          const languageChunkName = createVocabChunks(
+            id,
+            ctx
+          );
+          if (languageChunkName) {
+            // vocab has found a language chunk. Either return it or handle it in your own way.
+            return languageChunkName;
+          }
+        }
+      }
+    }
+  }
+});
+```
+
+#### VocabPluginOptions
+
+```ts
+type VocabPluginOptions = {
+  /**
+   * The Vocab configuration file.
+   * The type can be found in the `@vocab/core/types`.
+   * This value is required
+   */
+  vocabConfig: UserConfig;
+};
+```
+
 ### Step 7: [Optional] Optimize for fast page loading
 
 Using the above method without optimizing what chunks webpack uses you may find the page needing to do an extra round trip to load languages on a page.
@@ -207,7 +299,7 @@ extractor.addChunk(chunkName);
 
 Translation messages can sometimes contain dynamic values, such as dates/times, links, usernames, etc.
 These values often exist somewhere in the middle of a message, and could change location depending on the translation.
-To support this, Vocab uses [Format.js's `intl-messageformat` library], which enables you to use [ICU Message syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) in your messages.
+To support this, Vocab uses [Format.js's `intl-messageformat` library], which enables you to use [ICU Message syntax](https://formatjs.github.io/docs/core-concepts/icu-syntax/) in your messages.
 
 In the below example we are defining two messages: one that accepts a single parameter, and one that accepts a component.
 
@@ -231,7 +323,7 @@ t('my key with component', {
 });
 ```
 
-[Format.js's `intl-messageformat` library]: https://formatjs.io/docs/intl-messageformat/
+[Format.js's `intl-messageformat` library]: https://formatjs.github.io/docs/intl-messageformat/
 
 ## Overriding the Locale
 
@@ -254,7 +346,7 @@ This can be useful in certain situations:
   For example: `th-u-ca-gregory`.
   See the [MDN Intl docs] for more information on BCP 47 extension sequences.
 
-[`intl-messageformat`]: https://formatjs.io/docs/intl-messageformat/
+[`intl-messageformat`]: https://formatjs.github.io/docs/intl-messageformat/
 [IETF language tag]: https://en.wikipedia.org/wiki/IETF_language_tag
 [mdn intl docs]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
 
@@ -311,8 +403,8 @@ const Currency = ({ value, currency }) => {
 };
 ```
 
-[numbers]: https://formatjs.io/docs/core-concepts/icu-syntax/#number-type
-[dates, and times]: https://formatjs.io/docs/core-concepts/icu-syntax/#supported-datetime-skeleton
+[numbers]: https://formatjs.github.io/docs/core-concepts/icu-syntax/#number-type
+[dates, and times]: https://formatjs.github.io/docs/core-concepts/icu-syntax/#supported-datetime-skeleton
 
 ## Configuration
 
@@ -452,7 +544,7 @@ const App = () => (
 );
 ```
 
-[icu message syntax]: https://formatjs.io/docs/intl-messageformat/#message-syntax
+[icu message syntax]: https://formatjs.github.io/docs/intl-messageformat/#message-syntax
 [diacritics]: https://en.wikipedia.org/wiki/Diacritic
 
 ## Pseudo-localization
@@ -629,6 +721,17 @@ referenced in the upload. These keys can be deleted from Phrase by providing the
 vocab push --branch my-branch --delete-unused-keys
 ```
 
+#### Ignoring Files
+
+The `ignore` key in your [Vocab config](#configuration) allows you to ignore certain files from being validated, compiled and uploaded.
+However, in some cases you may only want certain files to be compiled and validated, but not uploaded, such as those present in a build output directory.
+This can be accomplished by providing the `--ignore` flag to `vocab push`.
+This flag accepts an array of glob patterns to ignore.
+
+```sh
+vocab push --branch my-branch --ignore "**/dist/**" "**/another_ignored_directory/**"
+```
+
 [phrase]: https://developers.phrase.com/api/
 
 #### [Tags]

package/dist/declarations/src/index.d.ts

@@ -3,4 +3,4 @@ export { validate } from "./validate/index.js";
 export { resolveConfig, resolveConfigSync, validateConfig } from "./config.js";
 export { getAltLanguages, getAltLanguageFilePath, getDevLanguageFileFromTsFile, } from "./utils.js";
 export { getUniqueKey, loadAllTranslations, loadTranslation, } from "./load-translations.js";
-export * from "./types.js";
+export type * from "./types.js";

package/dist/declarations/src/load-translations.d.ts

@@ -4,7 +4,7 @@ export declare function getUniqueKey(key: string, namespace: string): string;
 export declare function mergeWithDevLanguageTranslation({ translation, devTranslation, }: {
     translation: TranslationsByKey;
     devTranslation: TranslationsByKey;
-}): TranslationsByKey<string>;
+}): TranslationsByKey;
 export declare function getLanguageHierarchy({ languages, }: {
     languages: LanguageTarget[];
 }): Map<string, string[]>;

package/dist/vocab-core.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "./declarations/src/index";
+export * from "./declarations/src/index.js";
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidm9jYWItY29yZS5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=

package/dist/vocab-core.cjs.dev.js

@@ -324,6 +324,8 @@ function loadAltLanguageFile({
       try {
         const altFilePath = getAltLanguageFilePath(filePath, fallbackLanguage);
         delete require.cache[altFilePath];
+
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
         const translationFile = require(altFilePath);
         const {
           keys: fallbackLanguageTranslation
@@ -335,7 +337,7 @@ function loadAltLanguageFile({
           translation: fallbackLanguageTranslation,
           devTranslation
         }));
-      } catch (e) {
+      } catch {
         trace(`Missing alt language file ${getAltLanguageFilePath(filePath, fallbackLanguage)}
         `);
       }
@@ -359,6 +361,7 @@ function loadTranslation({
   trace(`Loading translation file in "${fallbacks}" fallback mode: "${filePath}"`);
   const languageSet = {};
   delete require.cache[filePath];
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const translationContent = require(filePath);
   const relativePath = path__default["default"].relative(userConfig.projectRoot || process.cwd(), filePath);
   const {
@@ -419,13 +422,15 @@ async function loadAllTranslations({
     cwd: projectRoot
   });
   trace(`Found ${translationFiles.length} translation files`);
-  const result = await Promise.all(translationFiles.map(filePath => loadTranslation({
-    filePath,
-    fallbacks,
-    withTags
-  }, config)));
+  const loadedTranslations = [];
   const keys = new Set();
-  for (const loadedTranslation of result) {
+  for (const translationFile of translationFiles) {
+    const loadedTranslation = loadTranslation({
+      filePath: translationFile,
+      fallbacks,
+      withTags
+    }, config);
+    loadedTranslations.push(loadedTranslation);
     for (const key of loadedTranslation.keys) {
       const uniqueKey = getUniqueKey(key, loadedTranslation.namespace);
       if (keys.has(uniqueKey)) {
@@ -442,7 +447,7 @@ async function loadAllTranslations({
       }
     }
   }
-  return result;
+  return loadedTranslations;
 }
 
 function extractHasTags(ast) {
@@ -581,7 +586,7 @@ async function generateRuntime(loadedTranslation) {
   }
   const prettierConfig = await prettier__default["default"].resolveConfig(filePath);
   const serializedTranslationType = serialiseTranslationRuntime(translationTypes, imports, loadedTranslation);
-  const declaration = prettier__default["default"].format(serializedTranslationType, {
+  const declaration = await prettier__default["default"].format(serializedTranslationType, {
     ...prettierConfig,
     parser: 'typescript'
   });
@@ -659,7 +664,7 @@ async function writeIfChanged(filepath, contents) {
       encoding: 'utf-8'
     });
     hasChanged = existingContents !== contents;
-  } catch (e) {
+  } catch {
     // ignore error, likely a file doesn't exist error so we want to write anyway
   }
   if (hasChanged) {
@@ -851,6 +856,7 @@ function createConfig(configFilePath) {
   const cwd = path__default["default"].dirname(configFilePath);
   return {
     projectRoot: cwd,
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     ...require(configFilePath)
   };
 }

package/dist/vocab-core.cjs.prod.js

@@ -324,6 +324,8 @@ function loadAltLanguageFile({
       try {
         const altFilePath = getAltLanguageFilePath(filePath, fallbackLanguage);
         delete require.cache[altFilePath];
+
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
         const translationFile = require(altFilePath);
         const {
           keys: fallbackLanguageTranslation
@@ -335,7 +337,7 @@ function loadAltLanguageFile({
           translation: fallbackLanguageTranslation,
           devTranslation
         }));
-      } catch (e) {
+      } catch {
         trace(`Missing alt language file ${getAltLanguageFilePath(filePath, fallbackLanguage)}
         `);
       }
@@ -359,6 +361,7 @@ function loadTranslation({
   trace(`Loading translation file in "${fallbacks}" fallback mode: "${filePath}"`);
   const languageSet = {};
   delete require.cache[filePath];
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const translationContent = require(filePath);
   const relativePath = path__default["default"].relative(userConfig.projectRoot || process.cwd(), filePath);
   const {
@@ -419,13 +422,15 @@ async function loadAllTranslations({
     cwd: projectRoot
   });
   trace(`Found ${translationFiles.length} translation files`);
-  const result = await Promise.all(translationFiles.map(filePath => loadTranslation({
-    filePath,
-    fallbacks,
-    withTags
-  }, config)));
+  const loadedTranslations = [];
   const keys = new Set();
-  for (const loadedTranslation of result) {
+  for (const translationFile of translationFiles) {
+    const loadedTranslation = loadTranslation({
+      filePath: translationFile,
+      fallbacks,
+      withTags
+    }, config);
+    loadedTranslations.push(loadedTranslation);
     for (const key of loadedTranslation.keys) {
       const uniqueKey = getUniqueKey(key, loadedTranslation.namespace);
       if (keys.has(uniqueKey)) {
@@ -442,7 +447,7 @@ async function loadAllTranslations({
       }
     }
   }
-  return result;
+  return loadedTranslations;
 }
 
 function extractHasTags(ast) {
@@ -581,7 +586,7 @@ async function generateRuntime(loadedTranslation) {
   }
   const prettierConfig = await prettier__default["default"].resolveConfig(filePath);
   const serializedTranslationType = serialiseTranslationRuntime(translationTypes, imports, loadedTranslation);
-  const declaration = prettier__default["default"].format(serializedTranslationType, {
+  const declaration = await prettier__default["default"].format(serializedTranslationType, {
     ...prettierConfig,
     parser: 'typescript'
   });
@@ -659,7 +664,7 @@ async function writeIfChanged(filepath, contents) {
       encoding: 'utf-8'
     });
     hasChanged = existingContents !== contents;
-  } catch (e) {
+  } catch {
     // ignore error, likely a file doesn't exist error so we want to write anyway
   }
   if (hasChanged) {
@@ -851,6 +856,7 @@ function createConfig(configFilePath) {
   const cwd = path__default["default"].dirname(configFilePath);
   return {
     projectRoot: cwd,
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     ...require(configFilePath)
   };
 }

package/dist/vocab-core.esm.js

@@ -308,6 +308,8 @@ function loadAltLanguageFile({
       try {
         const altFilePath = getAltLanguageFilePath(filePath, fallbackLanguage);
         delete require.cache[altFilePath];
+
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
         const translationFile = require(altFilePath);
         const {
           keys: fallbackLanguageTranslation
@@ -319,7 +321,7 @@ function loadAltLanguageFile({
           translation: fallbackLanguageTranslation,
           devTranslation
         }));
-      } catch (e) {
+      } catch {
         trace(`Missing alt language file ${getAltLanguageFilePath(filePath, fallbackLanguage)}
         `);
       }
@@ -343,6 +345,7 @@ function loadTranslation({
   trace(`Loading translation file in "${fallbacks}" fallback mode: "${filePath}"`);
   const languageSet = {};
   delete require.cache[filePath];
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const translationContent = require(filePath);
   const relativePath = path.relative(userConfig.projectRoot || process.cwd(), filePath);
   const {
@@ -403,13 +406,15 @@ async function loadAllTranslations({
     cwd: projectRoot
   });
   trace(`Found ${translationFiles.length} translation files`);
-  const result = await Promise.all(translationFiles.map(filePath => loadTranslation({
-    filePath,
-    fallbacks,
-    withTags
-  }, config)));
+  const loadedTranslations = [];
   const keys = new Set();
-  for (const loadedTranslation of result) {
+  for (const translationFile of translationFiles) {
+    const loadedTranslation = loadTranslation({
+      filePath: translationFile,
+      fallbacks,
+      withTags
+    }, config);
+    loadedTranslations.push(loadedTranslation);
     for (const key of loadedTranslation.keys) {
       const uniqueKey = getUniqueKey(key, loadedTranslation.namespace);
       if (keys.has(uniqueKey)) {
@@ -426,7 +431,7 @@ async function loadAllTranslations({
       }
     }
   }
-  return result;
+  return loadedTranslations;
 }
 
 function extractHasTags(ast) {
@@ -565,7 +570,7 @@ async function generateRuntime(loadedTranslation) {
   }
   const prettierConfig = await prettier.resolveConfig(filePath);
   const serializedTranslationType = serialiseTranslationRuntime(translationTypes, imports, loadedTranslation);
-  const declaration = prettier.format(serializedTranslationType, {
+  const declaration = await prettier.format(serializedTranslationType, {
     ...prettierConfig,
     parser: 'typescript'
   });
@@ -643,7 +648,7 @@ async function writeIfChanged(filepath, contents) {
       encoding: 'utf-8'
     });
     hasChanged = existingContents !== contents;
-  } catch (e) {
+  } catch {
     // ignore error, likely a file doesn't exist error so we want to write anyway
   }
   if (hasChanged) {
@@ -835,6 +840,7 @@ function createConfig(configFilePath) {
   const cwd = path.dirname(configFilePath);
   return {
     projectRoot: cwd,
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     ...require(configFilePath)
   };
 }

package/icu-handler/dist/vocab-core-icu-handler.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "../../dist/declarations/src/icu-handler";
+export * from "../../dist/declarations/src/icu-handler.js";
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidm9jYWItY29yZS1pY3UtaGFuZGxlci5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL2Rpc3QvZGVjbGFyYXRpb25zL3NyYy9pY3UtaGFuZGxlci5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=

package/package.json

@@ -1,6 +1,11 @@
 {
   "name": "@vocab/core",
-  "version": "1.6.2",
+  "version": "1.6.4",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/seek-oss/vocab.git",
+    "directory": "packages/core"
+  },
   "main": "dist/vocab-core.cjs.js",
   "module": "dist/vocab-core.esm.js",
   "exports": {
@@ -47,10 +52,9 @@
     "find-up": "^5.0.0",
     "intl-messageformat": "^10.0.0",
     "picocolors": "^1.0.0",
-    "prettier": "^2.1.2"
+    "prettier": "^3.5.3"
   },
   "devDependencies": {
-    "@types/debug": "^4.1.5",
-    "@types/prettier": "^2.1.5"
+    "@types/debug": "^4.1.5"
   }
 }

package/runtime/dist/vocab-core-runtime.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "../../dist/declarations/src/runtime";
+export * from "../../dist/declarations/src/runtime.js";
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidm9jYWItY29yZS1ydW50aW1lLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vZGlzdC9kZWNsYXJhdGlvbnMvc3JjL3J1bnRpbWUuZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

package/translation-file/dist/vocab-core-translation-file.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "../../dist/declarations/src/translation-file";
+export * from "../../dist/declarations/src/translation-file.js";
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidm9jYWItY29yZS10cmFuc2xhdGlvbi1maWxlLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vZGlzdC9kZWNsYXJhdGlvbnMvc3JjL3RyYW5zbGF0aW9uLWZpbGUuZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9