quasar/src/plugins/lang/Lang.js

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

import { createReactivePlugin } from '../../utils/private.create/create.js'

import defaultLang from '../../../lang/en-US.js'

function getLocale() {
  if (__QUASAR_SSR_SERVER__) return

  const val =
    Array.isArray(navigator.languages) === true &&
    navigator.languages.length !== 0
      ? navigator.languages[0]
      : navigator.language

  if (typeof val === 'string') {
    return val
      .split(/[-_]/)
      .map((v, i) =>
        i === 0
          ? v.toLowerCase()
          : i > 1 || v.length < 4
            ? v.toUpperCase()
            : v[0].toUpperCase() + v.slice(1).toLowerCase()
      )
      .join('-')
  }
}

const Plugin = createReactivePlugin(
  {
    __qLang: {}
  },
  {
    // props: object
    // __langConfig: object

    getLocale,

    // oxlint-disable-next-line default-param-last
    set(langObject = defaultLang, ssrContext) {
      const lang = {
        ...langObject,
        rtl: langObject.rtl === true,
        getLocale
      }

      if (__QUASAR_SSR_SERVER__) {
        if (ssrContext === void 0) {
          console.error(
            'SSR ERROR: second param required: Lang.set(lang, ssrContext)'
          )
          return
        }

        lang.set = ssrContext.$q.lang.set

        if (
          ssrContext.$q.config.lang === void 0 ||
          ssrContext.$q.config.lang.noHtmlAttrs !== true
        ) {
          const dir = lang.rtl === true ? 'rtl' : 'ltr'
          const attrs = `lang=${lang.isoName} dir=${dir}`

          ssrContext._meta.htmlAttrs =
            ssrContext.__qPrevLang !== void 0
              ? ssrContext._meta.htmlAttrs.replace(
                  ssrContext.__qPrevLang,
                  attrs
                )
              : attrs

          ssrContext.__qPrevLang = attrs
        }

        ssrContext.$q.lang = lang
      } else {
        lang.set = Plugin.set

        if (
          Plugin.__langConfig === void 0 ||
          Plugin.__langConfig.noHtmlAttrs !== true
        ) {
          const el = document.documentElement
          el.setAttribute('dir', lang.rtl === true ? 'rtl' : 'ltr')
          el.setAttribute('lang', lang.isoName)
        }

        Object.assign(Plugin.__qLang, lang)
      }
    },

    install({ $q, lang, ssrContext }) {
      if (__QUASAR_SSR_SERVER__) {
        const initialLang = lang || defaultLang

        $q.lang = {}
        $q.lang.set = langObject => {
          this.set(langObject, ssrContext)
        }

        $q.lang.set(initialLang)

        // one-time SSR server operation
        if (
          this.props === void 0 ||
          this.props.isoName !== initialLang.isoName
        ) {
          this.props = { ...initialLang }
        }
      } else {
        $q.lang = Plugin.__qLang
        Plugin.__langConfig = $q.config.lang

        if (this.__installed === true) {
          if (lang !== void 0) this.set(lang)
        } else {
          this.props = new Proxy(this.__qLang, {
            get() {
              return Reflect.get(...arguments)
            },

            ownKeys(target) {
              return Reflect.ownKeys(target).filter(
                key => key !== 'set' && key !== 'getLocale'
              )
            }
          })

          this.set(lang || defaultLang)
        }
      }
    }
  }
)

export default Plugin
export { defaultLang }