@ui5/webcomponents-tools 0.0.0-5f8ce9393 → 0.0.0-6d98d0c29

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 (59) hide show
  1. package/CHANGELOG.md +107 -1
  2. package/assets-meta.js +147 -0
  3. package/bin/dev.js +16 -1
  4. package/components-package/nps.js +74 -33
  5. package/components-package/rollup.js +131 -49
  6. package/components-package/wdio.js +58 -47
  7. package/icons-collection/nps.js +38 -28
  8. package/lib/copy-and-watch/index.js +122 -0
  9. package/lib/copy-list/index.js +28 -0
  10. package/lib/create-icons/index.js +27 -23
  11. package/lib/create-illustrations/index.js +95 -0
  12. package/lib/create-new-component/index.js +18 -6
  13. package/lib/documentation/index.js +43 -21
  14. package/lib/esm-abs-to-rel/index.js +54 -0
  15. package/lib/generate-json-imports/i18n.js +91 -47
  16. package/lib/generate-json-imports/themes.js +61 -13
  17. package/lib/hash/config.js +10 -0
  18. package/lib/hash/generate.js +19 -0
  19. package/lib/hash/upToDate.js +31 -0
  20. package/lib/hbs2lit/index.js +2 -4
  21. package/lib/hbs2lit/src/compiler.js +8 -7
  22. package/lib/hbs2lit/src/includesReplacer.js +22 -16
  23. package/lib/hbs2lit/src/litVisitor2.js +47 -9
  24. package/lib/hbs2lit/src/svgProcessor.js +3 -3
  25. package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +5 -5
  26. package/lib/hbs2ui5/index.js +26 -20
  27. package/lib/i18n/defaults.js +25 -6
  28. package/lib/i18n/toJSON.js +15 -4
  29. package/lib/init-package/index.js +28 -11
  30. package/lib/init-package/resources/bundle.es5.js +1 -1
  31. package/lib/init-package/resources/bundle.esm.js +2 -5
  32. package/lib/init-package/resources/src/Assets.js +0 -1
  33. package/lib/init-package/resources/src/{Demo.hbs → MyFirstComponent.hbs} +0 -0
  34. package/lib/init-package/resources/src/{Demo.js → MyFirstComponent.js} +0 -0
  35. package/lib/init-package/resources/src/i18n/messagebundle.properties +1 -1
  36. package/lib/init-package/resources/src/themes/{Demo.css → MyFirstComponent.css} +2 -2
  37. package/lib/init-package/resources/src/themes/sap_belize/parameters-bundle.css +1 -1
  38. package/lib/init-package/resources/src/themes/sap_belize_hcb/parameters-bundle.css +1 -1
  39. package/lib/init-package/resources/src/themes/sap_belize_hcw/parameters-bundle.css +3 -0
  40. package/lib/init-package/resources/src/themes/sap_fiori_3/parameters-bundle.css +1 -1
  41. package/lib/init-package/resources/src/themes/sap_fiori_3_dark/parameters-bundle.css +1 -1
  42. package/lib/init-package/resources/src/themes/sap_fiori_3_hcb/parameters-bundle.css +3 -0
  43. package/lib/init-package/resources/src/themes/sap_fiori_3_hcw/parameters-bundle.css +3 -0
  44. package/lib/init-package/resources/test/pages/index.html +9 -4
  45. package/lib/jsdoc/config.json +1 -1
  46. package/lib/jsdoc/plugin.js +24 -4
  47. package/lib/jsdoc/template/publish.js +11 -2
  48. package/lib/polyfill-placeholder/index.js +5 -0
  49. package/lib/postcss-css-to-esm/index.js +31 -19
  50. package/lib/postcss-css-to-json/index.js +22 -11
  51. package/lib/postcss-new-files/index.js +36 -0
  52. package/lib/replace-global-core/index.js +20 -0
  53. package/lib/scoping/get-all-tags.js +44 -0
  54. package/lib/scoping/lint-src.js +31 -0
  55. package/lib/scoping/scope-test-pages.js +40 -0
  56. package/lib/serve/index.js +46 -0
  57. package/{components-package → lib/serve}/serve.json +0 -0
  58. package/package-lock.json +48 -0
  59. package/package.json +53 -51
