@ui5/webcomponents-tools 0.0.0-bef62af04 → 0.0.0-bf8366eb6

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 (109) hide show
  1. package/CHANGELOG.md +1314 -0
  2. package/README.md +6 -6
  3. package/assets-meta.js +17 -6
  4. package/bin/dev.js +1 -5
  5. package/components-package/eslint.js +36 -0
  6. package/components-package/nps.js +109 -70
  7. package/components-package/postcss.components.js +1 -21
  8. package/components-package/postcss.themes.js +1 -23
  9. package/components-package/vite.config.js +13 -0
  10. package/components-package/wdio.js +107 -37
  11. package/icons-collection/nps.js +51 -18
  12. package/lib/amd-to-es6/index.js +102 -0
  13. package/lib/amd-to-es6/no-remaining-require.js +33 -0
  14. package/lib/cem/custom-elements-manifest.config.mjs +501 -0
  15. package/lib/cem/event.mjs +131 -0
  16. package/lib/cem/schema-internal.json +1357 -0
  17. package/lib/cem/schema.json +1098 -0
  18. package/lib/cem/types-internal.d.ts +796 -0
  19. package/lib/cem/types.d.ts +736 -0
  20. package/lib/cem/utils.mjs +384 -0
  21. package/lib/cem/validate.js +70 -0
  22. package/lib/copy-and-watch/index.js +24 -1
  23. package/lib/copy-list/index.js +17 -17
  24. package/lib/create-icons/index.js +126 -58
  25. package/lib/create-illustrations/index.js +157 -45
  26. package/lib/create-new-component/index.js +61 -101
  27. package/lib/create-new-component/tsFileContentTemplate.js +71 -0
  28. package/lib/css-processors/css-processor-component-styles.mjs +48 -0
  29. package/lib/css-processors/css-processor-components.mjs +77 -0
  30. package/lib/css-processors/css-processor-themes.mjs +79 -0
  31. package/lib/css-processors/scope-variables.mjs +49 -0
  32. package/lib/css-processors/shared.mjs +76 -0
  33. package/lib/dev-server/custom-hot-update-plugin.js +39 -0
  34. package/lib/dev-server/dev-server.js +66 -0
  35. package/lib/dev-server/ssr-dom-shim-loader.js +26 -0
  36. package/lib/dev-server/virtual-index-html-plugin.js +52 -0
  37. package/lib/generate-js-imports/illustrations.js +86 -0
  38. package/lib/generate-json-imports/i18n.js +35 -55
  39. package/lib/generate-json-imports/themes.js +30 -45
  40. package/lib/hbs2lit/src/compiler.js +24 -4
  41. package/lib/hbs2lit/src/includesReplacer.js +5 -5
  42. package/lib/hbs2lit/src/litVisitor2.js +95 -24
  43. package/lib/hbs2lit/src/svgProcessor.js +12 -5
  44. package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +32 -4
  45. package/lib/hbs2ui5/index.js +56 -23
  46. package/lib/i18n/defaults.js +65 -57
  47. package/lib/i18n/toJSON.js +12 -11
  48. package/lib/postcss-combine-duplicated-selectors/index.js +185 -0
  49. package/lib/remove-dev-mode/remove-dev-mode.mjs +37 -0
  50. package/lib/scoping/get-all-tags.js +2 -9
  51. package/lib/scoping/lint-src.js +8 -7
  52. package/lib/scoping/missing-dependencies.js +65 -0
  53. package/lib/scoping/report-tags-usage.js +28 -0
  54. package/lib/scoping/scope-test-pages.js +2 -1
  55. package/lib/test-runner/test-runner.js +71 -0
  56. package/package.json +38 -39
  57. package/bin/init-ui5-package.js +0 -3
  58. package/components-package/rollup.js +0 -216
  59. package/lib/documentation/index.js +0 -165
  60. package/lib/documentation/templates/api-component-since.js +0 -3
  61. package/lib/documentation/templates/api-css-variables-section.js +0 -24
  62. package/lib/documentation/templates/api-events-section.js +0 -35
  63. package/lib/documentation/templates/api-methods-section.js +0 -26
  64. package/lib/documentation/templates/api-properties-section.js +0 -40
  65. package/lib/documentation/templates/api-slots-section.js +0 -28
  66. package/lib/documentation/templates/template.js +0 -38
  67. package/lib/esm-abs-to-rel/index.js +0 -54
  68. package/lib/hash/config.js +0 -10
  69. package/lib/hash/generate.js +0 -19
  70. package/lib/hash/upToDate.js +0 -31
  71. package/lib/init-package/index.js +0 -136
  72. package/lib/init-package/resources/.eslintignore +0 -3
  73. package/lib/init-package/resources/bundle.es5.js +0 -25
  74. package/lib/init-package/resources/bundle.esm.js +0 -31
  75. package/lib/init-package/resources/config/.eslintrc.js +0 -1
  76. package/lib/init-package/resources/config/postcss.components/postcss.config.js +0 -1
  77. package/lib/init-package/resources/config/postcss.themes/postcss.config.js +0 -1
  78. package/lib/init-package/resources/config/rollup.config.js +0 -1
  79. package/lib/init-package/resources/config/wdio.conf.js +0 -1
  80. package/lib/init-package/resources/package-scripts.js +0 -11
  81. package/lib/init-package/resources/src/Assets.js +0 -5
  82. package/lib/init-package/resources/src/MyFirstComponent.hbs +0 -1
  83. package/lib/init-package/resources/src/MyFirstComponent.js +0 -56
  84. package/lib/init-package/resources/src/i18n/messagebundle.properties +0 -2
  85. package/lib/init-package/resources/src/i18n/messagebundle_de.properties +0 -1
  86. package/lib/init-package/resources/src/i18n/messagebundle_en.properties +0 -1
  87. package/lib/init-package/resources/src/i18n/messagebundle_es.properties +0 -1
  88. package/lib/init-package/resources/src/i18n/messagebundle_fr.properties +0 -1
  89. package/lib/init-package/resources/src/themes/MyFirstComponent.css +0 -11
  90. package/lib/init-package/resources/src/themes/sap_belize/parameters-bundle.css +0 -3
  91. package/lib/init-package/resources/src/themes/sap_belize_hcb/parameters-bundle.css +0 -3
  92. package/lib/init-package/resources/src/themes/sap_belize_hcw/parameters-bundle.css +0 -3
  93. package/lib/init-package/resources/src/themes/sap_fiori_3/parameters-bundle.css +0 -3
  94. package/lib/init-package/resources/src/themes/sap_fiori_3_dark/parameters-bundle.css +0 -3
  95. package/lib/init-package/resources/src/themes/sap_fiori_3_hcb/parameters-bundle.css +0 -3
  96. package/lib/init-package/resources/src/themes/sap_fiori_3_hcw/parameters-bundle.css +0 -3
  97. package/lib/init-package/resources/test/pages/index.html +0 -56
  98. package/lib/init-package/resources/test/specs/Demo.spec.js +0 -12
  99. package/lib/jsdoc/config.json +0 -29
  100. package/lib/jsdoc/plugin.js +0 -2427
  101. package/lib/jsdoc/template/publish.js +0 -4101
  102. package/lib/polyfill-placeholder/index.js +0 -5
  103. package/lib/postcss-css-to-esm/index.js +0 -45
  104. package/lib/postcss-css-to-json/index.js +0 -31
  105. package/lib/postcss-new-files/index.js +0 -36
  106. package/lib/replace-global-core/index.js +0 -20
  107. package/lib/serve/index.js +0 -46
  108. package/lib/serve/serve.json +0 -3
  109. package/package-lock.json +0 -48
