@ui5/webcomponents-tools 0.0.0-d0bcf47c7 → 0.0.0-d1315d658

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 (58) hide show
  1. package/CHANGELOG.md +643 -1
  2. package/README.md +5 -6
  3. package/assets-meta.js +153 -0
  4. package/bin/dev.js +12 -1
  5. package/components-package/eslint.js +34 -0
  6. package/components-package/nps.js +112 -44
  7. package/components-package/postcss.components.js +13 -13
  8. package/components-package/postcss.themes.js +43 -16
  9. package/components-package/vite.config.js +13 -0
  10. package/components-package/wdio.js +400 -327
  11. package/components-package/wdio.sync.js +368 -0
  12. package/icons-collection/nps.js +69 -28
  13. package/lib/copy-and-watch/index.js +145 -0
  14. package/lib/copy-list/index.js +28 -0
  15. package/lib/create-icons/index.js +124 -0
  16. package/lib/create-illustrations/index.js +161 -0
  17. package/lib/create-new-component/index.js +121 -0
  18. package/lib/create-new-component/jsFileContentTemplate.js +73 -0
  19. package/lib/create-new-component/tsFileContentTemplate.js +80 -0
  20. package/lib/dev-server/dev-server.js +66 -0
  21. package/lib/dev-server/virtual-index-html-plugin.js +52 -0
  22. package/lib/esm-abs-to-rel/index.js +58 -0
  23. package/lib/generate-custom-elements-manifest/index.js +327 -0
  24. package/lib/generate-js-imports/illustrations.js +72 -0
  25. package/lib/generate-json-imports/i18n.js +98 -0
  26. package/lib/generate-json-imports/themes.js +80 -0
  27. package/lib/hbs2lit/index.js +3 -0
  28. package/lib/hbs2lit/src/compiler.js +60 -0
  29. package/lib/hbs2lit/src/extendedAttributeMapping.js +12 -0
  30. package/lib/hbs2lit/src/includesReplacer.js +31 -0
  31. package/lib/hbs2lit/src/litVisitor2.js +278 -0
  32. package/lib/hbs2lit/src/partials2.js +51 -0
  33. package/lib/hbs2lit/src/partialsVisitor.js +187 -0
  34. package/lib/hbs2lit/src/svgProcessor.js +76 -0
  35. package/lib/hbs2ui5/RenderTemplates/LitRenderer.js +40 -0
  36. package/lib/hbs2ui5/index.js +119 -0
  37. package/lib/i18n/defaults.js +82 -0
  38. package/lib/i18n/toJSON.js +43 -0
  39. package/lib/jsdoc/config.json +29 -0
  40. package/lib/jsdoc/configTypescript.json +29 -0
  41. package/lib/jsdoc/plugin.js +2468 -0
  42. package/lib/jsdoc/preprocess.js +146 -0
  43. package/lib/jsdoc/template/publish.js +4120 -0
  44. package/lib/postcss-combine-duplicated-selectors/index.js +178 -0
  45. package/lib/postcss-css-to-esm/index.js +90 -0
  46. package/lib/postcss-css-to-json/index.js +47 -0
  47. package/lib/postcss-new-files/index.js +36 -0
  48. package/lib/postcss-p/postcss-p.mjs +14 -0
  49. package/lib/replace-global-core/index.js +25 -0
  50. package/lib/scoping/get-all-tags.js +37 -0
  51. package/lib/scoping/lint-src.js +31 -0
  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 +40 -0
  55. package/lib/test-runner/test-runner.js +71 -0
  56. package/package.json +55 -55
  57. package/bin/init-ui5-package.js +0 -3
  58. package/package-lock.json +0 -9994
