@ui5/webcomponents-tools 0.0.0-e7dd012d7 → 0.0.0-ec448881d

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 (73) hide show
  1. package/CHANGELOG.md +170 -0
  2. package/README.md +1 -1
  3. package/assets-meta.js +16 -1
  4. package/components-package/nps.js +41 -28
  5. package/components-package/postcss.themes.js +6 -3
  6. package/components-package/rollup-plugins/empty-module.js +15 -0
  7. package/components-package/rollup.js +83 -78
  8. package/components-package/wdio.js +54 -29
  9. package/components-package/wdio.sync.js +360 -0
  10. package/icons-collection/nps.js +46 -8
  11. package/lib/copy-and-watch/index.js +30 -5
  12. package/lib/copy-list/index.js +28 -0
  13. package/lib/create-icons/index.js +82 -52
  14. package/lib/create-illustrations/index.js +161 -0
  15. package/lib/create-new-component/index.js +12 -4
  16. package/lib/documentation/index.js +124 -99
  17. package/lib/documentation/templates/api-properties-section.js +3 -1
  18. package/lib/documentation/templates/template.js +2 -1
  19. package/lib/esm-abs-to-rel/index.js +58 -0
  20. package/lib/generate-json-imports/i18n.js +75 -30
  21. package/lib/generate-json-imports/themes.js +61 -23
  22. package/lib/hbs2lit/src/compiler.js +12 -3
  23. package/lib/hbs2lit/src/includesReplacer.js +5 -5
  24. package/lib/hbs2lit/src/litVisitor2.js +31 -6
  25. package/lib/hbs2lit/src/svgProcessor.js +3 -3
  26. package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +4 -11
  27. package/lib/hbs2ui5/index.js +37 -21
  28. package/lib/i18n/defaults.js +49 -57
  29. package/lib/i18n/toJSON.js +13 -12
  30. package/lib/jsdoc/config.json +1 -1
  31. package/lib/jsdoc/plugin.js +30 -1
  32. package/lib/jsdoc/template/publish.js +22 -2
  33. package/lib/postcss-combine-duplicated-selectors/index.js +178 -0
  34. package/lib/postcss-css-to-esm/index.js +19 -16
  35. package/lib/postcss-css-to-json/index.js +20 -11
  36. package/lib/postcss-new-files/index.js +36 -0
  37. package/lib/postcss-p/postcss-p.mjs +11 -0
  38. package/lib/replace-global-core/index.js +25 -0
  39. package/lib/scoping/lint-src.js +1 -1
  40. package/lib/scoping/missing-dependencies.js +65 -0
  41. package/lib/scoping/report-tags-usage.js +28 -0
  42. package/lib/serve/index.js +46 -0
  43. package/{components-package → lib/serve}/serve.json +0 -0
  44. package/package.json +45 -52
  45. package/bin/init-ui5-package.js +0 -3
  46. package/lib/init-package/index.js +0 -123
  47. package/lib/init-package/resources/.eslintignore +0 -3
  48. package/lib/init-package/resources/bundle.es5.js +0 -25
  49. package/lib/init-package/resources/bundle.esm.js +0 -34
  50. package/lib/init-package/resources/config/.eslintrc.js +0 -1
  51. package/lib/init-package/resources/config/postcss.components/postcss.config.js +0 -1
  52. package/lib/init-package/resources/config/postcss.themes/postcss.config.js +0 -1
  53. package/lib/init-package/resources/config/rollup.config.js +0 -1
  54. package/lib/init-package/resources/config/wdio.conf.js +0 -1
  55. package/lib/init-package/resources/package-scripts.js +0 -11
  56. package/lib/init-package/resources/src/Assets.js +0 -5
  57. package/lib/init-package/resources/src/MyFirstComponent.hbs +0 -1
  58. package/lib/init-package/resources/src/MyFirstComponent.js +0 -56
  59. package/lib/init-package/resources/src/i18n/messagebundle.properties +0 -2
  60. package/lib/init-package/resources/src/i18n/messagebundle_de.properties +0 -1
  61. package/lib/init-package/resources/src/i18n/messagebundle_en.properties +0 -1
  62. package/lib/init-package/resources/src/i18n/messagebundle_es.properties +0 -1
  63. package/lib/init-package/resources/src/i18n/messagebundle_fr.properties +0 -1
  64. package/lib/init-package/resources/src/themes/MyFirstComponent.css +0 -11
  65. package/lib/init-package/resources/src/themes/sap_belize/parameters-bundle.css +0 -3
  66. package/lib/init-package/resources/src/themes/sap_belize_hcb/parameters-bundle.css +0 -3
  67. package/lib/init-package/resources/src/themes/sap_belize_hcw/parameters-bundle.css +0 -3
  68. package/lib/init-package/resources/src/themes/sap_fiori_3/parameters-bundle.css +0 -3
  69. package/lib/init-package/resources/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
  70. package/lib/init-package/resources/src/themes/sap_fiori_3_hcb/parameters-bundle.css +0 -3
  71. package/lib/init-package/resources/src/themes/sap_fiori_3_hcw/parameters-bundle.css +0 -3
  72. package/lib/init-package/resources/test/pages/index.html +0 -56
  73. package/lib/init-package/resources/test/specs/Demo.spec.js +0 -12
