Merge pull request #46 from xiCO2k/fix/add-support-for-common-js

fix: Add support for CommonJS 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,23 @@ export function isLoaded(lang?: string): boolean {
   return loaded.some((row) => row.lang.replace(/[-_]/g, '-') === lang.replace(/[-_]/g, '-'))
 }
 
+/**
+ * Loads the language async.
+ */
+function loadLanguage(lang: string, dashLangTry: boolean = false): void {
+  const loadedLang: LanguageInterface = loaded.find((row) => row.lang === lang)
+
+  if (loadedLang) {
+    setLanguage(loadedLang)
+
+    return
+  }
+
+  const { default: messages } = resolveLang(options.resolve, lang)
+
+  applyLanguage(lang, messages, dashLangTry, loadLanguage)
+}
+
 /**
  * Loads the language file.
  */
@@ -51,23 +69,37 @@ export function loadLanguageAsync(lang: string, dashLangTry = false): Promise<st
     return Promise.resolve(setLanguage(loadedLang))
   }
 
-  return resolveLang(options.resolve, lang).then(({ default: messages }) => {
-    if (Object.keys(messages).length < 1) {
-      if (/[-_]/g.test(lang) && !dashLangTry) {
-        return loadLanguageAsync(
-          lang.replace(/[-_]/g, (char) => (char === '-' ? '_' : '-')),
-          true
-        )
-      }
-      if (lang !== options.fallbackLang) {
-        return loadLanguageAsync(options.fallbackLang)
-      }
+  return resolveLangAsync(options.resolve, lang).then(({ default: messages }) =>
+    applyLanguage(lang, messages, dashLangTry, loadLanguageAsync)
+  )
+}
+
+/**
+ * Applies the language data and saves it to the loaded storage.
+ */
+function applyLanguage(
+  lang: string,
+  messages: { [key: string]: string },
+  dashLangTry: boolean = false,
+  callable: Function
+): string {
+  if (Object.keys(messages).length < 1) {
+    if (/[-_]/g.test(lang) && !dashLangTry) {
+      return callable(
+        lang.replace(/[-_]/g, (char) => (char === '-' ? '_' : '-')),
+        true
+      )
     }
 
-    const data: LanguageInterface = { lang, messages }
-    loaded.push(data)
-    return setLanguage(data)
-  })
+    if (lang !== options.fallbackLang) {
+      return callable(options.fallbackLang)
+    }
+  }
+
+  const data: LanguageInterface = { lang, messages }
+  loaded.push(data)
+
+  return setLanguage(data)
 }
 
 /**
@@ -142,53 +174,58 @@ function setLanguage({ lang, messages }: LanguageInterface): string {
 }
 
 /**
- * It resolves the language file or data, from direct data, require or Promise.
+ * It resolves the language file or data, from direct data, syncrone.
  */
-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
-
-  let data = avoidException(callable, lang)
+function resolveLang(
+  callable: Function,
+  lang: string,
+  data: { [key: string]: string } = {}
+): LanguageJsonFileInterface {
+  if (!Object.keys(data).length) {
+    data = avoidException(callable, lang)
+  }
 
-  if (data instanceof Promise) {
-    if (hasPhpTranslations) {
-      const phpLang = await avoidExceptionOnPromise(callable(`php_${lang}`))
-      const jsonLang = await avoidExceptionOnPromise(data)
-
-      return new Promise((resolve) =>
-        resolve({
-          default: {
-            ...phpLang,
-            ...jsonLang
-          }
-        })
-      )
+  if (hasPhpTranslations(isServer)) {
+    return {
+      default: {
+        ...data,
+        ...avoidException(callable, `php_${lang}`)
+      }
     }
+  }
 
-    return new Promise(async (resolve) =>
-      resolve({
-        default: await avoidExceptionOnPromise(data)
-      })
-    )
+  return { default: data }
+}
+
+/**
+ * It resolves the language file or data, from direct data, require or Promise.
+ */
+async function resolveLangAsync(callable: Function, lang: string): Promise<LanguageJsonFileInterface> {
+  let data = avoidException(callable, lang)
+
+  if (!(data instanceof Promise)) {
+    return resolveLang(callable, lang, data)
   }
 
-  if (hasPhpTranslations) {
+  if (hasPhpTranslations(isServer)) {
+    const phpLang = await avoidExceptionOnPromise(callable(`php_${lang}`))
+    const jsonLang = await avoidExceptionOnPromise(data)
+
     return new Promise((resolve) =>
       resolve({
         default: {
-          ...data,
-          ...avoidException(callable, `php_${lang}`)
+          ...phpLang,
+          ...jsonLang
         }
       })
     )
   }
 
-  return new Promise((resolve) => resolve({ default: data }))
+  return new Promise(async (resolve) =>
+    resolve({
+      default: await avoidExceptionOnPromise(data)
+    })
+  )
 }
 
 /**
@@ -235,6 +272,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": [