fixup! fixup! fixup! refactor(NcDateTimePicker): adjust for updated library

Author: susnux

src/components/NcDateTimePicker/NcDateTimePicker.vue

@@ -190,7 +190,7 @@ import { watch } from 'vue'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
 import NcTimezonePicker from '../NcTimezonePicker/NcTimezonePicker.vue'
 import { t } from '../../l10n.ts'
-import { logger } from '../../utils/logger.ts'
+import { loadDateFnsLocale } from '../../utils/date-fns.ts'
 import NcButton from '../NcButton/index.ts'
 
 type VueDatePickerProps = InstanceType<typeof VueDatePicker>['$props']
@@ -333,7 +333,9 @@ const targetElement = useTemplateRef('target')
 const pickerInstance = useTemplateRef('picker')
 
 const localeObject = ref<Locale>()
-watch(() => props.locale, loadLocale, { immediate: true })
+watch(() => props.locale, async () => {
+	localeObject.value = await loadDateFnsLocale(props.locale)
+}, { immediate: true })
 
 /**
  * Mapping of the model-value prop to the format expected by the library.
@@ -602,26 +604,6 @@ function selectDate() {
 function cancelSelection() {
 	pickerInstance.value!.closeMenu()
 }
-
-/**
- * Load the locale object from date-fns dynamically.
- *
- * @param locale - The locale to load
- */
-async function loadLocale(locale: string) {
-	try {
-		const { default: dateFnLocale } = await import(`date-fns/locale/${locale}`)
-		localeObject.value = dateFnLocale
-	} catch (error) {
-		if (locale.includes('-')) {
-			locale = locale.split('-')[0]!
-			logger.debug('Try loading fallback locale for NcDateTimePicker', { locale })
-			await loadLocale(locale)
-		} else {
-			logger.error('Failed to load locale for NcDateTimePicker', { locale, error })
-		}
-	}
-}
 </script>
 
 <template>

src/utils/date-fns.ts

@@ -0,0 +1,39 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Locale } from 'date-fns'
+
+import { logger } from './logger.ts'
+
+// this is a fix only for the styleguide as webpack does not have glob import
+let modules: Record<string, () => Promise<{ default: Locale }>>
+try {
+	modules = import.meta.glob('/node_modules/date-fns/locale/*.js')
+} catch {
+	modules = {}
+}
+
+/**
+ * Load a date-fns locale module.
+ *
+ * @param locale - The canonical locale to load
+ */
+export async function loadDateFnsLocale(locale: string): Promise<Locale | undefined> {
+	logger.debug(`Loading date-fns locale for '${locale}'`)
+	const modulePath = `/node_modules/date-fns/locale/${locale}.js`
+	if (modules[modulePath]) {
+		logger.debug(`Import date-fns locale for '${locale}'`)
+		const mod = await modules[modulePath]()
+		return mod.default
+	}
+
+	if (locale.includes('-')) {
+		// Try without region
+		const shortLocale = locale.split('-')[0]!
+		return await loadDateFnsLocale(shortLocale)
+	}
+
+	logger.debug(`No date-fns locale found for '${locale}'`)
+}