@astryxdesign/core 0.4.5 → 0.4.6-canary.f1d4034

package/src/theme/syntax/serverSafeSyntax.test.ts

@@ -0,0 +1,68 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Guards the server-safety of the `./theme/syntax` subpath.
+ * @input Reads the source files in this directory
+ * @output One invariant per module: only the provider carries `'use client'`
+ * @position Narrow sibling of src/serverSafeComponents.test.ts, which only
+ *   walks `./src/<Name>/index.ts` subpaths and so never sees this directory.
+ *
+ * `./theme/syntax` is the only export subpath for the syntax module, and it
+ * mixes a provider with presets, token defaults and pure functions. A
+ * directive on the barrel makes React hand a server importer a client
+ * reference for every one of those exports, so `dracula.tokens` reads back
+ * `undefined` — a silent failure far from its cause.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {readdirSync, readFileSync} from 'node:fs';
+import {join} from 'node:path';
+
+/**
+ * The directives at the top of a module, in order. Comments and blank lines
+ * may precede them; the prologue ends at the first statement that is not a
+ * bare string literal, so a `'use strict';` cannot hide a later directive.
+ */
+function directives(file: string): string[] {
+  const source = readFileSync(join(__dirname, file), 'utf-8');
+  const found: string[] = [];
+  let rest = source;
+  for (;;) {
+    const trimmed = rest.replace(/^(?:\s+|\/\/[^\n]*|\/\*[\s\S]*?\*\/)+/, '');
+    const directive = /^(['"])([^'"]*)\1\s*;?/.exec(trimmed);
+    if (!directive) {
+      return found;
+    }
+    found.push(directive[2]);
+    rest = trimmed.slice(directive[0].length);
+  }
+}
+
+/**
+ * The modules in this directory that legitimately need a client boundary.
+ * Everything else is data or pure functions and must stay directive-free —
+ * derived from the directory, so a module added here is covered by default.
+ */
+const CLIENT_MODULES = ['SyntaxTheme.tsx'];
+
+const serverSafeModules = readdirSync(__dirname)
+  .filter(
+    name =>
+      /\.[jt]sx?$/.test(name) &&
+      !/\.(test|stories|doc|perf)\./.test(name) &&
+      !name.endsWith('.d.ts') &&
+      !CLIENT_MODULES.includes(name),
+  )
+  .sort();
+
+describe('./theme/syntax is importable from a server component', () => {
+  it.each(serverSafeModules)('%s carries no "use client"', file => {
+    expect(directives(file)).not.toContain('use client');
+  });
+
+  // Also the proof that the reader above is not blind, which would make every
+  // assertion in this file pass vacuously.
+  it.each(CLIENT_MODULES)('%s keeps the directive it needs', file => {
+    expect(directives(file)).toContain('use client');
+  });
+});

package/src/utils/dateParser.test.ts

@@ -277,6 +277,26 @@ describe('parseDateInput', () => {
     });
   });
 
