@ui5/webcomponents-tools 0.0.0-fd6264051 → 0.0.0-ff1549e7b

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 (64) hide show
  1. package/CHANGELOG.md +375 -0
  2. package/README.md +5 -6
  3. package/assets-meta.js +1 -0
  4. package/bin/dev.js +1 -5
  5. package/components-package/eslint.js +34 -0
  6. package/components-package/nps.js +87 -58
  7. package/components-package/postcss.components.js +13 -13
  8. package/components-package/postcss.themes.js +26 -16
  9. package/components-package/vite.config.js +13 -0
  10. package/components-package/wdio.js +401 -369
  11. package/components-package/wdio.sync.js +10 -2
  12. package/icons-collection/nps.js +8 -11
  13. package/lib/copy-and-watch/index.js +24 -1
  14. package/lib/copy-list/index.js +17 -17
  15. package/lib/create-icons/index.js +124 -72
  16. package/lib/create-illustrations/index.js +101 -90
  17. package/lib/create-new-component/index.js +71 -104
  18. package/lib/create-new-component/jsFileContentTemplate.js +73 -0
  19. package/lib/create-new-component/tsFileContentTemplate.js +80 -0
  20. package/lib/dev-server/dev-server.js +66 -0
  21. package/lib/dev-server/virtual-index-html-plugin.js +52 -0
  22. package/lib/esm-abs-to-rel/index.js +13 -9
  23. package/lib/generate-custom-elements-manifest/index.js +327 -0
  24. package/lib/generate-js-imports/illustrations.js +72 -0
  25. package/lib/generate-json-imports/i18n.js +38 -31
  26. package/lib/generate-json-imports/themes.js +31 -24
  27. package/lib/hbs2lit/src/compiler.js +24 -4
  28. package/lib/hbs2lit/src/includesReplacer.js +5 -5
  29. package/lib/hbs2lit/src/litVisitor2.js +85 -22
  30. package/lib/hbs2lit/src/svgProcessor.js +12 -5
  31. package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +32 -4
  32. package/lib/hbs2ui5/index.js +56 -23
  33. package/lib/i18n/defaults.js +65 -57
  34. package/lib/i18n/toJSON.js +12 -11
  35. package/lib/jsdoc/configTypescript.json +29 -0
  36. package/lib/jsdoc/plugin.js +32 -0
  37. package/lib/jsdoc/preprocess.js +146 -0
  38. package/lib/jsdoc/template/publish.js +9 -1
  39. package/lib/postcss-combine-duplicated-selectors/index.js +178 -0
  40. package/lib/postcss-css-to-esm/index.js +51 -6
  41. package/lib/postcss-css-to-json/index.js +12 -1
  42. package/lib/postcss-p/postcss-p.mjs +14 -0
  43. package/lib/replace-global-core/index.js +13 -8
  44. package/lib/scoping/get-all-tags.js +1 -8
  45. package/lib/scoping/scope-test-pages.js +1 -1
  46. package/lib/test-runner/test-runner.js +71 -0
  47. package/package.json +27 -26
  48. package/components-package/rollup-plugins/empty-module.js +0 -15
  49. package/components-package/rollup.js +0 -239
  50. package/lib/documentation/index.js +0 -165
  51. package/lib/documentation/templates/api-component-since.js +0 -3
  52. package/lib/documentation/templates/api-css-variables-section.js +0 -24
  53. package/lib/documentation/templates/api-events-section.js +0 -35
  54. package/lib/documentation/templates/api-methods-section.js +0 -26
  55. package/lib/documentation/templates/api-properties-section.js +0 -42
  56. package/lib/documentation/templates/api-slots-section.js +0 -28
  57. package/lib/documentation/templates/template.js +0 -39
  58. package/lib/hash/config.js +0 -10
  59. package/lib/hash/generate.js +0 -19
  60. package/lib/hash/upToDate.js +0 -31
  61. package/lib/polyfill-placeholder/index.js +0 -5
  62. package/lib/serve/index.js +0 -46
  63. package/lib/serve/serve.json +0 -3
  64. package/package-lock.json +0 -48
