@vocab/cli - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

CHANGELOG.md

 # @vocab/cli
 
+## 0.0.8
+
+### Patch Changes
+
+- [`ed6cf40`](https://github.com/seek-oss/vocab/commit/ed6cf408973f2e9c4d07a71fcb52f40294ebaf65) [#13](https://github.com/seek-oss/vocab/pull/13) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add validation script for identifying missing keys
+
+* [`b5a5a05`](https://github.com/seek-oss/vocab/commit/b5a5a05a5bb87b48e6e9160af75f555728143ea2) [#15](https://github.com/seek-oss/vocab/pull/15) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Added watch mode to generate-types
+
+* Updated dependencies [[`08de30d`](https://github.com/seek-oss/vocab/commit/08de30d338c2a5ebdcf14da7c736dddf22e7ca9e), [`ed6cf40`](https://github.com/seek-oss/vocab/commit/ed6cf408973f2e9c4d07a71fcb52f40294ebaf65), [`26b52f4`](https://github.com/seek-oss/vocab/commit/26b52f4878ded440841e08c858bdc9e685500c2a), [`b5a5a05`](https://github.com/seek-oss/vocab/commit/b5a5a05a5bb87b48e6e9160af75f555728143ea2)]:
+  - @vocab/core@0.0.3
+  - @vocab/phrase@0.0.3
+
 ## 0.0.7
@@ -4,0 +16,0 @@

dist/vocab-cli.cjs.dev.js

@@ -50,5 +50,24 @@ 'use strict';
   command: 'generate-types',
+  builder: () => yargs__default['default'].options({
+    watch: {
+      type: 'boolean',
+      default: false
+    }
+  }),
+  handler: async ({
+    watch
+  }) => {
+    await core.generateAllTypes({
+      watch
+    }, config);
+  }
+}).command({
+  command: 'validate',
   handler: async () => {
-    await core.generateTypes(config);
+    const valid = await core.validate(config);
+
+    if (!valid) {
+      throw new Error('Project invalid');
+    }
   }
 }).help().wrap(72).argv;

dist/vocab-cli.cjs.prod.js

@@ -50,5 +50,24 @@ 'use strict';
   command: 'generate-types',
+  builder: () => yargs__default['default'].options({
+    watch: {
+      type: 'boolean',
+      default: false
+    }
+  }),
+  handler: async ({
+    watch
+  }) => {
+    await core.generateAllTypes({
+      watch
+    }, config);
+  }
+}).command({
+  command: 'validate',
   handler: async () => {
-    await core.generateTypes(config);
+    const valid = await core.validate(config);
+
+    if (!valid) {
+      throw new Error('Project invalid');
+    }
   }
 }).help().wrap(72).argv;

dist/vocab-cli.esm.js

 import { push, pull } from '@vocab/phrase';
-import { resolveConfig, generateTypes } from '@vocab/core';
+import { resolveConfig, generateAllTypes, validate } from '@vocab/core';
 import yargs from 'yargs';
@@ -43,5 +43,24 @@ import envCi from 'env-ci';
   command: 'generate-types',
+  builder: () => yargs.options({
+    watch: {
+      type: 'boolean',
+      default: false
+    }
+  }),
+  handler: async ({
+    watch
+  }) => {
+    await generateAllTypes({
+      watch
+    }, config);
+  }
+}).command({
+  command: 'validate',
   handler: async () => {
-    await generateTypes(config);
+    const valid = await validate(config);
+
+    if (!valid) {
+      throw new Error('Project invalid');
+    }
   }
 }).help().wrap(72).argv;