@@ -2,53 +2,57 @@ const fs = require("fs");
2
2
  const path = require("path");
3
3
  const mkdirp = require("mkdirp");
4
4
 
5
- const srcDir = `src/icon-collections/`;
6
- const destDir = `dist/icons/`;
5
+ const collectionName = process.argv[2] || "SAP-icons";
6
+ const srcFile = path.normalize(`src/${collectionName}.json`);
7
+ const destDir = path.normalize("dist/");
7
8
 
8
- mkdirp(destDir);
9
+ mkdirp.sync(destDir);
9
10
 
10
- const template = (name, pathData) => `import { registerIcon } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
11
+ const template = (name, pathData, ltr, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
11
12
 
12
13
  const name = "${name}";
13
14
  const pathData = "${pathData}";
15
+ const ltr = ${ltr};
16
+ const collection = "${collection}";
17
+ const packageName = "${packageName}";
14
18
 
15
- registerIcon(name, { pathData });
19
+ registerIcon(name, { pathData, ltr, collection, packageName });
16
20
 
17
21
  export default { pathData };`;
18
22
 
19
- const accTemplate = (name, pathData, accData) => `import { registerIcon } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
20
- import { ${accData.key} } from "../generated/i18n/i18n-defaults.js";
23
+
24
+ const accTemplate = (name, pathData, ltr, accData, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
25
+ import { ${accData.key} } from "./generated/i18n/i18n-defaults.js";
21
26
 
22
27
  const name = "${name}";
23
28
  const pathData = "${pathData}";
29
+ const ltr = ${ltr};
24
30
  const accData = ${accData.key};
31
+ const collection = "${collection}";
32
+ const packageName = "${packageName}";
25
33
 
26
- registerIcon(name, { pathData, accData });
34
+ registerIcon(name, { pathData, ltr, accData, collection, packageName });
27
35
 
28
36
  export default { pathData, accData };`;
29
37
 
