Skip to content

Commit 1f62dda

Browse files
authored
feat: fetch ui5-datepicker assets from CDN (#420)
- the CLDR data is fetched by default from the ui5 CDN - no more JSON imports when importing ui5-datepicker - still available as CLDRAssets.js if apps want to bundle the CLDR data with a build plugin
1 parent 1696cef commit 1f62dda

File tree

10 files changed

+5088
-178
lines changed

10 files changed

+5088
-178
lines changed

packages/base/src/CLDR.js

Lines changed: 42 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -1,166 +1,14 @@
1-
/* eslint-disable camelcase */
2-
import ar from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/ar.json";
3-
import ar_EG from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/ar_EG.json";
4-
import ar_SA from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/ar_SA.json";
5-
import bg from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/bg.json";
6-
import ca from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/ca.json";
7-
import cs from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/cs.json";
8-
import da from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/da.json";
9-
import de from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/de.json";
10-
import de_AT from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/de_AT.json";
11-
import de_CH from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/de_CH.json";
12-
import el from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/el.json";
13-
import el_CY from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/el_CY.json";
14-
import en from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/en.json";
15-
import en_AU from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/en_AU.json";
16-
import en_GB from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/en_GB.json";
17-
import en_HK from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/en_HK.json";
18-
import en_IE from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/en_IE.json";
19-
import en_IN from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/en_IN.json";
20-
import en_NZ from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/en_NZ.json";
21-
import en_PG from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/en_PG.json";
22-
import en_SG from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/en_SG.json";
23-
import en_ZA from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/en_ZA.json";
24-
import es from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/es.json";
25-
import es_AR from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/es_AR.json";
26-
import es_BO from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/es_BO.json";
27-
import es_CL from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/es_CL.json";
28-
import es_CO from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/es_CO.json";
29-
import es_MX from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/es_MX.json";
30-
import es_PE from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/es_PE.json";
31-
import es_UY from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/es_UY.json";
32-
import es_VE from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/es_VE.json";
33-
import et from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/et.json";
34-
import fa from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/fa.json";
35-
import fi from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/fi.json";
36-
import fr from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/fr.json";
37-
import fr_BE from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/fr_BE.json";
38-
import fr_CA from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/fr_CA.json";
39-
import fr_CH from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/fr_CH.json";
40-
import fr_LU from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/fr_LU.json";
41-
import he from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/he.json";
42-
import hi from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/hi.json";
43-
import hr from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/hr.json";
44-
import hu from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/hu.json";
45-
import id from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/id.json";
46-
import it from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/it.json";
47-
import it_CH from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/it_CH.json";
48-
import ja from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/ja.json";
49-
import kk from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/kk.json";
50-
import ko from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/ko.json";
51-
import lt from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/lt.json";
52-
import lv from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/lv.json";
53-
import ms from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/ms.json";
54-
import nb from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/nb.json";
55-
import nl from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/nl.json";
56-
import nl_BE from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/nl_BE.json";
57-
import pl from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/pl.json";
58-
import pt from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/pt.json";
59-
import pt_PT from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/pt_PT.json";
60-
import ro from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/ro.json";
61-
import ru from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/ru.json";
62-
import ru_UA from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/ru_UA.json";
63-
import sk from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/sk.json";
64-
import sl from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/sl.json";
65-
import sr from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/sr.json";
66-
import sv from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/sv.json";
67-
import th from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/th.json";
68-
import tr from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/tr.json";
69-
import uk from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/uk.json";
70-
import vi from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/vi.json";
71-
import zh_CN from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/zh_CN.json";
72-
import zh_HK from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/zh_HK.json";
73-
import zh_SG from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/zh_SG.json";
74-
import zh_TW from "@ui5/webcomponents-core/dist/sap/ui/core/cldr/zh_TW.json";
75-
761
import { registerModuleContent } from "./ResourceLoaderOverrides.js";
772
import { fetchTextOnce } from "./util/FetchHelper.js";
783

79-
const cldrData = {
80-
ar,
81-
ar_EG,
82-
ar_SA,
83-
bg,
84-
ca,
85-
cs,
86-
da,
87-
de,
88-
de_AT,
89-
de_CH,
90-
el,
91-
el_CY,
92-
en,
93-
en_AU,
94-
en_GB,
95-
en_HK,
96-
en_IE,
97-
en_IN,
98-
en_NZ,
99-
en_PG,
100-
en_SG,
101-
en_ZA,
102-
es,
103-
es_AR,
104-
es_BO,
105-
es_CL,
106-
es_CO,
107-
es_MX,
108-
es_PE,
109-
es_UY,
110-
es_VE,
111-
et,
112-
fa,
113-
fi,
114-
fr,
115-
fr_BE,
116-
fr_CA,
117-
fr_CH,
118-
fr_LU,
119-
he,
120-
hi,
121-
hr,
122-
hu,
123-
id,
124-
it,
125-
it_CH,
126-
ja,
127-
kk,
128-
ko,
129-
lt,
130-
lv,
131-
ms,
132-
nb,
133-
nl,
134-
nl_BE,
135-
pl,
136-
pt,
137-
pt_PT,
138-
ro,
139-
ru,
140-
ru_UA,
141-
sk,
142-
sl,
143-
sr,
144-
sv,
145-
th,
146-
tr,
147-
uk,
148-
vi,
149-
zh_CN,
150-
zh_HK,
151-
zh_SG,
152-
zh_TW,
153-
};
4+
const supportedLocales = ["ar", "ar_EG", "ar_SA", "bg", "ca", "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", "nb", "nl", "nl_BE", "pl", "pt", "pt_PT", "ro", "ru", "ru_UA", "sk", "sl", "sr", "sv", "th", "tr", "uk", "vi", "zh_CN", "zh_HK", "zh_SG", "zh_TW"];
1545

155-
const allEntriesInlined = Object.entries(cldrData).every(([_key, value]) => typeof (value) === "object");
156-
/* eslint-disable */
157-
if (allEntriesInlined) {
158-
console.warn(`Inefficient bundling detected: consider bundling CLDR imports as URLs instead of inlining them.
159-
See rollup-plugin-url or webpack file-loader for more information.
160-
Suggested pattern: "cldr\\\/.*\\\.json"`);
161-
}
162-
/* eslint-enable */
6+
const cldrData = {};
7+
const cldrUrls = {};
1638

9+
// externally configurable mapping function for resolving (localeId -> URL)
10+
// default implementation - ui5 CDN
11+
let cldrMappingFn = locale => `https://ui5.sap.com/1.60.2/resources/sap/ui/core/cldr/${locale}.json`;
16412

16513
const M_ISO639_OLD_TO_NEW = {
16614
"iw": "he",
@@ -187,36 +35,59 @@ const calcLocale = (language, region, script) => {
18735

18836
// try language + region
18937
let localeId = `${language}_${region}`;
190-
if (!cldrData[localeId]) {
38+
if (!supportedLocales.includes(localeId)) {
19139
// fallback to language only
19240
localeId = language;
19341
}
194-
if (!cldrData[localeId]) {
42+
if (!supportedLocales.includes(localeId)) {
19543
// fallback to english
19644
localeId = "en";
19745
}
19846

19947
return localeId;
20048
};
20149

50+
51+
const resolveMissingMappings = () => {
52+
if (!cldrMappingFn) {
53+
return;
54+
}
55+
56+
const missingLocales = supportedLocales.filter(locale => !cldrData[locale] && !cldrUrls[locale]);
57+
missingLocales.forEach(locale => {
58+
cldrUrls[locale] = cldrMappingFn(locale);
59+
});
60+
};
61+
20262
const fetchCldrData = async (language, region, script) => {
63+
resolveMissingMappings();
20364
const localeId = calcLocale(language, region, script);
20465

205-
if (typeof (cldrData[localeId]) === "object") {
206-
// inlined from build
207-
registerModuleContent(`sap/ui/core/cldr/${localeId}.json`, JSON.stringify(cldrData[localeId]));
208-
return cldrData[localeId];
66+
const cldrObj = cldrData[localeId];
67+
const url = cldrUrls[localeId];
68+
69+
if (cldrObj) {
70+
// inlined from build or fetched independently
71+
registerModuleContent(`sap/ui/core/cldr/${localeId}.json`, JSON.stringify(cldrObj));
72+
} else if (url) {
73+
// fetch it
74+
const cldrText = await fetchTextOnce(url);
75+
registerModuleContent(`sap/ui/core/cldr/${localeId}.json`, cldrText);
20976
}
77+
};
21078

211-
const localeUrl = cldrData[localeId];
79+
const registerCldrUrl = (locale, url) => {
80+
cldrUrls[locale] = url;
81+
};
21282

213-
const cldrContent = await fetchTextOnce(localeUrl);
214-
registerModuleContent(`sap/ui/core/cldr/${localeId}.json`, cldrContent);
83+
const registerCldrData = (locale, data) => {
84+
cldrData[locale] = data;
21585
};
21686

217-
const registerCldrUrl = (locale, url) => {
218-
cldrData[locale] = url;
87+
const _registerMappingFunction = mappingFn => {
88+
cldrMappingFn = mappingFn;
21989
};
22090

221-
export { fetchCldrData, registerCldrUrl };
222-
/* eslint-enable camelcase */
91+
export {
92+
fetchCldrData, registerCldrUrl, registerCldrData, _registerMappingFunction,
93+
};

packages/base/src/RenderScheduler.js

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,21 @@ class RenderScheduler {
116116
/**
117117
* return a promise that will be resolved once all ui5 webcomponents on the page have their shadow root ready
118118
*/
119-
static whenShadowDOMReady() {
119+
static async whenShadowDOMReady() {
120+
const undefinedElements = document.querySelectorAll(":not(:defined)");
121+
122+
const definedPromises = [...undefinedElements].map(
123+
el => customElements.whenDefined(el.localName)
124+
);
125+
const timeoutPromise = new Promise(resolve => setTimeout(resolve, 5000));
126+
127+
await Promise.race([Promise.all(definedPromises), timeoutPromise]);
128+
const stillUndefined = document.querySelectorAll(":not(:defined)");
129+
if (stillUndefined.length) {
130+
// eslint-disable-next-line
131+
console.warn("undefined elements after 5 seconds: ", [...stillUndefined].map(el => el.localName));
132+
}
133+
120134
// TODO: track promises internally, the dom traversal is a POC only
121135
const ui5Components = Array.from(document.querySelectorAll("*")).filter(_ => _._shadowRootReadyPromise);
122136
return Promise.all(ui5Components.map(comp => comp._whenShadowRootReady()))

packages/base/src/ResourceLoaderOverrides.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,12 @@ sap.ui.loader._.getModuleContent = (moduleName, url) => {
2222
return getModulecontentOrig(moduleName, url);
2323
}
2424

25+
const missingModule = moduleName.match(/sap\/ui\/core\/cldr\/(\w+)\.json/);
26+
27+
if (missingModule) {
28+
throw new Error(`CLDR data for locale ${missingModule[1]} is not loaded!`);
29+
}
30+
2531
return "";
2632
};
2733

0 commit comments

Comments
 (0)