fix(website): register CLDR loaders with absolute URLs in playground

ilhan007 · ilhan007 · commit f5b3b1142881 · 2026-03-24T13:19:40.000+02:00
The playground-elements service worker sandbox causes unreliable
import.meta.url resolution for fetch()-based CLDR loaders (Assets-fetch.js).
This intermittently breaks date components for users with regional
locales (en-GB, en-AU, de-AT, etc.).

Register CLDR locale data loaders in playground-support.js with absolute
URLs constructed from the known site base URL. This is the same pattern
already used for theme property loaders. Remove Assets-fetch.js imports
from date/calendar/time samples since CLDR is now handled centrally.
diff --git a/packages/website/docs/_samples/main/Calendar/Basic/main.js b/packages/website/docs/_samples/main/Calendar/Basic/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/Calendar.js";
diff --git a/packages/website/docs/_samples/main/Calendar/Bounds/main.js b/packages/website/docs/_samples/main/Calendar/Bounds/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/Calendar.js";
diff --git a/packages/website/docs/_samples/main/Calendar/CalendarInDifferentTimezone/main.js b/packages/website/docs/_samples/main/Calendar/CalendarInDifferentTimezone/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/Calendar.js";
diff --git a/packages/website/docs/_samples/main/Calendar/CalendarTypes/main.js b/packages/website/docs/_samples/main/Calendar/CalendarTypes/main.js
@@ -1,4 +1,3 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/Calendar.js";
 
 import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js"
diff --git a/packages/website/docs/_samples/main/Calendar/CalendarWeekNumbering/main.js b/packages/website/docs/_samples/main/Calendar/CalendarWeekNumbering/main.js
@@ -1,4 +1,3 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/Calendar.js";
 import "@ui5/webcomponents/dist/Select.js";
 import "@ui5/webcomponents/dist/Option.js";
diff --git a/packages/website/docs/_samples/main/Calendar/CalendarWithDisabledDates/main.js b/packages/website/docs/_samples/main/Calendar/CalendarWithDisabledDates/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/Calendar.js";
diff --git a/packages/website/docs/_samples/main/Calendar/CalendarWithLegend/main.js b/packages/website/docs/_samples/main/Calendar/CalendarWithLegend/main.js
@@ -1,4 +1,3 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/Calendar.js";
 import "@ui5/webcomponents/dist/CalendarLegend.js";
 import "@ui5/webcomponents/dist/CalendarLegendItem.js";
diff --git a/packages/website/docs/_samples/main/Calendar/SelectionModes/main.js b/packages/website/docs/_samples/main/Calendar/SelectionModes/main.js
@@ -1,3 +1,2 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/Title.js";
 import "@ui5/webcomponents/dist/Calendar.js";
diff --git a/packages/website/docs/_samples/main/CalendarLegend/Basic/main.js b/packages/website/docs/_samples/main/CalendarLegend/Basic/main.js
@@ -1,4 +1,3 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/Calendar.js";
 import "@ui5/webcomponents/dist/CalendarLegend.js";
 import "@ui5/webcomponents/dist/CalendarLegendItem.js";
diff --git a/packages/website/docs/_samples/main/DatePicker/Basic/main.js b/packages/website/docs/_samples/main/DatePicker/Basic/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DatePicker.js";
diff --git a/packages/website/docs/_samples/main/DatePicker/CalendarTypes/main.js b/packages/website/docs/_samples/main/DatePicker/CalendarTypes/main.js
@@ -1,4 +1,3 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DatePicker.js";
 
 import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js"
diff --git a/packages/website/docs/_samples/main/DatePicker/CalendarWeekNumbering/main.js b/packages/website/docs/_samples/main/DatePicker/CalendarWeekNumbering/main.js
@@ -1,4 +1,3 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DatePicker.js";
 import "@ui5/webcomponents/dist/Select.js";
 import "@ui5/webcomponents/dist/Option.js";