38
+ const svgTemplate = (pathData) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
39
+ <path d="${pathData}"/>
40
+ </svg>`;
30
41
 
31
42
  const createIcons = (file) => {
32
43
  const json = JSON.parse(fs.readFileSync(file));
44
+
33
45
  for (let name in json.data) {
34
- let content;
35
- const pathData = json.data[name];
36
- const accData = json.accData[name];
46
+ const iconData = json.data[name];
47
+ const pathData = iconData.path;
48
+ const ltr = !!iconData.ltr;
49
+ const acc = iconData.acc;
37
50
 
38
- if (accData) {
39
- content = accTemplate(name, pathData, accData);
40
- } else {
41
- content = template(name, pathData);
42
- }
51
+ const content = acc ? accTemplate(name, pathData, ltr, acc, json.collection, json.packageName) : template(name, pathData, ltr, json.collection, json.packageName);
43
52
 
44
53
  fs.writeFileSync(path.join(destDir, `${name}.js`), content);
54
+ fs.writeFileSync(path.join(destDir, `${name}.svg`), svgTemplate(pathData));
45
55
  }
46
-
47
56
  };
48
57
 
49
- fs.readdirSync(srcDir).forEach(collectionFile => {
50
- createIcons(path.join(srcDir, collectionFile));
51
- });
52
-
53
-
54
-
58
+ createIcons(srcFile);
@@ -0,0 +1,95 @@
1
+ const fs = require("fs");
2
+ const path = require("path");
3
+ const mkdirp = require("mkdirp");
4
+
5
+ if (process.argv.length < 7) {
6
+ return;
7
+ }
8
+
9
+ const srcPath = process.argv[2];
10
+ const defaultText = process.argv[3] === "true";
11
+ const illustrationsPrefix = process.argv[4];
12
+ const illustrationSet = process.argv[5];
13
+ const destPath = process.argv[6];
14
+ const fileNamePattern = new RegExp(`${illustrationsPrefix}-.+-(.+).svg`);
15
+ // collect each illustration name because each one should have Sample.js file
16
+ const fileNames = new Set();
17
+
18
+ const svgImportTemplate = svgContent => { return `export default \`${svgContent}\`;`};
19
+ const svgToJs = fileName => {
20
+ const svg = fs.readFileSync(path.join(srcPath, fileName), { encoding: "utf-8" });
21
+ const fileContent = svgImportTemplate(svg);
22
+ fileName = fileName.replace(/\.svg$/, ".js");
23
+
24
+ fs.writeFileSync(path.join(destPath, fileName), fileContent);
25
+ };
26
+ const illustrationImportTemplate = illustrationName => {
27
+ const illustationNameUpperCase = illustrationName.toUpperCase();
28
+
29
+ return defaultText ? `import { registerIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
30
+ import dialogSvg from "./${illustrationsPrefix}-Dialog-${illustrationName}.js";
31
+ import sceneSvg from "./${illustrationsPrefix}-Scene-${illustrationName}.js";
32
+ import spotSvg from "./${illustrationsPrefix}-Spot-${illustrationName}.js";
33
+ import {
34
+ IM_TITLE_${illustationNameUpperCase},
35
+ IM_SUBTITLE_${illustationNameUpperCase},
36
+ } from "../generated/i18n/i18n-defaults.js";
37
+
38
+ const name = "${illustrationName}";
39
+ const set = "${illustrationSet}";
40
+ const title = IM_TITLE_${illustationNameUpperCase};
41
+ const subtitle = IM_SUBTITLE_${illustationNameUpperCase};
42
+
43
+ registerIllustration(name, {
44
+ dialogSvg,
45
+ sceneSvg,
46
+ spotSvg,
47
+ title,
48
+ subtitle,
49
+ set,
50
+ });
51
+
52
+ export {
53
+ dialogSvg,
54
+ sceneSvg,
55
+ spotSvg,
56
+ };` :
57
+ `import { registerIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
58
+ import dialogSvg from "./${illustrationsPrefix}-Dialog-${illustrationName}.js";
59
+ import sceneSvg from "./${illustrationsPrefix}-Scene-${illustrationName}.js";
60
+ import spotSvg from "./${illustrationsPrefix}-Spot-${illustrationName}.js";
61
+
62
+ const name = "${illustrationName}";
63
+ const set = "${illustrationSet}";
64
+
65
+ registerIllustration(name, {
66
+ dialogSvg,
67
+ sceneSvg,
68
+ spotSvg,
69
+ set,
70
+ });
71
+
72
+ export {
73
+ dialogSvg,
74
+ sceneSvg,
75
+ spotSvg,
76
+ };`
77
+ };
78
+
79
+ mkdirp.sync(destPath);
80
+
81
+ const illustrationFileNames = fs.readdirSync(path.normalize(srcPath));
82
+
83
+ // convert SVG to JS imports
84
+ illustrationFileNames.forEach(illustration => {
85
+ if (fileNamePattern.test(illustration)) {
86
+ let [fileName, illustrationName] = illustration.match(fileNamePattern);
87
+
88
+ svgToJs(fileName);
89
+ fileNames.add(illustrationName);
90
+ }
91
+ });
92
+
93
+ for (let illustrationName of fileNames) {
94
+ fs.writeFileSync(path.join(destPath, `${illustrationName}.js`), illustrationImportTemplate(illustrationName));
95
+ }
@@ -61,8 +61,12 @@ class ${componentName} extends UI5Element {
61
61
  return ${componentName}Template;
62
62
  }
63
63
 
64
- static async define(...params) {
65
- super.define(...params);
64
+ static get dependencies() {
65
+ return [];
66
+ }
67
+
68
+ static async onDefine() {
69
+
66
70
  }
67
71
  }
68
72
 
@@ -135,8 +139,16 @@ console.log(`Successfully generated ${componentName}.js`);
135
139
  console.log(`Successfully generated ${componentName}.css`);
136
140
  console.log(`Successfully generated ${componentName}.hbs`);
137
141
 
142
+ const bundleLogger = fs.createWriteStream("./bundle.common.js", {
143
+ flags: "a" // appending
144
+ });
145
+
146
+ bundleLogger.write(`
147
+ // TODO: Move this line in order to keep the file sorted alphabetically
148
+ import ${componentName} from "./dist/${componentName}.js";`);
149
+
138
150
  // Change the color of the output