@@ -0,0 +1,58 @@
1
+ const esprima = require("esprima");
2
+ const escodegen = require("escodegen");
3
+
4
+ const fs = require("fs").promises;
5
+ const path = require("path");
6
+ const basePath = process.argv[2];
7
+
8
+ const convertImports = async (srcPath) => {
9
+ let changed = false;
10
+ // console.log("scanning imports of", srcPath);
11
+ let code = (await fs.readFile(srcPath)).toString();
12
+ const tree = esprima.parseModule(code);
13
+ const importer = srcPath.replace(basePath, "");
14
+ const importerDir = path.dirname(importer);
15
+ // console.log("-> ", importer);
16
+ tree.body.forEach(node => {
17
+ if (node.type === "ImportDeclaration") {
18
+ let importee = node.source.value;
19
+ if (importee.startsWith(".")) {
20
+ // add .js extension if missing
21
+ if (!importee.endsWith(".js")) {
22
+ node.source.value += ".js"
23
+ changed = true;
24
+ }
25
+ return;
26
+ }
27
+ let importeeDir = path.dirname(importee);
28
+ let importeeFile = path.basename(importee);
29
+ let relativePath = path.relative(importerDir, importeeDir);
30
+ if (relativePath.length === 0) {
31
+ relativePath = "."
32
+ }
33
+ if (!relativePath.startsWith(".")) {
34
+ relativePath = "./" + relativePath;
35
+ }
36
+
37
+ relativePath = relativePath.replace(/\\/g, "/"); // the browser expects unix paths
38
+ let relativeImport = `${relativePath}/${importeeFile}.js`;
39
+ // console.log(importee + " --> " + relativeImport);
40
+ node.source.value = relativeImport;
41
+ changed = true;
42
+ }
43
+ });
44
+
45
+ if (changed) {
46
+ return fs.writeFile(srcPath, escodegen.generate(tree));
47
+ }
48
+ }
49
+
50
+ const generate = async () => {
51
+ const { globby } = await import("globby");
52
+ const fileNames = await globby(basePath + "**/*.js");
53
+ return Promise.all(fileNames.map(convertImports).filter(x => !!x));
54
+ };
55
+
56
+ generate().then(() => {
57
+ console.log("Success: Converted absolute imports to relative for files in:", basePath);
58
+ });
@@ -1,35 +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.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`);
9
11
 
10
12
  // All languages present in the file system
11
- const files = fs.readdirSync(inputFolder);
12
- const languages = files.map(file => {
13
- const matches = file.match(/messagebundle_(.+?).json$/);
14
- return matches ? matches[1] : undefined;
15
- }).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);
16
18
 
17
- let content;
19
+ let contentStatic, contentDynamic;
18
20
 
19
21
  // No i18n - just import dependencies, if any
20
- if (languages.length === 0) {
21
- content = ``;
22
+ if (languages.length === 0) {
23
+ contentStatic = "";
24
+ contentDynamic = "";
22
25
  // There is i18n - generate the full file
23
- } else {
24
-
25
- // Keys for the array
26
- const languagesKeysString = 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");
27
30
 
28
- // Actual imports for json assets
29
- 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");
30
33
 
31
- // Resulting file content
32
- 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";
33
36
 
34
37
  ${assetsImportsString}
35
38
 
@@ -37,17 +40,59 @@ const bundleMap = {
37
40
  ${languagesKeysString}
38
41
  };
39
42
 
40
- const allEntriesInlined = Object.entries(bundleMap).every(([_key, value]) => typeof (value) === "object");
41
-
42
- if (allEntriesInlined) {
43
- console.warn(\`Inefficient bundling detected: consider bundling i18n imports as URLs instead of inlining them.
44
- See rollup-plugin-url or webpack file-loader for more information.
45
- 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()
46
49
  }
47
50
 
48
- registerI18nBundle("${packageName}", bundleMap);
51
+ const localeIds = [${languagesKeysStringArray}];
52
+
53
+ localeIds.forEach(localeId => {
54
+ registerI18nLoader("${packageName}", localeId, fetchMessageBundle);
55
+ });
49
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
+ ]);
50
94
  }
51
95
 
52
- mkdirp.sync(path.dirname(outputFile));
53
- fs.writeFileSync(outputFile, content);
96
+ generate().then(() => {
97
+ console.log("Generated i18n JSON imports.");
98
+ });
@@ -1,42 +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 inputFolder = path.normalize(process.argv[2]);
7
- const outputFile = 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`);
8
9
 
