feat: Add support for commonjs builds and module builds.

Author: xiCO2k

README.md

@@ -54,7 +54,7 @@ For Server Side Rendering the resolve method should not receive a `Promise` and
 .use(i18nVue, {
     lang: 'pt',
     resolve: lang => {
-        const langs = import.meta.globEager(`../../lang/${lang}.json`);
+        const langs = import.meta.globEager('../../lang/*.json');
         return langs[`../../lang/${lang}.json`].default;
     },
 })

package-lock.json

@@ -14,29 +14,34 @@
   "repository": "https://github.com/xico2k/laravel-vue-i18n",
   "license": "MIT",
   "description": "allows to connect your `Laravel` Framework localization files with `Vue`.",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/index.js",
   "scripts": {
     "watch": "tsc --watch",
     "test": "jest",
     "coverage": "jest --coverage",
     "lint": "prettier -c \"src/**/*.(ts|js|vue)\" --write",
     "build:plugins": "tsc -p tsconfig.plugins.json",
     "build:client": "tsc -p tsconfig.json",
-    "build": "npm run build:plugins && npm run build:client",
+    "build:cjs": "tsc -p tsconfig.commonjs.json && babel dist/cjs/utils/has-php-translations.js --out-file dist/cjs/utils/has-php-translations.js",
+    "build": "npm run build:plugins && npm run build:client && npm run build:cjs",
     "prepare": "npm run build",
     "postpublish": "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.18.2",
+    "@babel/cli": "^7.18.9",
+    "@babel/core": "^7.18.9",
+    "@babel/preset-env": "^7.18.9",
     "@types/jest": "^27.4.1",
     "@vue/babel-plugin-jsx": "^1.1.1",
-    "@vue/test-utils": "^2.0.0",
+    "@vue/test-utils": "^2.0.2",
     "babel-jest": "^27.5.1",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "jest": "^27.5.1",
     "prettier": "^2.7.1",
+    "source-map": "^0.7.4",
     "ts-jest": "^27.1.3",
-    "ts-loader": "^9.3.0",
+    "ts-loader": "^9.3.1",
     "typescript": "^4.7.4"
   },
   "dependencies": {

package.json

@@ -5,6 +5,7 @@ import { LanguageJsonFileInterface } from './interfaces/language-json-file'
 import { ReplacementsInterface } from './interfaces/replacements'
 import { choose } from './pluralization'
 import { avoidExceptionOnPromise, avoidException } from './utils/avoid-exceptions'
+import { hasPhpTranslations } from './utils/has-php-translations'
 
 const isServer = typeof window === 'undefined'
 
@@ -41,6 +42,21 @@ export function isLoaded(lang?: string): boolean {
   return loaded.some((row) => row.lang.replace(/[-_]/g, '-') === lang.replace(/[-_]/g, '-'))
 }
 
+function loadLanguage(lang: string): void {
+  const loadedLang: LanguageInterface = loaded.find((row) => row.lang === lang)
+
+  if (loadedLang) {
+    setLanguage(loadedLang);
+
+    return;
+  }
+
+  const { default: messages } = resolveLang(options.resolve, lang);
+  const data: LanguageInterface = { lang, messages }
+  loaded.push(data)
+  setLanguage(data)
+}
+
 /**
  * Loads the language file.
  */
@@ -51,7 +67,7 @@ export function loadLanguageAsync(lang: string, dashLangTry = false): Promise<st
     return Promise.resolve(setLanguage(loadedLang))
   }
 
-  return resolveLang(options.resolve, lang).then(({ default: messages }) => {
+  return resolveLangAsync(options.resolve, lang).then(({ default: messages }) => {
     if (Object.keys(messages).length < 1) {
       if (/[-_]/g.test(lang) && !dashLangTry) {
         return loadLanguageAsync(
@@ -141,22 +157,29 @@ function setLanguage({ lang, messages }: LanguageInterface): string {
   return lang
 }
 
+function resolveLang(callable: Function, lang: string, data: { [key: string]: string } = {}): LanguageJsonFileInterface {
+  if (! Object.keys(data).length) {
+    data = avoidException(callable, lang)
+  }
+
+  if (hasPhpTranslations(isServer)) {
+    return { default: {
+      ...data,
+      ...avoidException(callable, `php_${lang}`)
+    } }
+  }
+
+  return { default: data }
+}
+
 /**
  * It resolves the language file or data, from direct data, require or Promise.
  */
-async function resolveLang(callable: Function, lang: string): Promise<LanguageJsonFileInterface> {
-  const hasPhpTranslations =
-    typeof process !== 'undefined' && process.env?.LARAVEL_VUE_I18N_HAS_PHP
-      ? true
-      : /** @ts-ignore */
-      typeof import.meta.env !== 'undefined' && import.meta.env.VITE_LARAVEL_VUE_I18N_HAS_PHP
-      ? true
-      : false
-
+async function resolveLangAsync(callable: Function, lang: string): Promise<LanguageJsonFileInterface> {
   let data = avoidException(callable, lang)
 
   if (data instanceof Promise) {
-    if (hasPhpTranslations) {
+    if (hasPhpTranslations(isServer)) {
       const phpLang = await avoidExceptionOnPromise(callable(`php_${lang}`))
       const jsonLang = await avoidExceptionOnPromise(data)
 
@@ -177,18 +200,7 @@ async function resolveLang(callable: Function, lang: string): Promise<LanguageJs
     )
   }
 
-  if (hasPhpTranslations) {
-    return new Promise((resolve) =>
-      resolve({
-        default: {
-          ...data,
-          ...avoidException(callable, `php_${lang}`)
-        }
-      })
-    )
-  }
-
-  return new Promise((resolve) => resolve({ default: data }))
+  return resolveLang(callable, lang, data);
 }
 
 /**
@@ -235,6 +247,11 @@ export const i18nVue: Plugin = {
     app.config.globalProperties.$t = (key: string, replacements: ReplacementsInterface) => trans(key, replacements)
     app.config.globalProperties.$tChoice = (key: string, number: number, replacements: ReplacementsInterface) =>
       transChoice(key, number, replacements)
-    loadLanguageAsync(options.lang || options.fallbackLang)
+
+    if (isServer) {
+      loadLanguage(options.lang || options.fallbackLang)
+    } else {
+      loadLanguageAsync(options.lang || options.fallbackLang)
+    }
   }
 }

src/index.ts

@@ -0,0 +1,12 @@
+export function hasPhpTranslations(isServer: boolean): boolean {
+  return isServer || checkProcessEnv() || checkImportMeta();
+}
+
+function checkProcessEnv(): boolean {
+  return typeof process !== 'undefined' && process.env?.LARAVEL_VUE_I18N_HAS_PHP ? true : false;
+}
+
+function checkImportMeta(): boolean {
+  /** @ts-ignore */
+  return import.meta.env.VITE_LARAVEL_VUE_I18N_HAS_PHP ? true : false;
+}

src/utils/has-php-translations.ts

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2015",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipDefaultLibCheck": true,
+    "outDir": "dist/cjs"
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "src/vite.ts",
+    "src/mix.ts",
+    "src/loader.ts",
+  ],
+  "rules": {
+    "no-console": false
+  }
+}

tsconfig.commonjs.json

@@ -1,8 +1,11 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
+    "target": "ES2020",
+    "module": "ES2020",
     "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "declaration": true,
+    "esModuleInterop": true,
     "outDir": "dist"
   },
   "include": [

tsconfig.json

@@ -13,7 +13,6 @@
     "esModuleInterop": true,
     "sourceMap": true,
     "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
     "skipDefaultLibCheck": true
   },
   "include": [