@ui5/webcomponents-tools 0.0.0-f651a470c → 0.0.0-f6676abdd

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 (70) hide show
  1. package/CHANGELOG.md +1346 -0
  2. package/README.md +3 -5
  3. package/assets-meta.js +11 -10
  4. package/components-package/cypress/support/commands.js +66 -0
  5. package/components-package/cypress/support/component-index.html +17 -0
  6. package/components-package/cypress/support/component.d.ts +22 -0
  7. package/components-package/cypress/support/component.js +46 -0
  8. package/components-package/cypress/support/cypress-ct-preact.js +11 -0
  9. package/components-package/cypress.config.js +33 -0
  10. package/components-package/eslint.js +94 -28
  11. package/components-package/nps.js +58 -47
  12. package/components-package/postcss.components.js +1 -21
  13. package/components-package/postcss.themes.js +1 -26
  14. package/components-package/vite.config.js +7 -11
  15. package/components-package/wdio.js +415 -393
  16. package/icons-collection/nps.js +9 -7
  17. package/lib/amd-to-es6/index.js +102 -0
  18. package/lib/amd-to-es6/no-remaining-require.js +33 -0
  19. package/lib/cem/custom-elements-manifest.config.mjs +544 -0
  20. package/lib/cem/event.mjs +168 -0
  21. package/lib/cem/schema-internal.json +1413 -0
  22. package/lib/cem/schema.json +1098 -0
  23. package/lib/cem/types-internal.d.ts +808 -0
  24. package/lib/cem/types.d.ts +736 -0
  25. package/lib/cem/utils.mjs +423 -0
  26. package/lib/cem/validate.js +70 -0
  27. package/lib/create-icons/index.js +8 -6
  28. package/lib/create-illustrations/index.js +51 -30
  29. package/lib/create-new-component/{tsFileContentTemplate.js → Component.js} +15 -25
  30. package/lib/create-new-component/ComponentTemplate.js +12 -0
  31. package/lib/create-new-component/index.js +35 -73
  32. package/lib/css-processors/css-processor-components.mjs +77 -0
  33. package/lib/css-processors/css-processor-themes.mjs +74 -0
  34. package/lib/css-processors/scope-variables.mjs +49 -0
  35. package/lib/css-processors/shared.mjs +56 -0
  36. package/lib/dev-server/custom-hot-update-plugin.js +39 -0
  37. package/lib/dev-server/{dev-server.js → dev-server.mjs} +4 -4
  38. package/lib/dev-server/virtual-index-html-plugin.js +24 -20
  39. package/lib/generate-js-imports/illustrations.js +78 -64
  40. package/lib/generate-json-imports/i18n.js +45 -61
  41. package/lib/generate-json-imports/themes.js +16 -33
  42. package/lib/hbs2lit/src/compiler.js +9 -6
  43. package/lib/hbs2lit/src/litVisitor2.js +42 -17
  44. package/lib/hbs2lit/src/svgProcessor.js +12 -5
  45. package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +39 -6
  46. package/lib/hbs2ui5/index.js +23 -6
  47. package/lib/i18n/defaults.js +3 -2
  48. package/lib/postcss-combine-duplicated-selectors/index.js +12 -5
  49. package/lib/remove-dev-mode/remove-dev-mode.mjs +37 -0
  50. package/lib/scoping/get-all-tags.js +10 -3
  51. package/lib/scoping/lint-src.js +8 -7
  52. package/lib/scoping/scope-test-pages.js +2 -1
  53. package/lib/test-runner/test-runner.js +2 -2
  54. package/package.json +25 -13
  55. package/tsconfig.json +18 -0
  56. package/types/index.d.ts +1 -0
  57. package/components-package/wdio.sync.js +0 -360
  58. package/lib/create-new-component/jsFileContentTemplate.js +0 -77
  59. package/lib/esm-abs-to-rel/index.js +0 -58
  60. package/lib/generate-custom-elements-manifest/index.js +0 -327
  61. package/lib/jsdoc/config.json +0 -29
  62. package/lib/jsdoc/configTypescript.json +0 -29
  63. package/lib/jsdoc/plugin.js +0 -2468
  64. package/lib/jsdoc/preprocess.js +0 -146
  65. package/lib/jsdoc/template/publish.js +0 -4120
  66. package/lib/postcss-css-to-esm/index.js +0 -90
  67. package/lib/postcss-css-to-json/index.js +0 -47
  68. package/lib/postcss-new-files/index.js +0 -36
  69. package/lib/postcss-p/postcss-p.mjs +0 -14
  70. package/lib/replace-global-core/index.js +0 -25
