Dayjs: Locale Files as UMD or Browser Injectable Bundle

[muratgozel]

In an application where users may have or switch to different locales, locale file should be in a format that can be injected with a script tag to the DOM. Like:

<script src="/js/dayjs-locales/en.umd.js" id="dayjs-locale-en"></script>

apart from solutions like dynamic import provided by webpack.

I achieved this once by coding a precompiler which transforms each locale file to a umd bundle but it was so fragile against library updates and turned back to import all locales to main build solution.

With proper bundling, we may inject and remove locale files at runtime, easily.

[SarathSantoshDamaraju]

@muratgozel , how did you import all locales to main build works ?
I tried the same with grunt-copy and i get the following code on loading a locale file, which is just a string and unable to set the locale

! function(e, s) {
    "object" == typeof exports && "undefined" != typeof module ? module.exports = s(require("dayjs")) : "function" == typeof define && define.amd ? define(["dayjs"], s) : e.dayjs_locale_es = s(e.dayjs)
}(this, function(e) {
    "use strict";
    e = e && e.hasOwnProperty("default") ? e.default : e;
    var s = {
        name: "es",
        monthsShort: "ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_"),
        weekdays: "domingo_lunes_martes_miércoles_jueves_viernes_sábado".split("_"),
        weekdaysShort: "dom._lun._mar._mié._jue._vie._sáb.".split("_"),
        weekdaysMin: "do_lu_ma_mi_ju_vi_sá".split("_"),
        months: "Enero_Febrero_Marzo_Abril_Mayo_Junio_Julio_Agosto_Septiembre_Octubre_Noviembre_Diciembre".split("_"),
        weekStart: 1,
        formats: {
            LT: "H:mm",
            LTS: "H:mm:ss",
            L: "DD/MM/YYYY",
            LL: "D [de] MMMM [de] YYYY",
            LLL: "D [de] MMMM [de] YYYY H:mm",
            LLLL: "dddd, D [de] MMMM [de] YYYY H:mm"
        },
        relativeTime: {
            future: "en %s",
            past: "hace %s",
            s: "unos segundos",
            m: "un minuto",
            mm: "%d minutos",
            h: "una hora",
            hh: "%d horas",
            d: "un día",
            dd: "%d días",
            M: "un mes",
            MM: "%d meses",
            y: "un año",
            yy: "%d años"
        },
        ordinal: function(e) {
            return e + "º"
        }
    };
    return e.locale(s, null, !0), s
});

When this executes, dayJs is available as _dayjs and throws, multiple errors while setting locale with it.

CC: @iamkun any help is appreciated

[muratgozel]

I'm not using grunt but using dayjs by importing all locales can be done in the following way.

Gather all locale files in an object:

const locales = {
  ru: require('dayjs/locale/ru'),
  tr: require('dayjs/locale/tr'),
  uk: require('dayjs/locale/uk'),
  en: require('dayjs/locale/en'),
  'en-gb': require('dayjs/locale/en-gb')
  // other locales
}

Set dayjs locale after finding user's language:

const localeObj = locales[userLocale]
dayjs(input).locale(localeObj).format('Y-m-d')

It's easy to change dayjs locale if user language preference changes.

As a result, you have all the locales in your bundle.

[iamkun]

// just import the needed locale
require('dayjs/locale/ru'); 
require('dayjs/locale/tr');
require('dayjs/locale/uk');
require('dayjs/locale/en');


// and use it 

dayjs().locale('uk')
dayjs().locale('en')

[SarathSantoshDamaraju]

Thanks folks !! Unfortunately can't use require in ember. But got a work around.

---

@iamkun
What are your viewssingle index.js for all locales, that can be used to load all locales at once while build. Assuming fallback is also provided.

ref: https://github.com/date-fns/date-fns/blob/master/src/locale/index.js

-or-

//dayjs/locale/index.js

export { default as es }from 'dayjs/locale/es';
export { default as fr } from 'dayjs/locale/fr';

// somefile.js
import * as locales from dayjs/locale;

[iamkun]

May be like this

<script src="https://unpkg.com/dayjs/locale/zh-cn"></script>
<script src="https://unpkg.com/dayjs/locale/uk"></script>
<script src="https://unpkg.com/dayjs/locale/tr"></script>


// and use it 

dayjs().locale('uk')
dayjs().locale('en')

---

a index.js file would be nice.

[SarathSantoshDamaraju]

@iamkun , If you like the index.js idea. Can I implement the same in dayjs? Ready to make a PR soon

[iamkun]

@iamkun , If you like the index.js idea. Can I implement the same in dayjs? Ready to make a PR soon

That would be nice, please!

[SarathSantoshDamaraju]

@iamkun , Adding all locales as mentioned here is increasing the bundle size by ~30kb. So, doesn't seem to be an effective way.

So, Assume I have a DayJs locale in my S3 and If i could download it through an AJAX call; how can i update it in dayJs after that ?

Moment does it.

[iamkun]

@iamkun , Adding all locales as mentioned here is increasing the bundle size by ~30kb. So, doesn't seem to be an effective way.

So, Assume I have a DayJs locale in my S3 and If i could download it through an AJAX call; how can i update it in dayJs after that ?

Moment does it.

Just download and invoke the locale file. and do dayjs.locale('uk')

[SarathSantoshDamaraju]

That was my first approach,

But i was getting cant set locale of undefined. and i Believe it is from the response locale that i get from server.
and I debugged and foundout e is undefined. and dayjs is available as _dayjs.default().

Response Locale

! function(e, s) {
    "object" == typeof exports && "undefined" != typeof module ? module.exports = s(require("dayjs")) : "function" == typeof define && define.amd ? define(["dayjs"], s) : e.dayjs_locale_es = s(e.dayjs)
}(this, function(e) {
    "use strict";
    e = e && e.hasOwnProperty("default") ? e.default : e;
    var s = {
        name: "es",
        monthsShort: "ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_"),
        weekdays: "domingo_lunes_martes_miércoles_jueves_viernes_sábado".split("_"),
        weekdaysShort: "dom._lun._mar._mié._jue._vie._sáb.".split("_"),
        weekdaysMin: "do_lu_ma_mi_ju_vi_sá".split("_"),
        months: "Enero_Febrero_Marzo_Abril_Mayo_Junio_Julio_Agosto_Septiembre_Octubre_Noviembre_Diciembre".split("_"),
        weekStart: 1,
        formats: {
            LT: "H:mm",
            LTS: "H:mm:ss",
            L: "DD/MM/YYYY",
            LL: "D [de] MMMM [de] YYYY",
            LLL: "D [de] MMMM [de] YYYY H:mm",
            LLLL: "dddd, D [de] MMMM [de] YYYY H:mm"
        },
        relativeTime: {
            future: "en %s",
            past: "hace %s",
            s: "unos segundos",
            m: "un minuto",
            mm: "%d minutos",
            h: "una hora",
            hh: "%d horas",
            d: "un día",
            dd: "%d días",
            M: "un mes",
            MM: "%d meses",
            y: "un año",
            yy: "%d años"
        },
        ordinal: function(e) {
            return e + "º"
        }
    };
    return e.locale(s, null, !0), s
});

[SarathSantoshDamaraju]

load and invoke the locale file

How do you mean invoke ?

[iamkun]

load and invoke the locale file

How do you mean invoke ?

Load this via script element https://unpkg.com/dayjs/locale/uk, then you can use dayjs.locale('uk')

var script = document.createElement('script');
script.onload = function() {
  dayjs.locale('uk')
};
script.src = "https://unpkg.com/dayjs/locale/uk";
document.head.appendChild(script);