@ui5/webcomponents-tools 0.0.0-dff5837d7 → 0.0.0-e0658a650

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/CHANGELOG.md +294 -0
  2. package/README.md +5 -6
  3. package/assets-meta.js +18 -1
  4. package/bin/dev.js +6 -5
  5. package/components-package/eslint.js +28 -0
  6. package/components-package/nps.js +94 -38
  7. package/components-package/postcss.themes.js +6 -3
  8. package/components-package/vite.config.js +12 -0
  9. package/components-package/wdio.js +73 -31
  10. package/components-package/wdio.sync.js +360 -0
  11. package/icons-collection/nps.js +47 -9
  12. package/lib/copy-and-watch/index.js +30 -5
  13. package/lib/copy-list/index.js +28 -0
  14. package/lib/create-icons/index.js +101 -54
  15. package/lib/create-illustrations/index.js +161 -0
  16. package/lib/create-new-component/index.js +17 -5
  17. package/lib/dev-server/dev-server.js +66 -0
  18. package/lib/dev-server/virtual-index-html-plugin.js +52 -0
  19. package/lib/esm-abs-to-rel/index.js +58 -0
  20. package/lib/generate-custom-elements-manifest/index.js +369 -0
  21. package/lib/generate-js-imports/illustrations.js +72 -0
  22. package/lib/generate-json-imports/i18n.js +74 -32
  23. package/lib/generate-json-imports/themes.js +65 -18
  24. package/lib/hbs2lit/src/compiler.js +20 -3
  25. package/lib/hbs2lit/src/includesReplacer.js +5 -5
  26. package/lib/hbs2lit/src/litVisitor2.js +89 -15
  27. package/lib/hbs2lit/src/svgProcessor.js +3 -3
  28. package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +5 -5
  29. package/lib/hbs2ui5/index.js +50 -18
  30. package/lib/i18n/defaults.js +58 -57
  31. package/lib/i18n/toJSON.js +13 -12
  32. package/lib/jsdoc/config.json +1 -1
  33. package/lib/jsdoc/configTypescript.json +29 -0
  34. package/lib/jsdoc/plugin.js +65 -4
  35. package/lib/jsdoc/preprocess.js +60 -0
  36. package/lib/jsdoc/template/publish.js +32 -4
  37. package/lib/postcss-combine-duplicated-selectors/index.js +178 -0
  38. package/lib/postcss-css-to-esm/index.js +33 -18
  39. package/lib/postcss-css-to-json/index.js +31 -11
  40. package/lib/postcss-new-files/index.js +36 -0
  41. package/lib/postcss-p/postcss-p.mjs +14 -0
  42. package/lib/replace-global-core/index.js +25 -0
  43. package/lib/scoping/get-all-tags.js +37 -0
  44. package/lib/scoping/lint-src.js +31 -0
  45. package/lib/scoping/missing-dependencies.js +65 -0
  46. package/lib/scoping/report-tags-usage.js +28 -0
  47. package/lib/scoping/scope-test-pages.js +40 -0
  48. package/lib/test-runner/test-runner.js +63 -0
  49. package/package.json +45 -52
  50. package/bin/init-ui5-package.js +0 -3
  51. package/components-package/rollup.js +0 -134
  52. package/components-package/serve.json +0 -3
  53. package/lib/documentation/index.js +0 -143
  54. package/lib/documentation/templates/api-component-since.js +0 -3
  55. package/lib/documentation/templates/api-css-variables-section.js +0 -24
  56. package/lib/documentation/templates/api-events-section.js +0 -35
  57. package/lib/documentation/templates/api-methods-section.js +0 -26
  58. package/lib/documentation/templates/api-properties-section.js +0 -40
  59. package/lib/documentation/templates/api-slots-section.js +0 -28
  60. package/lib/documentation/templates/template.js +0 -38
  61. package/lib/init-package/index.js +0 -112
  62. package/lib/init-package/resources/.eslintignore +0 -3
  63. package/lib/init-package/resources/bundle.es5.js +0 -25
  64. package/lib/init-package/resources/bundle.esm.js +0 -34
  65. package/lib/init-package/resources/config/.eslintrc.js +0 -1
  66. package/lib/init-package/resources/config/postcss.components/postcss.config.js +0 -1
  67. package/lib/init-package/resources/config/postcss.themes/postcss.config.js +0 -1
  68. package/lib/init-package/resources/config/rollup.config.js +0 -1
  69. package/lib/init-package/resources/config/wdio.conf.js +0 -1
  70. package/lib/init-package/resources/package-scripts.js +0 -11
  71. package/lib/init-package/resources/src/Assets.js +0 -5
  72. package/lib/init-package/resources/src/Demo.hbs +0 -1
  73. package/lib/init-package/resources/src/Demo.js +0 -56
  74. package/lib/init-package/resources/src/i18n/messagebundle.properties +0 -2
  75. package/lib/init-package/resources/src/i18n/messagebundle_de.properties +0 -1
  76. package/lib/init-package/resources/src/i18n/messagebundle_en.properties +0 -1
  77. package/lib/init-package/resources/src/i18n/messagebundle_es.properties +0 -1
  78. package/lib/init-package/resources/src/i18n/messagebundle_fr.properties +0 -1
  79. package/lib/init-package/resources/src/themes/Demo.css +0 -11
  80. package/lib/init-package/resources/src/themes/sap_belize/parameters-bundle.css +0 -3
  81. package/lib/init-package/resources/src/themes/sap_belize_hcb/parameters-bundle.css +0 -3
  82. package/lib/init-package/resources/src/themes/sap_belize_hcw/parameters-bundle.css +0 -3
  83. package/lib/init-package/resources/src/themes/sap_fiori_3/parameters-bundle.css +0 -3
  84. package/lib/init-package/resources/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
  85. package/lib/init-package/resources/test/pages/index.html +0 -51
  86. package/lib/init-package/resources/test/specs/Demo.spec.js +0 -12
