refactor(tools): remove js option from generation templates (#8503)

With the release of version 2.0, we strongly encourage component development to be done in TypeScript. Consequently, we are discontinuing the option to generate JavaScript projects and components, as the tooling will no longer support them by default.

BREAKING CHANGE: Remove  JavaScript template option from @ui5/create-webcomponents-package
Previously `npm init @ui5/webcomponents-package` used to create JS-based project, however now it will be TypeScript-based project.
If you previously used `npm init @ui5/webcomponents-package --enable-typescript` to create  TypeScript-based project, now it's by default, e.g `npm init @ui5/webcomponents-package` and `--enable-typescript` is removed.

Related to [#8461](#8461)

Author: nnaydenow

packages/create-package/README.md

@@ -21,7 +21,6 @@ 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.
-    --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
 ```
 
@@ -37,7 +36,6 @@ 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
-    --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
 ```
 

packages/create-package/create-package.js

@@ -15,13 +15,6 @@ const version = JSON.parse(fs.readFileSync(path.join(__dirname, "package.json"))
 // 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");
 };
@@ -65,13 +58,6 @@ const replaceVarsInFileName = (vars, fileName) => {
 };
 
 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;
-	}
-
 	if (isLogo(sourcePath)) {
 		fs.copyFileSync(sourcePath, destPath);
 		return;
@@ -108,7 +94,7 @@ const copyFiles = (vars, sourcePath, destPath) => {
 	}
 };
 
-const generateFilesContent = (packageName, componentName, namespace, typescript, skipSubfolder) => {
+const generateFilesContent = (packageName, componentName, namespace, skipSubfolder) => {
 	const tagName = argv.tag || hyphaneteComponentName(componentName);
 
 	// All variables that will be replaced in the content of the resources/
@@ -117,7 +103,6 @@ const generateFilesContent = (packageName, componentName, namespace, typescript,
 		INIT_PACKAGE_VAR_NAME: packageName,
 		INIT_PACKAGE_VAR_TAG: tagName,
 		INIT_PACKAGE_VAR_CLASS_NAME: componentName,
-		INIT_PACKAGE_VAR_TYPESCRIPT: typescript,
 	};
 
 	const packageContent = {
@@ -150,13 +135,10 @@ const generateFilesContent = (packageName, componentName, namespace, typescript,
 		"devDependencies": {
 			"@ui5/webcomponents-tools": version,
 			"chromedriver": "*",
+			"typescript": "^5.2.2"
 		},
 	};
 
-	if (typescript) {
-		packageContent.devDependencies.typescript = "^4.9.4";
-	}
-
 	// Update package.json
 	let destDir = packageName.includes("@") ? packageName.slice(packageName.lastIndexOf("/") + 1) : packageName;
 
@@ -207,11 +189,10 @@ const createWebcomponentsPackage = async () => {
 	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);
+		return generateFilesContent(packageName, componentName, namespace, skipSubfolder);
 	}
 
 	if (!argv.name) {
@@ -224,25 +205,6 @@ const createWebcomponentsPackage = async () => {
 		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",
@@ -265,7 +227,7 @@ const createWebcomponentsPackage = async () => {
 		namespace = response.namespace;
 	}
 
-	return generateFilesContent(packageName, componentName, namespace, typescriptSupport, skipSubfolder);
+	return generateFilesContent(packageName, componentName, namespace, skipSubfolder);
 };
 
 createWebcomponentsPackage();

packages/create-package/template/package-scripts.js

@@ -2,7 +2,7 @@ const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js")
 
 const options = {
 	port: 8080,
-	typescript: INIT_PACKAGE_VAR_TYPESCRIPT,
+	typescript: true,
 };
 
 const scripts = getScripts(options);

packages/create-package/template/src/Assets.js

@@ -58,21 +58,15 @@ const getLibraryName = packageName => {
 	return packageName.substr("webcomponents-".length);
 };
 
-const generateFiles = (componentName, tagName, library, packageName, isTypeScript) => {
+const generateFiles = (componentName, tagName, library, packageName) => {
 	componentName = capitalizeFirstLetter(componentName);
 	const filePaths = {
-		"main": isTypeScript 
-			? `./src/${componentName}.ts` 
-			: `./src/${componentName}.js`,
+		"main": `./src/${componentName}.ts`,
 		"css": `./src/themes/${componentName}.css`,
 		"template": `./src/${componentName}.hbs`,
 	};
 
-	const FileContentTemplate = isTypeScript 
-		? tsFileContentTemplate(componentName, tagName, library, packageName) 
-		: jsFileContentTemplate(componentName, tagName, library, packageName);
-
-	fs.writeFileSync(filePaths.main, FileContentTemplate, { flag: "wx+" });
+	fs.writeFileSync(filePaths.main, tsFileContentTemplate(componentName, tagName, library, packageName), { flag: "wx+" });
 	fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
 	fs.writeFileSync(filePaths.template, "<div>Hello World</div>", { flag: "wx+" });
 
@@ -112,10 +106,9 @@ const createWebComponent = async () => {
 		}
 	}
 
-	const isTypeScript = fs.existsSync(path.join(process.cwd(), "tsconfig.json"));
 	const tagName = hyphaneteComponentName(componentName);
 
-	generateFiles(componentName, tagName, library, packageName, isTypeScript);
+	generateFiles(componentName, tagName, library, packageName);
 };
 
 createWebComponent();