@@ -0,0 +1,327 @@
1
+ const fs = require("fs").promises;
2
+ const path = require("path");
3
+ // https://github.com/webcomponents/custom-elements-manifest/blob/main/schema.json
4
+
5
+ const inputDir = process.argv[2];
6
+ const outputDir = process.argv[3];
7
+
8
+ const camelToKebabMap = new Map();
9
+ const apiIndex = new Map();
10
+ const forbiddenAttributeTypes = ["object", "array"];
11
+
12
+ const camelToKebabCase = string => {
13
+ if (!camelToKebabMap.has(string)) {
14
+ const result = string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
15
+ camelToKebabMap.set(string, result);
16
+ }
17
+ return camelToKebabMap.get(string);
18
+ };
19
+
20
+ const generateJavaScriptExport = entity => {
21
+ return {
22
+ declaration: generateRefenrece(entity.name),
23
+ deprecated: !!entity.deprecated,
24
+ kind: "js",
25
+ name: "default",
26
+ };
27
+ };
28
+
29
+ const generateCustomElementExport = entity => {
30
+ return {
31
+ declaration: {
32
+ name: entity.basename,
33
+ module: `${entity.module}.js`,
34
+ },
35
+ deprecated: !!entity.deprecated,
36
+ kind: "custom-element-definition",
37
+ name: entity.tagname,
38
+ };
39
+ };
40
+
41
+ const generateJavaScriptModule = entity => {
42
+ return {
43
+ kind: "javascript-module",
44
+ path: `${entity.basename}.js`,
45
+ declarations: [
46
+ generateCustomElementDeclaration(entity),
47
+ ],
48
+ exports: [
49
+ generateJavaScriptExport(entity),
50
+ generateCustomElementExport(entity),
51
+ ],
52
+ };
53
+ };
54
+
55
+ const generateSingleClassField = classField => {
56
+ let generatedClassField = {
57
+ deprecated: !!classField.deprecated,
58
+ kind: "field",
59
+ name: classField.name,
60
+ privacy: classField.visibility,
61
+ static: !!classField.static,
62
+ type: generateType(classField.type),
63
+ };
64
+
65
+ if (classField.defaultValue) {
66
+ generatedClassField.default = classField.defaultValue;
67
+ }
68
+
69
+ if (classField.description) {
70
+ generatedClassField.description = classField.description;
71
+ }
72
+
73
+ return generatedClassField;
74
+ };
75
+
76
+ const generateSingleParameter = parameter => {
77
+ let generatedParameter = {
78
+ deprecated: !!parameter.deprecated,
79
+ name: parameter.name,
80
+ type: generateType(parameter.type),
81
+ };
82
+
83
+ if (parameter.description) {
84
+ generatedParameter.description = parameter.description;
85
+ }
86
+
87
+ if (parameter.optional) {
88
+ generatedParameter.optional = parameter.optional;
89
+ }
90
+
91
+ return generatedParameter;
92
+ };
93
+
94
+ const generateParameters = (parameters) => {
95
+ return parameters.reduce((newParametersArray, parameter) => {
96
+ newParametersArray.push(generateSingleParameter(parameter));
97
+
98
+ return newParametersArray;
99
+ }, []);
100
+ };
101
+
102
+ const generateSingleClassMethod = classMethod => {
103
+ let generatedClassMethod = {
104
+ deprecated: !!classMethod.deprecated,
105
+ kind: "method",
106
+ name: classMethod.name,
107
+ privacy: classMethod.visibility,
108
+ static: classMethod.static,
109
+ };
110
+
111
+ if (classMethod.description) {
112
+ generatedClassMethod.description = classMethod.description;
113
+ }
114
+
115
+ if (classMethod.parameters && classMethod.parameters.length) {
116
+ generatedClassMethod.parameters = generateParameters(classMethod.parameters);
117
+ }
118
+
119
+ if (classMethod.returnValue) {
120
+ generatedClassMethod.return = {
121
+ type: generateType(classMethod.returnValue.type),
122
+ };
123
+
124
+ if (classMethod.returnValue.description) {
125
+ generatedClassMethod.return.description = classMethod.returnValue.type;
126
+ }
127
+ }
128
+
129
+ return generatedClassMethod;
130
+ };
131
+
132
+ const generateClassFields = classFields => {
133
+ return classFields.reduce((newClassFieldsArray, classField) => {
134
+ newClassFieldsArray.push(generateSingleClassField(classField));
135
+
136
+ return newClassFieldsArray;
137
+ }, []);
138
+ };
139
+
140
+ const generateClassMethods = classMethods => {
141
+ return classMethods.reduce((newClassMethodsArray, classMethod) => {
142
+ newClassMethodsArray.push(generateSingleClassMethod(classMethod));
143
+
144
+ return newClassMethodsArray;
145
+ }, []);
146
+ };
147
+
148
+ const generateMembers = (classFields, classMethods) => {
149
+ return [...generateClassFields(classFields), ...generateClassMethods(classMethods)];
150
+ };
151
+
152
+ const generateType = type => {
153
+ const dataType = apiIndex.get(type);
154
+
155
+ return {
156
+ text: dataType && dataType.name.includes(".types.") ?
157
+ filterPublicApi(dataType.properties)
158
+ .map(prop => `"${prop.name}"`)
159
+ .join(" | ") : type,
160
+ };
161
+ };
162
+
163
+ const generateSingleAttribute = attribute => {
164
+ let generatedAttribute = {
165
+ default: attribute.defaultValue,
166
+ deprecated: !!attribute.deprecated,
167
+ fieldName: attribute.name,
168
+ name: camelToKebabCase(attribute.name),
169
+ type: generateType(attribute.type),
170
+ };
171
+
172
+ if (attribute.description) {
173
+ generatedAttribute.description = attribute.description;
174
+ }
175
+
176
+ return generatedAttribute;
177
+ };
178
+
179
+ const generateAttributes = attributes => {
180
+ attributes = attributes.reduce((newAttributesArray, attribute) => {
181
+ newAttributesArray.push(generateSingleAttribute(attribute));
182
+
183
+ return newAttributesArray;
184
+ }, []);
185
+
186
+ return attributes;
187
+ };
188
+
189
+ const generateSingleEvent = event => {
190
+ let generatedEvent = {
191
+ deprecated: !!event.deprecated,
192
+ name: event.name,
193
+ type: event.native === "true" ? "NativeEvent" : "CustomEvent",
194
+ };
195
+
196
+ if (event.description) {
197
+ generatedEvent.description = event.description;
198
+ }
199
+
200
+ return generatedEvent;
201
+ };
202
+
203
+ const generateEvents = events => {
204
+ events = events.reduce((newEventsArray, event) => {
205
+ newEventsArray.push(generateSingleEvent(event));
206
+
207
+ return newEventsArray;
208
+ }, []);
209
+
210
+ return events;
211
+ };
212
+
213
+ const generateSingleSlot = slot => {
214
+ return {
215
+ deprecated: !!slot.deprecated,
216
+ description: slot.description,
217
+ name: slot.name,
218
+ };
219
+ };
220
+
221
+ const generateSlots = slots => {
222
+ slots = slots.reduce((newSlotsArray, event) => {
223
+ newSlotsArray.push(generateSingleSlot(event));
224
+
225
+ return newSlotsArray;
226
+ }, []);
227
+
228
+ return slots;
229
+ };
230
+
231
+ const generateCustomElementDeclaration = entity => {
232
+ let generatedCustomElementDeclaration = {
233
+ deprecated: !!entity.deprecated,
234
+ customElement: true,
235
+ kind: entity.basename,
236
+ name: entity.basename,
237
+ tagName: entity.tagname,
238
+ };
239
+
240
+ const slots = filterPublicApi(entity.slots);
241
+ const events = filterPublicApi(entity.events);
242
+ const classFields = filterPublicApi(entity.properties);
243
+ const classMethods = filterPublicApi(entity.methods);
244
+ const attributes = classFields.filter(property => {
245
+ return property.noattribute !== "true" && property.readonly !== "true" && !forbiddenAttributeTypes.includes(property.type.toLowerCase());
246
+ });
247
+
248
+ if (slots.length) {
249
+ generatedCustomElementDeclaration.slots = generateSlots(slots);
250
+ }
251
+
252
+ if (events.length) {
253
+ generatedCustomElementDeclaration.events = generateEvents(events);
254
+ }
255
+
256
+ if (attributes.length) {
257
+ generatedCustomElementDeclaration.attributes = generateAttributes(attributes);
258
+ }
259
+
260
+ if (entity.description) {
261
+ generatedCustomElementDeclaration.description = entity.description;
262
+ }
263
+
264
+ if (classFields.length || classMethods.length) {
265
+ generatedCustomElementDeclaration.members = generateMembers(classFields, classMethods);
266
+ }
267
+
268
+ if (entity.extends && entity.extends !== "HTMLElement") {
269
+ generatedCustomElementDeclaration.superclass = generateRefenrece(entity.extends);
270
+ }
271
+
272
+ return generatedCustomElementDeclaration;
273
+ };
274
+
275
+ const generateRefenrece = (entityName) => {
276
+ let packageName;
277
+ let basename;
278
+
279
+ if (!entityName) {
280
+ throw new Error("JSDoc error: entity not found in api.json.");
281
+ }
282
+
283
+ if (entityName.includes(".")) {
284
+ basename = entityName.split(".").pop();
285
+ } else {
286
+ basename = entityName
287
+ }
288
+
289
+ if (entityName.includes("sap.ui.webc.main")) {
290
+ packageName = "@ui5/webcomponents";
291
+ } else if (entityName.includes("sap.ui.webc.fiori")) {
292
+ packageName = "@ui5/webcomponents-fiori";
293
+ } else if (entityName.includes("sap.ui.webc.base")) {
294
+ packageName = "@ui5/webcomponents-base";
295
+ }
296
+
297
+ return {
298
+ module: `${basename}.js`,
299
+ name: `${basename}`,
300
+ package: packageName,
301
+ };
302
+ };
303
+
304
+ const filterPublicApi = array => {
305
+ return (array || []).filter(el => el.visibility === "public");
306
+ };
307
+
308
+ const generate = async () => {
309
+ const file = JSON.parse(await fs.readFile(path.join(inputDir, "api.json")));
310
+ let customElementsManifest = {
311
+ schemaVersion: "1.0.0",
312
+ readme: "",
313
+ modules: [],
314
+ };
315
+
316
+ file.symbols.forEach(entity => {
317
+ if (entity.tagname) {
318
+ customElementsManifest.modules.push(generateJavaScriptModule(entity));
319
+ }
320
+ });
321
+
322
+ await fs.writeFile(path.join(outputDir, "custom-elements.json"), JSON.stringify(customElementsManifest));
323
+ };
324
+
325
+ generate().then(() => {
326
+ console.log("Custom elements manifest generated.");
327
+ });
@@ -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,37 +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
3
 
