@ui5/create-webcomponents-package - npm Package Compare versions

Comparing version 0.0.0-4e88b8243 to 0.0.0-50f1454ef

CHANGELOG.md

@@ -6,2 +6,213 @@ # Change Log
 
+# [2.11.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.11.0-rc.0...v2.11.0-rc.1) (2025-05-15)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.11.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0...v2.11.0-rc.0) (2025-05-08)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.10.0](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0-rc.3...v2.10.0) (2025-05-07)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.10.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0-rc.2...v2.10.0-rc.3) (2025-05-01)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.10.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0-rc.1...v2.10.0-rc.2) (2025-04-24)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.10.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0-rc.0...v2.10.0-rc.1) (2025-04-17)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.10.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.9.1-rc.0...v2.10.0-rc.0) (2025-04-14)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [2.9.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0...v2.9.1-rc.0) (2025-04-10)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.9.0](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.3...v2.9.0) (2025-04-04)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.9.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.2...v2.9.0-rc.3) (2025-04-03)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.9.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.1...v2.9.0-rc.2) (2025-03-27)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.9.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.0...v2.9.0-rc.1) (2025-03-20)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.9.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.1-rc.0...v2.9.0-rc.0) (2025-03-13)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [2.8.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0...v2.8.1-rc.0) (2025-03-06)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.8.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.3...v2.8.0) (2025-03-04)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.8.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.2...v2.8.0-rc.3) (2025-02-27)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.8.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.1...v2.8.0-rc.2) (2025-02-20)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.8.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.0...v2.8.0-rc.1) (2025-02-13)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.8.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0...v2.8.0-rc.0) (2025-02-06)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.7.0](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.2...v2.7.0) (2025-02-03)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.7.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.1...v2.7.0-rc.2) (2025-01-30)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.7.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.0...v2.7.0-rc.1) (2025-01-23)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.7.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2...v2.7.0-rc.0) (2025-01-16)
+
+
+### Features
+
+* **create-package:** generate jsx component template ([#10531](https://github.com/SAP/ui5-webcomponents/issues/10531)) ([dd2d45d](https://github.com/SAP/ui5-webcomponents/commit/dd2d45d4c3947f52773272f6a77be294f240d28f))
+
+
+
+
+
+## [2.6.2](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2-rc.0...v2.6.2) (2025-01-09)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [2.6.2-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.1...v2.6.2-rc.0) (2025-01-09)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [2.6.1](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0...v2.6.1) (2025-01-08)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
 # [2.6.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.5...v2.6.0) (2025-01-07)
@@ -8,0 +219,0 @@

create-package.js

 #!/usr/bin/env node
+import fs from "fs/promises";
+import path, { dirname } from "path";
+import prompts from "prompts";
+import parser from "npm-config-user-agent-parser";
+import yargs from "yargs/yargs";
+import { globby } from "globby";
+import { hideBin } from "yargs/helpers";
+import { fileURLToPath } from "url";
+import * as prettier from "prettier";
 
-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 __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 const argv = yargs(hideBin(process.argv)).argv;
+const VERSION = JSON.parse(
+	await fs.readFile(path.join(__dirname, "package.json")),
+).version;
 
-const version = JSON.parse(fs.readFileSync(path.join(__dirname, "package.json"))).version;
+// Constants
+const SUPPORTED_TEST_SETUPS = ["cypress", "manual"];
+const SRC_DIR = "./template";
+const FILES_TO_RENAME = {
+	"eslintignore": ".eslintignore",
+	"eslintrc.cjs": ".eslintrc.cjs",
+	"npsrc.json": ".npsrc.json",
+	"npmrc": ".npmrc",
+	"env": ".env",
+	"gitignore": ".gitignore",
+	"tsconfig.template.json": "tsconfig.json",
+	"cypress/tsconfig.template.json": "cypress/tsconfig.json"
+};
+const FILES_TO_COPY = ["test/pages/img/logo.png"];
 
-// from where all the files will be copied
-const TEMPLATE_DIR = path.join(`${__dirname}`, `template/`);
+// Validation Patterns
+const PackageNamePattern =
+	/^(@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/;
+const TagPattern = /^[a-z0-9]+?-[a-zA-Z0-9\-_]+?[a-z0-9]$/;
 
-const isGitIgnore = sourcePath => {
-	return sourcePath.includes("gitignore");
-};
-const isLogo = sourcePath => {
-	return sourcePath.includes("logo");
-};
-const isNPMRC = sourcePath => {
-	return sourcePath.includes("npmrc");
-};
+// Utility Functions
+const isPackageNameValid = name =>
+	typeof name === "string" && PackageNamePattern.test(name);
+const isTagValid = tag => typeof tag === "string" && TagPattern.test(tag);
+const isTestSetupValid = setup =>
+	typeof setup === "string" && SUPPORTED_TEST_SETUPS.includes(setup);
 
-// Validation of user input
-const ComponentNamePattern = /^[A-Z][A-Za-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 isTagValid = tag => typeof tag === "string" && tag.match(/^[a-z0-9]+?-[a-zA-Z0-9\-_]+?[a-z0-9]$/);
-
 /**
@@ -39,152 +51,149 @@ * Hyphanates the given PascalCase string, f.e.:
  */
-const hyphaneteComponentName = (componentName) => {
-	const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
-
+const hyphenateComponentName = 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 replacePlaceholders = (content, replacements) =>
+	content.replace(/{{(.*?)}}/g, (_, key) => replacements[key.trim()] || "");
 
-const replaceVarsInFileName = (vars, fileName) => {
-	return fileName.replace(/MyFirstComponent/, vars.INIT_PACKAGE_VAR_CLASS_NAME);
-};
+const generateFilesContent = async (
+	packageName,
+	componentName,
+	skipSubfolder,
+	testSetup,
+) => {
+	// All variables that will be replaced in the content of the template folder/
+	const vars = {
+		INIT_PACKAGE_VAR_NAME: packageName,
+		INIT_PACKAGE_VERSION: VERSION,
+		INIT_PACKAGE_VAR_TAG: argv.tag || hyphenateComponentName(componentName),
+		INIT_PACKAGE_VAR_CLASS_NAME: componentName,
+		INIT_PACKAGE_CYPRESS_ROOT_TSCONFIG:
+			testSetup === "cypress"
+				? `"tsBuildInfoFile": "dist/.tsbuildinfo",\n"rootDir": "src",\n"composite": true,`
+				: "",
+		INIT_PACKAGE_CYPRESS_DEV_DEPS:
+			testSetup === "cypress"
+				? `"@ui5/cypress-ct-ui5-webc": "^0.0.4",\n"cypress": "^13.11.0",`
+				: "",
+		INIT_PACKAGE_CYPRESS_TEST_COMMANDS:
+			testSetup === "cypress"
+				? `"test": "cypress run --component --browser chrome",\n"test:open": "cypress open --component --browser chrome",`
+				: "",
+		INIT_PACKAGE_CYPRESS_ESLINT_IGNORES:
+			testSetup === "cypress" ? `cypress/*\ncypress.config.*` : "",
+	};
 
-const copyFile = (vars, sourcePath, destPath) => {
-	if (isLogo(sourcePath)) {
-		fs.copyFileSync(sourcePath, destPath);
-		return;
-	}
+	const packageBaseName = packageName.includes("@")
+		? packageName.slice(packageName.lastIndexOf("/") + 1)
+		: packageName;
+	const destDir = skipSubfolder
+		? path.join(process.cwd())
+		: path.join(process.cwd(), packageBaseName);
 
-	let content = fs.readFileSync(sourcePath, { encoding: "UTF-8" });
-	content = replaceVarsInFileContent(vars, content);
-	destPath = replaceVarsInFileName(vars, destPath);
+	await processFiles(destDir, vars, testSetup);
 
-	fs.writeFileSync(destPath, content);
+	console.log("\nPackage successfully created!\nNext steps:\n");
+	console.log(`$ cd ${destDir}`);
 
-	// 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"))
+	try {
+		const userAgent = parser(process.env.npm_config_user_agent);
+		userAgent.yarn
+			? console.log(`$ yarn\n$ yarn start`)
+			: console.log(`$ npm i\n$ npm start`);
+	} catch {
+		console.log(`$ npm i\n$ npm start`);
 	}
 
-	// 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"));
-	}
+	console.log("\n");
 };
 
-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);
-	}
-};
+async function processFiles(destDir, replacements, testSetup) {
+	const files = await globby(`${SRC_DIR}/**/*`);
+	const FILE_PATHS_TO_SKIP = [
+		testSetup !== "cypress" ? "cypress" : undefined,
+	].filter(Boolean);
 
-const generateFilesContent = (packageName, componentName, skipSubfolder) => {
-	const tagName = argv.tag || hyphaneteComponentName(componentName);
+	for (const file of files) {
+		const relativePath = path.relative(SRC_DIR, file);
+		let destPath = path.join(destDir, relativePath);
 
-	// All variables that will be replaced in the content of the resources/
-	const vars = {
-		INIT_PACKAGE_VAR_NAME: packageName,
-		INIT_PACKAGE_VAR_TAG: tagName,
-		INIT_PACKAGE_VAR_CLASS_NAME: componentName,
-	};
+		if (FILE_PATHS_TO_SKIP.some(filePath => file.includes(filePath))) {
+			// console.log(`Skipped: ${file} -> ${destPath}`);
+			continue;
+		}
 
-	const packageContent = {
-		name: packageName,
-		version: "0.0.1",
-		ui5: {
-			webComponentsPackage: true,
-		},
-		type: "module",
-		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": "*",
-			"typescript": "^5.6.2"
-		},
-	};
+		// Component related file based on the user input
+		destPath = destPath.replace(
+			"/MyFirstComponent",
+			`/${replacements.INIT_PACKAGE_VAR_CLASS_NAME}`,
+		);
 
-	// Update package.json
-	let destDir = packageName.includes("@") ? packageName.slice(packageName.lastIndexOf("/") + 1) : packageName;
+		// Files that need to be renamed
+		if (FILES_TO_RENAME[relativePath]) {
+			destPath = destPath.replace(
+				relativePath,
+				FILES_TO_RENAME[relativePath],
+			);
+		}
 
-	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);
+		await fs.mkdir(path.dirname(destPath), { recursive: true });
 
-	console.log("\nPackage successfully created!\nNext steps:\n");
-	console.log(`$ cd ${destDir}`);
+		if (FILES_TO_COPY.includes(relativePath)) {
+			// Image like files that doesn't need proccessing
+			await fs.copyFile(file, destPath);
+		} else {
+			const content = await fs.readFile(file, { encoding: "utf8" });
+			const replaced = replacePlaceholders(content, replacements);
+			let formatted;
+			try {
+				formatted = await prettier.format(replaced, {
+					useTabs: true,
+					tabWidth: 4,
+					quoteProps: "consistent",
+					arrowParens: "avoid",
+					filepath: file,
+				});
+				// console.log(`Formatted: ${file} -> ${destPath}`);
+			} catch {
+				// console.log(`Not formatted: ${file} -> ${destPath}`);
+				formatted = replaced;
+			}
 
-	let userAgentInfo;
-	try {
-		userAgentInfo = parser(process.env.npm_config_user_agent);
-	} catch (e) {}
+			await fs.writeFile(destPath, formatted);
+		}
 
-	if (userAgentInfo && userAgentInfo.yarn) {
-		console.log(`$ yarn`);
-		console.log(`$ yarn start`);
-	} else {
-		console.log(`$ npm i`);
-		console.log(`$ npm start`);
+		// console.log(`Processed: ${file} -> ${destPath}`);
 	}
+}
 
-	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].");
+		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.testSetup && !isTestSetupValid(argv.testSetup)) {
+		throw new Error(
+			`The test setup should be a string and one of the following options: ${SUPPORTED_TEST_SETUPS.join(", ")}`,
+		);
 	}
 
