feat: separate all locales into separate files for better tree shaking

- previous code was using dynamic imports for every locales but that approach wasn't tree shakable, this new approach is requiring the user to import themselve the locale(s) that they want and is now entirely tree shakable

Author: ghiscoding

.eslintrc.json

@@ -40,6 +40,7 @@
       }
     ],
     "node/no-extraneous-require": "off",
+    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
     "node/no-unpublished-require": "off",
     "node/no-unsupported-features/es-syntax": "off",
     "prefer-destructuring": "off",

demo/src/examples/example09.ts

@@ -1,5 +1,12 @@
 import { MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla';
 
+// 1. load every locale individually
+// import 'multiple-select-vanilla/dist/locales/multiple-select-fr-FR';
+// import 'multiple-select-vanilla/dist/locales/multiple-select-es-ES';
+
+// 2. or load all locales at once
+import 'multiple-select-vanilla/dist/multiple-select-all-locales';
+
 export default class Example {
   ms1?: MultipleSelectInstance;
   ms2?: MultipleSelectInstance;
@@ -11,7 +18,7 @@ export default class Example {
     }) as EventListener);
 
     this.ms1 = multipleSelect(elm) as MultipleSelectInstance;
-    this.ms2 = multipleSelect('#select') as MultipleSelectInstance;
+    this.ms2 = multipleSelect('#select', { showOkButton: true }) as MultipleSelectInstance;
   }
 
   unmount() {

lib/build-prod.mjs

@@ -0,0 +1,60 @@
+import { buildSync } from 'esbuild';
+import glob from 'glob';
+
+const buildFormats = ['cjs', 'esm'];
+const localeFiles = glob.sync('src/locales/**/*.ts');
+const localeEntryPoints = [];
+
+for (const format of buildFormats) {
+  // multiple-select.js
+  runBuild({ format, outfile: `dist/${format}/multiple-select.js` });
+  // runBuild({ format, outfile: `dist/multiple-select.${format === 'esm' ? 'mjs' : 'cjs'}` });
+}
+
+// build all locales
+for (const localeFile of localeFiles) {
+  // eslint-disable-next-line no-unused-vars
+  const [_, locale] = localeFile.match(/multiple-select-(.*)\.ts$/) || [];
+  if (locale && locale.length === 5) {
+    localeEntryPoints.push(`src/locales/multiple-select-${locale}.ts`);
+    runBuild({
+      entryPoints: [`src/locales/multiple-select-${locale}.ts`],
+      format: 'iife',
+      outfile: `dist/locales/multiple-select-${locale}.js`,
+    });
+  }
+}
+
+// also merge all Locales into a single file "multiple-select-all-locales.js"
+runBuild({
+  entryPoints: ['./src/locales/all-locales-index.ts'],
+  format: 'iife',
+  outfile: `dist/multiple-select-all-locales.js`,
+});
+
+// finally, create a regular bundle as a standalone which will be accessible as MultipleSelect from the global window object
+// this file is basically a legacy alternative to import via a <script> tag
+runBuild({
+  format: 'iife',
+  globalName: 'MultipleSelect',
+  outfile: `dist/multiple-select.js`,
+});
+
+function runBuild(options) {
+  const startTime = new Date().getTime();
+  const buildOptions = {
+    ...{
+      color: true,
+      entryPoints: ['./src/index.ts'],
+      bundle: true,
+      minify: true,
+      target: 'es2020',
+      sourcemap: true,
+      logLevel: 'error',
+    },
+    ...options,
+  };
+  buildSync(buildOptions);
+  const endTime = new Date().getTime();
+  console.info(`⚡️ Built "${buildOptions.outfile}" in ${endTime - startTime}ms`);
+}

lib/build-watch.mjs

@@ -10,24 +10,37 @@ const env = process.env.NODE_ENV;
 // Start the compilation process
 runCompilation(process.env.LERNA_FILE_CHANGES.split(','));
 
-function runBuild() {
+function runBuild(options) {
   const startTime = new Date().getTime();
-  buildSync({
-    color: true,
-    entryPoints: ['./src/index.ts'],
-    bundle: true,
-    minify: env === 'production',
-    format: 'esm',
-    target: 'es2020',
-    sourcemap: false,
-    logLevel: 'error',
-    // outfile: env === 'production' ? './dist/multiple-select.min.js' : './dist/multiple-select.js',
-    outfile: 'dist/esm/multiple-select.js',
-  });
+  const buildOptions = {
+    ...{
+      color: true,
+      entryPoints: ['./src/index.ts'],
+      bundle: true,
+      minify: env === 'production',
+      format: 'esm',
+      target: 'es2020',
+      sourcemap: false,
+      logLevel: 'error',
+      // outfile: env === 'production' ? './dist/multiple-select.min.js' : './dist/multiple-select.js',
+      outfile: 'dist/esm/multiple-select.js',
+    },
+    ...options,
+  };
+  buildSync(buildOptions);
   const endTime = new Date().getTime();
   console.info(`⚡️ Built in ${endTime - startTime}ms`);
 }
 
+function runLocaleBuild() {
+  // merge all Locales into a single file "multiple-select-all-locales.js"
+  runBuild({
+    entryPoints: ['./src/locales/all-locales-index.ts'],
+    format: 'iife',
+    outfile: `dist/multiple-select-all-locales.js`,
+  });
+}
+
 async function runCompilation(changedFiles) {
   let tsLogged = false;
   let sassLogged = false;
@@ -42,7 +55,11 @@ async function runCompilation(changedFiles) {
         console.log('TypeScript file changes detected');
         tsLogged = true;
       }
-      runBuild();
+      if (changedFile.includes('locales')) {
+        runLocaleBuild();
+      } else {
+        runBuild();
+      }
       exec('pnpm run build:types', () => {});
     } else if (extension === '.scss') {
       if (!sassLogged) {

lib/package.json

@@ -38,11 +38,13 @@
   },
   "scripts": {
     "clean": "rimraf dist",
-    "build": "cross-env NODE_ENV=production pnpm build:web && pnpm build:cjs && pnpm build:esm && pnpm build:types:prod",
+    "build": "pnpm build:all && pnpm build:types:prod",
     "postbuild": "run-s sass:build sass:copy --npm-path pnpm",
-    "dev:init": "pnpm sass:build && pnpm sass:copy && pnpm build:types && pnpm build:esm",
+    "dev:init": "pnpm sass:build && pnpm build:locales && pnpm sass:copy && pnpm build:types && pnpm build:esm",
+    "build:all": "node build-prod.mjs && pnpm build:types:prod",
     "build:watch": "cross-env NODE_ENV='development' node build-watch.mjs",
-    "build:web": "esbuild src/index.ts --bundle --minify --format=iife --target=es2018 --global-name=MultipleSelect --outfile=dist/multiple-select.min.js",
+    "build:locales": "esbuild src/locales/all-locales-index.ts --bundle --minify --format=iife --target=es2018 --sourcemap --outfile=dist/multiple-select-all-locales.js",
+    "build:web": "esbuild src/index.ts --bundle --minify --format=iife --target=es2018 --global-name=MultipleSelect --sourcemap --outfile=dist/multiple-select.min.js",
     "build:cjs": "esbuild src/index.ts --bundle --minify --format=cjs --target=es2018 --outfile=dist/cjs/multiple-select.js",
     "build:esm": "esbuild src/index.ts --bundle --minify --format=esm --target=es2018 --outfile=dist/esm/multiple-select.js",
     "build:types": "tsc --emitDeclarationOnly --incremental --declarationMap false --outDir dist/types",
@@ -59,6 +61,7 @@
     "cssnano": "^5.1.15",
     "esbuild": "^0.17.9",
     "fs-extra": "^11.1.0",
+    "glob": "^8.1.0",
     "npm-run-all2": "^6.0.4",
     "postcss": "^8.4.21",
     "postcss-cli": "^10.1.0",

lib/src/MultipleSelectInstance.ts

@@ -15,7 +15,7 @@ import {
 } from './utils/domUtils';
 import { BindingEventService, VirtualScroll } from './services';
 import { MultipleSelectOption } from './interfaces/multipleSelectOption.interface';
-import { OptGroupRowData, OptionRowData } from './interfaces';
+import { MultipleSelectLocales, OptGroupRowData, OptionRowData } from './interfaces';
 
 export class MultipleSelectInstance {
   protected _bindEventService: BindingEventService;
@@ -48,6 +48,7 @@ export class MultipleSelectInstance {
   protected updateDataStart?: number;
   protected updateDataEnd?: number;
   protected virtualScroll?: VirtualScroll | null;
+  locales: MultipleSelectLocales = {};
 
   constructor(
     protected elm: HTMLSelectElement,
@@ -105,8 +106,7 @@ export class MultipleSelectInstance {
 
   protected async initLocale() {
     if (this.options.locale) {
-      const importedLocale = await import(`./locales/multiple-select-${this.options.locale}.js`);
-      const locales = importedLocale?.default ?? importedLocale;
+      const locales = window.multipleSelect.locales;
       const parts = this.options.locale.split(/-|_/);
 
       parts[0] = parts[0].toLowerCase();
@@ -120,6 +120,10 @@ export class MultipleSelectInstance {
         Object.assign(this.options, locales[parts.join('-')]);
       } else if (locales[parts[0]]) {
         Object.assign(this.options, locales[parts[0]]);
+      } else {
+        throw new Error(
+          `[multiple-select-vanilla] invalid locales "${this.options.locale}", make sure to import it before using it`
+        );
       }
     }
   }

lib/src/constants.ts

@@ -1,4 +1,5 @@
 import { MultipleSelectOption } from './interfaces';
+import English from './locales/multiple-select-en-US';
 
 const BLOCK_ROWS = 50;
 const CLUSTER_BLOCKS = 4;
@@ -72,14 +73,6 @@ const DEFAULTS: Partial<MultipleSelectOption> = {
   onDestroyed: () => false,
 };
 
-const EN = {
-  formatOkButton: () => 'OK',
-  formatSelectAll: () => '[Select all]',
-  formatAllSelected: () => 'All selected',
-  formatCountSelected: (count: number, total: number) => `${count} of ${total} selected`,
-  formatNoMatchesFound: () => 'No matches found',
-};
-
 const METHODS = [
   'init',
   'getOptions',
@@ -101,17 +94,13 @@ const METHODS = [
   'destroy',
 ];
 
-Object.assign(DEFAULTS, EN);
+Object.assign(DEFAULTS, English!['en-US']); // load English as default locale
 
 const Constants = {
   BLOCK_ROWS,
   CLUSTER_BLOCKS,
   DEFAULTS,
   METHODS,
-  LOCALES: {
-    en: EN,
-    'en-US': EN,
-  },
 };
 
 export default Constants;

lib/src/index.ts

@@ -1,4 +1,3 @@
-export * from './locales';
 export * from './services';
 export * from './constants';
 export * from './interfaces';

lib/src/interfaces/interfaces.ts

@@ -22,3 +22,24 @@ export interface VirtualScrollOption {
   callback: () => void;
   sanitizer?: (dirtyHtml: string) => string;
 }
+
+export interface MultipleSelectLocale {
+  /** Customize the formatted text "All Selected" when using custom locale. */
+  formatAllSelected(): string;
+
+  /** Customize the formatted text "x of y selected" when using custom locale. */
+  formatCountSelected(selectedCount: number, totalCount: number): string;
+
+  /** For the "No Matches Found" text when nothing is found while filtering the dropdown */
+  formatNoMatchesFound(): string;
+
+  /** Customize the formatted text "OK" showing at the bottom of the drop. */
+  formatOkButton(): string;
+
+  /** For the "Select All" checkbox text */
+  formatSelectAll(): string;
+}
+
+export interface MultipleSelectLocales {
+  [localeKey: string]: MultipleSelectLocale;
+}

lib/src/interfaces/multipleSelectOption.interface.ts

@@ -1,6 +1,6 @@
-import { OptGroupRowData, OptionRowData } from './interfaces';
+import { MultipleSelectLocale, OptGroupRowData, OptionRowData } from './interfaces';
 
-export interface MultipleSelectOption {
+export interface MultipleSelectOption extends MultipleSelectLocale {
   /** @deprecated @alias `displayTitle` Add a title. By default this option is set to false. */
   addTitle?: boolean;
 
@@ -134,21 +134,6 @@ export interface MultipleSelectOption {
   /** Customize the filter method, for example we use startWith */
   customFilter: (normalizedText: string, normalizedOriginalText: string, text: string, originalText: string) => boolean;
 
-  /** Customize the formatted text "All Selected" when using custom locale. */
-  formatAllSelected: () => string;
-
-  /** Customize the formatted text "x of y selected" when using custom locale. */
-  formatCountSelected: (selectedCount: number, totalCount: number) => string;
-
-  /** For the "No Matches Found" text when nothing is found while filtering the dropdown */
-  formatNoMatchesFound: () => string;
-
-  /** Customize the formatted text "OK" showing at the bottom of the drop. */
-  formatOkButton: () => string;
-
-  /** For the "Select All" checkbox text */
-  formatSelectAll: () => string;
-
   /** The item styler function, return style string to custom the item style such as background: red. The function take one parameter: value. */
   styler: (value: OptionRowData | OptGroupRowData) => string | boolean | null;