5
- const packageName = JSON.parse(fs.readFileSync("package.json")).name;
4
+ const generate = async () => {
6
5
 
7
- const inputFolder = path.normalize(process.argv[2]);
8
- const outputFile = path.normalize(`${process.argv[3]}/i18n-static.js`);
9
- const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.js`);
6
+ const packageName = JSON.parse(await fs.readFile("package.json")).name;
7
+
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`);
10
11
 
11
12
  // All languages present in the file system
12
- const files = fs.readdirSync(inputFolder);
13
- const languages = files.map(file => {
14
- const matches = file.match(/messagebundle_(.+?).json$/);
15
- return matches ? matches[1] : undefined;
16
- }).filter(key => !!key);
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);
17
18
 
18
- let contentStatic, contentDynamic;
19
+ let contentStatic, contentDynamic;
19
20
 
20
21
  // No i18n - just import dependencies, if any
21
- if (languages.length === 0) {
22
- contentStatic = "";
23
- contentDynamic = "";
22
+ if (languages.length === 0) {
23
+ contentStatic = "";
24
+ contentDynamic = "";
24
25
  // There is i18n - generate the full file
25
- } else {
26
- // Keys for the array
27
- const languagesKeysString = languages.map(key => `"${key}": _${key},`).join("\n\t");
28
- const languagesKeysStringArray = languages.map(key => `"${key}",`).join("\n\t");
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");
29
30
 
30
- // Actual imports for json assets
31
- const assetsImportsString = languages.map(key => `import _${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
31
+ // Actual imports for json assets
32
+ const assetsImportsString = languages.map(key => `import _${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
32
33
 
33
- // static imports
34
- contentStatic = `import { registerI18nLoader } 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";
35
36
 
36
37
  ${assetsImportsString}
37
38
 
@@ -54,11 +55,11 @@ localeIds.forEach(localeId => {
54
55
  });
55
56
  `;
56
57
 
57
- // Actual imports for json assets
58
- const dynamicImportsString = languages.map(key => ` case "${key}": return (await import("../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
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");
59
60
 
60
- // Resulting file content
61
- contentDynamic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
61
+ // Resulting file content
62
+ contentDynamic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
62
63
 
63
64
  const importMessageBundle = async (localeId) => {
64
65
  switch (localeId) {
@@ -83,9 +84,15 @@ localeIds.forEach(localeId => {
83
84
  `;
84
85
 
85
86
 
86
- }
87
+ }
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
+ ]);
94
+ }
88
95
 
