@ui5/webcomponents-tools 0.0.0-701b14e36 → 0.0.0-760fbb471

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 (49) hide show
  1. package/CHANGELOG.md +212 -0
  2. package/README.md +5 -6
  3. package/bin/dev.js +1 -5
  4. package/components-package/eslint.js +34 -0
  5. package/components-package/nps.js +88 -45
  6. package/components-package/postcss.components.js +13 -13
  7. package/components-package/postcss.themes.js +15 -15
  8. package/components-package/vite.config.js +12 -0
  9. package/components-package/wdio.js +28 -4
  10. package/components-package/wdio.sync.js +1 -1
  11. package/icons-collection/nps.js +6 -3
  12. package/lib/copy-and-watch/index.js +0 -1
  13. package/lib/copy-list/index.js +2 -2
  14. package/lib/create-icons/index.js +55 -14
  15. package/lib/create-new-component/index.js +105 -108
  16. package/lib/create-new-component/jsFileContentTemplate.js +77 -0
  17. package/lib/create-new-component/tsFileContentTemplate.js +84 -0
  18. package/lib/dev-server/dev-server.js +66 -0
  19. package/lib/dev-server/virtual-index-html-plugin.js +53 -0
  20. package/lib/generate-custom-elements-manifest/index.js +327 -0
  21. package/lib/generate-js-imports/illustrations.js +72 -0
  22. package/lib/generate-json-imports/themes.js +3 -3
  23. package/lib/hbs2lit/src/compiler.js +8 -0
  24. package/lib/hbs2lit/src/litVisitor2.js +46 -8
  25. package/lib/i18n/defaults.js +18 -2
  26. package/lib/jsdoc/configTypescript.json +29 -0
  27. package/lib/jsdoc/plugin.js +32 -0
  28. package/lib/jsdoc/preprocess.js +146 -0
  29. package/lib/jsdoc/template/publish.js +9 -1
  30. package/lib/postcss-css-to-esm/index.js +51 -6
  31. package/lib/postcss-css-to-json/index.js +12 -1
  32. package/lib/postcss-p/postcss-p.mjs +3 -0
  33. package/lib/scoping/get-all-tags.js +1 -8
  34. package/lib/scoping/scope-test-pages.js +1 -1
  35. package/lib/test-runner/test-runner.js +63 -0
  36. package/package.json +22 -16
  37. package/components-package/rollup-plugins/empty-module.js +0 -15
  38. package/components-package/rollup.js +0 -150
  39. package/lib/documentation/index.js +0 -168
  40. package/lib/documentation/templates/api-component-since.js +0 -3
  41. package/lib/documentation/templates/api-css-variables-section.js +0 -24
  42. package/lib/documentation/templates/api-events-section.js +0 -35
  43. package/lib/documentation/templates/api-methods-section.js +0 -26
  44. package/lib/documentation/templates/api-properties-section.js +0 -42
  45. package/lib/documentation/templates/api-slots-section.js +0 -28
  46. package/lib/documentation/templates/template.js +0 -39
  47. package/lib/serve/index.js +0 -46
  48. package/lib/serve/serve.json +0 -3
  49. package/package-lock.json +0 -48