9
10
  // All supported optional themes
10
- const optionalThemes = assets.themes.all.filter(theme => theme !== assets.themes.default);
11
+ const allThemes = assets.themes.all;
11
12
 
12
13
  // All themes present in the file system
13
- const dirs = fs.readdirSync(inputFolder);
14
- const themesOnFileSystem = dirs.map(dir => {
15
- const matches = dir.match(/sap_.*$/);
16
- return matches ? dir : undefined;
17
- }).filter(key => !!key && optionalThemes.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));
18
19
 
19
- const packageName = JSON.parse(fs.readFileSync("package.json")).name;
20
+ const packageName = JSON.parse(await fs.readFile("package.json")).name;
20
21
 
21
- const importLines = themesOnFileSystem.map(theme => `import ${theme} from "../assets/themes/${theme}/parameters-bundle.css.json";`).join("\n");
22
- const isInlinedCondition = themesOnFileSystem.map(theme => `isInlined(${theme})`).join(" || ");
23
- const registerLines = themesOnFileSystem.map(theme => `registerThemeProperties("${packageName}", "${theme}", ${theme});`).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");
24
26
 
25
- // Resulting file content
26
- const content = `import { registerThemeProperties } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
27
+
28
+ // static imports file content
29
+ const contentStatic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
27
30
 
28
31
  ${importLines}
29
32
 
33
+ const themeUrlsByName = ${themeUrlsByName};
30
34
  const isInlined = obj => typeof (obj) === "object";
31
35
 
32
- if (${isInlinedCondition}) {
33
- console.warn(\`Inefficient bundling detected: consider bundling theme properties imports as URLs instead of inlining them.
34
- See rollup-plugin-url or webpack file-loader for more information.
35
- Suggested pattern: "assets\\\\\\/.*\\\\\\.json"\`);
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
+
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
+ }
36
57
  }
37
58
 
38
- ${registerLines}
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));
39
69
  `;
40
70
 