89
- mkdirp.sync(path.dirname(outputFile));
90
- fs.writeFileSync(outputFile, contentStatic);
91
- fs.writeFileSync(outputFileDynamic, contentDynamic);
96
+ generate().then(() => {
97
+ console.log("Generated i18n JSON imports.");
98
+ });
@@ -1,32 +1,32 @@
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 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`);
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`);
9
9
 
10
10
  // All supported optional themes
11
- const allThemes = assets.themes.all;
11
+ const allThemes = assets.themes.all;
12
12
 
13
13
  // All themes present in the file system
14
- const dirs = fs.readdirSync(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));
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));
19
19
 
20
- const packageName = JSON.parse(fs.readFileSync("package.json")).name;
20
+ const packageName = JSON.parse(await fs.readFile("package.json")).name;
21
21
 
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");
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
26
 
27
27
 
28
28
  // static imports file content
29
- const contentStatic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
29
+ const contentStatic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
30
30
 
31
31
  ${importLines}
32
32
 
@@ -39,7 +39,7 @@ const loadThemeProperties = async (themeName) => {
39
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
40
  }
41
41
  return (await fetch(themeUrlsByName[themeName])).json();
42
- }
42
+ };
43
43
 
44
44
  ${availableThemesArray}
45
45
  .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadThemeProperties));
