@ui5/create-webcomponents-package 0.0.0-701b14e36 → 0.0.0-7d5f73b20

package/CHANGELOG.md

@@ -3,6 +3,121 @@
 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.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

package/README.md

@@ -1,38 +1,57 @@
-![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+, extra double-dash is needed:
+    npm init @ui5/webcomponents-package -- [OPTIONS]
 
-And with `yarn`
+Options:
+    --name <string>     - defines package name
+    --tag <string>      - defines predefined custom element tag name
+    --enable-typescript - enables TypeScript support to 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 package name
+    --tag <string>      - defines predefined custom element tag name
+    --enable-typescript - enables TypeScript support to the package
+    --skip              - skips all configurations and generates package with default configurations
+```
 
 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/{index.js → create-package.js}

@@ -5,6 +5,12 @@ 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/`);
@@ -17,10 +23,12 @@ const toCamelCase = parts => {
 		return index === 0 ? string.toLowerCase() : string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
 	}).join("");
 };
+const isTypescriptRelatedFile = sourcePath => {
+	return ["Аssets.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
@@ -37,6 +45,13 @@ 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)
+
+	if (ignoreJsRelated || ignoreTsRelated) {
+		return;
+	}
+
 	let content = fs.readFileSync(sourcePath, {encoding: "UTF-8"});
 	content = replaceVarsInFileContent(vars, content);
 	destPath = replaceVarsInFileName(vars, destPath);
@@ -57,51 +72,16 @@ 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;
-	}
-
-	// 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
 	};
 
 	const packageContent = {
@@ -115,14 +95,12 @@ const createWebcomponentsPackage = async () => {
 			"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",
@@ -130,11 +108,11 @@ const createWebcomponentsPackage = async () => {
 			"./*": "./dist/*",
 		},
 		"dependencies": {
-			"@ui5/webcomponents-base": "1.1.1",
-			"@ui5/webcomponents-theming": "1.1.1",
+			"@ui5/webcomponents-base": version,
+			"@ui5/webcomponents-theming": version,
 		},
 		"devDependencies": {
-			"@ui5/webcomponents-tools": "1.1.1",
+			"@ui5/webcomponents-tools": version,
 			"chromedriver": "*",
 		},
 	};
@@ -163,6 +141,68 @@ 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,
+				},
+			]
+		});
+		typescript = 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, typescript);
 };
 
 createWebcomponentsPackage();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/create-webcomponents-package",
-  "version": "0.0.0-701b14e36",
+  "version": "0.0.0-7d5f73b20",
   "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",
@@ -22,5 +22,8 @@
     "mkdirp": "^1.0.4",
     "npm-config-user-agent-parser": "^1.0.0",
     "prompts": "^2.4.1"
+  },
+  "devDependencies": {
+    "yargs": "^17.5.1"
   }
 }

package/template/.eslintignore

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

package/template/global.d.ts

@@ -0,0 +1,12 @@
+// eslint-disable-next-line
+import "@ui5/webcomponents-base/dist/global";
+import { TemplateFunction } from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+
+export {};
+
+declare global {
+	module "*.lit.js" {
+		const content: TemplateFunction;
+		export default content;
+	}
+}

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.js

@@ -10,6 +10,9 @@ import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_
 
 import { PLEASE_WAIT } from "./generated/i18n/i18n-defaults.js";
 
+/**
+ * @public
+ */
 const metadata = {
 	tag: "INIT_PACKAGE_VAR_TAG",
 	properties: {
@@ -20,6 +23,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 demo.components.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;

package/template/src/MyFirstComponent.ts

@@ -0,0 +1,55 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.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 { PLEASE_WAIT } 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 demo.components.INIT_PACKAGE_VAR_CLASS_NAME
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname INIT_PACKAGE_VAR_TAG
+ * @public
+ */
+@customElement("INIT_PACKAGE_VAR_TAG")
+class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
+	static i18nBundle: I18nBundle;
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return INIT_PACKAGE_VAR_CLASS_NAMETemplate;
+	}
+
+	static get styles() {
+		return INIT_PACKAGE_VAR_CLASS_NAMECss;
+	}
+
+	static async onDefine() {
+		INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
+	}
+
+	get pleaseWaitText() {
+		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(PLEASE_WAIT);
+	}
+}
+
+INIT_PACKAGE_VAR_CLASS_NAME.define();
+
+export default INIT_PACKAGE_VAR_CLASS_NAME;

package/template/test/pages/index.html

@@ -2,12 +2,10 @@
 <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">
@@ -16,7 +14,7 @@
 		}
 	</script>
 
-	<script src="../../resources/bundle.esm.js" type="module"></script>
+	<script src="../../bundle.esm.js" type="module"></script>
 
     <style>
         code { color: blue; font-size: small; }

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

@@ -1,7 +1,7 @@
 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");
+	await browser.url("test/pages/index.html");
 
 	it("tests if web component is correctly rendered", async () => {
 

package/template/tsconfig.json

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

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