@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.
- package/CHANGELOG.md +212 -0
- package/README.md +5 -6
- package/bin/dev.js +1 -5
- package/components-package/eslint.js +34 -0
- package/components-package/nps.js +88 -45
- package/components-package/postcss.components.js +13 -13
- package/components-package/postcss.themes.js +15 -15
- package/components-package/vite.config.js +12 -0
- package/components-package/wdio.js +28 -4
- package/components-package/wdio.sync.js +1 -1
- package/icons-collection/nps.js +6 -3
- package/lib/copy-and-watch/index.js +0 -1
- package/lib/copy-list/index.js +2 -2
- package/lib/create-icons/index.js +55 -14
- package/lib/create-new-component/index.js +105 -108
- package/lib/create-new-component/jsFileContentTemplate.js +77 -0
- package/lib/create-new-component/tsFileContentTemplate.js +84 -0
- package/lib/dev-server/dev-server.js +66 -0
- package/lib/dev-server/virtual-index-html-plugin.js +53 -0
- package/lib/generate-custom-elements-manifest/index.js +327 -0
- package/lib/generate-js-imports/illustrations.js +72 -0
- package/lib/generate-json-imports/themes.js +3 -3
- package/lib/hbs2lit/src/compiler.js +8 -0
- package/lib/hbs2lit/src/litVisitor2.js +46 -8
- package/lib/i18n/defaults.js +18 -2
- package/lib/jsdoc/configTypescript.json +29 -0
- package/lib/jsdoc/plugin.js +32 -0
- package/lib/jsdoc/preprocess.js +146 -0
- package/lib/jsdoc/template/publish.js +9 -1
- package/lib/postcss-css-to-esm/index.js +51 -6
- package/lib/postcss-css-to-json/index.js +12 -1
- package/lib/postcss-p/postcss-p.mjs +3 -0
- package/lib/scoping/get-all-tags.js +1 -8
- package/lib/scoping/scope-test-pages.js +1 -1
- package/lib/test-runner/test-runner.js +63 -0
- package/package.json +22 -16
- package/components-package/rollup-plugins/empty-module.js +0 -15
- package/components-package/rollup.js +0 -150
- package/lib/documentation/index.js +0 -168
- package/lib/documentation/templates/api-component-since.js +0 -3
- package/lib/documentation/templates/api-css-variables-section.js +0 -24
- package/lib/documentation/templates/api-events-section.js +0 -35
- package/lib/documentation/templates/api-methods-section.js +0 -26
- package/lib/documentation/templates/api-properties-section.js +0 -42
- package/lib/documentation/templates/api-slots-section.js +0 -28
- package/lib/documentation/templates/template.js +0 -39
- package/lib/serve/index.js +0 -46
- package/lib/serve/serve.json +0 -3
- 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:
|
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:
|
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:
|
53
|
+
maxInstances: 5,
|
54
54
|
//
|
55
55
|
browserName: 'chrome',
|
56
56
|
'goog:chromeOptions': {
|
package/icons-collection/nps.js
CHANGED
@@ -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:
|
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
|
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;
|
package/lib/copy-list/index.js
CHANGED
@@ -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 = "
|
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
|
42
|
-
import {pathData as
|
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
|
-
|
45
|
-
|
46
|
-
const ltr = isHorizon ? ltrV5 : ltrV4;
|
56
|
+
export default _default;
|
57
|
+
export { pathData, ltr, accData };`
|
47
58
|
|
48
|
-
|
49
|
-
|
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,
|
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
|
-
|
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 =
|
4
|
-
|
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
|
-
|
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
|
114
|
-
|
55
|
+
const FileContentTemplate = isTypeScript
|
56
|
+
? tsFileContentTemplate(componentName, tagName, library, packageName)
|
57
|
+
: jsFileContentTemplate(componentName, tagName, library, packageName);
|
115
58
|
|
116
|
-
|
117
|
-
|
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
|
-
|
120
|
-
console.
|
121
|
-
|
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
|
-
|
73
|
+
// Main function
|
74
|
+
const createWebComponent = async () => {
|
75
|
+
const packageName = getPackageName();
|
76
|
+
const library = getLibraryName(packageName);
|
125
77
|
|
126
|
-
const
|
127
|
-
|
128
|
-
|
129
|
-
|
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
|
-
|
139
|
-
|
140
|
-
|
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
|
-
|
143
|
-
|
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
|
-
|
147
|
-
|
148
|
-
|
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
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
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;
|