@@ -47,14 +47,14 @@ ${availableThemesArray}
47
47
 
48
48
 
49
49
  // dynamic imports file content
50
- const contentDynamic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
50
+ const contentDynamic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
51
51
 
52
52
  const loadThemeProperties = async (themeName) => {
53
53
  switch (themeName) {
54
54
  ${dynamicImportLines}
55
55
  default: throw "unknown theme"
56
56
  }
57
- }
57
+ };
58
58
 
59
59
  const loadAndCheck = async (themeName) => {
60
60
  const data = await loadThemeProperties(themeName);
@@ -62,12 +62,19 @@ const loadAndCheck = async (themeName) => {
62
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
63
  }
64
64
  return data;
65
- }
65
+ };
66
66
 
67
67
  ${availableThemesArray}
68
68
  .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
69
69
  `;
70
70
 
71
- mkdirp.sync(path.dirname(outputFile));
72
- fs.writeFileSync(outputFile, contentStatic);
73
- fs.writeFileSync(outputFileDynamic, contentDynamic);
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
+ });
@@ -12,15 +12,25 @@ const removeWhiteSpaces = (source) => {
12
12
  .replace(/}}\s+{{/g, "}}{{"); // Remove whitespace between }} and {{
13
13
  };
14
14
 
15
- const hbs2lit = (file) => {
16
- let sPreprocessed = includesReplacer.replace(file);
15
+ const hbs2lit = async (file, componentName) => {
16
+ let sPreprocessed = await includesReplacer.replace(file);
17
17
 
18
18
  sPreprocessed = removeWhiteSpaces(sPreprocessed);
19
19
 
20
+ const blockSignature = process.env.UI5_TS ? `this: ${componentName}` : ""
21
+
22
+ // icons hack
23
+ if (sPreprocessed.startsWith("<g ") || sPreprocessed.startsWith("<g>")) {
24
+ return `
25
+ function block0 (${blockSignature}) {
26
+ return svg\`${sPreprocessed}\`
27
+ }`;
28
+ }
29
+
20
30
  const ast = Handlebars.parse(sPreprocessed);
