chore: remove @internationalized/message (#299)

.github/workflows/release.yml

@@ -14,12 +14,12 @@ jobs:
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v2.2.4
+      - uses: pnpm/action-setup@v2.4.0
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: pnpm
 
       - name: Install Dependencies

.github/workflows/tests.yml

@@ -15,12 +15,12 @@ jobs:
         with:
           fetch-depth: 2
 
-      - uses: pnpm/action-setup@v2.2.4
+      - uses: pnpm/action-setup@v2.4.0
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: pnpm
 
       - name: Install dependencies

.github/workflows/version.yml

@@ -14,12 +14,12 @@ jobs:
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v2.2.4
+      - uses: pnpm/action-setup@v2.4.0
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: pnpm
 
       - name: Install Dependencies

apps/docs/src/routes/docs/core/overview/ssr.mdx

@@ -13,7 +13,7 @@ import { defineConfig } from "vite";
 export default defineConfig({
   plugins: [solid()],
   ssr: {
-    noExternal: ["@kobalte/core", "@internationalized/message"],
+    noExternal: ["@kobalte/core"],
   },
 });
 ```

package.json

@@ -85,8 +85,8 @@
     "tsup": "7.2.0",
     "turbo": "1.10.13",
     "typescript": "4.9.5",
-    "vite": "3.2.7",
-    "vite-plugin-solid": "2.7.0"
+    "vite": "5.0.11",
+    "vite-plugin-solid": "2.8.0"
   },
-  "packageManager": "pnpm@8.2.0"
+  "packageManager": "pnpm@8.14.0"
 }

packages/core/package.json

@@ -55,7 +55,6 @@
   "dependencies": {
     "@floating-ui/dom": "^1.5.1",
     "@internationalized/date": "^3.4.0",
-    "@internationalized/message": "^3.1.1",
     "@internationalized/number": "^3.2.1",
     "@kobalte/utils": "^0.9.0"
   },

packages/core/src/breadcrumbs/breadcrumbs-root.tsx

@@ -9,9 +9,8 @@
 import { mergeDefaultProps, OverrideComponentProps } from "@kobalte/utils";
 import { JSX, splitProps } from "solid-js";
 
-import { createMessageFormatter } from "../i18n";
 import { AsChildProp, Polymorphic } from "../polymorphic";
-import { BREADCRUMBS_INTL_MESSAGES } from "./breadcrumbs.intl";
+import { BREADCRUMBS_INTL_TRANSLATIONS, BreadcrumbsIntlTranslations } from "./breadcrumbs.intl";
 import { BreadcrumbsContext, BreadcrumbsContextValue } from "./breadcrumbs-context";
 
 export interface BreadcrumbsRootOptions extends AsChildProp {
@@ -20,6 +19,9 @@ export interface BreadcrumbsRootOptions extends AsChildProp {
    * It will be used as the default children of `Breadcrumbs.Separator`.
    */
   separator?: string | JSX.Element;
+
+  /** The localized strings of the component. */
+  translations?: BreadcrumbsIntlTranslations;
 }
 
 export interface BreadcrumbsRootProps
@@ -29,19 +31,23 @@ export interface BreadcrumbsRootProps
  * Breadcrumbs show hierarchy and navigational context for a user’s location within an application.
  */
 export function BreadcrumbsRoot(props: BreadcrumbsRootProps) {
-  props = mergeDefaultProps({ separator: "/" }, props);
-
-  const [local, others] = splitProps(props, ["separator"]);
+  props = mergeDefaultProps(
+    {
+      separator: "/",
+      translations: BREADCRUMBS_INTL_TRANSLATIONS,
+    },
+    props,
+  );
 
-  const messageFormatter = createMessageFormatter(() => BREADCRUMBS_INTL_MESSAGES);
+  const [local, others] = splitProps(props, ["separator", "translations"]);
 
   const context: BreadcrumbsContextValue = {
     separator: () => local.separator,
   };
 
   return (
     <BreadcrumbsContext.Provider value={context}>
-      <Polymorphic as="nav" aria-label={messageFormatter().format("breadcrumbs")} {...others} />
+      <Polymorphic as="nav" aria-label={local.translations?.breadcrumbs} {...others} />
     </BreadcrumbsContext.Provider>
   );
 }

packages/core/src/breadcrumbs/breadcrumbs.intl.ts

@@ -1,36 +1,5 @@
-export const BREADCRUMBS_INTL_MESSAGES = {
-  "ar-AE": { breadcrumbs: "عناصر الواجهة" },
-  "bg-BG": { breadcrumbs: "Трохи хляб" },
-  "cs-CZ": { breadcrumbs: "Popis cesty" },
-  "da-DK": { breadcrumbs: "Brødkrummer" },
-  "de-DE": { breadcrumbs: "Breadcrumbs" },
-  "el-GR": { breadcrumbs: "Πλοηγήσεις breadcrumb" },
-  "en-US": { breadcrumbs: "Breadcrumbs" },
-  "es-ES": { breadcrumbs: "Migas de pan" },
-  "et-EE": { breadcrumbs: "Lingiread" },
-  "fi-FI": { breadcrumbs: "Navigointilinkit" },
-  "fr-FR": { breadcrumbs: "Chemin de navigation" },
-  "he-IL": { breadcrumbs: "שבילי ניווט" },
-  "hr-HR": { breadcrumbs: "Navigacijski putovi" },
-  "hu-HU": { breadcrumbs: "Morzsamenü" },
-  "it-IT": { breadcrumbs: "Breadcrumb" },
-  "ja-JP": { breadcrumbs: "パンくずリスト" },
-  "ko-KR": { breadcrumbs: "탐색 표시" },
-  "lt-LT": { breadcrumbs: "Naršymo kelias" },
-  "lv-LV": { breadcrumbs: "Atpakaļceļi" },
-  "nb-NO": { breadcrumbs: "Navigasjonsstier" },
-  "nl-NL": { breadcrumbs: "Broodkruimels" },
-  "pl-PL": { breadcrumbs: "Struktura nawigacyjna" },
-  "pt-BR": { breadcrumbs: "Caminho detalhado" },
-  "pt-PT": { breadcrumbs: "Categorias" },
-  "ro-RO": { breadcrumbs: "Miez de pâine" },
-  "ru-RU": { breadcrumbs: "Навигация" },
-  "sk-SK": { breadcrumbs: "Navigačné prvky Breadcrumbs" },
-  "sl-SI": { breadcrumbs: "Drobtine" },
-  "sr-SP": { breadcrumbs: "Putanje navigacije" },
-  "sv-SE": { breadcrumbs: "Sökvägar" },
-  "tr-TR": { breadcrumbs: "İçerik haritaları" },
-  "uk-UA": { breadcrumbs: "Навігаційна стежка" },
-  "zh-CN": { breadcrumbs: "导航栏" },
-  "zh-TW": { breadcrumbs: "導覽列" },
+export const BREADCRUMBS_INTL_TRANSLATIONS = {
+  breadcrumbs: "Breadcrumbs",
 };
+
+export type BreadcrumbsIntlTranslations = typeof BREADCRUMBS_INTL_TRANSLATIONS;

packages/core/src/calendar/calendar-context.tsx

@@ -2,8 +2,9 @@ import { CalendarDate, DateDuration } from "@internationalized/date";
 import { RangeValue, ValidationState } from "@kobalte/utils";
 import { Accessor, createContext, useContext } from "solid-js";
 
-import { Direction, LocalizedMessageFormatter } from "../i18n";
+import { Direction } from "../i18n";
 import { CalendarSelectionMode, DateValue } from "./types";
+import { CalendarIntlTranslations } from "./calendar.intl";
 
 export interface CalendarDataSet {}
 
@@ -23,7 +24,7 @@ export interface CalendarContextValue {
   max: Accessor<DateValue | undefined>;
   timeZone: Accessor<string>;
   validationState: Accessor<ValidationState | null>;
-  messageFormatter: Accessor<LocalizedMessageFormatter>;
+  translations: Accessor<CalendarIntlTranslations>;
   isDisabled: Accessor<boolean>;
   isReadOnly: Accessor<boolean>;
   isDragging: Accessor<boolean>;

packages/core/src/calendar/calendar-grid-body-cell-trigger.tsx

@@ -132,7 +132,7 @@ export function CalendarGridBodyCellTrigger(props: CalendarGridBodyCellTriggerPr
       if (start && end && (isSameDay(context.date(), start) || isSameDay(context.date(), end))) {
         label =
           getSelectedDateDescription(
-            rootContext.messageFormatter(),
+            rootContext.translations(),
             context.date(),
             rootContext.timeZone(),
           ) + ", ";
@@ -142,25 +142,19 @@ export function CalendarGridBodyCellTrigger(props: CalendarGridBodyCellTriggerPr
     label += labelDateFormatter().format(nativeDate());
     if (context.isDateToday()) {
       // If date is today, set appropriate string depending on selected state:
-      label = rootContext
-        .messageFormatter()
-        .format(context.isSelected() ? "todayDateSelected" : "todayDate", {
-          date: label,
-        });
+      label = rootContext.translations().todayDate(label, context.isSelected());
     } else if (context.isSelected()) {
       // If date is selected but not today:
-      label = rootContext.messageFormatter().format("dateSelected", {
-        date: label,
-      });
+      label = rootContext.translations().dateSelected(label);
     }
 
     const min = rootContext.min();
     const max = rootContext.max();
 
     if (min && isSameDay(context.date(), min)) {
-      label += ", " + rootContext.messageFormatter().format("minimumDate");
+      label += ", " + rootContext.translations().minimumDate;
     } else if (max && isSameDay(context.date(), max)) {
-      label += ", " + rootContext.messageFormatter().format("maximumDate");
+      label += ", " + rootContext.translations().maximumDate;
     }
 
     return label;

packages/core/src/calendar/calendar-grid.tsx

@@ -81,7 +81,7 @@ export function CalendarGrid(props: CalendarGridProps) {
 
   const visibleRangeDescription = createMemo(() => {
     return getVisibleRangeDescription(
-      rootContext.messageFormatter(),
+      rootContext.translations(),
       startDate(),
       endDate(),
       rootContext.timeZone(),

packages/core/src/calendar/calendar-heading.tsx

@@ -20,7 +20,7 @@ export function CalendarHeading(props: CalendarHeadingProps) {
 
   const title = createMemo(() => {
     return getVisibleRangeDescription(
-      rootContext.messageFormatter(),
+      rootContext.translations(),
       rootContext.startDate(),
       rootContext.endDate(),
       rootContext.timeZone(),

packages/core/src/calendar/calendar-next-trigger.tsx

@@ -59,7 +59,7 @@ export function CalendarNextTrigger(props: CalendarNextTriggerProps) {
   return (
     <Button.Root
       disabled={nextTriggerDisabled()}
-      aria-label={context.messageFormatter().format("next")}
+      aria-label={context.translations().next}
       onClick={onClick}
       onFocus={onFocus}
       onBlur={onBlur}

packages/core/src/calendar/calendar-prev-trigger.tsx

@@ -59,7 +59,7 @@ export function CalendarPrevTrigger(props: CalendarPrevTriggerProps) {
   return (
     <Button.Root
       disabled={prevTriggerDisabled()}
-      aria-label={context.messageFormatter().format("previous")}
+      aria-label={context.translations().previous}
       onClick={onClick}
       onFocus={onFocus}
       onBlur={onBlur}

packages/core/src/calendar/calendar-root.tsx

@@ -41,11 +41,11 @@ import {
   splitProps,
 } from "solid-js";
 
-import { createMessageFormatter, getReadingDirection, useLocale } from "../i18n";
+import { getReadingDirection, useLocale } from "../i18n";
 import { announce } from "../live-announcer";
 import { AsChildProp, Polymorphic } from "../polymorphic";
 import { createControllableSignal, createInteractOutside } from "../primitives";
-import { CALENDAR_INTL_MESSAGES } from "./calendar.intl";
+import { CalendarIntlTranslations, CALENDAR_INTL_MESSAGES } from "./calendar.intl";
 import { CalendarContext, CalendarContextValue, CalendarDataSet } from "./calendar-context";
 import { DateAlignment, DateValue } from "./types";
 import {
@@ -135,6 +135,9 @@ export type CalendarRootOptions = (
   | CalendarRangeSelectionOptions
 ) &
   AsChildProp & {
+    /** The localized strings of the component. */
+    translations?: CalendarIntlTranslations;
+
     /**
      * A function that creates a [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html)
      * object for a given calendar identifier. Such a function may be imported from the
@@ -207,11 +210,13 @@ export function CalendarRoot(props: CalendarRootProps) {
     {
       visibleDuration: { months: 1 },
       selectionMode: "single",
+      translations: CALENDAR_INTL_MESSAGES,
     },
     props,
   );
 
   const [local, others] = splitProps(props, [
+    "translations",
     "ref",
     "locale",
     "createCalendar",
@@ -235,8 +240,6 @@ export function CalendarRoot(props: CalendarRootProps) {
     "aria-label",
   ]);
 
-  const messageFormatter = createMessageFormatter(() => CALENDAR_INTL_MESSAGES);
-
   const locale = createMemo(() => {
     return local.locale ?? useLocale().locale();
   });
@@ -366,7 +369,13 @@ export function CalendarRoot(props: CalendarRootProps) {
   const [isDragging, setIsDragging] = createSignal(false);
 
   const visibleRangeDescription = createMemo(() => {
-    return getVisibleRangeDescription(messageFormatter(), startDate(), endDate(), timeZone(), true);
+    return getVisibleRangeDescription(
+      local.translations!,
+      startDate(),
+      endDate(),
+      timeZone(),
+      true,
+    );
   });
 
   const ariaLabel = () => {
@@ -776,16 +785,16 @@ export function CalendarRoot(props: CalendarRootProps) {
 
     if (local.selectionMode === "single") {
       const date = asSingleValue(value());
-      description = date && getSelectedDateDescription(messageFormatter(), date, timeZone());
+      description = date && getSelectedDateDescription(local.translations!, date, timeZone());
     } else if (local.selectionMode === "multiple") {
       const dates = asArrayValue(value());
       description = dates
-        ?.map(date => getSelectedDateDescription(messageFormatter(), date, timeZone()))
+        ?.map(date => getSelectedDateDescription(local.translations!, date, timeZone()))
         .join(", ");
     } else if (local.selectionMode === "range") {
       const dateRange = asRangeValue(value()) ?? {};
       description = getSelectedDateRangeDescription(
-        messageFormatter(),
+        local.translations!,
         dateRange,
         anchorDate(),
         timeZone(),
@@ -895,7 +904,7 @@ export function CalendarRoot(props: CalendarRootProps) {
     min,
     max,
     timeZone,
-    messageFormatter,
+    translations: () => local.translations!,
     setStartDate,
     setAnchorDate,
     setIsFocused,