@@ -1,58 +1,126 @@
1
- const fs = require("fs");
2
- const path = require("path");
3
- const mkdirp = require("mkdirp");
4
-
5
- const collectionName = process.argv[2] || "SAP-icons";
6
- const srcFile = path.normalize(`src/${collectionName}.json`);
7
- const destDir = path.normalize("dist/");
8
-
9
- mkdirp.sync(destDir);
10
-
11
- const template = (name, pathData, ltr, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
12
-
13
- const name = "${name}";
14
- const pathData = "${pathData}";
15
- const ltr = ${ltr};
16
- const collection = "${collection}";
17
- const packageName = "${packageName}";
18
-
19
- registerIcon(name, { pathData, ltr, collection, packageName });
20
-
21
- export default { pathData };`;
22
-
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";
26
-
27
- const name = "${name}";
28
- const pathData = "${pathData}";
29
- const ltr = ${ltr};
30
- const accData = ${accData.key};
31
- const collection = "${collection}";
32
- const packageName = "${packageName}";
33
-
34
- registerIcon(name, { pathData, ltr, accData, collection, packageName });
35
-
36
- export default { pathData, accData };`;
37
-
38
- const svgTemplate = (pathData) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
39
- <path d="${pathData}"/>
40
- </svg>`;
41
-
42
- const createIcons = (file) => {
43
- const json = JSON.parse(fs.readFileSync(file));
44
-
45
- for (let name in json.data) {
46
- const iconData = json.data[name];
47
- const pathData = iconData.path;
48
- const ltr = !!iconData.ltr;
49
- const acc = iconData.acc;
50
-
51
- const content = acc ? accTemplate(name, pathData, ltr, acc, json.collection, json.packageName) : template(name, pathData, ltr, json.collection, json.packageName);
52
-
53
- fs.writeFileSync(path.join(destDir, `${name}.js`), content);
54
- fs.writeFileSync(path.join(destDir, `${name}.svg`), svgTemplate(pathData));
55
- }
56
- };
57
-
58
- createIcons(srcFile);
1
+ const fs = require("fs").promises;
2
+ const path = require("path");
3
+
4
+ const collectionName = process.argv[2] || "SAP-icons-v4";
5
+ const collectionVersion = process.argv[3];
6
+ const srcFile = collectionVersion ? path.normalize(`src/${collectionVersion}/${collectionName}.json`) : path.normalize(`src/${collectionName}.json`);
7
+ const destDir = collectionVersion ? path.normalize(`dist/${collectionVersion}/`) : path.normalize("dist/");
8
+
9
+ const iconTemplate = (name, pathData, ltr, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
10
+
11
+ const name = "${name}";
12
+ const pathData = "${pathData}";
13
+ const ltr = ${ltr};
14
+ const accData = null;
15
+ const collection = "${collection}";
16
+ const packageName = "${packageName}";
17
+
18
+ registerIcon(name, { pathData, ltr, collection, packageName });
19
+
20
+ export default "${collection}/${name}";
21
+ export { pathData, ltr, accData };`;
22
+
23
+
24
+ const iconAccTemplate = (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";
26
+
27
+ const name = "${name}";
28
+ const pathData = "${pathData}";
29
+ const ltr = ${ltr};
30
+ const accData = ${accData.key};
31
+ const collection = "${collection}";
32
+ const packageName = "${packageName}";
33
+
34
+ registerIcon(name, { pathData, ltr, accData, collection, packageName });
35
+
36
+ export default "${collection}/${name}";
37
+ export { pathData, ltr, accData };`;
38
+
39
+
40
+
41
+ const collectionTemplate = (name, versions, fullName) => `import { isLegacyThemeFamilyAsync } from "@ui5/webcomponents-base/dist/config/Theme.js";
42
+ import { pathData as pathData${versions[0]}, ltr, accData } from "./${versions[0]}/${name}.js";
43
+ import { pathData as pathData${versions[1]} } from "./${versions[1]}/${name}.js";
44
+
45
+ const getPathData = async() => {
46
+ return await isLegacyThemeFamilyAsync() ? pathDatav4 : pathDatav5;
47
+ };
48
+
49
+ export default "${fullName}";
50
+ export { getPathData, ltr, accData };`;
51
+
52
+
53
+ const typeDefinitionTemplate = (name, accData, collection) => `declare const pathData: string;
54
+ declare const ltr: boolean;
55
+ declare const accData: ${accData ? '{ key: string; defaultText: string; }' : null}
56
+ declare const _default: "${collection}/${name}";
57
+
58
+ export default _default;
59
+ export { pathData, ltr, accData };`
60
+
61
+ const collectionTypeDefinitionTemplate = (name, accData) => `declare const getPathData: () => Promise<string>;
62
+ declare const ltr: boolean;
63
+ declare const accData: ${accData ? '{ key: string; defaultText: string; }' : null}
64
+ declare const _default: "${name}";
65
+
66
+ export default _default;
67
+ export { getPathData, ltr, accData };`
68
+
69
+
70
+ const svgTemplate = (pathData) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
71
+ <path d="${pathData}"/>
72
+ </svg>`;
73
+
74
+ const createIcons = async (file) => {
75
+ await fs.mkdir(destDir, { recursive: true });
76
+
77
+ const json = JSON.parse(await fs.readFile(file));
78
+
79
+ const promises = [];
80
+ for (let name in json.data) {
81
+ const iconData = json.data[name];
82
+ const pathData = iconData.path;
83
+ const ltr = !!iconData.ltr;
84
+ const acc = iconData.acc;
85
+ const packageName = json.packageName;
86
+ const collection = json.collection;
87
+
88
+ const content = acc ? iconAccTemplate(name, pathData, ltr, acc, collection, packageName) : iconTemplate(name, pathData, ltr, collection, packageName);
89
+
90
+ promises.push(fs.writeFile(path.join(destDir, `${name}.js`), content));
91
+ promises.push(fs.writeFile(path.join(destDir, `${name}.svg`), svgTemplate(pathData)));
92
+ promises.push(fs.writeFile(path.join(destDir, `${name}.d.ts`), typeDefinitionTemplate(name, acc, collection)));
93
+
94
+ // For versioned icons collections, the script creates top level (unversioned) module that internally imports the versioned ones.
95
+ // For example, the top level "@ui5/ui5-webcomponents-icons/dist/accept.js" imports:
96
+ // - "@ui5/ui5-webcomponents-icons/dist/v5/accept.js"
97
+ // - "@ui5/ui5-webcomponents-icons/dist/v4/accept.js"
98
+
99
+ if (json.version) {
100
+ // The exported value from the top level (unversioned) icon module depends on whether the collection is the default,
101
+ // to add or not the collection name to the exported value:
102
+ // For the default collection (SAPIcons) we export just the icon name - "export default { 'accept' }"
103
+ // For non-default collections (SAPTNTIcons and SAPBSIcons) we export the full name - "export default { 'tnt/actor' }"
104
+ const effectiveName = isDefaultCollection(collection) ? name : getUnversionedFullIconName(name, collection);
105
+ promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.js`), collectionTemplate(name, json.versions, effectiveName)));
106
+ promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.d.ts`), collectionTypeDefinitionTemplate(effectiveName, acc)));
107
+ }
108
+ }
109
+
110
+ return Promise.all(promises);
111
+ };
112
+
113
+ const isDefaultCollection = collectionName => collectionName === "SAP-icons-v4" || collectionName === "SAP-icons-v5";
114
+ const getUnversionedFullIconName = (name, collection) => `${getUnversionedCollectionName(collection)}/${name}`;
115
+ const getUnversionedCollectionName = collectionName => CollectionVersionedToUnversionedMap[collectionName] || collectionName;
116
+
117
+ const CollectionVersionedToUnversionedMap = {
118
+ "tnt-v2": "tnt",
119
+ "tnt-v3": "tnt",
120
+ "business-suite-v1": "business-suite",
121
+ "business-suite-v2": "business-suite",
122
+ };
123
+
124
+ createIcons(srcFile).then(() => {
125
+ console.log("Icons created.");
126
+ });
@@ -1,70 +1,182 @@
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
- if (process.argv.length < 4) {
6
- return;
4
+ if (process.argv.length < 7) {
5
+ throw new Error("Not enough arguments");
7
6
  }
8
7
 
9
- const fileNamePattern = /sapIllus-.+-(.+).svg/;
10
- const srcPath = process.argv[2];
11
- const destPath = process.argv[3];
12
- // collect each illustration name because each one should have Sample.js file
13
- const fileNames = new Set();
14
-
15
- const svgImportTemplate = svgContent => { return `export default \`${svgContent}\`;`};
16
- const illustrationImportTemplate = illustrationName => {
17
- const illustationNameUpperCase = illustrationName.toUpperCase();
18
-
19
- return `import { registerIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
20
- import dialogSvg from "./sapIllus-Dialog-${illustrationName}.js";
21
- import sceneSvg from "./sapIllus-Scene-${illustrationName}.js";
22
- import spotSvg from "./sapIllus-Spot-${illustrationName}.js";
23
- import {
24
- IM_TITLE_${illustationNameUpperCase},
25
- IM_SUBTITLE_${illustationNameUpperCase},
26
- } from "../generated/i18n/i18n-defaults.js";
8
+ const generate = async () => {
9
+
10
+ const ORIGINAL_TEXTS = {
11
+ UnableToLoad: "UnableToLoad",
12
+ UnableToUpload: "UnableToUpload",
13
+ NoActivities: "NoActivities",
14
+ BeforeSearch: "BeforeSearch",
15
+ NoSearchResults: "NoSearchResults",
16
+ NoEntries: "NoEntries",
17
+ NoData: "NoData",
18
+ NoNotifications: "NoNotifications",
19
+ BalloonSky: "BalloonSky",
20
+ SuccessScreen: "SuccessScreen",
21
+ NoMail: "NoMail",
22
+ NoSavedItems: "NoSavedItems",
23
+ NoTasks: "NoTasks"
24
+ };
25
+
26
+ const FALLBACK_TEXTS = {
27
+ ReloadScreen: ORIGINAL_TEXTS.UnableToLoad,
28
+ Connection: ORIGINAL_TEXTS.UnableToLoad,
29
+ ErrorScreen: ORIGINAL_TEXTS.UnableToUpload,
30
+ EmptyCalendar: ORIGINAL_TEXTS.NoActivities,
31
+ SearchEarth: ORIGINAL_TEXTS.BeforeSearch,
32
+ SearchFolder: ORIGINAL_TEXTS.NoSearchResults,
33
+ EmptyList: ORIGINAL_TEXTS.NoEntries,
34
+ Tent: ORIGINAL_TEXTS.NoData,
35
+ SleepingBell: ORIGINAL_TEXTS.NoNotifications,
36
+ SimpleBalloon: ORIGINAL_TEXTS.BalloonSky,
37
+ SimpleBell: ORIGINAL_TEXTS.NoNotifications,
38
+ SimpleCalendar: ORIGINAL_TEXTS.NoActivities,
39
+ SimpleCheckMark: ORIGINAL_TEXTS.SuccessScreen,
40
+ SimpleConnection: ORIGINAL_TEXTS.UnableToLoad,
41
+ SimpleEmptyDoc: ORIGINAL_TEXTS.NoData,
42
+ SimpleEmptyList: ORIGINAL_TEXTS.NoEntries,
43
+ SimpleError: ORIGINAL_TEXTS.UnableToUpload,
44
+ SimpleMagnifier: ORIGINAL_TEXTS.BeforeSearch,
45
+ SimpleMail: ORIGINAL_TEXTS.NoMail,
46
+ SimpleNoSavedItems: ORIGINAL_TEXTS.NoSavedItems,
47
+ SimpleNotFoundMagnifier: ORIGINAL_TEXTS.NoSearchResults,
48
+ SimpleReload: ORIGINAL_TEXTS.UnableToLoad,
49
+ SimpleTask: ORIGINAL_TEXTS.NoTasks,
50
+ SuccessBalloon: ORIGINAL_TEXTS.BalloonSky,
51
+ SuccessCheckMark: ORIGINAL_TEXTS.SuccessScreen,
52
+ SuccessHighFive: ORIGINAL_TEXTS.BalloonSky
53
+ };
54
+
55
+ const srcPath = process.argv[2];
56
+ const defaultText = process.argv[3] === "true";
57
+ const illustrationsPrefix = process.argv[4];
58
+ const illustrationSet = process.argv[5];
59
+ const destPath = process.argv[6];
60
+ const collection = process.argv[7];
61
+ const fileNamePattern = new RegExp(`${illustrationsPrefix}-.+-(.+).svg`);
62
+ // collect each illustration name because each one should have Sample.js file
63
+ const fileNames = new Set();
64
+
65
+ let dotIllustrationNames = [];
66
+
67
+ try {
68
+ await fs.access(srcPath);
69
+ } catch (error) {
70
+ console.log(`The path ${srcPath} does not exist.`);
71
+ return Promise.resolve(null);
72
+ }
73
+
74
+ console.log(`Generating illustrations from ${srcPath} to ${destPath}`)
75
+
76
+ const svgImportTemplate = svgContent => {
77
+ return `export default \`${svgContent}\`;`
78
+ };
79
+ const svgToJs = async fileName => {
80
+ const svg = await fs.readFile(path.join(srcPath, fileName), { encoding: "utf-8" });
81
+ const fileContent = svgImportTemplate(svg);
82
+ const fileNameSplitArr = fileName.split('-');
83
+ fileName = fileName.replace(/\.svg$/, ".js");
84
+
85
+ if (fileNameSplitArr[1] === 'Dot') {
86
+ // we keep the Dot illustration names to import them later. If no Dot is present, Spot will be used
87
+ dotIllustrationNames.push(fileNameSplitArr[2].split('.')[0]);
88
+ }
89
+
90
+ return fs.writeFile(path.join(destPath, fileName), fileContent);
91
+ };
92
+ const illustrationImportTemplate = illustrationName => {
93
+ let illustrationNameForTranslation = illustrationName;
94
+
95
+ if (defaultText) {
96
+ if (FALLBACK_TEXTS[illustrationNameForTranslation]) {
97
+ illustrationNameForTranslation = FALLBACK_TEXTS[illustrationNameForTranslation];
98
+ } else if (illustrationName.indexOf("_v") !== -1) {
99
+ illustrationNameForTranslation = illustrationNameForTranslation.substr(0, illustrationNameForTranslation.indexOf('_v'));
100
+ }
101
+ }
102
+
103
+ const illustrationNameUpperCase = illustrationNameForTranslation.toUpperCase();
104
+ // If no Dot is present, Spot will be imported as Dot
105
+ const hasDot = dotIllustrationNames.indexOf(illustrationName) !== -1 ? 'Dot' : 'Spot';
106
+
107
+ return `import { registerIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
108
+ import dialogSvg from "./${illustrationsPrefix}-Dialog-${illustrationName}.js";
109
+ import sceneSvg from "./${illustrationsPrefix}-Scene-${illustrationName}.js";
110
+ import spotSvg from "./${illustrationsPrefix}-Spot-${illustrationName}.js";
111
+ import dotSvg from "./${illustrationsPrefix}-${hasDot}-${illustrationName}.js";${
112
+ defaultText ? `import {
113
+ IM_TITLE_${illustrationNameUpperCase},
114
+ IM_SUBTITLE_${illustrationNameUpperCase},
115
+ } from "../generated/i18n/i18n-defaults.js";` : ``}
27
116
 
28
117
  const name = "${illustrationName}";
29
- const title = IM_TITLE_${illustationNameUpperCase};
30
- const subtitle = IM_SUBTITLE_${illustationNameUpperCase};
118
+ const set = "${illustrationSet}";
119
+ const collection = "${collection}";${defaultText ? `
120
+ const title = IM_TITLE_${illustrationNameUpperCase};
121
+ const subtitle = IM_SUBTITLE_${illustrationNameUpperCase};` : ``}
31
122
 
32
123
  registerIllustration(name, {
33
124
  dialogSvg,
34
125
  sceneSvg,
35
126
  spotSvg,
127
+ dotSvg,${defaultText ? `
36
128
  title,
37
- subtitle,
129
+ subtitle,` : ``}
130
+ set,
131
+ collection,
38
132
  });
39
133
 
134
+ export default "${illustrationSet === "fiori" ? "" : `${illustrationSet}/`}${illustrationName}";
40
135
  export {
41
136
  dialogSvg,
42
137
  sceneSvg,
43
138
  spotSvg,
44
- };`};
139
+ dotSvg,
140
+ };`
141
+ };
45
142
 
46
- const svgToJs = fileName => {
47
- const svg = fs.readFileSync(path.join(srcPath, fileName), { encoding: "utf-8" });
48
- const fileContent = svgImportTemplate(svg);
49
- fileName = fileName.replace(/\.svg$/, ".js");
143
+ const illustrationTypeDefinition = illustrationName => {
144
+ return `declare const dialogSvg: string;
145
+ declare const sceneSvg: string;
146
+ declare const spotSvg: string;
147
+ declare const dotSvg: string;
148
+ declare const _default: "${illustrationSet === "fiori" ? "" : `${illustrationSet}/`}${illustrationName}";
50
149
 