21
31
 
22
32
  const pv = new PartialsVisitor();
23
- const lv = new HTMLLitVisitor();
33
+ const lv = new HTMLLitVisitor(componentName);
24
34
 
25
35
  let result = "";
26
36
 
@@ -30,7 +40,17 @@ const hbs2lit = (file) => {
30
40
  lv.accept(ast);
31
41
 
32
42
  for (let key in lv.blocks) {
33
- result += lv.blocks[key] + "\n";
43
+ let block = lv.blocks[key];
44
+
45
+ if (block.match(/scopeTag/)) {
46
+ // const matches = block.match(/^(.*?)( => )(.*?);$/);
47
+ const matches = block.match(/^(function .*? \{ return )(.*?);\}$/);
48
+ const scopedCode = matches[2];
49
+ const normalCode = scopedCode.replace(/\${scopeTag\("/g, "").replace(/", tags, suffix\)}/g, "");
50
+ block = `${matches[1]}suffix ? ${scopedCode} : ${normalCode};}`;
51
+ }
52
+
53
+ result += block + "\n";
34
54
  }
35
55
 
36
56
  result = svgProcessor.process(result);
@@ -1,9 +1,9 @@
1
1
  const path = require("path");
2
- const fs = require("fs");
2
+ const fs = require("fs").promises;
3
3
 
4
- function replaceIncludes(file) {
4
+ const replaceIncludes = async (file) => {
5
5
  const filePath = path.dirname(file);
6
- let fileContent = fs.readFileSync(file, "utf-8");
6
+ let fileContent = await fs.readFile(file, "utf-8");
7
7
 
8
8
  const inclRegex = /{{>\s*include\s*["'](.+?)["']}}/g;
9
9
  let match;
@@ -20,11 +20,11 @@ function replaceIncludes(file) {
20
20
  targetFile = require.resolve(targetFile);
21
21
  }
22
22
 
23
- fileContent = fileContent.replace(match[0], replaceIncludes(targetFile));
23
+ fileContent = fileContent.replace(match[0], await replaceIncludes(targetFile));
24
24
  }
25
25
 
26
26
  return fileContent;
27
- }
27
+ };
28
28
 
29
29
  module.exports = {
30
30
  replace: replaceIncludes