@@ -50,7 +50,7 @@ exports.config = {
50
50
  // maxInstances can get overwritten per capability. So if you have an in-house Selenium
51
51
  // grid with only 5 firefox instances available you can make sure that not more than
52
52
  // 5 instances get started at a time.
53
- maxInstances: process.env.TRAVIS ? 1 : 5,
53
+ maxInstances: 5,
54
54
  //
55
55
  browserName: 'chrome',
56
56
  'goog:chromeOptions': {
@@ -82,7 +82,7 @@ exports.config = {
82
82
  // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
83
83
  // If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
84
84
  // gets prepended directly.
85
- baseUrl: undefined, // This is important since WDIO 7+ does not accept an empty string for baseUrl
85
+ baseUrl: 'http://localhost:4567', // This is important since WDIO 7+ does not accept an empty string for baseUrl
86
86
  path: '',
87
87
  //
88
88
  // Default timeout for all waitFor* commands.
@@ -99,7 +99,14 @@ exports.config = {
99
99
  // Services take over a specific job you don't want to take care of. They enhance
100
100
  // your test setup with almost no effort. Unlike plugins, they don't add new
101
101
  // commands. Instead, they hook themselves up into the test process.
102
- services: ['chromedriver'],
102
+ services: ['chromedriver', 'devtools',
103
+ ['static-server', {
104
+ folders: [
105
+ { mount: '/', path: './dist' },
106
+ ],
107
+ port: '4567',
108
+ }],
109
+ ],
103
110
  // options
104
111
  chromeDriverArgs: ['--port=9515'], // default
105
112
  // Framework you want to run your specs with.
@@ -210,6 +217,12 @@ exports.config = {
210
217
  }, this, className);
211
218
  }, true);
212
219
 
220
+ await browser.addCommand("hasAttribute", async function(attrName) {
221
+ return browser.executeAsync((elem, attrName, done) => {
222
+ done(elem.hasAttribute(attrName));
223
+ }, this, attrName);
224
+ }, true);
225
+
213
226
  await browser.addCommand("getStaticAreaItemClassName", async function(selector) {
214
227
  return browser.executeAsync(async (selector, done) => {
215
228
  const staticAreaItem = await document.querySelector(selector).getStaticAreaItemDomRef();
@@ -231,6 +244,7 @@ exports.config = {
231
244
  "$",
232
245
  "$$",
233
246
  "getAttribute",
247
+ "hasAttribute", // custom
234
248
  "getCSSProperty",
235
249
  "getHTML",
236
250
  "getProperty",
@@ -316,7 +330,6 @@ exports.config = {
316
330
  "click",
317
331
  "doubleClick",
318
332
  "dragAndDrop",
319
- "keys",
320
333
  "pause",
321
334
  "removeAttribute", // custom
322
335
  "scrollIntoView",
@@ -327,10 +340,21 @@ exports.config = {
327
340
  "touchAction",
328
341
  "url",
329
342
  ];
343
+
344
+ const waitForWithDelay = [
345
+ "keys",
346
+ ];
347
+
330
348
  if (waitFor.includes(commandName)) {
331
349
  await browser.executeAsync(function (done) {
332
350
  window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
333
351
  });
352
+ } else if (waitForWithDelay.includes(commandName)) {
353
+ await browser.executeAsync(function (done) {
354
+ setTimeout(() => {
355
+ window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
356
+ }, 10);
357
+ });
334
358
  }
335
359
  },
336
360
  /**
@@ -50,7 +50,7 @@ exports.config = {
50
50
  // maxInstances can get overwritten per capability. So if you have an in-house Selenium
51
51
  // grid with only 5 firefox instances available you can make sure that not more than
52
52
  // 5 instances get started at a time.
53
- maxInstances: process.env.TRAVIS ? 1 : 5,
53
+ maxInstances: 5,
54
54
  //
55
55
  browserName: 'chrome',
56
56
  'goog:chromeOptions': {
@@ -41,15 +41,17 @@ const copyIconAssetsCommand = (options) => {
41
41
  const getScripts = (options) => {
42
42
  const createJSImportsCmd = createIconImportsCommand(options);
43
43
  const copyAssetsCmd = copyIconAssetsCommand(options);
44
+ const tsCommand = options.typescript ? "tsc" : "";
45
+ const tsCrossEnv = options.typescript ? "cross-env UI5_TS=true" : "";
44
46
 
45
47
  const scripts = {
46
- clean: "rimraf dist",
48
+ clean: "rimraf dist && rimraf src/generated",
47
49
  copy: copyAssetsCmd,
48
50
  build: {
49
- default: `nps clean copy build.i18n build.icons build.jsonImports`,
51
+ default: `${tsCrossEnv} nps clean copy build.i18n typescript build.icons build.jsonImports`,
50
52
  i18n: {
51
53
  default: "nps build.i18n.defaultsjs build.i18n.json",
52
- defaultsjs: `mkdirp dist/generated/i18n && node "${LIB}/i18n/defaults.js" src/i18n dist/generated/i18n`,
54
+ defaultsjs: `mkdirp dist/generated/i18n && node "${LIB}/i18n/defaults.js" src/i18n src/generated/i18n`,
53
55
  json: `mkdirp dist/generated/assets/i18n && node "${LIB}/i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
54
56
  },
55
57
  jsonImports: {
@@ -58,6 +60,7 @@ const getScripts = (options) => {
58
60
  },
59
61
  icons: createJSImportsCmd,
60
62
  },
63
+ typescript: tsCommand,
61
64
  };
62
65
 
63
66
  return scripts;
@@ -27,7 +27,6 @@ const path = require('path');
27
27
  const chokidar = require('chokidar');
28
28
  const glob = require('glob');
29
29
  const globParent = require('glob-parent');
30
- require('colors');
31
30
 
32
31
  /* CODE */
33
32
 
@@ -3,7 +3,7 @@ const path = require("path");
3
3
 
4
4
  const fileList = process.argv[2];
5
5
  const dest = process.argv[3];
6
- const src = "../../node_modules/@openui5/sap.ui.core/src/";
6
+ const src = "@openui5/sap.ui.core/src/";
7
7
 
8
8
  const generate = async () => {
9
9
  const filesToCopy = (await fs.readFile(fileList)).toString();
@@ -15,7 +15,7 @@ const generate = async () => {
15
15
  const trimFile = file => file.trim();
16
16
 
17
17
  return filesToCopy.split("\n").map(trimFile).filter(shouldCopy).map(async moduleName => {
18
- const srcPath = path.join(src, moduleName);
18
+ const srcPath = require.resolve(path.join(src, moduleName), {paths: [process.cwd()]});
19
19
  const destPath = path.join(dest, moduleName);
20
20
 
21
21
  await fs.mkdir(path.dirname(destPath), { recursive: true });
@@ -1,7 +1,7 @@
1
1
  const fs = require("fs").promises;
2
2
  const path = require("path");
3
3
 
4
- const collectionName = process.argv[2] || "SAP-icons";
4
+ const collectionName = process.argv[2] || "SAP-icons-v4";
5
5
  const collectionVersion = process.argv[3];
6
6
  const srcFile = collectionVersion ? path.normalize(`src/${collectionVersion}/${collectionName}.json`) : path.normalize(`src/${collectionName}.json`);
7
7
  const destDir = collectionVersion ? path.normalize(`dist/${collectionVersion}/`) : path.normalize("dist/");
@@ -11,13 +11,14 @@ const iconTemplate = (name, pathData, ltr, collection, packageName) => `import {
11
11
  const name = "${name}";
12
12
  const pathData = "${pathData}";
13
13
  const ltr = ${ltr};
14
+ const accData = null;
14
15
  const collection = "${collection}";
15
16
  const packageName = "${packageName}";
16
17
 
17
18
  registerIcon(name, { pathData, ltr, collection, packageName });
18
19
 
19
- export default "${name}";
20
- export { pathData, ltr };`;
20
+ export default "${collection}/${name}";
21
+ export { pathData, ltr, accData };`;
21
22
 
22
23
 
23
24
  const iconAccTemplate = (name, pathData, ltr, accData, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
@@ -32,21 +33,36 @@ const packageName = "${packageName}";
32
33
 
33
34
  registerIcon(name, { pathData, ltr, accData, collection, packageName });
34
35
 
35
- export default "${name}";
36
+ export default "${collection}/${name}";
36
37
  export { pathData, ltr, accData };`;
37
38
 
38
39
 
39
40
 
40
- const collectionTemplate = (name) => `import { isThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
41
- import {pathData as pathDataV5, ltr as ltrV5} from "./v5/${name}.js";
42
- import {pathData as pathDataV4, ltr as ltrV4} from "./v4/${name}.js";
41
+ const collectionTemplate = (name, versions, fullName) => `import { isThemeFamily } 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 = isThemeFamily("sap_horizon") ? pathData${versions[1]} : pathData${versions[0]};
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}";
43
55
 
44
- const isHorizon = isThemeFamily("sap_horizon");
45
- const pathData = isHorizon ? pathDataV5 : pathDataV4;
46
- const ltr = isHorizon ? ltrV5 : ltrV4;
56
+ export default _default;
57
+ export { pathData, ltr, accData };`
47
58
 
48
- export default "${name}";
49
- export { pathData, ltr };`;
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 };`
50
66
 
51
67
 
52
68
  const svgTemplate = (pathData) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -64,20 +80,45 @@ const createIcons = async (file) => {
64
80
  const pathData = iconData.path;
65
81
  const ltr = !!iconData.ltr;
66
82
  const acc = iconData.acc;
83
+ const packageName = json.packageName;
84
+ const collection = json.collection;
67
85
 
68
- const content = acc ? iconAccTemplate(name, pathData, ltr, acc, json.collection, json.packageName) : iconTemplate(name, pathData, ltr, json.collection, json.packageName);
86
+ const content = acc ? iconAccTemplate(name, pathData, ltr, acc, collection, packageName) : iconTemplate(name, pathData, ltr, collection, packageName);
69
87
 
70
88
  promises.push(fs.writeFile(path.join(destDir, `${name}.js`), content));
71
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"
72
96
 
73
97
  if (json.version) {
74
- promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.js`), collectionTemplate(name)));
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)));
75
105
  }
76
106
  }