@@ -0,0 +1,369 @@
1
+ const fs = require("fs").promises;
2
+ // https://github.com/webcomponents/custom-elements-manifest/blob/main/schema.json
3
+
4
+ const camelToKebabMap = new Map();
5
+ const apiIndex = new Map();
6
+ const processedApiIndex = new Set();
7
+ const forbiddenAttributeTypes = ["object", "array"];
8
+
9
+ const camelToKebabCase = string => {
10
+ if (!camelToKebabMap.has(string)) {
11
+ const result = string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
12
+ camelToKebabMap.set(string, result);
13
+ }
14
+ return camelToKebabMap.get(string);
15
+ };
16
+
17
+ const generateJavaScriptExport = entity => {
18
+ return {
19
+ declaration: generateRefenrece(entity),
20
+ deprecated: !!entity.deprecated,
21
+ kind: "js",
22
+ name: "default",
23
+ };
24
+ };
25
+
26
+ const generateCustomElementExport = entity => {
27
+ return {
28
+ declaration: {
29
+ name: entity.basename,
30
+ module: `${entity.module}.js`,
31
+ },
32
+ deprecated: !!entity.deprecated,
33
+ kind: "custom-element-definition",
34
+ name: entity.tagname,
35
+ };
36
+ };
37
+
38
+ const generateJavaScriptModule = entity => {
39
+ return {
40
+ kind: "javascript-module",
41
+ path: `${entity.basename}.js`,
42
+ declarations: [
43
+ generateCustomElementDeclaration(entity),
44
+ ],
45
+ exports: [
46
+ generateJavaScriptExport(entity),
47
+ generateCustomElementExport(entity),
48
+ ],
49
+ };
50
+ };
51
+
52
+ const generateSingleClassField = classField => {
53
+ let generatedClassField = {
54
+ deprecated: !!classField.deprecated,
55
+ kind: "field",
56
+ name: classField.name,
57
+ privacy: classField.visibility,
58
+ static: !!classField.static,
59
+ type: generateType(classField.type),
60
+ };
61
+
62
+ if (classField.defaultValue) {
63
+ generatedClassField.default = classField.defaultValue;
64
+ }
65
+
66
+ if (classField.description) {
67
+ generatedClassField.description = classField.description;
68
+ }
69
+
70
+ return generatedClassField;
71
+ };
72
+
73
+ const generateSingleParameter = parameter => {
74
+ let generatedParameter = {
75
+ deprecated: !!parameter.deprecated,
76
+ name: parameter.name,
77
+ type: generateType(parameter.type),
78
+ };
79
+
80
+ if (parameter.description) {
81
+ generatedParameter.description = parameter.description;
82
+ }
83
+
84
+ if (parameter.optional) {
85
+ generatedParameter.optional = parameter.optional;
86
+ }
87
+
88
+ return generatedParameter;
89
+ };
90
+
91
+ const generateParameters = (parameters) => {
92
+ return parameters.reduce((newParametersArray, parameter) => {
93
+ newParametersArray.push(generateSingleParameter(parameter));
94
+
95
+ return newParametersArray;
96
+ }, []);
97
+ };
98
+
99
+ const generateSingleClassMethod = classMethod => {
100
+ let generatedClassMethod = {
101
+ deprecated: !!classMethod.deprecated,
102
+ kind: "method",
103
+ name: classMethod.name,
104
+ privacy: classMethod.visibility,
105
+ static: classMethod.static,
106
+ };
107
+
108
+ if (classMethod.description) {
109
+ generatedClassMethod.description = classMethod.description;
110
+ }
111
+
112
+ if (classMethod.parameters && classMethod.parameters.length) {
113
+ generatedClassMethod.parameters = generateParameters(classMethod.parameters);
114
+ }
115
+
116
+ if (classMethod.returnValue) {
117
+ generatedClassMethod.return = {
118
+ type: generateType(classMethod.returnValue.type),
119
+ };
120
+
121
+ if (classMethod.returnValue.description) {
122
+ generatedClassMethod.return.description = classMethod.returnValue.type;
123
+ }
124
+ }
125
+
126
+ return generatedClassMethod;
127
+ };
128
+
129
+ const generateClassFields = classFields => {
130
+ return classFields.reduce((newClassFieldsArray, classField) => {
131
+ newClassFieldsArray.push(generateSingleClassField(classField));
132
+
133
+ return newClassFieldsArray;
134
+ }, []);
135
+ };
136
+
137
+ const generateClassMethods = classMethods => {
138
+ return classMethods.reduce((newClassMethodsArray, classMethod) => {
139
+ newClassMethodsArray.push(generateSingleClassMethod(classMethod));
140
+
141
+ return newClassMethodsArray;
142
+ }, []);
143
+ };
144
+
145
+ const generateMembers = (classFields, classMethods) => {
146
+ return [...generateClassFields(classFields), ...generateClassMethods(classMethods)];
147
+ };
148
+
149
+ const generateType = type => {
150
+ const dataType = apiIndex.get(type);
151
+
152
+ return {
153
+ text: dataType && dataType.name.includes(".types.") ?
154
+ filterPublicApi(dataType.properties)
155
+ .map(prop => `"${prop.name}"`)
156
+ .join(" | ") : type,
157
+ };
158
+ };
159
+
160
+ const generateSingleAttribute = attribute => {
161
+ let generatedAttribute = {
162
+ default: attribute.defaultValue,
163
+ deprecated: !!attribute.deprecated,
164
+ fieldName: attribute.name,
165
+ name: camelToKebabCase(attribute.name),
166
+ type: generateType(attribute.type),
167
+ };
168
+
169
+ if (attribute.description) {
170
+ generatedAttribute.description = attribute.description;
171
+ }
172
+
173
+ return generatedAttribute;
174
+ };
175
+
176
+ const generateAttributes = attributes => {
177
+ attributes = attributes.reduce((newAttributesArray, attribute) => {
178
+ newAttributesArray.push(generateSingleAttribute(attribute));
179
+
180
+ return newAttributesArray;
181
+ }, []);
182
+
183
+ return attributes;
184
+ };
185
+
186
+ const generateSingleEvent = event => {
187
+ let generatedEvent = {
188
+ deprecated: !!event.deprecated,
189
+ name: event.name,
190
+ type: event.native === "true" ? "NativeEvent" : "CustomEvent",
191
+ };
192
+
193
+ if (event.description) {
194
+ generatedEvent.description = event.description;
195
+ }
196
+
197
+ return generatedEvent;
198
+ };
199
+
200
+ const generateEvents = events => {
201
+ events = events.reduce((newEventsArray, event) => {
202
+ newEventsArray.push(generateSingleEvent(event));
203
+
204
+ return newEventsArray;
205
+ }, []);
206
+
207
+ return events;
208
+ };
209
+
210
+ const generateSingleSlot = slot => {
211
+ return {
212
+ deprecated: !!slot.deprecated,
213
+ description: slot.description,
214
+ name: slot.name,
215
+ };
216
+ };
217
+
218
+ const generateSlots = slots => {
219
+ slots = slots.reduce((newSlotsArray, event) => {
220
+ newSlotsArray.push(generateSingleSlot(event));
221
+
222
+ return newSlotsArray;
223
+ }, []);
224
+
225
+ return slots;
226
+ };
227
+
228
+ const generateCustomElementDeclaration = entity => {
229
+ entity = generateFullComponentApi(entity);
230
+
231
+ let generatedCustomElementDeclaration = {
232
+ deprecated: !!entity.deprecated,
233
+ customElement: true,
234
+ kind: entity.basename,
235
+ name: entity.basename,
236
+ tagName: entity.tagname,
237
+ };
238
+
239
+ const slots = filterPublicApi(entity.slots);
240
+ const events = filterPublicApi(entity.events);
241
+ const classFields = filterPublicApi(entity.properties);
242
+ const classMethods = filterPublicApi(entity.methods);
243
+ const attributes = classFields.filter(property => {
244
+ return property.noattribute !== "true" && property.readonly !== "true" && !forbiddenAttributeTypes.includes(property.type.toLowerCase());
245
+ });
246
+
247
+ if (slots.length) {
248
+ generatedCustomElementDeclaration.slots = generateSlots(slots);
249
+ }
250
+
251
+ if (events.length) {
252
+ generatedCustomElementDeclaration.events = generateEvents(events);
253
+ }
254
+
255
+ if (attributes.length) {
256
+ generatedCustomElementDeclaration.attributes = generateAttributes(attributes);
257
+ }
258
+
259
+ if (entity.description) {
260
+ generatedCustomElementDeclaration.description = entity.description;
261
+ }
262
+
263
+ if (classFields.length || classMethods.length) {
264
+ generatedCustomElementDeclaration.members = generateMembers(classFields, classMethods);
265
+ }
266
+
267
+ if (entity.extends && entity.extends !== "HTMLElement") {
268
+ generatedCustomElementDeclaration.superclass = generateRefenrece(apiIndex.get(entity.extends));
269
+ }
270
+
271
+ return generatedCustomElementDeclaration;
272
+ };
273
+
274
+ const generateRefenrece = (entity) => {
275
+ let packageName;
276
+
277
+ if (entity.name.includes("sap.ui.webcomponents.main")) {
278
+ packageName = "@ui5/webcomponents";
279
+ } else if (entity.name.includes("sap.ui.webcomponents.fiori")) {
280
+ packageName = "@ui5/webcomponents-fiori";
281
+ } else if (entity.name.includes("sap.ui.webcomponents.base")) {
282
+ packageName = "@ui5/webcomponents-base";
283
+ }
284
+
285
+ return {
286
+ module: `${entity.module}.js`,
287
+ name: `${entity.basename}`,
288
+ package: packageName,
289
+ };
290
+ };
291
+
292
+ const generateFullComponentApi = entity => {
293
+ const componentProps = ["properties", "slots", "events", "methods"];
294
+ let parent = apiIndex.get(entity.extends);
295
+
296
+ if (!parent) {
297
+ processedApiIndex.add(entity.name);
298
+
299
+ return entity;
300
+ }
301
+
302
+ parent = processedApiIndex.has(entity.extends) ? apiIndex.get(entity.extends) : generateFullComponentApi(parent);
303
+
304
+ componentProps.forEach(prop => {
305
+ if (parent[prop] && parent[prop].length) {
306
+ if (entity[prop] && entity[prop].length) {
307
+ const uniqueParentState = parent[prop].filter(pSlot => {
308
+ return !entity[prop].some(eSlot => eSlot.name === pSlot.name);
309
+ });
310
+
311
+ entity[prop] = entity[prop].concat(uniqueParentState);
312
+ } else {
313
+ entity[prop] = [...parent[prop]];
314
+ }
315
+ }
316
+ });
317
+
318
+ processedApiIndex.add(entity.name);
319
+
320
+ return entity;
321
+ };
322
+
323
+ const filterPublicApi = array => {
324
+ return (array || []).filter(el => el.visibility === "public");
325
+ };
326
+
327
+ const generate = async () => {
328
+ const apiFilesPaths = [
329
+ require.resolve("@ui5/webcomponents-base/dist/api.json"),
330
+ require.resolve("@ui5/webcomponents/dist/api.json"),
331
+ require.resolve("@ui5/webcomponents-fiori/dist/api.json"),
332
+ ];
333
+
334
+ let apiFiles = new Map();
335
+
336
+ await Promise.all(apiFilesPaths.map(async (apiFilePath) => {
337
+ const file = JSON.parse(await fs.readFile(apiFilePath));
338
+
339
+ apiFiles.set(apiFilePath, file);
340
+
341
+ file.symbols.forEach(symbol => {
342
+ apiIndex.set(symbol.name, symbol);
343
+ });
344
+ }));
345
+
346
+ await Promise.all(apiFilesPaths.map(async (apiFilePath) => {
347
+ if (apiFilePath.includes("base")) {
348
+ return;
349
+ }
350
+
351
+ let customElementsManifest = {
352
+ schemaVersion: "1.0.0",
353
+ readme: "",
354
+ modules: [],
355
+ };
356
+
357
+ apiFiles.get(apiFilePath).symbols.forEach(entity => {
358
+ if (entity.tagname) {
359
+ customElementsManifest.modules.push(generateJavaScriptModule(entity));
360
+ }
361
+ });
362
+
363
+ await fs.writeFile(apiFilePath.replace("api.json", "custom-elements.json"), JSON.stringify(customElementsManifest));
364
+ }));
365
+ };
366
+
367
+ generate().then(() => {
368
+ console.log("Custom elements manifest generated.");
369
+ });
@@ -0,0 +1,72 @@
1
+ const fs = require("fs").promises;
2
+ const path = require('path');
3
+
4
+ const generate = async () => {
5
+ const fioriInputFolder = path.normalize(process.argv[2]);
6
+ const tntInputFolder = path.normalize(process.argv[3]);
7
+ const outputFile = path.normalize(`${process.argv[4]}/Illustrations.js`);
8
+
9
+ const dir = await fs.readdir(fioriInputFolder);
10
+ const fioriIllustrationsOnFileSystem = dir.map(illustrationName => {
11
+ const fioriMatches = illustrationName.match(/.*\.js$/);
12
+ return fioriMatches ? illustrationName : undefined;
13
+ }).filter(key => !!key);
14
+
15
+ const tntDir = await fs.readdir(tntInputFolder);
16
+ const tntIllustrationsOnFileSystem = tntDir.map(illustrationName => {
17
+ const tntMatches = illustrationName.match(/.*\.js$/);
18
+ return tntMatches ? illustrationName : undefined;
19
+ }).filter(key => !!key);
20
+
21
+ // dynamic imports for Fiori illustrations
22
+ const fioriAvailableIllustrationsArray = `[${fioriIllustrationsOnFileSystem.filter(
23
+ // skipping the items starting with sapIllus-Dialog, sapIllus-Scene, sapIllus-Spot since they are included in the illustration's js file
24
+ line => !line.startsWith("sapIllus-Dialog") && !line.startsWith("sapIllus-Scene") && !line.startsWith("sapIllus-Spot") && !line.startsWith("AllIllustrations")).map(illustrationName => `"${illustrationName.replace('.js', '')}"`).join(", ")}]`;
25
+
26
+ const fioriDynamicImportLines = fioriIllustrationsOnFileSystem.map(illustrationName =>
27
+ `\t\tcase "${illustrationName.replace('.js', '')}": return (await import("../../illustrations/${illustrationName}")).default;`).filter(
28
+ // skipping the items starting with sapIllus-Dialog, sapIllus-Scene, sapIllus-Spot since they are included in the illustration's js file
29
+ line => !line.startsWith("\t\tcase \"sapIllus-Dialog") && !line.startsWith("\t\tcase \"sapIllus-Scene") && !line.startsWith("\t\tcase \"sapIllus-Spot") && !line.startsWith("\t\tcase \"AllIllustrations")).join("\n");
30
+
31
+ // dynamic imports for Tnt illustrations
32
+ const tntAvailableIllustrationsArray = `[${tntIllustrationsOnFileSystem.filter(
33
+ // skipping the items starting with tnt-Dialog, tnt-Scene, tnt-Spot since they are included in the illustration's js file
34
+ line => !line.startsWith("tnt-Dialog") && !line.startsWith("tnt-Scene") && !line.startsWith("tnt-Spot")).map(illustrationName => `"Tnt${illustrationName.replace('.js', '')}"`).join(", ")}]`;
35
+
36
+ const tntDynamicImportLines = tntIllustrationsOnFileSystem.map(illustrationName =>
37
+ `\t\tcase "Tnt${illustrationName.replace('.js', '')}": return (await import("../../illustrations/tnt/${illustrationName}")).default;`).filter(
38
+ // skipping the items starting with tnt-Dialog, tnt-Scene, tnt-Spot since they are included in the illustration's js file
39
+ line => !line.startsWith("\t\tcase \"Tnttnt-Dialog") && !line.startsWith("\t\tcase \"Tnttnt-Scene") && !line.startsWith("\t\tcase \"Tnttnt-Spot")).join("\n");
40
+
41
+
42
+ // dynamic imports file content
43
+ const contentDynamic = `import { registerIllustrationLoader } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
44
+
45
+ const loadIllustration = async (illustrationName) => {
46
+ switch (illustrationName) {
47
+ ${fioriDynamicImportLines}
48
+ ${tntDynamicImportLines}
49
+ default: throw new Error("[Illustrations] Illustration not found: " + illustrationName);
50
+ }
51
+ };
52
+ const loadAndCheck = async (illustrationName) => {
53
+ const data = await loadIllustration(illustrationName);
54
+ return data;
55
+ }
56
+
57
+
58
+ ${fioriAvailableIllustrationsArray}.forEach(illustrationName => registerIllustrationLoader(illustrationName, loadAndCheck));
59
+ ${tntAvailableIllustrationsArray}.forEach(illustrationName => registerIllustrationLoader(illustrationName, loadAndCheck));`;
60
+
61
+
62
+ await fs.mkdir(path.dirname(outputFile), { recursive: true });
63
+ return Promise.all([fs.writeFile(outputFile, contentDynamic)]);
64
+ };
65
+
66
+ generate().then(() => {
67
+ console.log("Generated Illustrations.js");
68
+ })
69
+ .catch(err => {
70
+ console.error(err);
71
+ process.exit(1);
72
+ });
@@ -1,38 +1,38 @@
1
- const fs = require("fs");
1
+ const fs = require("fs").promises;
2
2
  const path = require('path');
