@ui5/create-webcomponents-package 0.0.2 → 0.0.6

package/README.md

@@ -5,7 +5,22 @@
 [![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 a create script for a new UI5 Webcomponents Package 
+Provides an `npm init` script for creating new UI5 Webcomponents 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)

package/index.js

@@ -0,0 +1,169 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const mkdirp = require("mkdirp");
+const prompts = require("prompts");
+const beautify = require("json-beautify");
+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": "*",
+			"@ui5/webcomponents-theme-base": "*",
+		},
+		"devDependencies": {
+			"@ui5/webcomponents-tools": "*",
+			"chromedriver": "*",
+		},
+	};
+
+	// Update package.json
+	const destDir = path.join(`./`, name);
+	mkdirp.sync(destDir);
+	fs.writeFileSync(path.join(destDir, "package.json"), beautify(packageContent, null, 2, 100));
+	// Copy files
+	copyFiles(vars, TEMPLATE_DIR, destDir);
+
+	console.log("Package successfully created!\nNext steps:\n\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\n");
+};
+
+createWebcomponentsPackage();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/create-webcomponents-package",
-  "version": "0.0.2",
+  "version": "0.0.6",
   "description": "UI5 Web Components: create package",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -10,9 +10,8 @@
     "sapui5",
     "ui5"
   ],
-  "scripts": {},
   "bin": {
-    "create-webcomponents-package": "bin/init-ui5-package.js"
+    "create-webcomponents-package": "index.js"
   },
   "repository": {
     "type": "git",
@@ -20,10 +19,9 @@
     "directory": "packages/create-package"
   },
   "dependencies": {
-    "command-line-args": "^5.2.0",
     "json-beautify": "^1.1.1",
     "mkdirp": "^1.0.4",
+    "npm-config-user-agent-parser": "^1.0.0",
     "prompts": "^2.4.1"
-  },
-  "peerDependencies": {}
+  }
 }