77
107
 
78
108
  return Promise.all(promises);
79
109
  };
80
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
+
81
122
  createIcons(srcFile).then(() => {
82
123
  console.log("Icons created.");
83
124
  });
@@ -1,80 +1,7 @@
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";
10
-
11
- /**
12
- * @public
13
- */
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
- },
25
- };
26
-
27
- /**
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
46
- */
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
- }
63
-
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
- };
2
+ const prompts = require("prompts");
3
+ const jsFileContentTemplate = require("./jsFileContentTemplate.js");
4
+ const tsFileContentTemplate = require("./tsFileContentTemplate.js");
78
5
 
79
6
  const getPackageName = () => {
80
7
  if (!fs.existsSync("./package.json")) {
@@ -108,47 +35,117 @@ const getLibraryName = packageName => {
108
35
  return packageName.substr("webcomponents-".length);
109
36
  };
110
37
 
111
- const camelToKebabCase = string => string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
38
+ // String manipulation
39
+ const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
40
+
41
+ // Validation of user input
42
+ const isNameValid = name => typeof name === "string" && name.match(/^[a-zA-Z][a-zA-Z0-9_-]*$/);
43
+ const isTagNameValid = tagName => tagName.match(/^([a-z][a-z0-9]*-)([a-z0-9]+(-[a-z0-9]+)*)$/);
44
+
45
+ const generateFiles = (componentName, tagName, library, packageName, isTypeScript) => {
46
+ componentName = capitalizeFirstLetter(componentName);
47
+ const filePaths = {
48
+ "main": isTypeScript
49
+ ? `./src/${componentName}.ts`
50
+ : `./src/${componentName}.js`,
51
+ "css": `./src/themes/${componentName}.css`,
52
+ "template": `./src/${componentName}.hbs`,
53
+ };
112
54
 
113
- const packageName = getPackageName();
114
- const library = getLibraryName(packageName);
55
+ const FileContentTemplate = isTypeScript
56
+ ? tsFileContentTemplate(componentName, tagName, library, packageName)
57
+ : jsFileContentTemplate(componentName, tagName, library, packageName);
115
58
 
116
- const consoleArguments = process.argv.slice(2);
117
- const componentName = consoleArguments[0];
59
+ fs.writeFileSync(filePaths.main, FileContentTemplate, { flag: "wx+" });
60
+ fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
61
+ fs.writeFileSync(filePaths.template, "<div>Hello World</div>", { flag: "wx+" });
118
62
 
119
- if (!componentName){
120
- console.error("Please enter component name.");
121
- return;
63
+ console.log(`Successfully generated ${filePaths.main}`);
64
+ console.log(`Successfully generated ${filePaths.css}`);
65
+ console.log(`Successfully generated ${filePaths.template}`);
66
+
67
+ // Change the color of the output
68
+ console.warn('\x1b[33m%s\x1b[0m', `
69
+ Make sure to import the component in your bundle by using:
70
+ import ${componentName} from "./dist/${componentName}.js";`);
122
71
  }
123
72
 
124
- const tagName = `ui5-${camelToKebabCase(componentName)}`;
73
+ // Main function
74
+ const createWebComponent = async () => {
75
+ const packageName = getPackageName();
76
+ const library = getLibraryName(packageName);
125
77
 
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);
78
+ const consoleArguments = process.argv.slice(2);
79
+ let componentName = consoleArguments[0];
80
+ let tagName = consoleArguments[1];
81
+ let language = consoleArguments[2];
82
+ let isTypeScript;
132
83
 
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+" });
136
84
 
85
+ if (componentName && !isNameValid(componentName)) {
86
+ throw new Error("Invalid component name. Please use only letters, numbers, dashes and underscores. The first character must be a letter.");
87
+ }
137
88
 
138
- console.log(`Successfully generated ${componentName}.js`);
139
- console.log(`Successfully generated ${componentName}.css`);
140
- console.log(`Successfully generated ${componentName}.hbs`);
89
+ if (tagName && !isTagNameValid(tagName)) {
90
+ throw new Error("Invalid tag name. The tag name should only contain lowercase letters, numbers, dashes, and underscores. The first character must be a letter, and it should follow the pattern 'tag-name'.");
91
+ }
141
92
 
142
- const bundleLogger = fs.createWriteStream("./bundle.common.js", {
143
- flags: "a" // appending
144
- });
93
+ if (language && language !== "typescript" && language !== "ts" && language !== "javascript" && language !== "js") {
94
+ throw new Error("Invalid language. Please use 'typescript','javascript' or their respective 'ts','js'.");
95
+ }
145
96
 
146
- bundleLogger.write(`
147
- // TODO: Move this line in order to keep the file sorted alphabetically
148
- import ${componentName} from "./dist/${componentName}.js";`);
97
+ if (!componentName) {
98
+ const response = await prompts({
99
+ type: "text",
100
+ name: "componentName",
101
+ message: "Please enter a component name:",
102
+ validate: (value) => isNameValid(value),
103
+ });
104
+ componentName = response.componentName;
105
+
106
+ if (!componentName) {
107
+ process.exit();
108
+ }
109
+ }
149
110
 
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
- `);
111
+ if (!tagName) {
112
+ const response = await prompts({
113
+ type: "text",
114
+ name: "tagName",
115
+ message: "Please enter a tag name:",
116
+ validate: (value) => isTagNameValid(value),
117
+ });
118
+ tagName = response.tagName;
119
+
120
+ if (!tagName) {
121
+ process.exit();
122
+ }
123
+ }
124
+
125
+ if (!language) {
126
+ const response = await prompts({
127
+ type: "select",
128
+ name: "isTypeScript",
129
+ message: "Please select a language:",
130
+ choices: [
131
+ {
132
+ title: "TypeScript (recommended)",
133
+ value: true,
134
+ },
135
+ {
136
+ title: "JavaScript",
137
+ value: false,
138
+ },
139
+ ],
140
+ });
141
+ isTypeScript = response.isTypeScript;
142
+ } else if (language === "typescript" || language === "ts") {
143
+ isTypeScript = true;
144
+ } else {
145
+ isTypeScript = false;
146
+ }
147
+
148
+ generateFiles(componentName, tagName, library, packageName, isTypeScript);
149
+ };
150
+
151
+ createWebComponent();
@@ -0,0 +1,77 @@
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
+ static async onDefine() {
67
+
68
+ }
69
+ }
70
+
71
+ ${componentName}.define();
72
+
73
+ export default ${componentName};
74
+ `;
75
+ };
76
+
77
+ module.exports = jsFileContentTemplate;
@@ -0,0 +1,84 @@
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
+ static async onDefine() {
74
+
75
+ }
76
+ }
77
+
78
+ ${componentName}.define();
79
+
80
+ export default ${componentName};
81
+ `;
82
+ };
83
+
84
+ module.exports = tsFileContentTemplate;