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 + * + *

Overview

+ * + * + *

Usage

+ * + * For the ${tagName} + *

ES6 Module Import

+ * + * 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, "
Hello World
", { flag: "wx+" });