diff --git a/packages/tools/lib/create-new-component/index.js b/packages/tools/lib/create-new-component/index.js index 6dbe9c0bef0a..62fe0ced62d7 100644 --- a/packages/tools/lib/create-new-component/index.js +++ b/packages/tools/lib/create-new-component/index.js @@ -1,3 +1,5 @@ +const fs = require("fs"); + const jsFileContentTemplate = componentName => { return `import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; @@ -6,20 +8,42 @@ import ${componentName}Template from "./generated/templates/${componentName}Temp // Styles import ${componentName}Css from "./generated/themes/${componentName}.css.js"; - +/** + * @public + */ const metadata = { - tag: "ui5-${componentName.toLowerCase()}", - properties: { + tag: "${tagName}", + properties: /** @lends sap.ui.webcomponents.${library}.${componentName}.prototype */ { // }, - slots: { + slots: /** @lends sap.ui.webcomponents.${library}.${componentName}.prototype */ { // }, - events: { + events: /** @lends sap.ui.webcomponents.${library}.${componentName}.prototype */ { // }, }; +/** + * @class + * + *
${tagName}
+ * import ${packageName}/dist/${componentName}.js";
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.${library}.${componentName}
+ * @extends UI5Element
+ * @tagname ${tagName}
+ * @public
+ */
class ${componentName} extends UI5Element {
static get metadata() {
return metadata;
@@ -48,14 +72,53 @@ export default ${componentName};
`;
};
+const getPackageName = () => {
+ if (!fs.existsSync("./package.json")) {
+ throw("The current directory doesn't contain package.json file.");
+ }
+
+ const packageJSON = JSON.parse(fs.readFileSync("./package.json"));
+
+ if (!packageJSON.name) {
+ throw("The package.json file in the current directory doesn't have a name property");
+ }
+
+ return packageJSON.name;
+};
+
+const getLibraryName = packageName => {
+ if (!packageName.includes("/")) {
+ return packageName;
+ }
+
+ if (packageName === "@ui5/webcomponents") {
+ return `main`;
+ }
+
+ packageName = packageName.split("/").pop();
+
+ if (!packageName.startsWith("webcomponents-")) {
+ return packageName;
+ }
+
+ return packageName.substr("webcomponents-".length);
+};
+
+const camelToKebabCase = string => string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+
+const packageName = getPackageName();
+const library = getLibraryName(packageName);
+
const consoleArguments = process.argv.slice(2);
const componentName = consoleArguments[0];
if (!componentName){
- console.error("Please enter component name.")
+ console.error("Please enter component name.");
return;
}
+const tagName = `ui5-${camelToKebabCase(componentName)}`;
+
const filePaths = {
"js": `./src/${componentName}.js`,
"css": `./src/themes/${componentName}.css`,
@@ -63,8 +126,6 @@ const filePaths = {
};
const sJsFileContentTemplate = jsFileContentTemplate(componentName);
-const fs = require("fs");
-
fs.writeFileSync(filePaths.js, sJsFileContentTemplate, { flag: "wx+" });
fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
fs.writeFileSync(filePaths.hbs, "