@@ -1,72 +1,86 @@
1
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
- }
2
+ const path = require("path");
3
+
4
+ const generateDynamicImportLines = async (fileNames, location, exclusionPatterns = []) => {
5
+ const packageName = JSON.parse(await fs.readFile("package.json")).name;
6
+ return fileNames
7
+ .filter((fileName) => !exclusionPatterns.some((pattern) => fileName.startsWith(pattern)))
8
+ .map((fileName) => {
9
+ const illustrationName = fileName.replace(".js", "");
10
+ const illustrationPath = `${location}/${illustrationName}`;
11
+ return `\t\tcase "${fileName.replace('.js', '')}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${illustrationName.toLowerCase()}" */ "${illustrationPath}.js")).default;`;
12
+ })
13
+ .join("\n");
14
+ };
15
+
16
+ const generateAvailableIllustrationsArray = (fileNames, exclusionPatterns = []) => {
17
+ return JSON.stringify(
18
+ fileNames
19
+ .filter((fileName) => !exclusionPatterns.some((pattern) => fileName.startsWith(pattern)))
20
+ .map((fileName) => fileName.replace(".js", ""))
21
+ );
22
+ };
23
+
24
+ const generateDynamicImportsFileContent = (dynamicImports, availableIllustrations, collection, set, prefix = "") => {
25
+ return `// @ts-nocheck
26
+ import { registerIllustrationLoader } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
27
+
28
+ export const loadIllustration = async (illustrationName) => {
29
+ const collectionAndPrefix = "${set}/${collection}/${prefix}";
30
+ const cleanIllustrationName = illustrationName.startsWith(collectionAndPrefix) ? illustrationName.replace(collectionAndPrefix, "") : illustrationName;
31
+ switch (cleanIllustrationName) {
32
+ ${dynamicImports}
33
+ default:
34
+ throw new Error("[Illustrations] Illustration not found: " + illustrationName);
35
+ }
36
+ };
37
+
38
+ const loadAndCheck = async (illustrationName) => {
39
+ const data = await loadIllustration(illustrationName);
40
+ return data;
41
+ };
42
+
43
+ ${availableIllustrations}.forEach((illustrationName) =>
44
+ registerIllustrationLoader(\`${set}/${collection}/${prefix}\${illustrationName}\`, loadAndCheck)
45
+ );
46
+ `;
47
+ };
48
+
49
+ const getMatchingFiles = async (folder, pattern) => {
50
+ const dir = await fs.readdir(folder);
51
+ return dir.filter((fileName) => fileName.match(pattern));
51
52
  };
52
- const loadAndCheck = async (illustrationName) => {
53
- const data = await loadIllustration(illustrationName);
54
- return data;
55
- }
56
53
 
