Formatando intervalos de tempo com Intl.RelativeTimeFormat em um projeto Angular

type RelativeTimeFormatUnit =
  | "year"
  | "years"
  | "quarter"
  | "quarters"
  | "month"
  | "months"
  | "week"
  | "weeks"
  | "day"
  | "days"
  | "hour"
  | "hours"
  | "minute"
  | "minutes"
  | "second"
  | "seconds";

always-long
há 1 minuto – "em 1 dia" – "há 2 semanas" – "em 2 meses"

auto-long
há 1 minuto – "amanhã" – "há 2 semanas" – "em 2 meses"

always-short
há 1 min. – "em 1 dia" – "há 2 sem." – "em 2 meses"

auto-short
há 1 min. – "amanhã" – "há 2 sem." – "em 2 meses"

always-narrow
há 1 min. – "em 1 dia" – "há 2 sem." – "em 2 meses"

auto-narrow
há 1 min. – "amanhã" – "há 2 sem." – "em 2 meses"

import { Pipe, PipeTransform } from '@angular/core';
import { LOCALE_ID, inject } from '@angular/core';

@Pipe({
  standalone: true,
  // -------------------------------------------------------
  // Define o Pipe como puro, ou seja, só será recalculado
  // quando as entradas mudarem.
  // Para mais detalhes:
  // https://consolelog.com.br/pipes-nativos-do-angular/
  pure: true,
  name: 'formatRelativeDate',
})
export class FormatRelativeDatePipe
  implements PipeTransform
{
  // Injeta a localização padrão da aplicação (LOCALE_ID)
  defaultLocale: string = inject(LOCALE_ID);

  // Função que será chamada pelo Angular ao usar o Pipe
  transform(date: Date, locale?: string) {
    return this.format(
      date, locale || this.defaultLocale
    );
  }

  format(date: Date, locale: string) {
    // Mapeia as constantes de milissegundos para cada
    // unidade de tempo
    const MILLISECONDS_PER = {
      YEAR: 31536000000,
      MONTH: 2592000000,
      WEEK: 604800000,
      DAY: 86400000,
      HOUR: 3600000,
      MINUTE: 60000,
      SECOND: 1000,
    };

    const now = new Date();
    // Calcula a diferença entre a data fornecida
    // e a data atual em milissegundos
    const differenceInMilliseconds =
      date.getTime() - now.getTime();

    // Calcula o valor absoluto da diferença,
    // ignorando se é no passado ou futuro
    const absoluteDifference = Math.abs(
      differenceInMilliseconds
    );

    const formatter = new Intl.RelativeTimeFormat(
      locale,
      { style: 'long' },
    );

    // Faz o mapeamento entre as unidades de tempo
    // suportadas pelo Intl.RelativeTimeFormat e o
    // intervalo de tempo em milissegundos por ano, mês,
    // semana, dia, hora, minuto e segundo.
    const timeUnits: Array<{
      unit: Intl.RelativeTimeFormatUnit;
      threshold: number;
    }> = [
      {
        unit: 'year',
        threshold: MILLISECONDS_PER.YEAR
      }, {
        unit: 'month',
        threshold: MILLISECONDS_PER.MONTH
      }, {
        unit: 'week',
        threshold: MILLISECONDS_PER.WEEK
      }, {
        unit: 'day',
        threshold: MILLISECONDS_PER.DAY
      }, {
        unit: 'hour',
        threshold: MILLISECONDS_PER.HOUR
      }, {
        unit: 'minute',
        threshold: MILLISECONDS_PER.MINUTE
      }, {
        unit: 'second',
        threshold: MILLISECONDS_PER.SECOND
      },
    ];

    // Verifica qual unidade de tempo é a mais apropriada
    // para a diferença entre as datas
    for (const { unit, threshold } of timeUnits) {
      if (absoluteDifference >= threshold) {
        return formatter.format(
          Math.round(
            differenceInMilliseconds / threshold
          ),
          unit
        );
      }
    }

    // Se a diferença for menor que 1 segundo:
    return formatter.format(0, 'second');
  }
}

import { Component, LOCALE_ID } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication }
  from '@angular/platform-browser';
import { FormatRelativeDatePipe }
  from './format-relative-date.pipe';

import { registerLocaleData } from '@angular/common';
import localePT from '@angular/common/locales/pt';
import localeES from '@angular/common/locales/es';

registerLocaleData(localePT, 'pt-br');
registerLocaleData(localeES, 'es-es');

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormatRelativeDatePipe, CommonModule],
  template: `
    <h1>Formatação relativa de tempo</h1>
    <p>Data atual: {{ currentDate | date: 'full' }}</p>

    @for (date of dates; track $index) {
      <h2>({{ date | date : 'full' }})</h2>
      <div class="grid">
        <div>
          {{date | formatRelativeDate}}
        </div>
        <div>
          date | formatRelativeDate
        </div>
      </div>
      <div class="grid">
        <div>
          {{date | formatRelativeDate : 'en-us'}}
        </div>
        <div>
          date | formatRelativeDate : 'en-us'
        </div>
      </div>
      <div class="grid">
        <div>
          {{date | formatRelativeDate : 'es-es'}}
        </div>
        <div>
          date | formatRelativeDate : 'es-es
        </div>
      </div>
    }`,
})
export class App {
  currentDate = new Date();
  dates: Date[] = [
    new Date(this.currentDate.getTime() - 60_000),
    new Date(this.currentDate.getTime() + 60_000),
    new Date('2024-01-10T12:00:00.000Z'),
    new Date('2024-02-10T12:00:00.000-0300')
  ];
}

bootstrapApplication(App, {
  providers: [{ provide: LOCALE_ID, useValue: 'pt-br' }],
});