@ui5/create-webcomponents-package 1.11.0-rc.0 → 1.11.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.11.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0-rc.1...v1.11.0-rc.2) (2023-02-16)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.11.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0-rc.0...v1.11.0-rc.1) (2023-02-09)
+
+
+### Features
+
+* **framework:** add option to define package name, tag and typescript support from CLI ([#6379](https://github.com/SAP/ui5-webcomponents/issues/6379)) ([687c0f7](https://github.com/SAP/ui5-webcomponents/commit/687c0f7a420a72f77f294ace2898223c48708ae2)), closes [#6382](https://github.com/SAP/ui5-webcomponents/issues/6382)
+
+
+
+
+
 # [1.11.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.10.4-rc.0...v1.11.0-rc.0) (2023-02-02)
 
 **Note:** Version bump only for package @ui5/create-webcomponents-package

package/README.md

@@ -6,17 +6,37 @@
 
 Provides an `npm init` script for creating new "UI5 Web Components" packages.
 
-## Usage
+## Usage with npm
 
-with `npm`
+```
+Usage:
 
-- `npm init @ui5/webcomponents-package` (the user will be asked for **name**, **port**, **tag**);
-- `npm init @ui5/webcomponents-package <NEW-PACKAGE-NAME>` (the user will be asked for **port** and **tag** only).
+# npm 6.x
+    npm init @ui5/webcomponents-package [OPTIONS]
+# npm 7+, an extra double-dash is needed:
+    npm init @ui5/webcomponents-package -- [OPTIONS]
 
-And with `yarn`
+Options:
+    --name <string>     - defines the package name
+    --tag <string>      - defines the tag name of the sample web component that will be created in your new package
+    --enable-typescript - enables TypeScript support for the package
+    --skip              - skips configuration and generates package with a default value for each parameter that wasn't passed
+```
 
-- `yarn create @ui5/webcomponents-package`
-- `yarn create @ui5/webcomponents-package <NEW-PACKAGE-NAME>`.
+The script creates a new directory, and fills it with a `package.json` file and all necessary source files, and resources for a new
+components package.
+
+## Usage with yarn
+
+```
+Usage:
+    yarn create @ui5/webcomponents-package [OPTIONS]
+Options:
+    --name <string>     - defines the package name
+    --tag <string>      - defines the tag name of the sample web component that will be created in your new package
+    --enable-typescript - enables TypeScript support for the package
+    --skip              - skips configuration and generates package with a default value for each parameter that wasn't passed
+```
 
 The script creates a new directory, and fills it with a `package.json` file and all necessary source files, and resources for a new
 components package.

package/{index.js → create-package.js}

@@ -5,6 +5,10 @@ const path = require("path");
 const mkdirp = require("mkdirp");
 const prompts = require("prompts");
 const parser = require("npm-config-user-agent-parser");
+const yargs = require("yargs/yargs");
+const { hideBin } = require("yargs/helpers");
+
+const argv = yargs(hideBin(process.argv)).argv;
 
 const version = JSON.parse(fs.readFileSync(path.join(__dirname, "package.json"))).version;
 
@@ -20,12 +24,11 @@ const toCamelCase = parts => {
 	}).join("");
 };
 const isTypescriptRelatedFile = sourcePath => {
-	return ["Аssets.ts", "MyFirstComponent.ts", "tsconfig.json", "global.d.ts"].some(fileName => sourcePath.includes(fileName));
-}
+	return ["Assets.ts", "MyFirstComponent.ts", "tsconfig.json", "global.d.ts"].some(fileName => sourcePath.includes(fileName));
+};
 
 // Validation of user input
 const isNameValid = name => typeof name === "string" && name.match(/^[a-zA-Z0-9\-_]+$/);
-const isPortValid = port => typeof port === "string" && port.match(/^[0-9]+$/);
 const isTagValid = tag => typeof tag === "string" && tag.match(/^[a-z0-9]+?-[a-zA-Z0-9\-_]+?[a-z0-9]$/);
 
 // Utils for building the file structure
@@ -42,14 +45,14 @@ const replaceVarsInFileName = (vars, fileName) => {
 };
 
 const copyFile = (vars, sourcePath, destPath) => {
-	const ignoreJsRelated = vars.INIT_PACKAGE_VAR_TYPESCRIPT && sourcePath.includes("MyFirstComponent.js")
-	const ignoreTsRelated = !vars.INIT_PACKAGE_VAR_TYPESCRIPT && isTypescriptRelatedFile(sourcePath)
+	const ignoreJsRelated = vars.INIT_PACKAGE_VAR_TYPESCRIPT && sourcePath.includes("MyFirstComponent.js");
+	const ignoreTsRelated = !vars.INIT_PACKAGE_VAR_TYPESCRIPT && isTypescriptRelatedFile(sourcePath);
 
 	if (ignoreJsRelated || ignoreTsRelated) {
 		return;
 	}
 
-	let content = fs.readFileSync(sourcePath, {encoding: "UTF-8"});
+	let content = fs.readFileSync(sourcePath, { encoding: "UTF-8" });
 	content = replaceVarsInFileContent(vars, content);
 	destPath = replaceVarsInFileName(vars, destPath);
 	fs.writeFileSync(destPath, content);
@@ -69,70 +72,15 @@ const copyFiles = (vars, sourcePath, destPath) => {
 	}
 };
 
