@ui5/create-webcomponents-package 0.0.0-fd6264051 → 0.0.0-ff1549e7b

package/CHANGELOG.md

@@ -3,6 +3,339 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.14.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.14.0-rc.0...v1.14.0-rc.1) (2023-05-25)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.14.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.13.2...v1.14.0-rc.0) (2023-05-18)
+
+
+### Features
+
+* users can provide a JSDoc namespeace when creating a package ([#7034](https://github.com/SAP/ui5-webcomponents/issues/7034)) ([0af8d23](https://github.com/SAP/ui5-webcomponents/commit/0af8d2376e25e5abe6d940c72286ab7c682eea56))
+
+
+
+
+
+## [1.13.1](https://github.com/SAP/ui5-webcomponents/compare/v1.13.0-rc.5...v1.13.1) (2023-05-11)
+
+
+### Bug Fixes
+
+* **create-package:** revert  `moduleResolution` setting to `node` ([#7020](https://github.com/SAP/ui5-webcomponents/issues/7020)) ([9fc84e2](https://github.com/SAP/ui5-webcomponents/commit/9fc84e288452616ee72f3a2b6fc31d9752f05f6f))
+
+
+
+
+
+# [1.13.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v1.13.0-rc.4...v1.13.0-rc.5) (2023-05-11)
+
+
+### Bug Fixes
+
+* **create-webcomponents-package:** fix package creation issues with test and lint ([#6976](https://github.com/SAP/ui5-webcomponents/issues/6976)) ([dd70f3a](https://github.com/SAP/ui5-webcomponents/commit/dd70f3aa8ef70b592f1d4e0f3f9894c6280fb1bf))
+
+
+
+
+
+# [1.13.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.13.0-rc.3...v1.13.0-rc.4) (2023-05-04)
+
+
+### Features
+
+* generate TS from HBS templates ([#6558](https://github.com/SAP/ui5-webcomponents/issues/6558)) ([02611b2](https://github.com/SAP/ui5-webcomponents/commit/02611b2e24b2c2a06129b8e60a8bc680d9501e39))
+
+
+
+
+
+# [1.13.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.13.0-rc.2...v1.13.0-rc.3) (2023-04-27)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.13.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.13.0-rc.1...v1.13.0-rc.2) (2023-04-20)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.13.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.13.0-rc.0...v1.13.0-rc.1) (2023-04-13)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.13.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.12.0...v1.13.0-rc.0) (2023-04-06)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.12.0](https://github.com/SAP/ui5-webcomponents/compare/v1.12.0-rc.3...v1.12.0) (2023-04-04)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.12.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.12.0-rc.2...v1.12.0-rc.3) (2023-03-30)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.12.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.12.0-rc.1...v1.12.0-rc.2) (2023-03-23)
+
+
+### Bug Fixes
+
+* inline sources in the .map file so the src folder is not mandatory ([#6732](https://github.com/SAP/ui5-webcomponents/issues/6732)) ([16771a6](https://github.com/SAP/ui5-webcomponents/commit/16771a64d7b13f418af9afa1a03b224fe3762775))
+
+
+
+
+
+# [1.12.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.12.0-rc.0...v1.12.0-rc.1) (2023-03-16)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.12.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0...v1.12.0-rc.0) (2023-03-09)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.11.0](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0-rc.4...v1.11.0) (2023-03-06)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.11.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0-rc.3...v1.11.0-rc.4) (2023-03-02)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.11.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0-rc.2...v1.11.0-rc.3) (2023-02-23)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [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
+
+
+
+
+
+## [1.10.4-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.10.3...v1.10.4-rc.0) (2023-01-26)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.10.3](https://github.com/SAP/ui5-webcomponents/compare/v1.10.2...v1.10.3) (2023-01-25)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.10.1](https://github.com/SAP/ui5-webcomponents/compare/v0.0.0-7b49a7ff1...v1.10.1) (2023-01-24)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.10.0](https://github.com/SAP/ui5-webcomponents/compare/v1.9.3...v1.10.0) (2023-01-20)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.9.3](https://github.com/SAP/ui5-webcomponents/compare/v1.9.2...v1.9.3) (2022-12-16)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.9.1](https://github.com/SAP/ui5-webcomponents/compare/v1.9.0...v1.9.1) (2022-11-10)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.9.0](https://github.com/SAP/ui5-webcomponents/compare/v1.8.0...v1.9.0) (2022-10-31)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.8.0](https://github.com/SAP/ui5-webcomponents/compare/v1.7.1...v1.8.0) (2022-10-03)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.7.1](https://github.com/SAP/ui5-webcomponents/compare/v1.7.0...v1.7.1) (2022-09-08)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.7.0](https://github.com/SAP/ui5-webcomponents/compare/v1.6.0...v1.7.0) (2022-09-02)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.6.0](https://github.com/SAP/ui5-webcomponents/compare/v1.5.0...v1.6.0) (2022-07-25)
+
+
+### Bug Fixes
+
+* create package bugs ([#5517](https://github.com/SAP/ui5-webcomponents/issues/5517)) ([f528f5c](https://github.com/SAP/ui5-webcomponents/commit/f528f5c))
+
+
+
+
+
+# [1.5.0](https://github.com/SAP/ui5-webcomponents/compare/v1.4.0...v1.5.0) (2022-07-03)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.4.0](https://github.com/SAP/ui5-webcomponents/compare/v1.3.1...v1.4.0) (2022-05-25)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.3.1](https://github.com/SAP/ui5-webcomponents/compare/v1.3.0...v1.3.1) (2022-04-27)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [1.3.0](https://github.com/SAP/ui5-webcomponents/compare/v1.2.4...v1.3.0) (2022-04-19)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.2.4](https://github.com/SAP/ui5-webcomponents/compare/v1.2.3...v1.2.4) (2022-03-30)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.2.3](https://github.com/SAP/ui5-webcomponents/compare/v1.2.2...v1.2.3) (2022-03-23)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.2.2](https://github.com/SAP/ui5-webcomponents/compare/v1.2.1...v1.2.2) (2022-03-22)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [1.2.1](https://github.com/SAP/ui5-webcomponents/compare/v1.2.0...v1.2.1) (2022-03-02)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
 # [1.2.0](https://github.com/SAP/ui5-webcomponents/compare/v1.1.2...v1.2.0) (2022-02-28)
 
 **Note:** Version bump only for package @ui5/create-webcomponents-package

package/README.md

@@ -1,38 +1,58 @@
-![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/master/docs/images/UI5_logo_wide.png)
+![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png)
 
 # UI5 Web Components - Create Package
 
-[![Travis CI Build Status](https://travis-ci.org/SAP/ui5-webcomponents.svg?branch=master)](https://travis-ci.org/SAP/ui5-webcomponents)
 [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
 
 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
+    --componentName <string>      - defines the component class name that will be created in your new package
+    --tag <string>      - defines the tag name of the sample web component that will be created in your new package. The tag will be derived from the component name if not provided. 
+    --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.
 
 ## Resources
-- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/master/README.md)
+- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)
 - [UI5 Web Components - Home Page](https://sap.github.io/ui5-webcomponents)
 - [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/playground/)
 
 ## Support
-We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
+We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
 
 ## Contribute
-Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/docs/6-contributing/02-conventions-and-guidelines.md).
+Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/docs/6-contributing/02-conventions-and-guidelines.md).
 
 ## License
 Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved.
-This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/master/LICENSE.txt) file.
+This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/main/LICENSE.txt) file.

package/create-package.js

@@ -0,0 +1,263 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+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;
+
+// from where all the files will be copied
+const TEMPLATE_DIR = path.join(`${__dirname}`, `template/`);
+
+// String utils
+const isTSRelatedFile = sourcePath => {
+	return ["Assets.ts", "MyFirstComponent.ts", "tsconfig.json", "global.d.ts"].some(fileName => sourcePath.includes(fileName));
+};
+const isJSRelatedFile = sourcePath => {
+	return ["Assets.js", "MyFirstComponent.js"].some(fileName => sourcePath.includes(fileName));
+};
+const isGitIgnore = sourcePath => {
+	return sourcePath.includes("gitignore");
+};
+const isNPMRC = sourcePath => {
+	return sourcePath.includes("npmrc");
+};
+
+// Validation of user input
+const ComponentNamePattern = /^[A-Z][A-Za-z0-9]+$/;
+const NamespacePattern = /^[a-z][a-z0-9\.\-]+$/;
+const isPackageNameValid = name => typeof name === "string" && name.match(/^(@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/);
+const isComponentNameValid = name => typeof name === "string" && ComponentNamePattern.test(name);
+const isNamespaceValid = name => typeof name === "string" && NamespacePattern.test(name);
+const isTagValid = tag => typeof tag === "string" && tag.match(/^[a-z0-9]+?-[a-zA-Z0-9\-_]+?[a-z0-9]$/);
+
+/**
+ * Hyphanates the given PascalCase string, f.e.:
+ * Foo -> "my-foo" (adds preffix)
+ * FooBar -> "foo-bar"
+ */
+const hyphaneteComponentName = (componentName) => {
+	const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
+
+	return result.includes("-") ? result : `my-${result}`;
+};
+
+// Utils for building the file structure
+const replaceVarsInFileContent = (vars, content) => {
+	for (let key in vars) {
+		const re = new RegExp(key, "g");
+		content = content.replace(re, vars[key]);
+	}
+	return content;
+};
+
+const replaceVarsInFileName = (vars, fileName) => {
+	return fileName.replace(/MyFirstComponent/, vars.INIT_PACKAGE_VAR_CLASS_NAME);
+};
+
+const copyFile = (vars, sourcePath, destPath) => {
+	const ignoreJsRelated = vars.INIT_PACKAGE_VAR_TYPESCRIPT && isJSRelatedFile(sourcePath);
+	const ignoreTsRelated = !vars.INIT_PACKAGE_VAR_TYPESCRIPT && isTSRelatedFile(sourcePath);
+
+	if (ignoreJsRelated || ignoreTsRelated) {
+		return;
+	}
+
+	let content = fs.readFileSync(sourcePath, { encoding: "UTF-8" });
+	content = replaceVarsInFileContent(vars, content);
+	destPath = replaceVarsInFileName(vars, destPath);
+
+	fs.writeFileSync(destPath, content);
+
+	// Rename "gitignore" to ".gitignore" (npm init won't include ".gitignore", so we add it as "gitignore" and rename it later)
+	if (isGitIgnore(sourcePath)) {
+		fs.renameSync(destPath, destPath.replace("gitignore", ".gitignore"))
+	}
+
+	// Rename "npmrc" to ".npmrc" (npm init won't include ".npmrc", so we add it as "npmrc" and rename it later)
+	if (isNPMRC(sourcePath)) {
+		fs.renameSync(destPath, destPath.replace("npmrc", ".npmrc"));
+	}
+};
+
+const copyFiles = (vars, sourcePath, destPath) => {
+	const isDir = fs.lstatSync(sourcePath).isDirectory();
+	if (isDir) {
+		if (destPath) {
+			mkdirp.sync(destPath);
+		}
+		fs.readdirSync(sourcePath).forEach(file => {
+			copyFiles(vars, path.join(sourcePath, file), path.join(destPath, file));
+		});
+	} else {
+		copyFile(vars, sourcePath, destPath);
+	}
+};
+
+const generateFilesContent = (packageName, componentName, namespace, typescript, skipSubfolder) => {
+	const tagName = argv.tag || hyphaneteComponentName(componentName);
+
+	// All variables that will be replaced in the content of the resources/
+	const vars = {
+		INIT_PACKAGE_VAR_NAMESPACE: namespace, // namespace must be replaced before name
+		INIT_PACKAGE_VAR_NAME: packageName,
+		INIT_PACKAGE_VAR_TAG: tagName,
+		INIT_PACKAGE_VAR_CLASS_NAME: componentName,
+		INIT_PACKAGE_VAR_TYPESCRIPT: typescript,
+	};
+
+	const packageContent = {
+		packageName,
+		version: "0.0.1",
+		ui5: {
+			webComponentsPackage: true,
+		},
+		scripts: {
+			"clean": "wc-dev clean",
+			"lint": "wc-dev lint",
+			"start": "wc-dev start",
+			"watch": "wc-dev watch",
+			"build": "wc-dev build",
+			"test": "wc-dev test",
+			"create-ui5-element": "wc-create-ui5-element",
+			"prepublishOnly": "npm run build",
+		},
+		exports: {
+			"./src/*": "./src/*",
+			"./dist/*": "./dist/*",
+			"./package.json": "./package.json",
+			"./bundle.js": "./bundle.js",
+			"./*": "./dist/*",
+		},
+		"dependencies": {
+			"@ui5/webcomponents-base": version,
+			"@ui5/webcomponents-theming": version,
+		},
+		"devDependencies": {
+			"@ui5/webcomponents-tools": version,
+			"chromedriver": "*",
+		},
+	};
+
+	if (typescript) {
+		packageContent.devDependencies.typescript = "^4.9.4";
+	}
+
+	// Update package.json
+	let destDir = packageName.includes("@") ? packageName.slice(packageName.lastIndexOf("/") + 1) : packageName;
+
+	destDir = skipSubfolder ? path.join("./") : path.join("./", destDir);
+	mkdirp.sync(destDir);
+	fs.writeFileSync(path.join(destDir, "package.json"), JSON.stringify(packageContent, null, 2));
+	// Copy files
+	copyFiles(vars, TEMPLATE_DIR, destDir);
+
+	console.log("\nPackage successfully created!\nNext steps:\n");
+	console.log(`$ cd ${destDir}`);
+
+	let userAgentInfo;
+	try {
+		userAgentInfo = parser(process.env.npm_config_user_agent);
+	} catch (e) {}
+
+	if (userAgentInfo && userAgentInfo.yarn) {
+		console.log(`$ yarn`);
+		console.log(`$ yarn start`);
+	} else {
+		console.log(`$ npm i`);
+		console.log(`$ npm start`);
+	}
+
+	console.log("\n");
+};
+
+// Main function
+const createWebcomponentsPackage = async () => {
+	let response;
+	if (argv.name && !isPackageNameValid(argv.name)) {
+		throw new Error("The package name should be a string, starting with letter and containing the following symbols [a-z, A-Z, 0-9].");
+	}
+
+	if (argv.componentName && !isComponentNameValid(argv.componentName)) {
+		throw new Error("The component name should be a string, starting with a capital letter [A-Z][a-z], for example: Button, MyButton, etc.");
+	}
+
+	if (argv.namespace && !isNamespaceValid(argv.namespace)) {
+		throw new Error("The JSDoc namespace must start with a letter and can only contain small-case letters, numbers, dots and dashes.");
+	}
+
+	if (argv.tag && !isTagValid(argv.tag) ) {
+		throw new Error("The tag should be in kebab-case (f.e my-component) and it can't be a single word.");
+	}
+
+	let packageName = argv.name || "my-package";
+	let componentName = argv.componentName || "MyComponent";
+	let namespace = argv.namespace || "demo.components";
+	let typescriptSupport = !!argv.enableTypescript;
+	const skipSubfolder = !!argv.skipSubfolder;
+
+	if (argv.skip) {
+		return generateFilesContent(packageName, componentName, namespace, typescriptSupport, skipSubfolder);
+	}
+
+	if (!argv.name) {
+		response = await prompts({
+			type: "text",
+			name: "name",
+			message: "Package name:",
+			validate: (value) => isPackageNameValid(value) ? true : "Package name should be a string, starting with a letter and containing the following symbols [a-z, A-Z ,0-9, _, -].",
+		});
+		packageName = 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.componentName) {
+		response = await prompts({
+			type: "text",
+			name: "componentName",
+			message: "Component name:",
+			initial: "MyComponent",
+			validate: (value) => isComponentNameValid(value) ? true : "Component name should follow PascalCase naming convention (f.e. Button, MyButton, etc.).",
+		});
+		componentName = response.componentName;
+	}
+
+	if (!argv.namespace) {
+		response = await prompts({
+			type: "text",
+			name: "namespace",
+			message: "JSDoc namespace:",
+			initial: "demo.components",
+			validate: (value) => isNamespaceValid(value) ? true : "The JSDoc namespace must start with a letter and can only contain small-case letters, numbers, dots and dashes.",
+		});
+		namespace = response.namespace;
+	}
+
+	return generateFilesContent(packageName, componentName, namespace, typescriptSupport, skipSubfolder);
+};
+
+createWebcomponentsPackage();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/create-webcomponents-package",
-  "version": "0.0.0-fd6264051",
+  "version": "0.0.0-ff1549e7b",
   "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,6 +21,7 @@
   "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"
   }
 }

package/template/.eslintignore

@@ -1,3 +1,6 @@
 # Note: Changes to this file also must be applied to the top level .eslintignore file.
 dist
 test
+src/generated
+jsdoc-dist
+.eslintrc.js

package/template/.eslintrc.js

@@ -0,0 +1,5 @@
+const config = require("@ui5/webcomponents-tools/components-package/eslint.js");
+
+// This eslint config is defined @ui5/webcomponents-tools,
+// Feel free to override part of the configuration or provide entirely new config to fit your dev requirements.
+module.exports = config;

package/template/gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+jsdoc-dist
+src/generated

package/template/npmrc

@@ -0,0 +1,2 @@
+# Auto detect the chromedriver version
+detect_chromedriver_version=true

package/template/package-scripts.js

@@ -1,7 +1,8 @@
 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,
 };
 
 const scripts = getScripts(options);

package/template/src/Assets.ts

@@ -0,0 +1,5 @@
+import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
+
+// own INIT_PACKAGE_VAR_NAME package assets
+import "./generated/json-imports/Themes.js";
+import "./generated/json-imports/i18n.js";

package/template/src/MyFirstComponent.hbs

@@ -1 +1 @@
-<div>This is: INIT_PACKAGE_VAR_TAG. {{pleaseWaitText}}</div>
+<div @click="{{onClick}}">{{counterText}} :: {{counter}}</div>

package/template/src/MyFirstComponent.js

@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 
 // Template
 import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACKAGE_VAR_CLASS_NAMETemplate.lit.js";
@@ -8,11 +9,18 @@ import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACK
 // Styles
 import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
 
-import { PLEASE_WAIT } from "./generated/i18n/i18n-defaults.js";
+import { COUNTER } from "./generated/i18n/i18n-defaults.js";
 
+/**
+ * @public
+ */
 const metadata = {
 	tag: "INIT_PACKAGE_VAR_TAG",
 	properties: {
+		counter: {
+			type: Integer,
+			defaultValue: 0,
+		},
 	},
 	slots: {
 	},
@@ -20,6 +28,19 @@ const metadata = {
 	},
 };
 
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>INIT_PACKAGE_VAR_TAG</code> component is a demo component that displays some text.
+ *
+ * @constructor
+ * @alias INIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname INIT_PACKAGE_VAR_TAG
+ * @public
+ */
 class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
 	static get metadata() {
 		return metadata;
@@ -41,8 +62,12 @@ class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
 		INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
 	}
 
-	get pleaseWaitText() {
-		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(PLEASE_WAIT);
+	onClick() {
+		this.counter++;
+	}
+
+	get counterText() {
+		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNTER);
 	}
 }
 

package/template/src/MyFirstComponent.ts

@@ -0,0 +1,62 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+
+// Template
+import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACKAGE_VAR_CLASS_NAMETemplate.lit.js";
+
+// Styles
+import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
+
+import { COUNTER } from "./generated/i18n/i18n-defaults.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>INIT_PACKAGE_VAR_TAG</code> component is a demo component that displays some text.
+ *
+ * @constructor
+ * @alias INIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname INIT_PACKAGE_VAR_TAG
+ * @public
+ */
+@customElement({
+	tag: "INIT_PACKAGE_VAR_TAG",
+	renderer: litRender,
+	styles: INIT_PACKAGE_VAR_CLASS_NAMECss,
+	template: INIT_PACKAGE_VAR_CLASS_NAMETemplate,
+})
+class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
+	static i18nBundle: I18nBundle;
+
+	static async onDefine() {
+		INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
+	}
+
+	/**
+	 * Defines the component counter.
+	 * @name NIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME.prototype.counter
+	 * @public
+	 * @type { number }
+	 */
+	@property({ defaultValue: 0 })
+	counter!: number;
+
+	onClick() {
+		this.counter++;
+	}
+
+	get counterText() {
+		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNTER);
+	}
+}
+
+INIT_PACKAGE_VAR_CLASS_NAME.define();
+
+export default INIT_PACKAGE_VAR_CLASS_NAME;

package/template/src/i18n/messagebundle.properties

@@ -1,2 +1,3 @@
-#please wait text for the sample component
-PLEASE_WAIT=wait
+# the "counter" text for the sample component
+COUNTER=Counter
+

package/template/src/i18n/messagebundle_de.properties

@@ -1 +1 @@
-PLEASE_WAIT=Bitte warten
+COUNTER=Schalter

package/template/src/i18n/messagebundle_en.properties

@@ -1 +1 @@
-PLEASE_WAIT=Please wait
+COUNTER=Counter

package/template/src/i18n/messagebundle_es.properties

@@ -1 +1 @@
-PLEASE_WAIT=Espere
+COUNTER=Encimera

package/template/src/i18n/messagebundle_fr.properties

@@ -1 +1 @@
-PLEASE_WAIT=Patientez.
+COUNTER=Comptoir

package/template/src/themes/MyFirstComponent.css

@@ -1,11 +1,12 @@
 :host {
-    border: 2px solid var(--my-component-border-color);
-    background-color: var(--sapBackgroundColor);
-    color: var(--sapTextColor);
-    display: block;
-    width: 24rem;
-    height: 3rem;
-    text-align: center;
-    vertical-align: middle;
-    line-height: 3rem;
+	padding: 0 2rem;
+	color: var(--sapAvatar_6_TextColor);
+	background-color: var(--sapAvatar_6_Background);
+	border: 2px solid var(--my-component-border-color);
+	border-radius: 0.5rem;
+	box-shadow: var(--sapContent_Shadow0);
+	text-align: center;
+	line-height: 3rem;
+	font-size: 1.25rem;
+	user-select: none;
 }

package/template/src/themes/sap_horizon_hcb/parameters-bundle.css

@@ -0,0 +1,3 @@
+:root {
+    --my-component-border-color: white;
+}

package/template/test/pages/css/index.css

@@ -0,0 +1,36 @@
+body {
+	color: var(--sapTextColor);
+	background-color: var(--sapBackgroundColor);
+	font-size: var(--sapFontSize);
+	font-family: var(--sapFontFamily);
+}
+
+h1 {
+	font-size: var(--sapFontHeader2Size);
+	margin-bottom: 0.5rem;
+}
+
+h2 {
+	font-size: var(--sapFontHeader3Size);
+	margin-bottom: 0.5rem;
+}
+
+.app, .app-first-component, .app-settings, .app-docs  {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+.app-first-component {
+	margin-bottom: 3rem;
+}
+
+.app-docs {
+	margin-top: 3rem;
+}
+
+a {
+	margin: 0.25rem;
+	color: var(--sapLinkColor);
+}

package/template/test/pages/index.html

@@ -2,53 +2,56 @@
 <html>
 
 <head>
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta charset="utf-8">
 
 	<title>INIT_PACKAGE_VAR_TAG</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta charset="utf-8">
 
 	<script data-ui5-config type="application/json">
 		{
+			"theme": "sap_horizon_dark",
 			"language": "EN"
 		}
 	</script>
-
-	<script src="../../resources/bundle.esm.js" type="module"></script>
-
-    <style>
-        code { color: blue; font-size: small; }
-    </style>
-
+	
+	<link rel="stylesheet" type="text/css" href="./css/index.css">
+	<script src="../../bundle.esm.js" type="module"></script>
 </head>
 
 <body>
-	<ul>
-	    <li><a href="?sap-ui-theme=sap_fiori_3">Fiori 3</a></li>
-		<li><a href="?sap-ui-theme=sap_fiori_3_dark">Fiori 3 Dark</a></li>
-		<li><a href="?sap-ui-theme=sap_fiori_3_hcb">Fiori 3 High Contrast Black</a></li>
-		<li><a href="?sap-ui-theme=sap_fiori_3_hcw">Fiori 3 High Contrast White</a></li>
-		<li><a href="?sap-ui-theme=sap_belize">Belize</a></li>
-		<li><a href="?sap-ui-theme=sap_belize_hcb">Belize High Contrast Black</a></li>
-		<li><a href="?sap-ui-theme=sap_belize_hcw">Belize High Contrast White</a></li>
-	</ul>
-    <br>
-    <span>or in the browser console, for example:</span>
-    <code>window['sap-ui-webcomponents-bundle'].configuration.setTheme("sap_belize_hcb")</code>
-
-    <br><br>
-
-    <a href="?sap-ui-language=en">English</a> |
-    <a href="?sap-ui-language=de">German</a> |
-    <a href="?sap-ui-language=es">Spanish</a> |
-    <a href="?sap-ui-language=fr">French</a>
-
-    <br><br>
-
-    <h1>Test your web components here</h1>
-    <INIT_PACKAGE_VAR_TAG id="myFirstComponent"></INIT_PACKAGE_VAR_TAG>
+	<div class="app">
+		<a href="https://sap.github.io/ui5-webcomponents/playground/getting-started" target="_blank"><img src="./img/logo.png" alt="logo"/></a>
+
+		<div class="app-first-component">
+			<h1>Hooray! It's Your First Web Component!</h1>
+			<div> <pre>&lt;INIT_PACKAGE_VAR_TAG>&lt;/INIT_PACKAGE_VAR_TAG> </pre></div>
+			<INIT_PACKAGE_VAR_TAG id="myFirstComponent"></INIT_PACKAGE_VAR_TAG>
+		</div>
+	
+		<div class="app-settings">
+
+			<h2>Switch themes</h2>
+			<div style="display: flex; flex-direction: row;">
+				<a class="link" href="?sap-ui-theme=sap_horizon">Horizon</a>
+				<a class="link" href="?sap-ui-theme=sap_horizon_dark">Horizon Dark</a>
+				<a class="link" href="?sap-ui-theme=sap_horizon_hcb">Horizon High Contrast Black</a>
+				<a class="link" href="?sap-ui-theme=sap_horizon_hcw">Horizon High Contrast White</a>
+			</div>
+		
+			<h2>Switch language</h2>
+			<div>
+				<a class="link" href="?sap-ui-language=en">English</a>
+				<a class="link" href="?sap-ui-language=de">German</a>
+				<a class="link" href="?sap-ui-language=es">Spanish</a>
+				<a class="link" href="?sap-ui-language=fr">French</a>
+			</div>
+		</div>
+
+		<div class="app-docs">
+			<h2>Documentation</h2>
+			<a class="link" href="https://sap.github.io/ui5-webcomponents/playground/development">Custom Component Development</a>
+		</div>
+	</div>
 </body>
-
 </html>

package/template/test/specs/Demo.spec.js

@@ -1,10 +1,11 @@
 const assert = require("assert");
 
 describe("INIT_PACKAGE_VAR_TAG rendering", async () => {
-	await browser.url("http://localhost:INIT_PACKAGE_VAR_PORT/test-resources/pages/index.html");
+	before(async () => {
+		await browser.url("test/pages/index.html");
+	});
 
 	it("tests if web component is correctly rendered", async () => {
-
 		const innerContent = await browser.$("#myFirstComponent").shadow$("div");
 
 		assert.ok(innerContent, "content rendered");

package/template/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "include": ["src/**/*", "global.d.ts"],
+    "compilerOptions": {
+      "target": "ES2021",
+      // Generate d.ts files
+      "declaration": true,
+      "outDir": "dist",
+      "skipLibCheck": true,
+      "sourceMap": true,
+      "inlineSources": true,
+      "strict": true,
+      "moduleResolution": "node",
+      "experimentalDecorators": true,
+    },
+}

package/index.js

@@ -1,168 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require("fs");
-const path = require("path");
-const mkdirp = require("mkdirp");
-const prompts = require("prompts");
-const parser = require("npm-config-user-agent-parser");
-
-// from where all the files will be copied
-const TEMPLATE_DIR = path.join(`${__dirname}`, `template/`);
-
-// String utils
-const capitalizeFirst = str => str.substr(0,1).toUpperCase() + str.substr(1);
-const kebabToCamelCase = string => toCamelCase(string.split("-"));
-const toCamelCase = parts => {
-	return parts.map((string, index) => {
-		return index === 0 ? string.toLowerCase() : string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
-	}).join("");
-};
-
-// 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
-const replaceVarsInFileContent = (vars, content) => {
-	for (let key in vars) {
-		const re = new RegExp(key, "g");
-		content = content.replace(re, vars[key]);
-	}
-	return content;
-};
-
-const replaceVarsInFileName = (vars, fileName) => {
-	return fileName.replace(/MyFirstComponent/, vars.INIT_PACKAGE_VAR_CLASS_NAME);
-};
-
-const copyFile = (vars, sourcePath, destPath) => {
-	let content = fs.readFileSync(sourcePath, {encoding: "UTF-8"});
-	content = replaceVarsInFileContent(vars, content);
-	destPath = replaceVarsInFileName(vars, destPath);
-	fs.writeFileSync(destPath, content);
-};
-
-const copyFiles = (vars, sourcePath, destPath) => {
-	const isDir = fs.lstatSync(sourcePath).isDirectory();
-	if (isDir) {
-		if (destPath) {
-			mkdirp.sync(destPath);
-		}
-		fs.readdirSync(sourcePath).forEach(file => {
-			copyFiles(vars, path.join(sourcePath, file), path.join(destPath, file));
-		});
-	} else {
-		copyFile(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;
-	}
-
-	// 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 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,
-	};
-
-	const packageContent = {
-		name,
-		version: "0.0.1",
-		ui5: {
-			webComponentsPackage: true,
-		},
-		scripts: {
-			"clean": "wc-dev clean",
-			"lint": "wc-dev lint",
-			"start": "wc-dev start",
-			"watch": "wc-dev watch",
-			"serve": "wc-dev serve",
-			"build": "wc-dev build",
-			"test": "wc-dev test",
-			"create-ui5-element": "wc-create-ui5-element",
-			"prepublishOnly": "npm run build",
-		},
-		exports: {
-			"./.port": "./.port",
-			"./src/*": "./src/*",
-			"./dist/*": "./dist/*",
-			"./package.json": "./package.json",
-			"./bundle.js": "./bundle.js",
-			"./*": "./dist/*",
-		},
-		"dependencies": {
-			"@ui5/webcomponents-base": "1.1.1",
-			"@ui5/webcomponents-theming": "1.1.1",
-		},
-		"devDependencies": {
-			"@ui5/webcomponents-tools": "1.1.1",
-			"chromedriver": "*",
-		},
-	};
-
-	// Update package.json
-	const destDir = path.join(`./`, name);
-	mkdirp.sync(destDir);
-	fs.writeFileSync(path.join(destDir, "package.json"), JSON.stringify(packageContent, null, 2));
-	// Copy files
-	copyFiles(vars, TEMPLATE_DIR, destDir);
-
-	console.log("\nPackage successfully created!\nNext steps:\n");
-	console.log(`$ cd ${name}`);
-
-	let userAgentInfo;
-	try {
-		userAgentInfo = parser(process.env.npm_config_user_agent);
-	} catch (e) {}
-
-	if (userAgentInfo && userAgentInfo.yarn) {
-		console.log(`$ yarn`);
-		console.log(`$ yarn start`);
-	} else {
-		console.log(`$ npm i`);
-		console.log(`$ npm start`);
-	}
-
-	console.log("\n");
-};
-
-createWebcomponentsPackage();

package/template/config/.eslintrc.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/eslint.js"); // eslint-disable-line

package/template/config/rollup.config.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/rollup.js"); // eslint-disable-line

package/template/src/themes/sap_belize_hcw/parameters-bundle.css

@@ -1,3 +0,0 @@
-:root {
-    --my-component-border-color: black;
-}

package/template/src/themes/sap_fiori_3/parameters-bundle.css

@@ -1,3 +0,0 @@
-:root {
-    --my-component-border-color: green;
-}

package/template/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -1,3 +0,0 @@
-:root {
-    --my-component-border-color: lightblue;
-}

package/template/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -1,3 +0,0 @@
-:root {
-    --my-component-border-color: gray;
-}