41
- mkdirp.sync(path.dirname(outputFile));
42
- fs.writeFileSync(outputFile, content);
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,8 +12,8 @@ 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) => {
16
+ let sPreprocessed = await includesReplacer.replace(file);
17
17
 
18
18
  sPreprocessed = removeWhiteSpaces(sPreprocessed);
19
19
 
@@ -30,7 +30,16 @@ const hbs2lit = (file) => {
30
30
  lv.accept(ast);
31
31
 
32
32
  for (let key in lv.blocks) {
33
- result += lv.blocks[key] + "\n";
33
+ let block = lv.blocks[key];
34
+
35
+ if (block.match(/scopeTag/)) {
36
+ const matches = block.match(/^(.*?)( => )(.*?);$/);
37
+ const scopedCode = matches[3];
38
+ const normalCode = scopedCode.replace(/\${scopeTag\("/g, "").replace(/", tags, suffix\)}/g, "");
39
+ block = `${matches[1]}${matches[2]}suffix ? ${scopedCode} : ${normalCode};`;
40
+ }
41
+
42
+ result += block + "\n";
34
43
  }
35
44
 
36
45
  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
@@ -8,9 +8,26 @@ let skipIfDefined = false;
8
8
  // when true => an HTML node value, when false => an attribute value
9
9
  let isNodeValue = false;
10
10
 
11
+ // when true => the current attribute is "style"
12
+ let isStyleAttribute = false;
13
+
11
14
  // matches event handlers @click= and boolean attrs ?disabled=
12
15
  const dynamicAttributeRgx = /\s(\?|@)([a-zA-Z|-]+)="?\s*$/;
13
16
 
17
+ if (!String.prototype.replaceAll) {
18
+ String.prototype.replaceAll = function(str, newStr){
19
+
20
+ // If a regex pattern
21
+ if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
22
+ return this.replace(str, newStr);
23
+ }
24
+
25
+ // If a string
26
+ return this.replace(new RegExp(str, 'g'), newStr);
27
+
28
+ };
29
+ }
30
+
14
31
  function HTMLLitVisitor(debug) {
15
32
  this.blockCounter = 0;
16
33
  this.keys = [];
@@ -18,7 +35,7 @@ function HTMLLitVisitor(debug) {
18
35
  this.result = "";
19
36
  this.mainBlock = "";
20
37
  this.blockPath = "context";
21
- this.blockParameters = ["context"];
38
+ this.blockParameters = ["context", "tags", "suffix"];
22
39
  this.paths = []; //contains all normalized relative paths
23
40
  this.debug = debug;
24
41
  if (this.debug) {
@@ -34,7 +51,7 @@ HTMLLitVisitor.prototype.Program = function(program) {
34
51
  this.keys.push(key);
35
52
  this.debug && this.blockByNumber.push(key);
36
53
 
37
- this.blocks[this.currentKey()] = "const " + this.currentKey() + " = (" + this.blockParameters.join(", ") + ") => { return ";
54
+ this.blocks[this.currentKey()] = "const " + this.currentKey() + " = (" + this.blockParameters.join(", ") + ") => ";
38
55
 
39
56
  if (this.keys.length > 1) { //it's a nested block
40
57
  this.blocks[this.prevKey()] += this.currentKey() + "(" + this.blockParameters.join(", ") + ")";
@@ -45,7 +62,7 @@ HTMLLitVisitor.prototype.Program = function(program) {
45
62
 
46
63
  this.blocks[this.currentKey()] += "html`";
47
64
  Visitor.prototype.Program.call(this, program);
48
- this.blocks[this.currentKey()] += "`; };";
65
+ this.blocks[this.currentKey()] += "`;";
49
66
 
50
67
  this.keys.pop(key);
51
68
  };
@@ -54,7 +71,7 @@ HTMLLitVisitor.prototype.ContentStatement = function(content) {
54
71
  Visitor.prototype.ContentStatement.call(this, content);
55
72
  // let content = content.orgiinal; // attribute="__ attribute = "__ attribute ="__
56
73
 
57
- const contentStatement = content.original;
74
+ let contentStatement = content.original;
58
75
  skipIfDefined = !!dynamicAttributeRgx.exec(contentStatement);
59
76
 
60
77
  const closingIndex = contentStatement.lastIndexOf(">");
@@ -63,6 +80,15 @@ HTMLLitVisitor.prototype.ContentStatement = function(content) {
63
80
  isNodeValue = closingIndex > openingIndex;
64
81
  }
65
82
 
83
+ isStyleAttribute = !isNodeValue && contentStatement.match(/style *= *["']? *$/);
84
+
85
+ if (!isStyleAttribute && contentStatement.match(/style=/)) {
86
+ console.log("WARNING: style hard-coded", contentStatement);
87
+ }
88
+
89
+ // Scope custom element tags
90
+ contentStatement = contentStatement.replaceAll(/(<\/?\s*)([a-zA-Z0-9_]+-[a-zA-Z0-9_-]+)/g, "$1\${scopeTag(\"$2\", tags, suffix)}");
91
+
66
92
  this.blocks[this.currentKey()] += contentStatement;
67
93
  };
68
94
 
@@ -74,7 +100,6 @@ HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
74
100
  } else {
75
101
  const path = normalizePath.call(this, mustache.path.original);
76
102
  const hasCalculatingClasses = path.includes("context.classes");
77
- const hasStylesCalculation = path.includes("context.styles");
78
103
 
79
104
  let parsedCode = "";
80
105
 
@@ -82,7 +107,7 @@ HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
82
107
  parsedCode = `\${unsafeHTML(${path})}`;
83
108
  } else if (hasCalculatingClasses) {
84
109
  parsedCode = `\${classMap(${path})}`;
85
- } else if (hasStylesCalculation) {
110
+ } else if (isStyleAttribute) {
86
111
  parsedCode = `\${styleMap(${path})}`;
87
112
  } else if (skipIfDefined){
88
113
  parsedCode = `\${${path}}`;
@@ -46,8 +46,8 @@ function getSVGMatches(template) {
46
46
 
47
47
  function getSVGBlock(input, blockCounter) {
48
48
  return {
49
- usage: `\${blockSVG${blockCounter}(context)}`,
50
- definition: `\nconst blockSVG${blockCounter} = (context) => {return svg\`${input}\`};`,
49
+ usage: `\${blockSVG${blockCounter}(context, tags, suffix)}`,
50
+ definition: `\nconst blockSVG${blockCounter} = (context, tags, suffix) => svg\`${input}\`;`,
51
51
  };
52
52
  }
53
53
 
@@ -55,7 +55,7 @@ function replaceInternalBlocks(template, svgContent) {
55
55
  const internalBlocks = svgContent.match(blockrx) || [];
56
56
 
57
57
  internalBlocks.forEach(blockName => {
58
- const rx = new RegExp(`const ${blockName}.*(html\`).*};`);
58
+ const rx = new RegExp(`const ${blockName}.*(html\`).*;`);
59
59
  template = template.replace(rx, (match, p1) => {
60
60
  return match.replace(p1, "svg\`");
61
61
  });
@@ -1,17 +1,10 @@
1
1
  const buildRenderer = (controlName, litTemplate) => {
2
- return `
3
- /* eslint no-unused-vars: 0 */
4
- import ifDefined from '@ui5/webcomponents-base/dist/renderer/ifDefined.js';
5
- import { html, svg, repeat, classMap, styleMap, unsafeHTML, setTags, setSuffix } from '@ui5/webcomponents-base/dist/renderer/LitRenderer.js';
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";
4
+
6
5
  ${litTemplate}
7
6
 
8
- const main = (context, tags, suffix) => {
9
- setTags(tags);
10
- setSuffix(suffix);
11
- return block0(context);
12
- };
13
-
14
- export default main;`
7
+ export default block0;`;
15
8
  };
16
9
 
17
10
  module.exports = {
@@ -1,10 +1,9 @@
1
- const fs = require('fs');
1
+ const fs = require('fs').promises;
2
2
  const getopts = require('getopts');
3
3
  const hbs2lit = require('../hbs2lit');
4
4
  const path = require('path');
5
5
  const litRenderer = require('./RenderTemplates/LitRenderer');
6
6
  const recursiveReadDir = require("recursive-readdir");
7
- const mkdirp = require('mkdirp');
8
7
 
9
8
  const args = getopts(process.argv.slice(2), {
10
9
  alias: {
@@ -24,13 +23,13 @@ const onError = (place) => {
24
23
 
25
24
  const isHandlebars = (fileName) => fileName.indexOf('.hbs') !== -1;
26
25
 
27
- const processFile = (file, outputDir) => {
28
- const litCode = hbs2lit(file);
26
+ const processFile = async (file, outputDir) => {
27
+ const litCode = await hbs2lit(file);
29
28
  const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
30
29
  const componentNameMatcher = /(\w+)(\.hbs)/gim;
31
30
  const componentName = componentNameMatcher.exec(file)[1];
32
31
 
33
- writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
32
+ return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
34
33
  };
35
34
 
36
35
  const composeAbsoluteOutputDir = (file, outputDir) => {
@@ -40,39 +39,54 @@ const composeAbsoluteOutputDir = (file, outputDir) => {
40
39
  const fileDir = file.split(path.sep).slice(1, -1).join(path.sep);
41
40
 
42
41
  // (2) Compose full output dir - "dist/generated/templates/lvl1/lvl2"
43
- return `${outputDir}${path.sep}${fileDir}`;
42
+ return `${outputDir}${path.sep}${fileDir}`;
44
43
  };
45
44
 
46
45
  const wrapDirectory = (directory, outputDir) => {
47
46
  directory = path.normalize(directory);
48
47
  outputDir = path.normalize(outputDir);
49
48
 
50
- recursiveReadDir(directory, (err, files) => {
49
+ return new Promise((resolve, reject) => {
50
+ recursiveReadDir(directory, (err, files) => {
51
51
 
52
- if (err) {
53
- onError('directory');
54
- }
55
-
56
- files.forEach(fileName => {
57
- if (isHandlebars(fileName)) {
58
- processFile(fileName, outputDir);
52
+ if (err) {
53
+ onError('directory');
54
+ reject();
59
55
  }
56
+
57
+ const promises = files.map(fileName => {
58
+ if (isHandlebars(fileName)) {
59
+ return processFile(fileName, outputDir);
60
+ }
61
+ }).filter(x => !!x);
62
+
63
+ resolve(Promise.all(promises));
60
64
  });
61
- })
65
+ });
62
66
  };
63
67
 
64
- const writeRenderers = (outputDir, controlName, fileContent) => {
68
+ const writeRenderers = async (outputDir, controlName, fileContent) => {
65
69
  try {
66
- if (!fs.existsSync(outputDir)) {
67
- mkdirp.sync(outputDir);
68
- }
70
+
71
+ await fs.mkdir(outputDir, { recursive: true });
69
72
 
70
73
  const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.js`;
71
74
 
72
75
  // strip DOS line endings because the break the source maps
73
76
  let fileContentUnix = fileContent.replace(/\r\n/g, "\n");
74
77
  fileContentUnix = fileContentUnix.replace(/\r/g, "\n");
75
- fs.writeFileSync(compiledFilePath, fileContentUnix);
78
+
79
+ // Only write to the file system actual changes - each updated file, no matter if the same or not, triggers an expensive operation for rollup
80
+ // Note: .hbs files that include a changed .hbs file will also be recompiled as their content will be updated too
81
+
82
+ let existingFileContent = "";
83
+ try {
84
+ existingFileContent = await fs.readFile(compiledFilePath);
85
+ } catch (e) {}
86
+
87
+ if (existingFileContent !== fileContentUnix) {
88
+ return fs.writeFile(compiledFilePath, fileContentUnix);
89
+ }
76
90
 
77
91
  } catch (e) {
78
92
  console.log(e);
@@ -82,5 +96,7 @@ const writeRenderers = (outputDir, controlName, fileContent) => {
82
96
  if (!args['d'] || !args['o']) {
83
97
  console.log('Please provide an input and output directory (-d and -o)');
84
98
  } else {
85
- wrapDirectory(args['d'], args['o']);
99
+ wrapDirectory(args['d'], args['o']).then(() => {
100
+ console.log("Templates generated");
101
+ });
86
102
  }