diff --git a/packages/website/docs/_samples/main/DatePicker/ClearIcon/main.js b/packages/website/docs/_samples/main/DatePicker/ClearIcon/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DatePicker.js";
diff --git a/packages/website/docs/_samples/main/DatePicker/CustomFormatting/main.js b/packages/website/docs/_samples/main/DatePicker/CustomFormatting/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DatePicker.js";
diff --git a/packages/website/docs/_samples/main/DatePicker/DatePickerInDifferentTimezone/main.js b/packages/website/docs/_samples/main/DatePicker/DatePickerInDifferentTimezone/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DatePicker.js";
diff --git a/packages/website/docs/_samples/main/DatePicker/MinMax/main.js b/packages/website/docs/_samples/main/DatePicker/MinMax/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DatePicker.js";
diff --git a/packages/website/docs/_samples/main/DatePicker/State/main.js b/packages/website/docs/_samples/main/DatePicker/State/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DatePicker.js";
diff --git a/packages/website/docs/_samples/main/DateRangePicker/Basic/main.js b/packages/website/docs/_samples/main/DateRangePicker/Basic/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DateRangePicker.js";
diff --git a/packages/website/docs/_samples/main/DateRangePicker/ClearIcon/main.js b/packages/website/docs/_samples/main/DateRangePicker/ClearIcon/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DateRangePicker.js";
diff --git a/packages/website/docs/_samples/main/DateRangePicker/CustomFormatting/main.js b/packages/website/docs/_samples/main/DateRangePicker/CustomFormatting/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DateRangePicker.js";
diff --git a/packages/website/docs/_samples/main/DateRangePicker/DateFormat/main.js b/packages/website/docs/_samples/main/DateRangePicker/DateFormat/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DateRangePicker.js";
diff --git a/packages/website/docs/_samples/main/DateRangePicker/MinMax/main.js b/packages/website/docs/_samples/main/DateRangePicker/MinMax/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DateRangePicker.js";
diff --git a/packages/website/docs/_samples/main/DateTimePicker/Basic/main.js b/packages/website/docs/_samples/main/DateTimePicker/Basic/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DateTimePicker.js";
diff --git a/packages/website/docs/_samples/main/DateTimePicker/ClearIcon/main.js b/packages/website/docs/_samples/main/DateTimePicker/ClearIcon/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DateTimePicker.js";
diff --git a/packages/website/docs/_samples/main/DateTimePicker/CustomFormatting/main.js b/packages/website/docs/_samples/main/DateTimePicker/CustomFormatting/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DateTimePicker.js";
diff --git a/packages/website/docs/_samples/main/DateTimePicker/DateTimePickerInDifferentTimezone/main.js b/packages/website/docs/_samples/main/DateTimePicker/DateTimePickerInDifferentTimezone/main.js
@@ -1,4 +1,3 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DateTimePicker.js";
 import "@ui5/webcomponents/dist/Select.js";
 import "@ui5/webcomponents/dist/Option.js";
diff --git a/packages/website/docs/_samples/main/DateTimePicker/FormatPattern/main.js b/packages/website/docs/_samples/main/DateTimePicker/FormatPattern/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DateTimePicker.js";
diff --git a/packages/website/docs/_samples/main/DateTimePicker/MinMax/main.js b/packages/website/docs/_samples/main/DateTimePicker/MinMax/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DateTimePicker.js";
diff --git a/packages/website/docs/_samples/main/DynamicDateRange/Basic/main.js b/packages/website/docs/_samples/main/DynamicDateRange/Basic/main.js
@@ -1,4 +1,3 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DynamicDateRange.js";
 import "@ui5/webcomponents/dist/dynamic-date-range-options/Today.js";
 import "@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js";
diff --git a/packages/website/docs/_samples/main/DynamicDateRange/DynamicDateRangeValueSample/main.js b/packages/website/docs/_samples/main/DynamicDateRange/DynamicDateRangeValueSample/main.js
@@ -1,4 +1,3 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/DynamicDateRange.js";
 import "@ui5/webcomponents/dist/dynamic-date-range-options/Today.js";
 import "@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js";