+  describe('ambiguous numeric formats follow the passed locale (#5074)', () => {
+    // Both numbers are <= 12, so the day/month order is genuinely ambiguous
+    // and resolved by isLocaleDayFirst(locale) rather than the host locale.
+    it('reads month-first for en-US', () => {
+      expect(parseDateInput('3/4/2026', 'en-US')).toEqual({
+        year: 2026,
+        month: 3,
+        day: 4,
+      });
+    });
+
+    it('reads day-first for es-ES', () => {
+      expect(parseDateInput('3/4/2026', 'es-ES')).toEqual({
+        year: 2026,
+        month: 4,
+        day: 3,
+      });
+    });
+  });
+
   describe('edge cases', () => {
     it('returns null for empty string', () => {
       expect(parseDateInput('')).toBeNull();

package/src/utils/dateParser.ts

@@ -12,6 +12,7 @@
  */
 
 import {type PlainDate, plainDateCreate, plainDateFromDate} from './plainDate';
+import type {Locale} from '../i18n/types';
 
 export {
   plainDateFromISO as parseISO,
@@ -19,11 +20,13 @@ export {
 } from './plainDate';
 
 /**
- * Detects if the user's locale uses day-first date format (DD/MM/YYYY).
+ * Detects if the locale uses day-first date format (DD/MM/YYYY).
  * US and a few others use month-first (MM/DD/YYYY).
  */
-export function isLocaleDayFirst(): boolean {
-  const parts = new Intl.DateTimeFormat().formatToParts(new Date(2000, 0, 15));
+export function isLocaleDayFirst(locale?: Locale): boolean {
+  const parts = new Intl.DateTimeFormat(locale).formatToParts(
+    new Date(2000, 0, 15),
+  );
   const dayIndex = parts.findIndex(p => p.type === 'day');
   const monthIndex = parts.findIndex(p => p.type === 'month');
   return dayIndex < monthIndex;
@@ -43,7 +46,10 @@ export function isLocaleDayFirst(): boolean {
  *
  * @returns PlainDate if valid, null if unparseable
  */
-export function parseDateInput(input: string): PlainDate | null {
+export function parseDateInput(
+  input: string,
+  locale?: Locale,
+): PlainDate | null {
   const trimmed = input.trim();
   if (!trimmed) {
     return null;
@@ -114,14 +120,14 @@ export function parseDateInput(input: string): PlainDate | null {
     if (sep1 !== sep2) {
       return null;
     }
-    return parseNumericDate(+first, +second, +year);
+    return parseNumericDate(+first, +second, +year, locale);
   }
 
   // 5. Try numeric formats WITHOUT year (defaults to current year)
   const numericNoYearMatch = trimmed.match(/^(\d{1,2})[-/.](\d{1,2})$/);
   if (numericNoYearMatch) {
     const [, first, second] = numericNoYearMatch;
-    return parseNumericDate(+first, +second, currentYear);
+    return parseNumericDate(+first, +second, currentYear, locale);
   }
 
   // 6. Fall back to native Date parsing for other formats.
@@ -151,6 +157,7 @@ function parseNumericDate(
   first: number,
   second: number,
   year: number,
+  locale?: Locale,
 ): PlainDate | null {
   let day: number;
   let month: number;
@@ -164,7 +171,7 @@ function parseNumericDate(
   } else if (first > 12 && second > 12) {
     return null;
   } else {
-    if (isLocaleDayFirst()) {
+    if (isLocaleDayFirst(locale)) {
       day = first;
       month = second;
     } else {

package/src/utils/index.ts

@@ -47,6 +47,8 @@ export {
   DATE_FORMAT_SHORT_WITH_WEEKDAY,
   DATE_FORMAT_LONG,
   DATE_FORMAT_MONTH_YEAR,
+  DATE_FORMAT_MONTH_ONLY,
+  DATE_FORMAT_WEEKDAY_ONLY,
   DATE_FORMAT_SHORT,
   DATE_FORMAT_SHORT_WITH_YEAR,
   SHARED_DATE_FORMAT_OPTIONS,

package/src/utils/plainDate.test.ts

@@ -610,4 +610,10 @@ describe('formatSharedDate', () => {
   it('formats the ISO "system_date" shape', () => {
     expect(formatSharedDate(pd, 'system_date')).toBe('2026-01-25');
   });
+
+  it('follows the passed locale rather than the host locale (#5074)', () => {
+    expect(formatSharedDate(pd, 'date_long', 'es-ES')).toBe(
+      '25 de enero de 2026',
+    );
+  });
 });

package/src/utils/plainDate.ts

@@ -8,6 +8,7 @@
  */
 
 import type {ISODateString, PlainDate} from './dateTypes';
+import type {Locale} from '../i18n/types';
 
 export type {PlainDate} from './dateTypes';
 
@@ -277,6 +278,22 @@ export const DATE_FORMAT_MONTH_YEAR: Intl.DateTimeFormatOptions = {
   month: 'long',
 };
 
+// e.g. "Sun" (locale-dependent) — the weekday on its own, abbreviated.
+//
+// This is CLDR's `abbreviated` width, which `Intl` reaches natively. Note
+// that Calendar's 2-letter header ("Su") is CLDR's *short* width, a
+// different thing that `Intl` cannot express at all — which is why that one
+// needs the generated lookup table beside it and this one does not.
+export const DATE_FORMAT_WEEKDAY_ONLY: Intl.DateTimeFormatOptions = {
+  weekday: 'short',
+};
+
+// e.g. "January" (locale-dependent) — the month on its own, for a control
+// that shows a list of months and carries the year separately.
+export const DATE_FORMAT_MONTH_ONLY: Intl.DateTimeFormatOptions = {
+  month: 'long',
+};
+
 // e.g. "Jan 25" (locale-dependent)
 export const DATE_FORMAT_SHORT: Intl.DateTimeFormatOptions = {
   month: 'short',
@@ -293,10 +310,9 @@ export const DATE_FORMAT_SHORT_WITH_YEAR: Intl.DateTimeFormatOptions = {
 export function plainDateFormat(
   pd: PlainDate,
   options: Intl.DateTimeFormatOptions,
+  locale?: Locale,
 ): string {
-  return new Intl.DateTimeFormat(undefined, options).format(
-    plainDateToDate(pd),
-  );
+  return new Intl.DateTimeFormat(locale, options).format(plainDateToDate(pd));
 }
 
 // =============================================================================
@@ -344,9 +360,10 @@ export const SHARED_DATE_FORMAT_OPTIONS: Record<
 export function formatSharedDate(
   pd: PlainDate,
   format: SharedDateFormat,
+  locale?: Locale,
 ): string {
   if (format === 'system_date') {
     return plainDateToISO(pd);
   }
-  return plainDateFormat(pd, SHARED_DATE_FORMAT_OPTIONS[format]);
+  return plainDateFormat(pd, SHARED_DATE_FORMAT_OPTIONS[format], locale);
 }