Support different date format for locales

[princescar]

Is your feature request related to a problem? Please describe.

Right now the date format (third part) in message ignored. I want to be able to specify the format in messages, so that we can have different date display for each locales.

Describe proposed solution

Follow the ICU message spec, specify the date format in the messages, here are some examples:

Today is {date, date, short}.
Today is {date, date, long}.
Today is {date, date, ::EEEE}.
Now is {time, date, ::MMMdHm}

Describe alternatives you've considered

N/A

Additional context

We may want a generic solution, as numbers may also need this, and more formatters such as durations could be introduced in the future.

[timofei-iatsenko]

My thoughts and summary from a discord discussion:

Links
https://messageformat.github.io/messageformat/api/date-skeleton/

We can implement it in the lingui way without pulling this library into the bundle, by leveraging theirs getDateFormatterSource function on the catalogs compile step.

So ideally it should looks like that:

• during catalog compilation we found all {date, date, short} expressions and use messageformat utils to convert format into Intl.DateTimeFormat options. For some reason messageformat is not exporting getDateFormatOptions function, but it exports getDateFormatterSource which is printing the whole function into string. We can incorporate this string into the function compiled catalog.

  https://github.com/messageformat/messageformat/blob/main/mf1/packages/date-skeleton/src/get-date-formatter.ts#L85-L105

  export function getDateFormatterSource(
    locales: string | string[],
    tokens: string | DateToken[],
    timeZone?: string | ((err: DateFormatError) => void),
    onError?: (err: DateFormatError) => void
  ) {
    if (typeof tokens === 'string') tokens = parseDateTokens(tokens);
    if (typeof timeZone === 'function') {
      onError = timeZone;
      timeZone = undefined;
    }
    const opt = getDateFormatOptions(tokens, timeZone, onError);
    const lines = [
      `(function() {`,
      `var opt = ${JSON.stringify(opt)};`,
      `var dtf = new Intl.DateTimeFormat(${JSON.stringify(locales)}, opt);`,
      `return function(value) { return dtf.format(value); }`
    ];
  
    return lines.join('\n  ') + '\n})()';
  }

• Update the runtime code to use options / or dateFormatterSource directly from the compiled catalog.

@princescar I can prepare a rough PoC, would you be able to take it from there and finish? Defenetely this feature not a n1 in my priority list.

[timofei-iatsenko]

Prepared a PR here #2117

[princescar]

Thanks, let me try to take it from here.

[timofei-iatsenko]

@princescar it turned out that it wasn't very complicated, so I implemented it completely. Would appreciate it if you test the build from branch in your local project.

[princescar]

Great, will test and get back.