139
- console.warn('\x1b[33m%s\x1b[0m', `
140
- Please import the generated component in bundle.esm.js:
141
- import ${componentName} from "./dist/${componentName}.js";
142
- `);
151
+ console.warn('\x1b[33m%s\x1b[0m', `
152
+ Component is imported in bundle.common.js.
153
+ Do NOT forget to sort the file in alphabeticall order.
154
+ `);
@@ -10,8 +10,13 @@ const Handlebars = require('handlebars/dist/handlebars.min.js');
10
10
  const fs = require('fs');
11
11
  const path = require('path');
12
12
  const mkdirp = require('mkdirp');
13
+ const beautify = require("json-beautify");
13
14
 
14
- const api = JSON.parse(fs.readFileSync(path.normalize(process.argv[2])));
15
+
16
+ const apiJSONPath = path.normalize(process.argv[2]);
17
+ const api = JSON.parse(fs.readFileSync(apiJSONPath));
18
+
19
+ fs.writeFileSync(apiJSONPath, beautify(api, null, 2, 100));
15
20
 
16
21
  const entries = api['symbols'];
17
22
  const compiledHandlebars = Handlebars.compile(template);
@@ -52,7 +57,7 @@ Handlebars.registerPartial('events', eventsTemplate);
52
57
  Handlebars.registerPartial('methods', methodsTemplate);
53
58
  Handlebars.registerPartial('cssVariables', cssVariablesTemplate);
54
59
 
55
- mkdirp(`dist/test-resources/api`);
60
+ mkdirp.sync(`dist/test-resources/api`);
56
61
 
57
62
  let entriesAPI = [];
58
63
 
@@ -61,28 +66,40 @@ const appendCSSVarsAPI = entry => {
61
66
  return entry;
62
67
  }
63
68
 
64
- const calculateAPI = entry => {
65
- if (entriesAPI.indexOf(entry.basename) !== -1) {
66
- return entry;
67
- }
68
-
69
- let parent = getComponentByName(entry.extends) || {};
70
-
71
- entry = appendCSSVarsAPI(entry);
72
- parent = appendCSSVarsAPI(parent);
73
-
74
- parent = { ...{ properties: [], events: [], slots: [], cssVariables: [] }, ...parent };
69
+ const componentHasEntityItem = (component, entity, name) => {
70
+ return component[entity].some(x => x && x.name === name);
71
+ };
72
+ const removeEmpty = arr => arr.filter(x => x);
75
73
 
76
- // extend component documentation
77
- entry.properties = [...(entry.properties || []), ...(parent.properties || [])];
78
- entry.events = [...(entry.events || []), ...(parent.events || [])];
79
- entry.slots = [...(entry.slots || []), ...(parent.slots || [])];
80
- entry.cssVariables = [...(entry.cssVariables || []), ...(parent.cssVariables || [])];
74
+ const calculateAPI = component => {
75
+ if (entriesAPI.indexOf(component.basename) !== -1) {
76
+ return component;
77
+ }
78
+ const entities = ["properties", "slots", "events", "methods", "cssVariables"];
79
+
80
+ // Initialize all entities with [] if necessary, and remove undefined things, and only leave public things
81
+ entities.forEach(entity => {
82
+ component[entity] = removeEmpty(component[entity] || []).filter(x => x.visibility === "public");
83
+ });
84
+
85
+ component = appendCSSVarsAPI(component);
86
+
87
+ let parent = getComponentByName(component.extends);
88
+ if (parent) {
89
+ let parentComponent = calculateAPI(parent);
90
+ entities.forEach(entity => {
91
+ parentComponent[entity].forEach( x => {
92
+ if (!componentHasEntityItem(component, entity, x.name)) {
93
+ component[entity].push(x);
94
+ }
95
+ });
96
+ });
97
+ }
81
98
 
82
- entriesAPI.push(entry.basename);
99
+ entriesAPI.push(component.basename);
83
100
 
84
- return entry;
85
- }
101
+ return component;
102
+ };
86
103
 