51
- fs.writeFileSync(path.join(destPath, fileName), fileContent);
52
- }
150
+ export default _default;
151
+ export { dialogSvg, sceneSvg, spotSvg, dotSvg };`
152
+ };
53
153
 
54
- mkdirp.sync(destPath);
154
+ await fs.mkdir(destPath, { recursive: true });
55
155
 
56
- const illustrationFileNames = fs.readdirSync(path.normalize(srcPath));
156
+ const illustrationFileNames = await fs.readdir(path.normalize(srcPath));
57
157
 
58
- // convert SVG to JS imports
59
- illustrationFileNames.forEach(illustration => {
60
- if (fileNamePattern.test(illustration)) {
61
- let [fileName, illustrationName] = illustration.match(fileNamePattern);
158
+ // convert SVG to JS imports
159
+ const promises = [];
160
+ illustrationFileNames.forEach(illustration => {
161
+ if (fileNamePattern.test(illustration)) {
162
+ let [fileName, illustrationName] = illustration.match(fileNamePattern);
62
163
 
63
- svgToJs(fileName);
64
- fileNames.add(illustrationName);
65
- }
66
- });
164
+ promises.push(svgToJs(fileName));
165
+ fileNames.add(illustrationName);
166
+ }
167
+ });
67
168
 
68
- for (let illustrationName of fileNames) {
69
- fs.writeFileSync(path.join(destPath, `${illustrationName}.js`), illustrationImportTemplate(illustrationName));
70
- }
169
+ return Promise.all(promises).then(() => {
170
+ const nestedPromises = [];
171
+ for (let illustrationName of fileNames) {
172
+ nestedPromises.push(fs.writeFile(path.join(destPath, `${illustrationName}.js`), illustrationImportTemplate(illustrationName)));
173
+ nestedPromises.push(fs.writeFile(path.join(destPath, `${illustrationName}.d.ts`), illustrationTypeDefinition(illustrationName)));
174
+ }
175
+
176
+ return Promise.all(nestedPromises);
177
+ });
178
+ };
179
+
180
+ generate().then(() => {
181
+ console.log("Illustrations generated.");
182
+ });
@@ -1,80 +1,30 @@
1
1
  const fs = require("fs");
2
-
3
- const jsFileContentTemplate = componentName => {
4
- return `import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
5
- import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
6
- import ${componentName}Template from "./generated/templates/${componentName}Template.lit.js";
7
-
8
- // Styles
9
- import ${componentName}Css from "./generated/themes/${componentName}.css.js";
2
+ const path = require("path");
3
+ const prompts = require("prompts");
4
+ const jsFileContentTemplate = require("./jsFileContentTemplate.js");
5
+ const tsFileContentTemplate = require("./tsFileContentTemplate.js");
10
6
 
