@vocab/react - npm Package Compare versions

Comparing version 1.1.12 to 1.1.13

dist/vocab-react.cjs.d.ts

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

package.json

 {
   "name": "@vocab/react",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "repository": {
@@ -21,3 +21,3 @@ "type": "git",
     "intl-messageformat": "^10.0.0",
-    "@vocab/core": "^1.6.3"
+    "@vocab/core": "^1.6.4"
   },
@@ -24,0 +24,0 @@ "devDependencies": {

README.md

@@ -16,2 +16,13 @@ # Vocab
 
+## 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
@@ -163,4 +174,6 @@
 
-### 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.
@@ -186,2 +199,81 @@ Ideally you will want to switch out the Node.js/default runtime for the web runtime, which only loads the active language.
 
+#### 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
@@ -213,3 +305,3 @@
 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.
 
@@ -238,3 +330,3 @@ In the below example we are defining two messages: one that accepts a single parameter, and one that accepts a 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/
 
@@ -262,3 +354,3 @@ ## Overriding the Locale
 
-[`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
@@ -320,4 +412,4 @@ [mdn intl docs]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
 
-[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
 
@@ -462,3 +554,3 @@ ## Configuration
 
-[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
@@ -640,2 +732,13 @@
 
+#### 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/
@@ -642,0 +745,0 @@

No alert changes

Improved metrics

Total package byte prevSize

40934

8.05%

Number of lines in readme file

828

14.21%

Dependency changes

• Updated

  @vocab/core@^1.6.4