-	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 componentName = "MyComponent";
+	let testSetup = argv.testSetup || "manual";
 	const skipSubfolder = !!argv.skipSubfolder;
 
 	if (argv.skip) {
-		return generateFilesContent(packageName, componentName, skipSubfolder);
+		return generateFilesContent(
+			packageName,
+			componentName,
+			skipSubfolder,
+			testSetup,
+		);
 	}
@@ -197,3 +206,6 @@
 			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, _, -].",
+			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, _, -].",
 		});
@@ -203,16 +215,25 @@ packageName = response.name;
 
-	if (!argv.componentName) {
+	if (!argv.testSetup) {
 		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.).",
+			type: "select",
+			name: "testSetup",
+			message: "How would you like to set up testing?",
+			choices: [
+				{ title: "Cypress", value: "cypress" },
+				{ title: "I'll set it up manually", value: "manual" },
+			],
+			initial: 0,
 		});
-		componentName = response.componentName;
+
+		testSetup = response.testSetup;
 	}
 
-	return generateFilesContent(packageName, componentName, skipSubfolder);
+	return generateFilesContent(
+		packageName,
+		componentName,
+		skipSubfolder,
+		testSetup,
+	);
 };
 
 createWebcomponentsPackage();

package.json

 {
   "name": "@ui5/create-webcomponents-package",
-  "version": "0.0.0-4e88b8243",
+  "version": "0.0.0-50f1454ef",
   "description": "UI5 Web Components: create package",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
+  "type": "module",
   "private": false,
@@ -22,4 +23,6 @@ "keywords": [
   "dependencies": {
+    "globby": "^13.1.1",
     "mkdirp": "^1.0.4",
     "npm-config-user-agent-parser": "^1.0.0",
+    "prettier": "^3.5.3",
     "prompts": "^2.4.1",
@@ -26,0 +29,0 @@ "yargs": "^17.5.1"

README.md

@@ -18,6 +18,5 @@ # ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_water.png)UI5 Web Components - Create Package
 Options:
-    --name <string>     - defines the package name
-    --component-name <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.
-    --skip              - skips configuration and generates package with a default value for each parameter that wasn't passed
+    --name <string>                      - defines the package name
+    --test-setup <"cypress" | "manual">  - defines whether the predefined test setup should be added or it will be configured manually.
+    --skip                               - skips configuration and generates package with a default value for each parameter that wasn't passed
 ```
@@ -34,6 +33,5 @@
 Options:
-    --name <string>     - defines the package name
-    --component-name <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
-    --skip              - skips configuration and generates package with a default value for each parameter that wasn't passed
+    --name <string>                      - defines the package name
+    --test-setup <"cypress" | "manual">  - defines whether the predefined test setup should be added or it will be configured manually.
+    --skip                               - skips configuration and generates package with a default value for each parameter that wasn't passed
 ```
@@ -40,0 +38,0 @@

template/src/Assets.ts

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

template/src/MyFirstComponent.ts

 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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.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 "./INIT_PACKAGE_VAR_CLASS_NAMETemplate.js";
+import {{INIT_PACKAGE_VAR_CLASS_NAME}}Template from "./{{INIT_PACKAGE_VAR_CLASS_NAME}}Template.js";
 
 // Styles
-import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
+import {{INIT_PACKAGE_VAR_CLASS_NAME}}Css from "./generated/themes/{{INIT_PACKAGE_VAR_CLASS_NAME}}.css.js";
 
@@ -21,3 +21,3 @@ import { COUNT } from "./generated/i18n/i18n-defaults.js";
  *
- * The <code>INIT_PACKAGE_VAR_TAG</code> component is a demo component that displays some text.
+ * The <code>{{INIT_PACKAGE_VAR_TAG}}</code> component is a demo component that displays some text.
  *
@@ -29,14 +29,11 @@ * @constructor
 @customElement({
-	tag: "INIT_PACKAGE_VAR_TAG",
+	tag: "{{INIT_PACKAGE_VAR_TAG}}",
 	renderer: jsxRenderer,
-	styles: INIT_PACKAGE_VAR_CLASS_NAMECss,
-	template: INIT_PACKAGE_VAR_CLASS_NAMETemplate,
+	styles: {{INIT_PACKAGE_VAR_CLASS_NAME}}Css,
+	template: {{INIT_PACKAGE_VAR_CLASS_NAME}}Template,
 })
-class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
+class {{INIT_PACKAGE_VAR_CLASS_NAME}} extends UI5Element {
+	@i18n("{{INIT_PACKAGE_VAR_NAME}}")
 	static i18nBundle: I18nBundle;
 
-	static async onDefine() {
-		INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
-	}
-
 	/**
@@ -55,8 +52,8 @@ * Defines the component count.
 	get counterText() {
-		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNT);
+		return {{INIT_PACKAGE_VAR_CLASS_NAME}}.i18nBundle.getText(COUNT);
 	}
 }
 
-INIT_PACKAGE_VAR_CLASS_NAME.define();
+{{INIT_PACKAGE_VAR_CLASS_NAME}}.define();
 
-export default INIT_PACKAGE_VAR_CLASS_NAME;
+export default {{INIT_PACKAGE_VAR_CLASS_NAME}};

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

95298

13.06%

Number of package files

38

22.58%

Lines of code

541

46.22%

Is type module

Yes

NaN

Worsened metrics

Dependency count

6

50%

Number of lines in readme file

54

-3.57%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  globby@^13.1.1

• + Added

  prettier@^3.5.3

• + Added

  @nodelib/fs.scandir@2.1.5
  (transitive)

• + Added

  @nodelib/fs.stat@2.0.5
  (transitive)

• + Added

  @nodelib/fs.walk@1.2.8
  (transitive)

• + Added

  braces@3.0.3
  (transitive)

• + Added

  dir-glob@3.0.1
  (transitive)

• + Added

  fast-glob@3.3.3
  (transitive)

• + Added

  fastq@1.19.1
  (transitive)

• + Added

  fill-range@7.1.1
  (transitive)

• + Added

  glob-parent@5.1.2
  (transitive)

• + Added

  globby@13.2.2
  (transitive)

• + Added

  ignore@5.3.2
  (transitive)

• + Added

  is-extglob@2.1.1
  (transitive)

• + Added

  is-glob@4.0.3
  (transitive)

• + Added

  is-number@7.0.0
  (transitive)

• + Added

  merge2@1.4.1
  (transitive)

• + Added

  micromatch@4.0.8
  (transitive)

• + Added

  path-type@4.0.0
  (transitive)

• + Added

  picomatch@2.3.1
  (transitive)

• + Added

  prettier@3.6.2
  (transitive)

• + Added

  queue-microtask@1.2.3
  (transitive)

• + Added

  reusify@1.1.0
  (transitive)

• + Added

  run-parallel@1.2.0
  (transitive)

• + Added

  slash@4.0.0
  (transitive)

• + Added

  to-regex-range@5.0.1
  (transitive)