-// Main function
-const createWebcomponentsPackage = async () => {
-	let response;
-
-	// Get the name
-	let name = process.argv[2];
-
-	if (!isNameValid(name)) {
-		response = await prompts({
-			type: "text",
-			name: "name",
-			message: "Package name:",
-			validate: isNameValid,
-		});
-		name = response.name;
-	}
-
-	// Add TypeScript support
-	response = await prompts({
-		type: "select",
-		name: "language",
-		message: "Support TypeScript:",
-		choices: [
-			{
-				title: "JavaScript",
-				value: "js",
-			},
-			{
-				title: "TypeScript",
-				value: "ts",
-			},
-		]
-	});
-	const typescript = response.language === "ts";
-
-	// Get the port
-	response = await prompts({
-		type: "text",
-		name: "port",
-		message: "Dev server port:",
-		validate: isPortValid,
-		initial: "8080",
-	});
-	const port = response.port;
-
-	// Get the tag
-	response = await prompts({
-		type: "text",
-		name: "tag",
-		message: "Demo component name:",
-		initial: "my-first-component",
-		validate: isTagValid,
-	});
-	const tag = response.tag;
-
+const generateFilesContent = (name, tag, typescript) => {
 	const className = capitalizeFirst(kebabToCamelCase(tag));
 
 	// All variables that will be replaced in the content of the resources/
 	const vars = {
 		INIT_PACKAGE_VAR_NAME: name,
-		INIT_PACKAGE_VAR_PORT: port,
 		INIT_PACKAGE_VAR_TAG: tag,
 		INIT_PACKAGE_VAR_CLASS_NAME: className,
-		INIT_PACKAGE_VAR_TYPESCRIPT: typescript
+		INIT_PACKAGE_VAR_TYPESCRIPT: typescript,
 	};
 
 	const packageContent = {
@@ -152,7 +100,6 @@ const createWebcomponentsPackage = async () => {
 			"prepublishOnly": "npm run build",
 		},
 		exports: {
-			"./.port": "./.port",
 			"./src/*": "./src/*",
 			"./dist/*": "./dist/*",
 			"./package.json": "./package.json",
@@ -195,4 +142,66 @@ const createWebcomponentsPackage = async () => {
 	console.log("\n");
 };
 
+// Main function
+const createWebcomponentsPackage = async () => {
+	let response;
+	if (argv.name && !isNameValid(argv.name)) {
+		throw new Error("The package name should be a string (a-z, A-Z, 0-9).");
+	}
+
+	if (argv.tag && !isTagValid(argv.tag) ) {
+		throw new Error("The tag should be in kebab-case (my-first-component f.e) and it can't be a single word.");
+	}
+
+	let name = argv.name || "my-package";
+	let tag = argv.tag || "my-first-component";
+	let typescriptSupport = !!argv.enableTypescript;
+
+	if (argv.skip) {
+		return generateFilesContent(name, tag, typescriptSupport);
+	}
+
+	if (!argv.name) {
+		response = await prompts({
+			type: "text",
+			name: "name",
+			message: "Package name:",
+			validate: isNameValid,
+		});
+		name = response.name;
+	}
+
+	if (!typescriptSupport) {
+		response = await prompts({
+			type: "select",
+			name: "language",
+			message: "Project type:",
+			choices: [
+				{
+					title: "JavaScript",
+					value: false,
+				},
+				{
+					title: "TypeScript",
+					value: true,
+				},
+			],
+		});
+		typescriptSupport = response.language;
+	}
+
+	if (!argv.tag) {
+		response = await prompts({
+			type: "text",
+			name: "tag",
+			message: "Component name:",
+			initial: "my-first-component",
+			validate: isTagValid,
+		});
+		tag = response.tag;
+	}
+
+	return generateFilesContent(name, tag, typescriptSupport);
+};
+
 createWebcomponentsPackage();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/create-webcomponents-package",
-  "version": "1.11.0-rc.0",
+  "version": "1.11.0-rc.2",
   "description": "UI5 Web Components: create package",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -11,7 +11,7 @@
     "ui5"
   ],
   "bin": {
-    "create-webcomponents-package": "index.js"
+    "create-webcomponents-package": "create-package.js"
   },
   "repository": {
     "type": "git",
@@ -21,7 +21,8 @@
   "dependencies": {
     "mkdirp": "^1.0.4",
     "npm-config-user-agent-parser": "^1.0.0",
-    "prompts": "^2.4.1"
+    "prompts": "^2.4.1",
+    "yargs": "^17.5.1"
   },
-  "gitHead": "6464abd79265425ce65232ebeee53cf6585e6ec6"
+  "gitHead": "a6334749f4f61a49b1ef754b75fe319991c54c17"
 }

package/template/package-scripts.js

@@ -1,7 +1,7 @@
 const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js"); //eslint-disable-line
 
 const options = {
-	port: INIT_PACKAGE_VAR_PORT,
+	port: 8080,
 	typescript: INIT_PACKAGE_VAR_TYPESCRIPT,
 };