54
+ const generateIllustrations = async (config) => {
55
+ const { inputFolder, outputFile, collection, location, prefix, filterOut, set } = config;
56
+
57
+ const normalizedInputFolder = path.normalize(inputFolder);
58
+ const normalizedOutputFile = path.normalize(outputFile);
59
+
60
+ const illustrations = await getMatchingFiles(normalizedInputFolder, /^.*\.js$/);
57
61
 
58
- ${fioriAvailableIllustrationsArray}.forEach(illustrationName => registerIllustrationLoader(illustrationName, loadAndCheck));
59
- ${tntAvailableIllustrationsArray}.forEach(illustrationName => registerIllustrationLoader(illustrationName, loadAndCheck));`;
60
-
62
+ const dynamicImports = await generateDynamicImportLines(illustrations, location, filterOut);
63
+ const availableIllustrations = generateAvailableIllustrationsArray(illustrations, filterOut);
64
+
65
+ const contentDynamic = generateDynamicImportsFileContent(dynamicImports, availableIllustrations, collection, set, prefix);
66
+
67
+ await fs.mkdir(path.dirname(normalizedOutputFile), { recursive: true });
68
+ await fs.writeFile(normalizedOutputFile, contentDynamic);
69
+
70
+ console.log(`Generated ${normalizedOutputFile}`);
71
+ };
61
72
 
62
- await fs.mkdir(path.dirname(outputFile), { recursive: true });
63
- return Promise.all([fs.writeFile(outputFile, contentDynamic)]);
73
+ // Parse configuration from command-line arguments
74
+ const config = {
75
+ inputFolder: process.argv[2],
76
+ outputFile: process.argv[3],
77
+ set: process.argv[4],
78
+ collection: process.argv[5],
79
+ location: process.argv[6],
80
+ filterOut: process.argv.slice[7],
64
81
  };
65
82
 
66
- generate().then(() => {
67
- console.log("Generated Illustrations.js");
68
- })
69
- .catch(err => {
70
- console.error(err);
71
- process.exit(1);
83
+ // Run the generation process
84
+ generateIllustrations(config).catch((error) => {
85
+ console.error("Error generating illustrations:", error);
72
86
  });
@@ -1,95 +1,79 @@
1
1
  const fs = require("fs").promises;
2
2
  const path = require('path');
3
3
 
4
+ const isTypeScript = process.env.UI5_TS;
5
+ const ext = isTypeScript ? 'ts' : 'js';
6
+
7
+
8
+ const getContent = function(caseLines, languagesKeysStringArray, packageName) {
9
+ return `// @ts-nocheck
10
+ import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
11
+
12
+ const importMessageBundle = async (localeId) => {
13
+ switch (localeId) {
14
+ ${caseLines}
15
+ default: throw "unknown locale"
16
+ }
17
+ }
18
+
19
+ const importAndCheck = async (localeId) => {
20
+ const data = await importMessageBundle(localeId);
21
+ if (typeof data === "string" && data.endsWith(".json")) {
22
+ throw new Error(\`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.\`);
23
+ }
24
+ return data;
25
+ }
26
+
27
+ const localeIds = [${languagesKeysStringArray}];
28
+
29
+ localeIds.forEach(localeId => {
30
+ registerI18nLoader("${packageName}", localeId, importAndCheck);
31
+ });
32
+ `;
33
+ }
34
+
4
35
  const generate = async () => {
5
36
 
6
37
  const packageName = JSON.parse(await fs.readFile("package.json")).name;
7
38
 
8
39
  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`);
40
+ const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.${ext}`);
41
+ const outputFileFetchMetaResolve = path.normalize(`${process.argv[3]}/i18n-fetch.${ext}`);
11
42
 
12
- // All languages present in the file system
43
+ // All languages present in the file system
13
44
  const files = await fs.readdir(inputFolder);
14
45
  const languages = files.map(file => {
15
46
  const matches = file.match(/messagebundle_(.+?).json$/);
16
47
  return matches ? matches[1] : undefined;
17
48
  }).filter(key => !!key);
18
49
 
19
- let contentStatic, contentDynamic;
50
+ let contentDynamic;
51
+ let contentFetchMetaResolve;
20
52
 
21
- // No i18n - just import dependencies, if any
53
+ // No i18n - just import dependencies, if any
22
54
  if (languages.length === 0) {
23
- contentStatic = "";
24
55
  contentDynamic = "";
25
- // There is i18n - generate the full file
56
+ contentFetchMetaResolve = "";
57
+ // There is i18n - generate the full file
26
58
  } else {
27
59
  // Keys for the array
28
- const languagesKeysString = languages.map(key => `"${key}": _${key},`).join("\n\t");
29
60
  const languagesKeysStringArray = languages.map(key => `"${key}",`).join("\n\t");
30
61
 
31
62
  // Actual imports for json assets
32
- const assetsImportsString = languages.map(key => `import _${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
33
-
34
- // static imports
35
- contentStatic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
36
-
37
- ${assetsImportsString}
38
-
39
- const bundleMap = {
40
- ${languagesKeysString}
41
- };
42
-
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
- }
50
-
51
- const localeIds = [${languagesKeysStringArray}];
52
-
53
- localeIds.forEach(localeId => {
54
- registerI18nLoader("${packageName}", localeId, fetchMessageBundle);
55
- });
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");
63
+ const dynamicImportsString = languages.map(key => ` case "${key}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-messagebundle-${key}" */ "../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
64
+ const fetchMetaResolveString = languages.map(key => ` case "${key}": return (await fetch(new URL("../assets/i18n/messagebundle_${key}.json", import.meta.url))).json();`).join("\n");
60
65
 
61
66
  // 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
67
 
68
+ contentDynamic = getContent(dynamicImportsString, languagesKeysStringArray, packageName);
69
+ contentFetchMetaResolve = getContent(fetchMetaResolveString, languagesKeysStringArray, packageName);
86
70
 
87
71
  }
88
72
 
89
- await fs.mkdir(path.dirname(outputFile), { recursive: true });
73
+ await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
90
74
  return Promise.all([
91
- fs.writeFile(outputFile, contentStatic),
92
75
  fs.writeFile(outputFileDynamic, contentDynamic),
76
+ fs.writeFile(outputFileFetchMetaResolve, contentFetchMetaResolve),
93
77
  ]);
94
78
  }
95
79
 
@@ -2,10 +2,13 @@ const fs = require("fs").promises;
2
2
  const path = require('path');
3
3
  const assets = require("../../assets-meta.js");
4
4
 
5
+ const isTypeScript = process.env.UI5_TS;
6
+ const ext = isTypeScript ? 'ts' : 'js';
7
+
5
8
  const generate = async () => {
6
9
  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`);
10
+ const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.${ext}`);
11
+ const outputFileFetchMetaResolve = path.normalize(`${process.argv[3]}/Themes-fetch.${ext}`);
9
12
 
10
13
  // All supported optional themes
11
14
  const allThemes = assets.themes.all;
@@ -19,39 +22,18 @@ const generate = async () => {
19
22
 
20
23
  const packageName = JSON.parse(await fs.readFile("package.json")).name;
21
24
 
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
25
  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";
30
-
31
- ${importLines}
32
-
33
- const themeUrlsByName = ${themeUrlsByName};
34
- const isInlined = obj => typeof (obj) === "object";
35
-
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
- };
43
-
44
- ${availableThemesArray}
45
- .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadThemeProperties));
46
- `;
47
-
26
+ const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n");
27
+ const fetchMetaResolveLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await fetch(new URL("../assets/themes/${theme}/parameters-bundle.css.json", import.meta.url))).json();`).join("\n");
48
28
 