diff --git a/packages/website/docs/_samples/main/TimePicker/Basic/main.js b/packages/website/docs/_samples/main/TimePicker/Basic/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/TimePicker.js";
diff --git a/packages/website/docs/_samples/main/TimePicker/CustomFormatting/main.js b/packages/website/docs/_samples/main/TimePicker/CustomFormatting/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/TimePicker.js";
diff --git a/packages/website/docs/_samples/main/TimePicker/States/main.js b/packages/website/docs/_samples/main/TimePicker/States/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/TimePicker.js";
diff --git a/packages/website/docs/_samples/main/TimePicker/TimePickerInDifferentTimezone/main.js b/packages/website/docs/_samples/main/TimePicker/TimePickerInDifferentTimezone/main.js
@@ -1,2 +1 @@
-import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/TimePicker.js";
diff --git a/packages/website/src/components/Editor/index.js b/packages/website/src/components/Editor/index.js
@@ -369,14 +369,14 @@ export default function Editor({ html, js, css, react, mainFile = "main.js", can
     if (!gistConfig.files["playground-support.js"]) {
       gistConfig.files["playground-support.js"] = {
         name: "playground-support.js",
-        content: playgroundSupport({ theme, textDirection, contentDensity, iframeId }),
+        content: playgroundSupport({ theme, textDirection, contentDensity, iframeId, cldrBaseUrl: calcImports()["@ui5/webcomponents-localization/"] + "dist/generated/assets/cldr/" }),
         hidden: true
       };
     } else {
       //  update existing playground support with current settings
       gistConfig.files["playground-support.js"] = {
         ...gistConfig.files["playground-support.js"],
-        content: playgroundSupport({ theme, textDirection, contentDensity, iframeId }),
+        content: playgroundSupport({ theme, textDirection, contentDensity, iframeId, cldrBaseUrl: calcImports()["@ui5/webcomponents-localization/"] + "dist/generated/assets/cldr/" }),
         hidden: true
       };
     }
@@ -422,7 +422,7 @@ export default function Editor({ html, js, css, react, mainFile = "main.js", can
           content: addHeadContent(fixAssetPaths(_html)),
         },
         "playground-support.js": {
-          content: playgroundSupport({ theme, textDirection, contentDensity, iframeId }),
+          content: playgroundSupport({ theme, textDirection, contentDensity, iframeId, cldrBaseUrl: calcImports()["@ui5/webcomponents-localization/"] + "dist/generated/assets/cldr/" }),
           hidden: true,
         },
         [mainFile]: {
@@ -539,7 +539,7 @@ ${fixAssetPaths(_js)}`,
     // setting has changed but exising project config is there
     // update the playground-support.js only with the new settings so refresh works correctly
     const newConfig = JSON.parse(JSON.stringify(projectRef.current.config));
-    newConfig.files["playground-support.js"].content = playgroundSupport({ theme, textDirection, contentDensity, iframeId });
+    newConfig.files["playground-support.js"].content = playgroundSupport({ theme, textDirection, contentDensity, iframeId, cldrBaseUrl: calcImports()["@ui5/webcomponents-localization/"] + "dist/generated/assets/cldr/" });
     projectRef.current.config = newConfig;
   }, [theme, contentDensity, textDirection]);
 
diff --git a/packages/website/src/components/Editor/playground-support.js b/packages/website/src/components/Editor/playground-support.js
@@ -136,6 +136,15 @@ const loadAndCheck2 = async (themeName) => {
 ["sap_fiori_3", "sap_fiori_3_dark", "sap_fiori_3_hcb", "sap_fiori_3_hcw", "sap_horizon", "sap_horizon_dark", "sap_horizon_hcb", "sap_horizon_hcw"]
     .forEach(themeName => registerThemePropertiesLoader("@ui5/webcomponents-theming", themeName, loadAndCheck2));
 
+// CLDR locale data loaders - use absolute URLs to avoid import.meta.url issues in the playground sandbox
+import { registerLocaleDataLoader } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
+const cldrBaseUrl = "${settings.cldrBaseUrl}";
+const availableLocales = ["ar","ar_EG","ar_SA","bg","ca","cnr","cs","da","de","de_AT","de_CH","el","el_CY","en","en_AU","en_GB","en_HK","en_IE","en_IN","en_NZ","en_PG","en_SG","en_ZA","es","es_AR","es_BO","es_CL","es_CO","es_MX","es_PE","es_UY","es_VE","et","fa","fi","fr","fr_BE","fr_CA","fr_CH","fr_LU","he","hi","hr","hu","id","it","it_CH","ja","kk","ko","lt","lv","ms","mk","nb","nl","nl_BE","pl","pt","pt_PT","ro","ru","ru_UA","sk","sl","sr","sr_Latn","sv","th","tr","uk","vi","zh_CN","zh_HK","zh_SG","zh_TW"];
+availableLocales.forEach(localeId => registerLocaleDataLoader(localeId, async () => {
+    const response = await fetch(cldrBaseUrl + localeId + ".json");
+    return response.json();
+}));
+
 import { setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
 import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
 

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`		`-import "@ui5/webcomponents/dist/Assets-fetch.js";`
`2`	`1`	`import "@ui5/webcomponents/dist/Calendar.js";`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import "@ui5/webcomponents/dist/Assets-fetch.js";`
`2`	`1`	`import "@ui5/webcomponents/dist/Calendar.js";`
`3`	`2`
`4`	`3`	`import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js"`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,2 @@`
`1`		`-import "@ui5/webcomponents/dist/Assets-fetch.js";`
`2`	`1`	`import "@ui5/webcomponents/dist/Title.js";`
`3`	`2`	`import "@ui5/webcomponents/dist/Calendar.js";`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`		`-import "@ui5/webcomponents/dist/Assets-fetch.js";`
`2`	`1`	`import "@ui5/webcomponents/dist/DatePicker.js";`