@ui5/create-webcomponents-package 0.0.0-1929d08ff

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.1.2](https://github.com/SAP/ui5-webcomponents/compare/v1.1.1...v1.1.2) (2022-01-26)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package

package/README.md

@@ -0,0 +1,38 @@
+![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/master/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
+
+with `npm`
+
+- `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).
+
+And with `yarn`
+
+- `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.
+
+## Resources
+- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/master/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/).
+
+## Contribute
+Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/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.

package/index.js

@@ -0,0 +1,168 @@
+#!/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/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@ui5/create-webcomponents-package",
+  "version": "0.0.0-1929d08ff",
+  "description": "UI5 Web Components: create package",
+  "author": "SAP SE (https://www.sap.com)",
+  "license": "Apache-2.0",
+  "private": false,
+  "keywords": [
+    "openui5",
+    "sapui5",
+    "ui5"
+  ],
+  "bin": {
+    "create-webcomponents-package": "index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SAP/ui5-webcomponents.git",
+    "directory": "packages/create-package"
+  },
+  "dependencies": {
+    "mkdirp": "^1.0.4",
+    "npm-config-user-agent-parser": "^1.0.0",
+    "prompts": "^2.4.1"
+  }
+}

package/template/.eslintignore

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

package/template/bundle.esm.js

@@ -0,0 +1,31 @@
+// used in test pages
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+
+import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
+import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
+import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
+import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
+
+// Enable additional themes and i18n texts
+import "./dist/Assets.js";
+
+// Import your web components here from the dist/ directory
+import "./dist/INIT_PACKAGE_VAR_CLASS_NAME.js";
+
+window["sap-ui-webcomponents-bundle"] = {
+	renderFinished,
+	configuration: {
+		getAnimationMode,
+		getLanguage,
+		getTheme,
+		setTheme,
+		getNoConflict,
+		setNoConflict,
+		getCalendarType,
+		getRTL,
+		getFirstDayOfWeek,
+	},
+};

package/template/config/.eslintrc.js

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

package/template/config/postcss.components/postcss.config.js

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

package/template/config/postcss.themes/postcss.config.js

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

package/template/config/rollup.config.js

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

package/template/config/wdio.conf.js

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

package/template/package-scripts.js

@@ -0,0 +1,11 @@
+const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js"); //eslint-disable-line
+
+const options = {
+	port: INIT_PACKAGE_VAR_PORT,
+};
+
+const scripts = getScripts(options);
+
+module.exports = {
+	scripts,
+};

package/template/src/Assets.js

@@ -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

@@ -0,0 +1 @@
+<div>This is: INIT_PACKAGE_VAR_TAG. {{pleaseWaitText}}</div>

package/template/src/MyFirstComponent.js

@@ -0,0 +1,51 @@
+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";
+
+// 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";
+
+const metadata = {
+	tag: "INIT_PACKAGE_VAR_TAG",
+	properties: {
+	},
+	slots: {
+	},
+	events: {
+	},
+};
+
+class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	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/src/i18n/messagebundle.properties

@@ -0,0 +1,2 @@
+#please wait text for the sample component
+PLEASE_WAIT=wait

package/template/src/i18n/messagebundle_de.properties

@@ -0,0 +1 @@
+PLEASE_WAIT=Bitte warten

package/template/src/i18n/messagebundle_en.properties

@@ -0,0 +1 @@
+PLEASE_WAIT=Please wait

package/template/src/i18n/messagebundle_es.properties

@@ -0,0 +1 @@
+PLEASE_WAIT=Espere

package/template/src/i18n/messagebundle_fr.properties

@@ -0,0 +1 @@
+PLEASE_WAIT=Patientez.

package/template/src/themes/MyFirstComponent.css

@@ -0,0 +1,11 @@
+: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;
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/template/test/pages/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<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">
+		{
+			"language": "EN"
+		}
+	</script>
+
+	<script src="../../resources/bundle.esm.js" type="module"></script>
+
+    <style>
+        code { color: blue; font-size: small; }
+    </style>
+
+</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>
+</body>
+
+</html>

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

@@ -0,0 +1,12 @@
+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");
+
+	it("tests if web component is correctly rendered", async () => {
+
+		const innerContent = await browser.$("#myFirstComponent").shadow$("div");
+
+		assert.ok(innerContent, "content rendered");
+	});
+});