49
29
  // dynamic imports file content
50
- const contentDynamic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
30
+ const contentDynamic = function (lines) {
31
+ return `// @ts-nocheck
32
+ import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
51
33
 
52
34
  const loadThemeProperties = async (themeName) => {
53
35
  switch (themeName) {
54
- ${dynamicImportLines}
36
+ ${lines}
55
37
  default: throw "unknown theme"
56
38
  }
57
39
  };
@@ -59,7 +41,7 @@ ${dynamicImportLines}
59
41
  const loadAndCheck = async (themeName) => {
60
42
  const data = await loadThemeProperties(themeName);
61
43
  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.\`);
44
+ throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.\`);
63
45
  }
64
46
  return data;
65
47
  };
@@ -67,11 +49,12 @@ const loadAndCheck = async (themeName) => {
67
49
  ${availableThemesArray}
68
50
  .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
69
51
  `;
52
+ }
70
53
 
71
- await fs.mkdir(path.dirname(outputFile), { recursive: true });
54
+ await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
72
55
  return Promise.all([
73
- fs.writeFile(outputFile, contentStatic),
74
- fs.writeFile(outputFileDynamic, contentDynamic)
56
+ fs.writeFile(outputFileDynamic, contentDynamic(dynamicImportLines)),
57
+ fs.writeFile(outputFileFetchMetaResolve, contentDynamic(fetchMetaResolveLines)),
75
58
  ]);
76
59
  };
77
60
 
@@ -12,15 +12,17 @@ const removeWhiteSpaces = (source) => {
12
12
  .replace(/}}\s+{{/g, "}}{{"); // Remove whitespace between }} and {{
13
13
  };
14
14
 