package.json

 {
   "name": "@vocab/cli",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "dist/vocab-cli.cjs.js",
@@ -13,4 +13,4 @@ "module": "dist/vocab-cli.esm.js",
     "@types/env-ci": "^3.1.0",
-    "@vocab/core": "^0.0.2",
-    "@vocab/phrase": "^0.0.2",
+    "@vocab/core": "^0.0.3",
+    "@vocab/phrase": "^0.0.3",
     "env-ci": "^5.0.2",
@@ -17,0 +17,0 @@ "fast-glob": "^3.2.4",

README.md

 # Vocab
 
-Vocab is a strongly-typed internationalisation framework for React
+Vocab is a strongly typed internationalisation framework for React.
+
+## Getting started
+
+### Step 1: Install Dependencies
+
+Vocab is a monorepo with different packages you can install depending on your usage, the below list will get you started using the cli, React and webpack integrations.
+
+```bash
+$ npm i --save @vocab/cli @vocab/react @vocab/webpack
+```
+
+### Step 2: Setup Webpack plugin
+
+Before starting to write code you'll need to setup webpack to understand how to use `translation.json` files.
+
+This is done using the **VocabWebpackPlugin**.
+
+**webpack.config.js**
+
+```js
+const VocabWebpackPlugin = require('@vocab/webpack').default;
+
+module.exports = {
+  ...,
+  plugins: [new VocabWebpackPlugin({})]
+}
+```
+
+### Step 3: Configure Vocab
+
+You can configure Vocab directly when calling the API or via a `vocab.config.js` file.
+
+In this example we've configured two languages, English and French, where our initial `translation.json` files will use English.
+
+**vocab.config.js**
+
+```js
+module.exports = {
+  devLanguage: 'en',
+  languages: [{ name: 'en' }, { name: 'fr' }]
+};
+```
+
+### Step 3: Set the language using the React Provider
+
+Vocab doesn't tell you how to select or change your language. You just need to tell Vocab what language to use.
+
+**Note:** Using methods discussed later we'll make sure the first language is loaded on page load. However, after this changing languages may then lead to a period of no translations as Vocab downloads the new language's translations.
+
+**src/App.tsx**
+
+```tsx
+import { TranslationsProvider } from '@vocab/react';
+
+function App({ children }) {
+  return (
+    <TranslationsProvider language={language}>
+      {children}
+    </TranslationsProvider>
+  );
+}
+```
+
+### Step 4: Create initial values and use them
+
+A translation file is a JSON file consisting of a flat structure of keys, each with a message and an optional description.
+
+**./translations.json**
+
+```json
+{
+  "my key": {
+    "message": "Hello from Vocab",
+    "description": "An optional description to help when translating"
+  }
+}
+```
+
+You can then import these translations into your React components. Translations can be used by calling the `t` function returned by `useTranslation`.
+
+**./MyComponent.tsx**
+
+```tsx
+import { useTranslation } from '@vocab/react';
+import translations from './translations.json';
+
+function MyComponent({ children }) {
+  const { t } = useTranslation(translations);
+  return <div>{t('my key')}</div>;
+}
+```
+
+### Step 5: Create translations
+
+So far your app will run, but you're missing any translations other than the initial language. The below file can be created manually; however, you can also integrate with a remote translation platform to push and pull translations automatically.
+
+**./\_\_translations\_\_/translations.fr-FR.json**
+
+```json
+{
+  "my key": {
+    "message": "Bonjour de Vocab",
+    "decription": "An optional description to help when translating"
+  }
+}
+```
+
+### Step 6: 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.
+
+This is where `getChunkName` can be used to retrieve the Webpack chunk used for a specific language.
+
+For example here is a Server Render function that would add the current language chunk to [Loadable component's ChunkExtractor](https://loadable-components.com/docs/api-loadable-server/#chunkextractor).
+
+**src/render.tsx**
+
+```tsx
+import { getChunkName } from '@vocab/webpack/chunk-name';
+
+// ...
+
+const chunkName = getChunkName(language);
+
+const extractor = new ChunkExtractor();
+
+extractor.addChunk(chunkName);
+```
+
+## Configuration
+
+Configuration can either be passed into the Node API directly or be gathered from the nearest _vocab.config.js_ file.
+
+**vocab.config.js**
+
+```js
+module.exports = {
+  devLanguage: 'en',
+  languages: [
+    { name: 'en' },
+    { name: 'en-AU', extends: 'en' },
+    { name: 'en-US', extends: 'en' },
+    { name: 'fr-FR' }
+  ]
+};
+```
+
+## Generate Types
+
+Vocab generates custom `translation.json.d.ts` files that give your React components strongly typed translations to work with.
+
+To generate these types run:
+
+```bash
+$ vocab generate-types
+```
+
+## External translation tooling
+
+Vocab can be used to syncronize your translations with translations from a remote translation platform.
+
+| Platform                                     | Environment Variables               |
+| -------------------------------------------- | ----------------------------------- |
+| [Phrase](https://developers.phrase.com/api/) | PHRASE_PROJECT_ID, PHRASE_API_TOKEN |
+
+```bash
+$ vocab push --branch my-branch
+$ vocab pull --branch my-branch
+```
+
+### License
+
+MIT.

src/index.ts

 /* eslint-disable no-console */
 import type { UserConfig } from '@vocab/types';
 import { pull, push } from '@vocab/phrase';
-import { resolveConfig, generateTypes } from '@vocab/core';
+import { resolveConfig, generateAllTypes, validate } from '@vocab/core';
 import yargs from 'yargs';
@@ -46,4 +46,18 @@
     command: 'generate-types',
+    builder: () =>
+      yargs.options({
+        watch: { type: 'boolean', default: false },
+      }),
+    handler: async ({ watch }) => {
+      await generateAllTypes({ watch }, config!);
+    },
+  })
+  .command({
+    command: 'validate',
     handler: async () => {
-      await generateTypes(config!);
+      const valid = await validate(config!);
+
+      if (!valid) {
+        throw new Error('Project invalid');
+      }
     },
@@ -50,0 +64,0 @@ })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16594

increased by72.14%

Lines of code

264

increased by34.01%

Number of lines in readme file

177

increased by4325%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@vocab/core@0.0.3(transitive)

• + Added@vocab/phrase@0.0.3(transitive)

• + Added@vocab/types@0.0.4(transitive)

• + Addedanymatch@3.1.3(transitive)

• + Addedbinary-extensions@2.3.0(transitive)

• + Addedchokidar@3.6.0(transitive)

• + Addeddebug@4.4.0(transitive)

• + Addedfsevents@2.3.3(transitive)

• + Addedis-binary-path@2.1.0(transitive)

• + Addedms@2.1.3(transitive)

• + Addednormalize-path@3.0.0(transitive)

• + Addedreaddirp@3.6.0(transitive)

• - Removed@vocab/core@0.0.2(transitive)

• - Removed@vocab/phrase@0.0.2(transitive)

• - Removed@vocab/types@0.0.3(transitive)

• Updated@vocab/core@^0.0.3

• Updated@vocab/phrase@^0.0.3