Adding vite vocab plugin package

[DanDroryAu]

Note: This PR is a 🚧 WIP 🚧 for the new experimental vite plugin for vocab.

Changes

The current JavaScript ecosystem is moving towards using Vite as the bundler more often. For this reason Vocab is experimenting with supporting the Vite system.

This pr adds a new experimental vite plugin to vocab. This plugin transforms compiled vocab index files into files that handle code splitting for the translations.

It automatically chunks these files into their respective language chunks. This behaviour can be turned off via the plugin config.

Usage

Default usage

import { defineConfig } from 'vite';
import vitePluginVocab from '@vocab/vite';
import configFile from './vocab.config.cjs'; // Your local vocab config

export default defineConfig({
  plugins: [vitePluginVocab({
    configFile,
  });
});

Chunk combination

After investigation it is best that the chunk combination is handled by the user rather than the plugin. Changing the config via the config lifecycle may have unintended side-effects.

For this reason the decision has been made that end users should handle the chunking strategy. If you want to combine the language chunks from vocab you can use the provided helper function.

To use the plugins chunk combination simply import the createVocabChunks function and use it in the manualChunks option of your vite config.

// vite.config.js
import { defineConfig } from 'vite';
import {
  vocabPluginVite,
  createVocabChunks
} from '@vocab/vite';
import configFile from './vocab.config.cjs';

export default defineConfig({
  plugins: [
    vocabPluginVite({
      configFile
    })
  ],
  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;
          }
        }
      }
    }
  }
});