15
- const hbs2lit = async (file) => {
15
+ const hbs2lit = async (file, componentName) => {
16
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
+
20
22
  // icons hack
21
23
  if (sPreprocessed.startsWith("<g ") || sPreprocessed.startsWith("<g>")) {
22
24
  return `
23
- let block0 = () => {
25
+ function block0 (${blockSignature}) {
24
26
  return svg\`${sPreprocessed}\`
25
27
  }`;
26
28
  }
@@ -28,7 +30,7 @@ const hbs2lit = async (file) => {
28
30
  const ast = Handlebars.parse(sPreprocessed);
29
31
 
30
32
  const pv = new PartialsVisitor();
31
- const lv = new HTMLLitVisitor();
33
+ const lv = new HTMLLitVisitor(componentName);
32
34
 
33
35
  let result = "";
34
36
 
@@ -41,10 +43,11 @@ const hbs2lit = async (file) => {
41
43
  let block = lv.blocks[key];
42
44
 
43
45
  if (block.match(/scopeTag/)) {
44
- const matches = block.match(/^(.*?)( => )(.*?);$/);
45
- const scopedCode = matches[3];
46
+ // const matches = block.match(/^(.*?)( => )(.*?);$/);
47
+ const matches = block.match(/^(function .*? \{ return )(.*?);\}$/);
48
+ const scopedCode = matches[2];
46
49
  const normalCode = scopedCode.replace(/\${scopeTag\("/g, "").replace(/", tags, suffix\)}/g, "");
47
- block = `${matches[1]}${matches[2]}suffix ? ${scopedCode} : ${normalCode};`;
50
+ block = `${matches[1]}suffix ? ${scopedCode} : ${normalCode};}`;
48
51
  }
49
52
 
50
53
  result += block + "\n";
@@ -28,14 +28,18 @@ if (!String.prototype.replaceAll) {
28
28
  };
29
29
  }
30
30
 
31
- function HTMLLitVisitor(debug) {
31
+ function HTMLLitVisitor(componentName, debug) {
32
32
  this.blockCounter = 0;
33
33
  this.keys = [];
34
34
  this.blocks = {};
35
35
  this.result = "";
36
36
  this.mainBlock = "";
37
37
  this.blockLevel = 0;
38
- this.blockParameters = ["context", "tags", "suffix"];
38
+ this.componentName = componentName
39
+ const blockParametersDefinitionTS = [`this: ${componentName}`, "context: UI5Element", "tags: string[]", "suffix: string | undefined"];
40
+ const blockParametersDefinitionJS = ["context", "tags", "suffix"];
41
+ this.blockParametersDefinition = process.env.UI5_TS ? blockParametersDefinitionTS : blockParametersDefinitionJS;
42
+ this.blockParametersUsage = ["this", "context", "tags", "suffix"];
39
43
  this.paths = []; //contains all normalized relative paths
40
44
  this.debug = debug;
41
45
  if (this.debug) {
@@ -51,17 +55,18 @@ HTMLLitVisitor.prototype.Program = function(program) {
51
55
  this.keys.push(key);
52
56
  this.debug && this.blockByNumber.push(key);
53
57
 
54
- this.blocks[this.currentKey()] = "const " + this.currentKey() + " = (" + this.blockParameters.join(", ") + ") => ";
58
+ // this.blocks[this.currentKey()] = "function " + this.currentKey() + ` (this: any, ` + this.blockParametersDefinition.join(", ") + ") { ";
59
+ this.blocks[this.currentKey()] = `function ${this.currentKey()} (${this.blockParametersDefinition.join(", ")}) { `;
55
60
 
56
61
  if (this.keys.length > 1) { //it's a nested block
57
- this.blocks[this.prevKey()] += this.currentKey() + "(" + this.blockParameters.join(", ") + ")";
62
+ this.blocks[this.prevKey()] += this.currentKey() + ".call(" + this.blockParametersUsage.join(", ") + ")";
58
63
  } else {
59
64
  this.mainBlock = this.currentKey();
60
65
  }
61
66
 
62
- this.blocks[this.currentKey()] += "html`";
67
+ this.blocks[this.currentKey()] += "return html`";
63
68
  Visitor.prototype.Program.call(this, program);
64
- this.blocks[this.currentKey()] += "`;";
69
+ this.blocks[this.currentKey()] += "`;}";
65
70
 
66
71
  this.keys.pop(key);
67
72
  };
@@ -98,14 +103,18 @@ HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
98
103
  this.blocks[this.currentKey()] += "${index}";
99
104
  } else {
100
105
  const path = normalizePath.call(this, mustache.path.original);
101
- const hasCalculatingClasses = path.includes("context.classes");
106
+ const hasCalculatingClasses = path.includes("this.classes");
102
107
 
103
108
  let parsedCode = "";
104
109
 
105
110
  if (isNodeValue && !mustache.escaped) {
106
111
  parsedCode = `\${unsafeHTML(${path})}`;
107
112
  } else if (hasCalculatingClasses) {
108
- parsedCode = `\${classMap(${path})}`;
113
+ if (process.env.UI5_TS) {
114
+ parsedCode = `\${classMap(${path} as ClassMapValue)}`;
115
+ } else {
116
+ parsedCode = `\${classMap(${path})}`;
117
+ }
109
118
  } else if (isStyleAttribute) {
110
119
  parsedCode = `\${styleMap(${path})}`;
111
120
  } else if (skipIfDefined){
@@ -170,19 +179,35 @@ function visitEachBlock(block) {
170
179
  var bParamAdded = false;
171
180
  visitSubExpression.call(this, block);
172
181
 
173
- this.blocks[this.currentKey()] += "${ repeat(" + normalizePath.call(this, block.params[0].original) + ", (item, index) => item._id || index, (item, index) => ";
182
+ const reapeatDirectiveParamsTS = "(item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number)";
183
+ const reapeatDirectiveParamsJS = "(item, index) => item._id || index, (item, index)";
184
+ const repleatDirectiveParams = process.env.UI5_TS ? reapeatDirectiveParamsTS : reapeatDirectiveParamsJS;
185
+ this.blocks[this.currentKey()] += "${ repeat(" + normalizePath.call(this, block.params[0].original) + ", " + repleatDirectiveParams + " => ";
174
186
  this.paths.push(normalizePath.call(this, block.params[0].original));
175
187
  this.blockLevel++;
176
188
 
177
- if (this.blockParameters.indexOf("item") === -1) {
189
+ // block params is [this, context, tags, suffix] for top level blocks
190
+ // blcok params is [this, context, tags, suffix, item, index] for nested blocks
191
+ if (!this.blockParametersUsage.includes("index")) {
192
+ // last item is not index, but an each block is processed, add the paramters for further nested blocks
178
193
  bParamAdded = true;
179
- this.blockParameters.unshift("index");
180
- this.blockParameters.unshift("item");
194
+ if (process.env.UI5_TS) {
195
+ this.blockParametersDefinition.push("item: any");
196
+ this.blockParametersDefinition.push("index: number");
197
+ } else {
198
+ this.blockParametersDefinition.push("item");
199
+ this.blockParametersDefinition.push("index");
200
+ }
201
+ this.blockParametersUsage.push("item");
202
+ this.blockParametersUsage.push("index");
181
203
  }
182
204
  this.acceptKey(block, "program");
183
205
  if (bParamAdded) {
184
- this.blockParameters.shift("item");
185
- this.blockParameters.shift("index");
206
+ // if parameters were added at this step, remove the last two
207
+ this.blockParametersDefinition.pop();
208
+ this.blockParametersDefinition.pop();
209
+ this.blockParametersUsage.pop();
210
+ this.blockParametersUsage.pop();
186
211
  }
187
212
  this.blockLevel--;
188
213
  this.blocks[this.currentKey()] += ") }";
@@ -197,7 +222,7 @@ function normalizePath(sPath) {
197
222
  if (result.indexOf("@root") === 0) {
198
223
  // Trying to access root context via the HBS "@root" variable.
199
224
  // Example: {{@root.property}} compiles to "context.property" - called from anywhere within the template.
200
- result = result.replace("@root", "context");
225
+ result = result.replace("@root", "this");
201
226
 
202
227
  } else if (result.indexOf("../") === 0) {
203
228
  let absolutePath;
@@ -207,7 +232,7 @@ function normalizePath(sPath) {
207
232
  // Trying to access root context from nested loops.
208
233
  // Example: {{../../property}} compiles to "context.property" - when currently in a nested level loop.
209
234
  // Example: {{../../../property}} compile to "context.property" - when requested levels are not present. fallback to root context.
210
- absolutePath = `context.${replaceAll(result,"../", "")}`;
235
+ absolutePath = `this.${replaceAll(result,"../", "")}`;
211
236
  } else {
212
237
  // Trying to access upper context (one-level-up) and based on the current lelev, that could be "context" or "item".
213
238
  // Example: {{../property}} compiles to "context.property" - when called in a top level loop.
@@ -235,7 +260,7 @@ function normalizePath(sPath) {
235
260
  // {{/each}}
236
261
  // {{text}} -> compiles to "context.text"
237
262
 
238
- const blockPath = this.blockLevel > 0 ? "item" : "context";
263
+ const blockPath = this.blockLevel > 0 ? "item" : "this";
239
264
  result = result ? replaceAll(blockPath + "/" + result, "/", ".") : blockPath;
240
265
  }
241
266
 
@@ -2,7 +2,7 @@
2
2
  const svgrx = new RegExp(/<svg[\s\S]*?>([\s\S]*?)<\/svg>/, 'g');
3
3
  const blockrx = /block[0-9]+/g;
4
4
 
5
- function process(input) {
5
+ function processSVG(input) {
6
6
  let matches;
7
7
  let template = input;
8
8
  let blockCounter = 0;
@@ -45,9 +45,16 @@ function getSVGMatches(template) {
45
45
  }
46
46
 
47
47
  function getSVGBlock(input, blockCounter) {
48
+ const definitionTS = `\nfunction blockSVG${blockCounter} (this: any, context: UI5Element, tags: string[], suffix: string | undefined) {
49
+ return svg\`${input}\`;
50
+ };`;
51
+ const definitionJS = `\nfunction blockSVG${blockCounter} (context, tags, suffix) {
52
+ return svg\`${input}\`;
53
+ };`;
54
+
48
55
  return {
49
- usage: `\${blockSVG${blockCounter}(context, tags, suffix)}`,
50
- definition: `\nconst blockSVG${blockCounter} = (context, tags, suffix) => svg\`${input}\`;`,
56
+ usage: `\${blockSVG${blockCounter}.call(this, context, tags, suffix)}`,
57
+ definition: process.env.UI5_TS ? definitionTS : definitionJS,
51
58
  };
52
59
  }
53
60
 
@@ -55,7 +62,7 @@ function replaceInternalBlocks(template, svgContent) {
55
62
  const internalBlocks = svgContent.match(blockrx) || [];
56
63
 
57
64
  internalBlocks.forEach(blockName => {
58
- const rx = new RegExp(`const ${blockName}.*(html\`).*;`);
65
+ const rx = new RegExp(`function ${blockName}.*(html\`).*;`);
59
66
  template = template.replace(rx, (match, p1) => {
60
67
  return match.replace(p1, "svg\`");
61
68
  });
@@ -65,5 +72,5 @@ function replaceInternalBlocks(template, svgContent) {
65
72
  }
66
73
 
67
74
  module.exports = {
68
- process: process
75
+ process: processSVG,
69
76
  };
@@ -1,12 +1,45 @@
1
- const buildRenderer = (controlName, litTemplate) => {
2
- return `/* eslint no-unused-vars: 0 */
3
- import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
1
+ const tsImports = (controlName, hasTypes) => {
2
+ if (!process.env.UI5_TS) {
3
+ return "";
4
+ }
4
5
 
5
- ${litTemplate}
6
+ const importPrefix = process.env.UI5_BASE ? "../../../../../src/" : "@ui5/webcomponents-base/dist/"
7
+
8
+ return `import type UI5Element from "${importPrefix}UI5Element.js";
9
+ ${importForControl(controlName, hasTypes)}
10
+ import type { ClassMapValue } from "${importPrefix}types.js";
11
+ `;
12
+ }
13
+ const importForControl = (controlName, hasTypes) => {
14
+
15
+ if (!hasTypes) {
16
+ return `type ${controlName} = any;`;
17
+ }
18
+
19
+ if (process.env.UI5_BASE) {
20
+ // base package has a component in `test/elements` instead of `src`
21
+ return `import type ${controlName} from "../../../${controlName}.js";`
22
+ }
23
+ return `import type ${controlName} from "../../${controlName}.js";`
24
+ }
6
25
 
7
- export default block0;`;
26
+ const buildRenderer = (controlName, litTemplate, hasTypes) => {
27
+ const importPrefix = process.env.UI5_BASE ? "../../../../../src/" : "@ui5/webcomponents-base/dist/";
28
+
29
+ const mainTemplateFunction = process.env.UI5_TS ?
30
+ `function template(this: ${controlName}) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }` :
31
+ `function template() { return block0.call(this, this, this.constructor.tagsToScope, getCustomElementsScopingSuffix()); }`;
32
+
33
+ // typescript cannot process package imports for the same package and the paths are changed to relative for base package templates
34
+ return `/* eslint no-unused-vars: 0 */
35
+ import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "${importPrefix}renderer/LitRenderer.js";
36
+ import { getCustomElementsScopingSuffix } from "${importPrefix}CustomElementsScopeUtils.js";
37
+ ${tsImports(controlName, hasTypes)}
38
+ ${litTemplate}
39
+ ${mainTemplateFunction}
40
+ export default template;`;
8
41
  };
9
42
 
10
43
  module.exports = {
11
44
  generateTemplate: buildRenderer
12
- };
45
+ };