11
7
  /**
12
- * @public
8
+ * Hyphanates the given PascalCase string, f.e.:
9
+ * Foo -> "my-foo" (adds preffix)
10
+ * FooBar -> "foo-bar"
13
11
  */
14
- const metadata = {
15
- tag: "${tagName}",
16
- properties: /** @lends sap.ui.webcomponents.${library}.${componentName}.prototype */ {
17
- //
18
- },
19
- slots: /** @lends sap.ui.webcomponents.${library}.${componentName}.prototype */ {
20
- //
21
- },
22
- events: /** @lends sap.ui.webcomponents.${library}.${componentName}.prototype */ {
23
- //
24
- },
12
+ const hyphaneteComponentName = (componentName) => {
13
+ const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
14
+
15
+ return result.includes("-") ? result : `my-${result}`;
25
16
  };
26
17
 
27
18
  /**
28
- * @class
29
- *
30
- * <h3 class="comment-api-title">Overview</h3>
31
- *
32
- *
33
- * <h3>Usage</h3>
34
- *
35
- * For the <code>${tagName}</code>
36
- * <h3>ES6 Module Import</h3>
37
- *
38
- * <code>import ${packageName}/dist/${componentName}.js";</code>
39
- *
40
- * @constructor
41
- * @author SAP SE
42
- * @alias sap.ui.webcomponents.${library}.${componentName}
43
- * @extends UI5Element
44
- * @tagname ${tagName}
45
- * @public
19
+ * Capitalizes first letter of string.
46
20
  */
47
- class ${componentName} extends UI5Element {
48
- static get metadata() {
49
- return metadata;
50
- }
51
-
52
- static get render() {
53
- return litRender;
54
- }
55
-
56
- static get styles() {
57
- return ${componentName}Css;
58
- }
59
-
60
- static get template() {
61
- return ${componentName}Template;
62
- }
21
+ const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
63
22
 
64
- static get dependencies() {
65
- return [];
66
- }
67
-
68
- static async onDefine() {
69
-
70
- }
71
- }
72
-
73
- ${componentName}.define();
74
-
75
- export default ${componentName};
76
- `;
77
- };
23
+ /**
24
+ * Validates component name, enforcing PascalCase pattern - Button, MyButton.
25
+ */
26
+ const PascalCasePattern = /^[A-Z][A-Za-z0-9]+$/;
27
+ const isNameValid = name => typeof name === "string" && PascalCasePattern.test(name);
78
28
 
79
29
  const getPackageName = () => {
80
30
  if (!fs.existsSync("./package.json")) {
@@ -108,47 +58,57 @@ const getLibraryName = packageName => {
108
58
  return packageName.substr("webcomponents-".length);
109
59
  };
110
60
 
111
- const camelToKebabCase = string => string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
61
+ const generateFiles = (componentName, tagName, library, packageName) => {
62
+ componentName = capitalizeFirstLetter(componentName);
63
+ const filePaths = {
64
+ "main": `./src/${componentName}.ts`,
65
+ "css": `./src/themes/${componentName}.css`,
66
+ "template": `./src/${componentName}.hbs`,
67
+ };
112
68
 
113
- const packageName = getPackageName();
114
- const library = getLibraryName(packageName);
69
+ fs.writeFileSync(filePaths.main, tsFileContentTemplate(componentName, tagName, library, packageName), { flag: "wx+" });
70
+ fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
71
+ fs.writeFileSync(filePaths.template, "<div>Hello World</div>", { flag: "wx+" });
115
72
 
116
- const consoleArguments = process.argv.slice(2);
117
- const componentName = consoleArguments[0];
73
+ console.log(`Successfully generated ${filePaths.main}`);
74
+ console.log(`Successfully generated ${filePaths.css}`);
75
+ console.log(`Successfully generated ${filePaths.template}`);
118
76
 
119
- if (!componentName){
120
- console.error("Please enter component name.");
121
- return;
77
+ // Change the color of the output
78
+ console.warn('\x1b[33m%s\x1b[0m', `
79
+ Make sure to import the component in your bundle by using:
80
+ import "./dist/${componentName}.js";`);
122
81
  }
123
82
 
124
- const tagName = `ui5-${camelToKebabCase(componentName)}`;
83
+ // Main function
84
+ const createWebComponent = async () => {
85
+ const packageName = getPackageName();
86
+ const library = getLibraryName(packageName);
125
87
 
126
- const filePaths = {
127
- "js": `./src/${componentName}.js`,
128
- "css": `./src/themes/${componentName}.css`,
129
- "hbs": `./src/${componentName}.hbs`,
130
- };
131
- const sJsFileContentTemplate = jsFileContentTemplate(componentName);
132
-
133
- fs.writeFileSync(filePaths.js, sJsFileContentTemplate, { flag: "wx+" });
134
- fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
135
- fs.writeFileSync(filePaths.hbs, "<div>Hello World</div>", { flag: "wx+" });
88
+ const consoleArguments = process.argv.slice(2);
89
+ let componentName = consoleArguments[0];
136
90
 
91
+ if (componentName && !isNameValid(componentName)) {
92
+ throw new Error(`${componentName} is invalid component name. Use only letters (at least two) and start with capital one: Button, MyButton, etc.`);
93
+ }
137
94
 
138
- console.log(`Successfully generated ${componentName}.js`);
139
- console.log(`Successfully generated ${componentName}.css`);
140
- console.log(`Successfully generated ${componentName}.hbs`);
95
+ if (!componentName) {
96
+ const response = await prompts({
97
+ type: "text",
98
+ name: "componentName",
99
+ message: "Please enter a component name:",
100
+ validate: (value) => isNameValid(value) ? true : "Component name should follow PascalCase naming convention (f.e. Button, MyButton, etc.).",
101
+ });
102
+ componentName = response.componentName;
103
+
104
+ if (!componentName) {
105
+ process.exit();
106
+ }
107
+ }
141
108
 
142
- const bundleLogger = fs.createWriteStream("./bundle.common.js", {
143
- flags: "a" // appending
144
- });
109
+ const tagName = hyphaneteComponentName(componentName);
145
110
 
146
- bundleLogger.write(`
147
- // TODO: Move this line in order to keep the file sorted alphabetically
148
- import ${componentName} from "./dist/${componentName}.js";`);
111
+ generateFiles(componentName, tagName, library, packageName);
112
+ };
149
113
 
150
- // Change the color of the output
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
- `);
114
+ createWebComponent();