87
104
  const appendAdditionalEntriesAPI = entry => {
88
105
  if (entry.appenddocs) {
@@ -107,6 +124,11 @@ const generateSamplePage = entry => {
107
124
  } catch (err) { }
108
125
 
109
126
  if (content) {
127
+ entry.slots.forEach(slotData => {
128
+ if (!slotData.type.startsWith("Node") && !slotData.type.startsWith("HTMLElement")) { // interface -> don't show in documentation
129
+ slotData.type = "HTMLElement" + (slotData.type.endsWith("[]") ? "[]" : "");
130
+ }
131
+ });
110
132
  const APIReference = compiledHandlebars(entry).replace(/\[\]/g, " [0..n]");
111
133
  const EntitySince = compiledSinceTemplate(entry).replace(/\[\]/g, " [0..n]");
112
134
 
@@ -0,0 +1,54 @@
1
+ const esprima = require("esprima");
2
+ const escodegen = require("escodegen");
3
+
4
+ const fs = require("fs");
5
+ const path = require("path");
6
+ const glob = require("glob");
7
+ const basePath = process.argv[2];
8
+
9
+ const convertImports = (srcPath) => {
10
+ let changed = false;
11
+ // console.log("scanning imports of", srcPath);
12
+ let code = fs.readFileSync(srcPath).toString();
13
+ const tree = esprima.parseModule(code);
14
+ const importer = srcPath.replace(basePath, "");
15
+ const importerDir = path.dirname(importer);
16
+ // console.log("-> ", importer);
17
+ tree.body.forEach(node => {
18
+ if (node.type === "ImportDeclaration") {
19
+ let importee = node.source.value;
20
+ if (importee.startsWith(".")) {
21
+ // add .js extension if missing
22
+ if (!importee.endsWith(".js")) {
23
+ node.source.value += ".js"
24
+ changed = true;
25
+ }
26
+ return;
27
+ }
28
+ let importeeDir = path.dirname(importee);
29
+ let importeeFile = path.basename(importee);
30
+ let relativePath = path.relative(importerDir, importeeDir);
31
+ if (relativePath.length === 0) {
32
+ relativePath = "."
33
+ }
34
+ if (!relativePath.startsWith(".")) {
35
+ relativePath = "./" + relativePath;
36
+ }
37
+
38
+ relativePath = relativePath.replace(/\\/g, "/"); // the browser expects unix paths
39
+ let relativeImport = `${relativePath}/${importeeFile}.js`;
40
+ // console.log(importee + " --> " + relativeImport);
41
+ node.source.value = relativeImport;
42
+ changed = true;
43
+ }
44
+ });
45
+
46
+ if (changed) {
47
+ fs.writeFileSync(srcPath, escodegen.generate(tree));
48
+ }
49
+ }
50
+
51
+ const fileNames = glob.sync(basePath + "**/*.js");
52
+ // console.log(fileNames);
53
+ fileNames.forEach(convertImports);
54
+ console.log("Success: Converted absolute imports to relative for files in:", basePath)
@@ -1,47 +1,91 @@
1
- const fs = require("fs");
2
-
3
- const packageName = JSON.parse(fs.readFileSync("package.json")).name;
4
-
5
- // All languages present in the file system
6
- const files = fs.readdirSync("dist/generated/assets/i18n/");
7
- const languages = files.map(file => {
8
- const matches = file.match(/messagebundle_(.+?).json$/);
9
- return matches ? matches[1] : undefined;
10
- }).filter(key => !!key);
11
-
12
- let content;
13
-
14
- // No i18n - just import dependencies, if any
15
- if (languages.length === 0) {
16
- content = ``;
17
- // There is i18n - generate the full file
18
- } else {
19
-
20
- // Keys for the array
21
- const languagesKeysString = languages.map(key => `${key},`).join("\n\t");
22
-
23
- // Actual imports for json assets
24
- const assetsImportsString = languages.map(key => `import ${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
25
-
26
- // Resulting file content
27
- content = `import { registerI18nBundle } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
28
-
29
- ${assetsImportsString}
30
-
31
- const bundleMap = {
32
- ${languagesKeysString}
33
- };
34
-
35
- const allEntriesInlined = Object.entries(bundleMap).every(([_key, value]) => typeof (value) === "object");
36
-
37
- if (allEntriesInlined) {
38
- console.warn(\`Inefficient bundling detected: consider bundling i18n imports as URLs instead of inlining them.
39
- See rollup-plugin-url or webpack file-loader for more information.
40
- Suggested pattern: "assets\\\\\\/.*\\\\\\.json"\`);
41
- }
42
-
43
- registerI18nBundle("${packageName}", bundleMap);
44
- `;
45
- }
46
-
47
- fs.writeFileSync("dist/generated/json-imports/i18n.js", content);
1
+ const fs = require("fs");
2
+ const path = require('path');
3
+ const mkdirp = require("mkdirp");
4
+
5
+ const packageName = JSON.parse(fs.readFileSync("package.json")).name;
6
+
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`);
10
+
11
+ // 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);
17
+
18
+ let contentStatic, contentDynamic;
19
+
20
+ // No i18n - just import dependencies, if any
21
+ if (languages.length === 0) {
22
+ contentStatic = "";
23
+ contentDynamic = "";
24
+ // 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");
29
+
30
+ // Actual imports for json assets
31
+ const assetsImportsString = languages.map(key => `import _${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
32
+
33
+ // static imports
34
+ contentStatic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
35
+
36
+ ${assetsImportsString}
37
+
38
+ const bundleMap = {
39
+ ${languagesKeysString}
40
+ };
41
+
42
+ const fetchMessageBundle = async (localeId) => {
43
+ if (typeof bundleMap[localeId] === "object") {
44
+ // inlined from build
45
+ throw new Error("[i18n] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs")
46
+ }
47
+ return (await fetch(bundleMap[localeId])).json()
48
+ }
49
+
50
+ const localeIds = [${languagesKeysStringArray}];
51
+
52
+ localeIds.forEach(localeId => {
53
+ registerI18nLoader("${packageName}", localeId, fetchMessageBundle);
54
+ });
55
+ `;
56
+
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");
59
+
60
+ // Resulting file content
61
+ contentDynamic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
62
+
63
+ const importMessageBundle = async (localeId) => {
64
+ switch (localeId) {
65
+ ${dynamicImportsString}
66
+ default: throw "unknown locale"
67
+ }
68
+ }
69
+
70
+ const importAndCheck = async (localeId) => {
71
+ const data = await importMessageBundle(localeId);
72
+ if (typeof data === "string" && data.endsWith(".json")) {
73
+ 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.\`);
74
+ }
75
+ return data;
76
+ }
77
+
78
+ const localeIds = [${languagesKeysStringArray}];
79
+
80
+ localeIds.forEach(localeId => {
81
+ registerI18nLoader("${packageName}", localeId, importAndCheck);
82
+ });
83
+ `;
84
+
85
+
86
+ }
87
+
88
+
89
+ mkdirp.sync(path.dirname(outputFile));
90
+ fs.writeFileSync(outputFile, contentStatic);
91
+ fs.writeFileSync(outputFileDynamic, contentDynamic);
@@ -1,25 +1,73 @@
1
1
  const fs = require("fs");
2
+ const path = require('path');
3
+ const mkdirp = require("mkdirp");
4
+ const assets = require("../../assets-meta.js");
5
+
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
+
10
+ // All supported optional themes
11
+ const allThemes = assets.themes.all;
12
+
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));
2
19
 
3
20
  const packageName = JSON.parse(fs.readFileSync("package.json")).name;
4
21
 
5
- // Resulting file content
6
- const content = `import { registerThemeProperties } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
22
+ const importLines = themesOnFileSystem.map(theme => `import ${theme} from "../assets/themes/${theme}/parameters-bundle.css.json";`).join("\n");
23
+ const themeUrlsByName = "{\n" + themesOnFileSystem.join(",\n") + "\n}";
24
+ const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`;
25
+ const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import("../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n");
26
+
7
27
 
8
- import fiori3Dark from "../assets/themes/sap_fiori_3_dark/parameters-bundle.css.json";
9
- import belize from "../assets/themes/sap_belize/parameters-bundle.css.json";
10
- import belizeHcb from "../assets/themes/sap_belize_hcb/parameters-bundle.css.json";
28
+ // static imports file content
29
+ const contentStatic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
11
30
 
31
+ ${importLines}
32
+
33
+ const themeUrlsByName = ${themeUrlsByName};
12
34
  const isInlined = obj => typeof (obj) === "object";
13
35
 
14
- if (isInlined(fiori3Dark) || isInlined(belize) || isInlined(belizeHcb)) {
15
- console.warn(\`Inefficient bundling detected: consider bundling theme properties imports as URLs instead of inlining them.
16
- See rollup-plugin-url or webpack file-loader for more information.
17
- 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
+ }
57
+ }
58
+
59
+ const loadAndCheck = async (themeName) => {
60
+ const data = await loadThemeProperties(themeName);
61
+ if (typeof data === "string" && data.endsWith(".json")) {
62
+ throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
63
+ }
64
+ return data;
18
65
  }
19
66
 
20
- registerThemeProperties("${packageName}", "sap_fiori_3_dark", fiori3Dark);
21
- registerThemeProperties("${packageName}", "sap_belize", belize);
22
- registerThemeProperties("${packageName}", "sap_belize_hcb", belizeHcb);
67
+ ${availableThemesArray}
68
+ .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
23
69
  `;
24
70
 
25
- fs.writeFileSync("dist/generated/json-imports/Themes.js", content);
71
+ mkdirp.sync(path.dirname(outputFile));
72
+ fs.writeFileSync(outputFile, contentStatic);
73
+ fs.writeFileSync(outputFileDynamic, contentDynamic);
@@ -0,0 +1,10 @@
1
+ const config = {
2
+ files: {
3
+ exclude: ['serve.json']
4
+ },
5
+ folders: {
6
+ exclude: ['resources']
7
+ },
8
+ };
9
+
10
+ module.exports = config;
@@ -0,0 +1,19 @@
1
+ const fs = require("fs");
2
+ const path = require("path");
3
+ const process = require("process");
4
+ const { hashElement } = require("folder-hash");
5
+ const config = require("./config.js");
6
+
7
+ const inputDir = path.normalize(process.argv[2]);
8
+ const outputFileName = path.normalize(process.argv[3]);
9
+
10
+ const generateHash = async (inputDir, outputFileName) => {
11
+ const result = await hashElement(inputDir, config);
12
+ const hash = result.hash;
13
+ fs.writeFileSync(outputFileName, hash);
14
+ return hash;
15
+ };
16
+
17
+ generateHash(inputDir, outputFileName).then(hash => {
18
+ console.log(`Generated hash: ${hash}`);
19
+ });
@@ -0,0 +1,31 @@
1
+ const fs = require("fs");
2
+ const path = require("path");
3
+ const process = require("process");
4
+ const { hashElement } = require("folder-hash");
5
+ const config = require("./config.js");
6
+
7
+ const inputDir = path.normalize(process.argv[2]);
8
+ const hashFileName = path.normalize(process.argv[3]);
9
+
10
+ const isUpToDate = async (inputDir, hashFileName) => {
11
+ // No dist/ directory or no hash file
12
+ if (!fs.existsSync(inputDir) || !fs.existsSync(hashFileName)) {
13
+ return false;
14
+ }
15
+
16
+ // Empty hash file
17
+ const existingHash = `${fs.readFileSync(hashFileName)}`;
18
+ if (!existingHash) {
19
+ return false;
20
+ }
21
+
22
+ // Calculate the hash of the dist/ directory
23
+ const result = await hashElement(inputDir, config);
24
+ const newHash = result.hash;
25
+
26
+ return newHash === existingHash;
27
+ };
28
+
29
+ isUpToDate(inputDir, hashFileName).then(upToDate => {
30
+ process.exit(upToDate ? 0 : 1); // 0 means success (it is up to date), 1 means failure (must rebuild the dist/)
31
+ });
@@ -1,5 +1,3 @@
1
- const compiler = require("./src/compiler");
1
+ const hbs2lit = require("./src/compiler");
2
2
 
3
- module.exports = {
4
- compileString: compiler.compileString
5
- };
3
+ module.exports = hbs2lit;