3
- const mkdirp = require("mkdirp");
4
- const assets = require("../../assets-meta.js");
5
3
 
6
- const packageName = JSON.parse(fs.readFileSync("package.json")).name;
4
+ const generate = async () => {
7
5
 
8
- const inputFolder = path.normalize(process.argv[2]);
9
- const outputFile = path.normalize(`${process.argv[3]}/i18n.js`);
6
+ const packageName = JSON.parse(await fs.readFile("package.json")).name;
10
7
 
11
- const defaultLanguage = assets.languages.default;
8
+ const inputFolder = path.normalize(process.argv[2]);
9
+ const outputFile = path.normalize(`${process.argv[3]}/i18n-static.js`);
10
+ const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.js`);
12
11
 
13
12
  // All languages present in the file system
14
- const files = fs.readdirSync(inputFolder);
15
- const languages = files.map(file => {
16
- const matches = file.match(/messagebundle_(.+?).json$/);
17
- return matches ? matches[1] : undefined;
18
- }).filter(key => !!key && key !== defaultLanguage);
13
+ const files = await fs.readdir(inputFolder);
14
+ const languages = files.map(file => {
15
+ const matches = file.match(/messagebundle_(.+?).json$/);
16
+ return matches ? matches[1] : undefined;
17
+ }).filter(key => !!key);
19
18
 
20
- let content;
19
+ let contentStatic, contentDynamic;
21
20
 
22
21
  // No i18n - just import dependencies, if any
23
- if (languages.length === 0) {
24
- content = ``;
22
+ if (languages.length === 0) {
23
+ contentStatic = "";
24
+ contentDynamic = "";
25
25
  // There is i18n - generate the full file
26
- } else {
26
+ } else {
27
+ // Keys for the array
28
+ const languagesKeysString = languages.map(key => `"${key}": _${key},`).join("\n\t");
29
+ const languagesKeysStringArray = languages.map(key => `"${key}",`).join("\n\t");
27
30
 
28
- // Keys for the array
29
- const languagesKeysString = languages.map(key => `${key},`).join("\n\t");
31
+ // Actual imports for json assets
32
+ const assetsImportsString = languages.map(key => `import _${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
30
33
 
31
- // Actual imports for json assets
32
- const assetsImportsString = languages.map(key => `import ${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
33
-
34
- // Resulting file content
35
- content = `import { registerI18nBundle } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
34
+ // static imports
35
+ contentStatic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
36
36
 
37
37
  ${assetsImportsString}
38
38
 
@@ -40,17 +40,59 @@ const bundleMap = {
40
40
  ${languagesKeysString}
41
41
  };
42
42
 
43
- const allEntriesInlined = Object.entries(bundleMap).every(([_key, value]) => typeof (value) === "object");
44
-
45
- if (allEntriesInlined) {
46
- console.warn(\`Inefficient bundling detected: consider bundling i18n imports as URLs instead of inlining them.
47
- See rollup-plugin-url or webpack file-loader for more information.
48
- Suggested pattern: "assets\\\\\\/.*\\\\\\.json"\`);
43
+ const fetchMessageBundle = async (localeId) => {
44
+ if (typeof bundleMap[localeId] === "object") {
45
+ // inlined from build
46
+ throw new Error("[i18n] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs")
47
+ }
48
+ return (await fetch(bundleMap[localeId])).json()
49
49
  }
50
50
 
51
- registerI18nBundle("${packageName}", bundleMap);
51
+ const localeIds = [${languagesKeysStringArray}];
52
+
53
+ localeIds.forEach(localeId => {
54
+ registerI18nLoader("${packageName}", localeId, fetchMessageBundle);
55
+ });
52
56
  `;
57
+
58
+ // Actual imports for json assets
59
+ const dynamicImportsString = languages.map(key => ` case "${key}": return (await import("../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
60
+
61
+ // Resulting file content
62
+ contentDynamic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
63
+
64
+ const importMessageBundle = async (localeId) => {
65
+ switch (localeId) {
66
+ ${dynamicImportsString}
67
+ default: throw "unknown locale"
68
+ }
69
+ }
70
+
71
+ const importAndCheck = async (localeId) => {
72
+ const data = await importMessageBundle(localeId);
73
+ if (typeof data === "string" && data.endsWith(".json")) {
74
+ throw new Error(\`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
75
+ }
76
+ return data;
77
+ }
78
+
79
+ const localeIds = [${languagesKeysStringArray}];
80
+
81
+ localeIds.forEach(localeId => {
82
+ registerI18nLoader("${packageName}", localeId, importAndCheck);
83
+ });
84
+ `;
85
+
86
+
87
+ }
88
+
89
+ await fs.mkdir(path.dirname(outputFile), { recursive: true });
90
+ return Promise.all([
91
+ fs.writeFile(outputFile, contentStatic),
92
+ fs.writeFile(outputFileDynamic, contentDynamic),
93
+ ]);
53
94
  }
54
95
 
55
- mkdirp.sync(path.dirname(outputFile));
56
- fs.writeFileSync(outputFile, content);
96
+ generate().then(() => {
97
+ console.log("Generated i18n JSON imports.");
98
+ });
@@ -1,33 +1,80 @@
1
- const fs = require("fs");
1
+ const fs = require("fs").promises;
2
2
  const path = require('path');
3
- const mkdirp = require("mkdirp");
4
3
  const assets = require("../../assets-meta.js");
5
4
 
6
- const outputFile = path.normalize(`${process.argv[2]}/Themes.js`);
5
+ const generate = async () => {
6
+ const inputFolder = path.normalize(process.argv[2]);
7
+ const outputFile = path.normalize(`${process.argv[3]}/Themes-static.js`);
8
+ const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.js`);
7
9
 
8
- const optionalThemes = assets.themes.all.filter(theme => theme !== assets.themes.default);
10
+ // All supported optional themes
11
+ const allThemes = assets.themes.all;
9
12
 
10
- const packageName = JSON.parse(fs.readFileSync("package.json")).name;
13
+ // All themes present in the file system
14
+ const dirs = await fs.readdir(inputFolder);
15
+ const themesOnFileSystem = dirs.map(dir => {
16
+ const matches = dir.match(/sap_.*$/);
17
+ return matches ? dir : undefined;
18
+ }).filter(key => !!key && allThemes.includes(key));
11
19
 
12
- const importLines = optionalThemes.map(theme => `import ${theme} from "../assets/themes/${theme}/parameters-bundle.css.json";`).join("\n");
13
- const isInlinedCondition = optionalThemes.map(theme => `isInlined(${theme})`).join(" || ");
14
- const registerLines = optionalThemes.map(theme => `registerThemeProperties("${packageName}", "${theme}", ${theme});`).join("\n");
20
+ const packageName = JSON.parse(await fs.readFile("package.json")).name;
15
21
 
16
- // Resulting file content
17
- const content = `import { registerThemeProperties } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
22
+ const importLines = themesOnFileSystem.map(theme => `import ${theme} from "../assets/themes/${theme}/parameters-bundle.css.json";`).join("\n");
23
+ const themeUrlsByName = "{\n" + themesOnFileSystem.join(",\n") + "\n}";
24
+ const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`;
25
+ const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import("../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n");
26
+
27
+
28
+ // static imports file content
29
+ const contentStatic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
18
30
 
19
31
  ${importLines}
20
32
 
33
+ const themeUrlsByName = ${themeUrlsByName};
21
34
  const isInlined = obj => typeof (obj) === "object";
22
35
 
23
- if (${isInlinedCondition}) {
24
- console.warn(\`Inefficient bundling detected: consider bundling theme properties imports as URLs instead of inlining them.
25
- See rollup-plugin-url or webpack file-loader for more information.
26
- Suggested pattern: "assets\\\\\\/.*\\\\\\.json"\`);
27
- }
36
+ const loadThemeProperties = async (themeName) => {
37
+ if (typeof themeUrlsByName[themeName] === "object") {
38
+ // inlined from build
39
+ throw new Error("[themes] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs");
40
+ }
41
+ return (await fetch(themeUrlsByName[themeName])).json();
42
+ };
28
43
 
29
- ${registerLines};
44
+ ${availableThemesArray}
45
+ .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadThemeProperties));
30
46
  `;
31
47
 
32
- mkdirp.sync(path.dirname(outputFile));
33
- fs.writeFileSync(outputFile, content);
48
+
49
+ // dynamic imports file content
50
+ const contentDynamic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
51
+
52
+ const loadThemeProperties = async (themeName) => {
53
+ switch (themeName) {
54
+ ${dynamicImportLines}
55
+ default: throw "unknown theme"
56
+ }
57
+ };
58
+
59
+ const loadAndCheck = async (themeName) => {
60
+ const data = await loadThemeProperties(themeName);
61
+ if (typeof data === "string" && data.endsWith(".json")) {
62
+ throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
63
+ }
64
+ return data;
65
+ };
66
+
67
+ ${availableThemesArray}
68
+ .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
69
+ `;
70
+
71
+ await fs.mkdir(path.dirname(outputFile), { recursive: true });
72
+ return Promise.all([
73
+ fs.writeFile(outputFile, contentStatic),
74
+ fs.writeFile(outputFileDynamic, contentDynamic)
75
+ ]);
76
+ };
77
+
78
+ generate().then(() => {
79
+ console.log("Generated themes JSON imports.");
80
+ });