@@ -0,0 +1,124 @@
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 { isLegacyThemeFamily } 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 pathData = isLegacyThemeFamily() ? pathData${versions[0]} : pathData${versions[1]};
46
+
47
+ export default "${fullName}";
48
+ export { pathData, ltr, accData };`;
49
+
50
+
51
+ const typeDefinitionTemplate = (name, accData, collection) => `declare const pathData: string;
52
+ declare const ltr: boolean;
53
+ declare const accData: ${accData ? '{ key: string; defaultText: string; }' : null}
54
+ declare const _default: "${collection}/${name}";
55
+
56
+ export default _default;
57
+ export { pathData, ltr, accData };`
58
+
59
+ const collectionTypeDefinitionTemplate = (name, accData) => `declare const pathData: string;
60
+ declare const ltr: boolean;
61
+ declare const accData: ${accData ? '{ key: string; defaultText: string; }' : null}
62
+ declare const _default: "${name}";
63
+
64
+ export default _default;
65
+ export { pathData, ltr, accData };`
66
+
67
+
68
+ const svgTemplate = (pathData) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
69
+ <path d="${pathData}"/>
70
+ </svg>`;
71
+
72
+ const createIcons = async (file) => {
73
+ await fs.mkdir(destDir, { recursive: true });
74
+
75
+ const json = JSON.parse(await fs.readFile(file));
76
+
77
+ const promises = [];
78
+ for (let name in json.data) {
79
+ const iconData = json.data[name];
80
+ const pathData = iconData.path;
81
+ const ltr = !!iconData.ltr;
82
+ const acc = iconData.acc;
83
+ const packageName = json.packageName;
84
+ const collection = json.collection;
85
+
86
+ const content = acc ? iconAccTemplate(name, pathData, ltr, acc, collection, packageName) : iconTemplate(name, pathData, ltr, collection, packageName);
87
+
88
+ promises.push(fs.writeFile(path.join(destDir, `${name}.js`), content));
89
+ promises.push(fs.writeFile(path.join(destDir, `${name}.svg`), svgTemplate(pathData)));
90
+ promises.push(fs.writeFile(path.join(destDir, `${name}.d.ts`), typeDefinitionTemplate(name, acc, collection)));
91
+
92
+ // For versioned icons collections, the script creates top level (unversioned) module that internally imports the versioned ones.
93
+ // For example, the top level "@ui5/ui5-webcomponents-icons/dist/accept.js" imports:
94
+ // - "@ui5/ui5-webcomponents-icons/dist/v5/accept.js"
95
+ // - "@ui5/ui5-webcomponents-icons/dist/v4/accept.js"
96
+
97
+ if (json.version) {
98
+ // The exported value from the top level (unversioned) icon module depends on whether the collection is the default,
99
+ // to add or not the collection name to the exported value:
100
+ // For the default collection (SAPIcons) we export just the icon name - "export default { 'accept' }"
101
+ // For non-default collections (SAPTNTIcons and SAPBSIcons) we export the full name - "export default { 'tnt/actor' }"
102
+ const effectiveName = isDefaultCollection(collection) ? name : getUnversionedFullIconName(name, collection);
103
+ promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.js`), collectionTemplate(name, json.versions, effectiveName)));
104
+ promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.d.ts`), collectionTypeDefinitionTemplate(effectiveName, acc)));
105
+ }
106
+ }
107
+
108
+ return Promise.all(promises);
109
+ };
110
+
111
+ const isDefaultCollection = collectionName => collectionName === "SAP-icons-v4" || collectionName === "SAP-icons-v5";
112
+ const getUnversionedFullIconName = (name, collection) => `${getUnversionedCollectionName(collection)}/${name}`;
113
+ const getUnversionedCollectionName = collectionName => CollectionVersionedToUnversionedMap[collectionName] || collectionName;
114
+
115
+ const CollectionVersionedToUnversionedMap = {
116
+ "tnt-v2": "tnt",
117
+ "tnt-v3": "tnt",
118
+ "business-suite-v1": "business-suite",
119
+ "business-suite-v2": "business-suite",
120
+ };
121
+
122
+ createIcons(srcFile).then(() => {
123
+ console.log("Icons created.");
124
+ });
@@ -0,0 +1,161 @@
1
+ const fs = require("fs").promises;
2
+ const path = require("path");
3
+
4
+ if (process.argv.length < 7) {
5
+ throw new Error("Not enough arguments");
6
+ }
7
+
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 fileNamePattern = new RegExp(`${illustrationsPrefix}-.+-(.+).svg`);
61
+ // collect each illustration name because each one should have Sample.js file
62
+ const fileNames = new Set();
63
+
64
+ const svgImportTemplate = svgContent => {
65
+ return `export default \`${svgContent}\`;`
66
+ };
67
+ const svgToJs = async fileName => {
68
+ const svg = await fs.readFile(path.join(srcPath, fileName), {encoding: "utf-8"});
69
+ const fileContent = svgImportTemplate(svg);
70
+ fileName = fileName.replace(/\.svg$/, ".js");
71
+
72
+ return fs.writeFile(path.join(destPath, fileName), fileContent);
73
+ };
74
+ const illustrationImportTemplate = illustrationName => {
75
+ let illustrationNameForTranslation = illustrationName;
76
+
77
+ if (defaultText) {
78
+ if (FALLBACK_TEXTS[illustrationNameForTranslation]) {
79
+ illustrationNameForTranslation = FALLBACK_TEXTS[illustrationNameForTranslation];
80
+ } else if (illustrationName.indexOf("_v") !== -1) {
81
+ illustrationNameForTranslation = illustrationNameForTranslation.substr(0, illustrationNameForTranslation.indexOf('_v'));
82
+ }
83
+ }
84
+
85
+ const illustrationNameUpperCase = illustrationNameForTranslation.toUpperCase();
86
+
87
+ return defaultText ? `import { registerIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
88
+ import dialogSvg from "./${illustrationsPrefix}-Dialog-${illustrationName}.js";
89
+ import sceneSvg from "./${illustrationsPrefix}-Scene-${illustrationName}.js";
90
+ import spotSvg from "./${illustrationsPrefix}-Spot-${illustrationName}.js";
91
+ import {
92
+ IM_TITLE_${illustrationNameUpperCase},
93
+ IM_SUBTITLE_${illustrationNameUpperCase},
94
+ } from "../generated/i18n/i18n-defaults.js";
95
+
96
+ const name = "${illustrationName}";
97
+ const set = "${illustrationSet}";
98
+ const title = IM_TITLE_${illustrationNameUpperCase};
99
+ const subtitle = IM_SUBTITLE_${illustrationNameUpperCase};
100
+
101
+ registerIllustration(name, {
102
+ dialogSvg,
103
+ sceneSvg,
104
+ spotSvg,
105
+ title,
106
+ subtitle,
107
+ set,
108
+ });
109
+
110
+ export {
111
+ dialogSvg,
112
+ sceneSvg,
113
+ spotSvg,
114
+ };` :
115
+ `import { registerIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
116
+ import dialogSvg from "./${illustrationsPrefix}-Dialog-${illustrationName}.js";
117
+ import sceneSvg from "./${illustrationsPrefix}-Scene-${illustrationName}.js";
118
+ import spotSvg from "./${illustrationsPrefix}-Spot-${illustrationName}.js";
119
+
120
+ const name = "${illustrationName}";
121
+ const set = "${illustrationSet}";
122
+
123
+ registerIllustration(name, {
124
+ dialogSvg,
125
+ sceneSvg,
126
+ spotSvg,
127
+ set,
128
+ });
129
+
130
+ export {
131
+ dialogSvg,
132
+ sceneSvg,
133
+ spotSvg,
134
+ };`
135
+ };
136
+
137
+ await fs.mkdir(destPath, { recursive: true });
138
+
139
+ const illustrationFileNames = await fs.readdir(path.normalize(srcPath));
140
+
141
+ // convert SVG to JS imports
142
+ const promises = [];
143
+ illustrationFileNames.forEach(illustration => {
144
+ if (fileNamePattern.test(illustration)) {
145
+ let [fileName, illustrationName] = illustration.match(fileNamePattern);
146
+
147
+ promises.push(svgToJs(fileName));
148
+ fileNames.add(illustrationName);
149
+ }
150
+ });
151
+
152
+ for (let illustrationName of fileNames) {
153
+ promises.push(fs.writeFile(path.join(destPath, `${illustrationName}.js`), illustrationImportTemplate(illustrationName)));
154
+ }
155
+
156
+ return Promise.all(promises);
157
+ };
158
+
159
+ generate().then(() => {
160
+ console.log("Illustrations generated.");
161
+ });
@@ -0,0 +1,121 @@
1
+ const fs = require("fs");
2
+ const path = require("path");
3
+ const prompts = require("prompts");
4
+ const jsFileContentTemplate = require("./jsFileContentTemplate.js");
5
+ const tsFileContentTemplate = require("./tsFileContentTemplate.js");
6
+
7
+ /**
8
+ * Hyphanates the given PascalCase string, f.e.:
9
+ * Foo -> "my-foo" (adds preffix)
10
+ * FooBar -> "foo-bar"
11
+ */
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}`;
16
+ };
17
+
18
+ /**
19
+ * Capitalizes first letter of string.
20
+ */
21
+ const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
22
+
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);
28
+
29
+ const getPackageName = () => {
30
+ if (!fs.existsSync("./package.json")) {
31
+ throw("The current directory doesn't contain package.json file.");
32
+ }
33
+
34
+ const packageJSON = JSON.parse(fs.readFileSync("./package.json"));
35
+
36
+ if (!packageJSON.name) {
37
+ throw("The package.json file in the current directory doesn't have a name property");
38
+ }
39
+
40
+ return packageJSON.name;
41
+ };
42
+
43
+ const getLibraryName = packageName => {
44
+ if (!packageName.includes("/")) {
45
+ return packageName;
46
+ }
47
+
48
+ if (packageName === "@ui5/webcomponents") {
49
+ return `main`;
50
+ }
51
+
52
+ packageName = packageName.split("/").pop();
53
+
54
+ if (!packageName.startsWith("webcomponents-")) {
55
+ return packageName;
56
+ }
57
+
58
+ return packageName.substr("webcomponents-".length);
59
+ };
60
+
61
+ const generateFiles = (componentName, tagName, library, packageName, isTypeScript) => {
62
+ componentName = capitalizeFirstLetter(componentName);
63
+ const filePaths = {
64
+ "main": isTypeScript
65
+ ? `./src/${componentName}.ts`
66
+ : `./src/${componentName}.js`,
67
+ "css": `./src/themes/${componentName}.css`,
68
+ "template": `./src/${componentName}.hbs`,
69
+ };
70
+
71
+ const FileContentTemplate = isTypeScript
72
+ ? tsFileContentTemplate(componentName, tagName, library, packageName)
73
+ : jsFileContentTemplate(componentName, tagName, library, packageName);
74
+
75
+ fs.writeFileSync(filePaths.main, FileContentTemplate, { flag: "wx+" });
76
+ fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
77
+ fs.writeFileSync(filePaths.template, "<div>Hello World</div>", { flag: "wx+" });
78
+
79
+ console.log(`Successfully generated ${filePaths.main}`);
80
+ console.log(`Successfully generated ${filePaths.css}`);
81
+ console.log(`Successfully generated ${filePaths.template}`);
82
+
83
+ // Change the color of the output
84
+ console.warn('\x1b[33m%s\x1b[0m', `
85
+ Make sure to import the component in your bundle by using:
86
+ import "./dist/${componentName}.js";`);
87
+ }
88
+
89
+ // Main function
90
+ const createWebComponent = async () => {
91
+ const packageName = getPackageName();
92
+ const library = getLibraryName(packageName);
93
+
94
+ const consoleArguments = process.argv.slice(2);
95
+ let componentName = consoleArguments[0];
96
+
97
+ if (componentName && !isNameValid(componentName)) {
98
+ throw new Error(`${componentName} is invalid component name. Use only letters (at least two) and start with capital one: Button, MyButton, etc.`);
99
+ }
100
+
101
+ if (!componentName) {
102
+ const response = await prompts({
103
+ type: "text",
104
+ name: "componentName",
105
+ message: "Please enter a component name:",
106
+ validate: (value) => isNameValid(value) ? true : "Component name should follow PascalCase naming convention (f.e. Button, MyButton, etc.).",
107
+ });
108
+ componentName = response.componentName;
109
+
110
+ if (!componentName) {
111
+ process.exit();
112
+ }
113
+ }
114
+
115
+ const isTypeScript = fs.existsSync(path.join(process.cwd(), "tsconfig.json"));
116
+ const tagName = hyphaneteComponentName(componentName);
117
+
118
+ generateFiles(componentName, tagName, library, packageName, isTypeScript);
119
+ };
120
+
121
+ createWebComponent();
@@ -0,0 +1,73 @@
1
+ const jsFileContentTemplate = (componentName, tagName, library, packageName) => {
2
+ return `import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
3
+ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
4
+ import ${componentName}Template from "./generated/templates/${componentName}Template.lit.js";
5
+
6
+ // Styles
7
+ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
8
+
9
+ /**
10
+ * @public
11
+ */
12
+ const metadata = {
13
+ tag: "${tagName}",
14
+ properties: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
15
+ //
16
+ },
17
+ slots: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
18
+ //
19
+ },
20
+ events: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
21
+ //
22
+ },
23
+ };
24
+
25
+ /**
26
+ * @class
27
+ *
28
+ * <h3 class="comment-api-title">Overview</h3>
29
+ *
30
+ *
31
+ * <h3>Usage</h3>
32
+ *
33
+ * For the <code>${tagName}</code>
34
+ * <h3>ES6 Module Import</h3>
35
+ *
36
+ * <code>import ${packageName}/dist/${componentName}.js";</code>
37
+ *
38
+ * @constructor
39
+ * @author SAP SE
40
+ * @alias sap.ui.webc.${library}.${componentName}
41
+ * @extends sap.ui.webc.base.UI5Element
42
+ * @tagname ${tagName}
43
+ * @public
44
+ */
45
+ class ${componentName} extends UI5Element {
46
+ static get metadata() {
47
+ return metadata;
48
+ }
49
+
50
+ static get render() {
51
+ return litRender;
52
+ }
53
+
54
+ static get styles() {
55
+ return ${componentName}Css;
56
+ }
57
+
58
+ static get template() {
59
+ return ${componentName}Template;
60
+ }
61
+
62
+ static get dependencies() {
63
+ return [];
64
+ }
65
+ }
66
+
67
+ ${componentName}.define();
68
+
69
+ export default ${componentName};
70
+ `;
71
+ };
72
+
73
+ module.exports = jsFileContentTemplate;
@@ -0,0 +1,80 @@
1
+ const tsFileContentTemplate = (componentName, tagName, library, packageName) => {
2
+ return `import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
3
+ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
4
+ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
5
+ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
6
+ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
7
+ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
8
+
9
+ import ${componentName}Template from "./generated/templates/${componentName}Template.lit.js";
10
+
11
+ // Styles
12
+ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
13
+
14
+ /**
15
+ * @class
16
+ *
17
+ * <h3 class="comment-api-title">Overview</h3>
18
+ *
19
+ *
20
+ * <h3>Usage</h3>
21
+ *
22
+ * For the <code>${tagName}</code>
23
+ * <h3>ES6 Module Import</h3>
24
+ *
25
+ * <code>import ${packageName}/dist/${componentName}.js";</code>
26
+ *
27
+ * @constructor
28
+ * @author SAP SE
29
+ * @alias sap.ui.webc.${library}.${componentName}
30
+ * @extends sap.ui.webc.base.UI5Element
31
+ * @tagname ${tagName}
32
+ * @public
33
+ */
34
+ @customElement({
35
+ tag: "${tagName}",
36
+ renderer: litRender,
37
+ styles: ${componentName}Css,
38
+ template: ${componentName}Template,
39
+ dependencies: [],
40
+ })
41
+
42
+ /**
43
+ * Example custom event.
44
+ * Please keep in mind that all public events should be documented in the API Reference as shown below.
45
+ *
46
+ * @event sap.ui.webc.${library}.${componentName}#interact
47
+ * @public
48
+ */
49
+ @event("interact", { detail: { /* event payload ( optional ) */ } })
50
+ class ${componentName} extends UI5Element {
51
+ /**
52
+ * Defines the value of the component.
53
+ *
54
+ * @type {string}
55
+ * @name sap.ui.webc.${library}.${componentName}.prototype.value
56
+ * @defaultvalue ""
57
+ * @public
58
+ */
59
+ @property()
60
+ value!: string;
61
+
62
+ /**
63
+ * Defines the text of the component.
64
+ *
65
+ * @type {Node[]}
66
+ * @name sap.ui.webc.${library}.${componentName}.prototype.default
67
+ * @slot
68
+ * @public
69
+ */
70
+ @slot({ type: Node, "default": true })
71
+ text!: Array<Node>;
72
+ }
73
+
74
+ ${componentName}.define();
75
+
76
+ export default ${componentName};
77
+ `;
78
+ };
79
+
80
+ module.exports = tsFileContentTemplate;
@@ -0,0 +1,66 @@
1
+ const fs = require("fs/promises");
2
+ const { createServer } = require('vite');
3
+ const yargs = require('yargs/yargs')
4
+ const { hideBin } = require('yargs/helpers')
5
+
6
+ const argv = yargs(hideBin(process.argv))
7
+ .alias("c", "config")
8
+ .argv;
9
+
10
+ const startVite = async (port) => {
11
+ const server = await createServer({
12
+ configFile: argv.config,
13
+ server: {
14
+ port: port,
15
+ strictPort: true,
16
+ open: true,
17
+ host: true,
18
+ },
19
+ logLevel: 'info',
20
+ clearScreen: false,
21
+ })
22
+ await server.listen()
23
+ server.printUrls()
24
+ return server;
25
+ };
26
+
27
+ const rmPortFile = async () => {
28
+ // exit handler must be sync
29
+ try {
30
+ await fs.rm(".dev-server-port");
31
+ } catch (e) {}
32
+ process.exit();
33
+ }
34
+
35
+ ["exit", "SIGINT", "SIGUSR1", "SIGUSR2", "uncaughtException", "SIGTERM"].forEach((eventType) => {
36
+ process.on(eventType, rmPortFile);
37
+ });
38
+
39
+ (async () => {
40
+ let retries = 10;
41
+ let port = 8080;
42
+ while (retries--) {
43
+ console.log(`taking port ${port}`);
44
+ await fs.writeFile(".dev-server-port", `${port}`);
45
+ try {
46
+ // execSync(command, {stdio: 'pipe'});
47
+ const server = await startVite(port);
48
+ if (server) {
49
+ // server started, don't try other ports
50
+ break;
51
+ }
52
+ } catch (e) {
53
+ // uncomment for debug
54
+ // console.log(e.toString());
55
+ if (e.toString().includes("already in use")) {
56
+ console.log(`Port ${port} already in use`)
57
+ port++;
58
+ continue;
59
+ }
60
+ // other error or CTRL-C
61
+ process.exit();
62
+ }
63
+ // no error normal exit
64
+ // process.exit();
65
+ }
66
+ })();
@@ -0,0 +1,52 @@
1
+ const virtualIndexPlugin = async () => {
2
+ const path = await import("path");
3
+ const { globby } = await import("globby");
4
+ const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
5
+
6
+ const pagesPerFolder = {};
7
+ files.forEach(file => {
8
+ let folder = pagesPerFolder[path.dirname(file)] = pagesPerFolder[path.dirname(file)] || [];
9
+ folder.push(path.basename(file));
10
+ });
11
+
12
+ const rollupInput = {};
13
+
14
+ files.forEach(file => {
15
+ rollupInput[file] = path.resolve(process.cwd(), file);
16
+ })
17
+
18
+ return {
19
+ name: 'virtual-index-html',
20
+ config() {
21
+ return {
22
+ build: {
23
+ rollupOptions: {
24
+ input: rollupInput
25
+ }
26
+ }
27
+ }
28
+ },
29
+ configureServer(server) {
30
+ server.middlewares.use((req, res, next) => {
31
+ if (req.url === "/") {
32
+ const folders = Object.keys(pagesPerFolder);
33
+
34
+ res.statusCode = 200;
35
+ res.setHeader("Content-Type", "text/html; charset=utf-8");
36
+ res.end(`${folders.map(folder => {
37
+ const pages = pagesPerFolder[folder];
38
+ return `<h1>${folder}</h1>
39
+ ${pages.map(page => {
40
+ return `<li><a href='${folder}/${page}'>${page}</a></li>`
41
+ }).join("")}
42
+ `
43
+ }).join("")}`);
44
+ } else {
45
+ next();
46
+ }
47
+ })
48
+ },
49
+ }
50
+ };
51
+
52
+ module.exports = virtualIndexPlugin;