Revert "refactor(tools): enable TypeScript as default (#8521)"

This reverts commit 83ee0cc.

packages/base/package-scripts.cjs

@@ -15,8 +15,8 @@ const viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-p
 const scripts = {
 	clean: "rimraf src/generated && rimraf dist && rimraf .port",
 	lint: `eslint .`,
-	generate: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles generateTemplates",
-	prepare: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles generateTemplates typescript integrate.no-remaining-require",
+	generate: "cross-env UI5_TS=true nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles generateTemplates",
+	prepare: "cross-env UI5_TS=true nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles generateTemplates typescript integrate.no-remaining-require",
 	typescript: "tsc -b",
 	integrate: {
 		default: "nps integrate.copy-used-modules integrate.amd-to-es6 integrate.third-party",
@@ -40,7 +40,7 @@ const scripts = {
 	generateAssetParameters: `node "${assetParametersScript}"`,
 	generateVersionInfo: `node "${versionScript}"`,
 	generateStyles: `node "${stylesScript}"`,
-	generateTemplates: `mkdirp src/generated/templates && cross-env UI5_BASE=true node "${LIB}/hbs2ui5/index.js" -d test/elements -o src/generated/templates`,
+	generateTemplates: `mkdirp src/generated/templates && cross-env UI5_BASE=true UI5_TS=true node "${LIB}/hbs2ui5/index.js" -d test/elements -o src/generated/templates`,
 	generateAPI: {
 		default: "nps generateAPI.generateCEM generateAPI.validateCEM",
 		generateCEM: `cem analyze --config  "${LIB}/cem/custom-elements-manifest.config.mjs" --dev`,

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

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

packages/fiori/package-scripts.cjs

@@ -17,6 +17,7 @@ const options = {
 	portStep: 2,
 	dev: true,
 	fioriPackage: true,
+	typescript: true,
 	noWatchTS: true,
 	illustrationsData: [
 		{

packages/icons-business-suite/package-scripts.cjs

@@ -3,6 +3,7 @@ const getScripts = require("@ui5/webcomponents-tools/icons-collection/nps.js");
 const options = {
 	collectionName: "SAP-icons-business-suite",
 	versions: ["v1", "v2"],
+	typescript: true,
 };
 
 const scripts = getScripts(options);

packages/main/package-scripts.cjs

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

packages/theming/package-scripts.cjs

@@ -10,9 +10,9 @@ const LIB = path.join(__dirname, `../tools/lib/`);
 module.exports = {
 	scripts: {
 		clean: "rimraf dist && rimraf src/generated",
-		generate: "nps build.postcss build.jsonImports",
+		generate: `cross-env UI5_TS=true nps build.postcss build.jsonImports`,
 		build: {
-			default: "nps clean build.src build.postcss build.jsonImports build.typescript generateReport",
+			default: `cross-env UI5_TS=true nps clean build.src build.postcss build.jsonImports build.typescript generateReport`,
 			src: `copy-and-watch "src/**/*.{json}" dist/`,
 			typescript: "tsc",
 			postcss: `node "${LIB}/css-processors/css-processor-themes.mjs"`,

packages/tools/components-package/nps.js

@@ -12,17 +12,22 @@ const getScripts = (options) => {
 	// The script creates the "src/generated/js-imports/Illustration.js" file that registers loaders (dynamic JS imports) for each illustration
     const createIllustrationsLoadersScript = illustrationsData.map(illustrations => `node ${LIB}/generate-js-imports/illustrations.js ${illustrations.destinationPath} ${illustrations.dynamicImports.outputFile} ${illustrations.set} ${illustrations.collection} ${illustrations.dynamicImports.location} ${illustrations.dynamicImports.filterOut.join(" ")}`).join(" && ");
 
-	let tsWatchCommandStandalone = "tsc --watch";
+	const tsOption = options.typescript;
+	const tsCommandOld = tsOption ? "tsc" : "";
+	let tsWatchCommandStandalone = tsOption ? "tsc --watch" : "";
 	// this command is only used for standalone projects. monorepo projects get their watch from vite, so opt-out here
 	if (options.noWatchTS) {
 		tsWatchCommandStandalone = "";
 	}
+	const tsCrossEnv = tsOption ? "cross-env UI5_TS=true" : "";
 
-	try {
-		require("typescript");
-	} catch(e) {
-		console.error(`TypeScript is not found. Try to install it by running \`npm install --save-dev typescript\` if you are using npm or by running \`yarn add --dev typescript\` if you are using yarn.`);
-		process.exit(e.code);
+	if (tsOption) {
+		try {
+			require("typescript");
+		} catch(e) {
+			console.error(`TypeScript is not found. Try to install it by running \`npm install --save-dev typescript\` if you are using npm or by running \`yarn add --dev typescript\` if you are using yarn.`);
+			process.exit(e.code);
+		}
 	}
 
 	let viteConfig;
@@ -51,19 +56,19 @@ const getScripts = (options) => {
 		lint: `eslint . ${eslintConfig}`,
 		lintfix: `eslint . ${eslintConfig} --fix`,
 		generate: {
-			default: "nps prepare.all",
+			default: `${tsCrossEnv} nps prepare.all`,
 			all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps copy" "nps build.illustrations"',
 			styleRelated: "nps build.styles build.jsonImports build.jsImports",
 		},
 		prepare: {
-			default: "nps clean prepare.all copy prepare.typescript generateAPI",
+			default: `${tsCrossEnv} nps clean prepare.all copy prepare.typescript generateAPI`,
 			all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps build.illustrations"',
 			styleRelated: "nps build.styles build.jsonImports build.jsImports",
-			typescript: "tsc",
+			typescript: tsCommandOld,
 		},
 		build: {
 			default: "nps prepare lint build.bundle", // build.bundle2
-			templates: `mkdirp src/generated/templates && node "${LIB}/hbs2ui5/index.js" -d src/ -o src/generated/templates`,
+			templates: `mkdirp src/generated/templates && ${tsCrossEnv} node "${LIB}/hbs2ui5/index.js" -d src/ -o src/generated/templates`,
 			styles: {
 				default: `concurrently "nps build.styles.themes" "nps build.styles.components" "nps build.styles.componentStyles"`,
 				themes: `node "${LIB}/css-processors/css-processor-themes.mjs"`,
@@ -95,7 +100,7 @@ const getScripts = (options) => {
 			props: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.properties" dist/`,
 		},
 		watch: {
-			default: `concurrently "nps watch.templates" "nps watch.typescript" "nps watch.api" "nps watch.src" "nps watch.styles" "nps watch.i18n" "nps watch.props"`,
+			default: `${tsCrossEnv} concurrently "nps watch.templates" "nps watch.typescript" "nps watch.api" "nps watch.src" "nps watch.styles" "nps watch.i18n" "nps watch.props"`,
 			devServer: 'concurrently "nps watch.default" "nps watch.bundle"',
 			src: 'nps "copy.src --watch --safe --skip-initial-copy"',
 			typescript: tsWatchCommandStandalone,

packages/tools/icons-collection/nps.js

@@ -41,14 +41,16 @@ const copyIconAssetsCommand = (options) => {
 const getScripts = (options) => {
 	const createJSImportsCmd = createIconImportsCommand(options);
 	const copyAssetsCmd = copyIconAssetsCommand(options);
+	const tsCommand = options.typescript ? "tsc --build" : "";
+	const tsCrossEnv = options.typescript ? "cross-env UI5_TS=true" : "";
 
 	const scripts = {
 		clean: "rimraf dist && rimraf src/generated",
 		copy: copyAssetsCmd,
-		generate: "nps clean copy build.i18n build.icons build.jsonImports copyjson",
+		generate: `${tsCrossEnv} nps clean copy build.i18n build.icons build.jsonImports copyjson`,
 		copyjson: "copy-and-watch \"src/generated/**/*.json\" dist/generated/",
 		build: {
-			default: "nps clean copy build.i18n typescript build.icons build.jsonImports",
+			default: `${tsCrossEnv} nps clean copy build.i18n typescript build.icons build.jsonImports`,
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
 				defaultsjs: `mkdirp dist/generated/i18n && node "${LIB}/i18n/defaults.js" src/i18n src/generated/i18n`,
@@ -60,7 +62,7 @@ const getScripts = (options) => {
 			},
 			icons: createJSImportsCmd,
 		},
-		typescript: "tsc --build",
+		typescript: tsCommand,
 	};
 
 	return scripts;

packages/tools/lib/css-processors/css-processor-components.mjs

@@ -7,6 +7,9 @@ import chokidar from "chokidar";
 import scopeVariables from "./scope-variables.mjs";
 import { writeFileIfChanged, getFileContent } from "./shared.mjs";
 
+const tsMode = process.env.UI5_TS === "true";
+const extension = tsMode ? ".css.ts" : ".css.js";
+
 const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
 const inputFilesGlob = "src/themes/*.css";
 const restArgs = process.argv.slice(2);
@@ -24,8 +27,8 @@ let customPlugin = {
                 writeFile(f.path, newText);
 
                 // JS/TS
-                const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", ".css.ts");
-                const jsContent = getFileContent(jsPath, packageJSON.name, "\`" + newText + "\`", true);
+                const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
+                const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`", true);
                 writeFileIfChanged(jsPath, jsContent);
             });
         })

packages/tools/lib/css-processors/css-processor-themes.mjs

@@ -8,6 +8,9 @@ import combineDuplicatedSelectors from "../postcss-combine-duplicated-selectors/
 import { writeFileIfChanged, stripThemingBaseContent, getFileContent } from "./shared.mjs";
 import scopeVariables from "./scope-variables.mjs";
 
+const tsMode = process.env.UI5_TS === "true";
+const extension = tsMode ? ".css.ts" : ".css.js";
+
 const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
 
 let inputFiles = await globby("src/**/parameters-bundle.css");
@@ -47,8 +50,8 @@ let scopingPlugin = {
                 writeFileIfChanged(jsonPath, JSON.stringify({_: data}));
 
                 // JS/TS
-                const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", ".css.ts");
-                const jsContent = getFileContent(jsPath, packageJSON.name, "\`" + newText + "\`");
+                const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
+                const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`");
                 writeFileIfChanged(jsPath, jsContent);
             });
         })

packages/tools/lib/css-processors/shared.mjs

@@ -47,7 +47,15 @@ registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", async () =>
 `;
 };
 
-const getFileContent = (targetFile, packageName, css, includeDefaultTheme) => {
+const getFileContent = (tsMode, targetFile, packageName, css, includeDefaultTheme) => {
+	if (tsMode) {
+		return getTSContent(targetFile, packageName, css, includeDefaultTheme);
+	}
+
+	return getJSContent(targetFile, packageName, css, includeDefaultTheme);
+}
+
+const getTSContent = (targetFile, packageName, css, includeDefaultTheme) => {
 	const typeImport = "import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";"
 	const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
 
@@ -59,4 +67,10 @@ export default styleData;
 	`;
 }
 
+const getJSContent = (targetFile, packageName, css, includeDefaultTheme) => {
+	const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
+
+	return `${defaultTheme}export default {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`
+}
+
 export { writeFileIfChanged, stripThemingBaseContent, getFileContent}

packages/tools/lib/generate-json-imports/i18n.js

@@ -1,12 +1,16 @@
 const fs = require("fs").promises;
 const path = require('path');
 
+const isTypeScript = process.env.UI5_TS;
+const ext = isTypeScript ? 'ts' : 'js';
+
 const generate = async () => {
 
 	const packageName = JSON.parse(await fs.readFile("package.json")).name;
 
 	const inputFolder = path.normalize(process.argv[2]);
-	const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.ts`);
+	const outputFile = path.normalize(`${process.argv[3]}/i18n-static.${ext}`);
+	const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.${ext}`);
 
 // All languages present in the file system
 	const files = await fs.readdir(inputFolder);
@@ -15,16 +19,46 @@ const generate = async () => {
 		return matches ? matches[1] : undefined;
 	}).filter(key => !!key);
 
-	let contentDynamic;
+	let contentStatic, contentDynamic;
 
 // No i18n - just import dependencies, if any
 	if (languages.length === 0) {
+		contentStatic = "";
 		contentDynamic = "";
 // There is i18n - generate the full file
 	} else {
 		// Keys for the array
+		const languagesKeysString = languages.map(key => `"${key}": _${key},`).join("\n\t");
 		const languagesKeysStringArray = languages.map(key => `"${key}",`).join("\n\t");
 
+		// Actual imports for json assets
+		const assetsImportsString = languages.map(key => `import _${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
+
+		// static imports
+		contentStatic = `// @ts-nocheck
+import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
+
+${assetsImportsString}
+
+const bundleMap = {
+	${languagesKeysString}
+};
+
+const fetchMessageBundle = async (localeId) => {
+	if (typeof bundleMap[localeId] === "object") {
+		// inlined from build
+		throw new Error("[i18n] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs")
+	}
+	return (await fetch(bundleMap[localeId])).json()
+}
+
+const localeIds = [${languagesKeysStringArray}];
+
+localeIds.forEach(localeId => {
+	registerI18nLoader("${packageName}", localeId, fetchMessageBundle);
+});
+`;
+
 		// Actual imports for json assets
 		const dynamicImportsString = languages.map(key => `		case "${key}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-messagebundle-${key}" */ "../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
 
@@ -57,8 +91,9 @@ import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registrie
 
 	}
 
-	await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
+	await fs.mkdir(path.dirname(outputFile), { recursive: true });
 	return Promise.all([
+		fs.writeFile(outputFile, contentStatic),
 		fs.writeFile(outputFileDynamic, contentDynamic),
 	]);
 }

packages/tools/lib/generate-json-imports/themes.js

@@ -2,9 +2,13 @@ const fs = require("fs").promises;
 const path = require('path');
 const assets = require("../../assets-meta.js");
 
+const isTypeScript = process.env.UI5_TS;
+const ext = isTypeScript ? 'ts' : 'js';
+
 const generate = async () => {
 	const inputFolder = path.normalize(process.argv[2]);
-	const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.ts`);
+	const outputFile = path.normalize(`${process.argv[3]}/Themes-static.${ext}`);
+	const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.${ext}`);
 
 // All supported optional themes
 	const allThemes = assets.themes.all;
@@ -18,9 +22,34 @@ const generate = async () => {
 
 	const packageName = JSON.parse(await fs.readFile("package.json")).name;
 
+	const importLines = themesOnFileSystem.map(theme => `import ${theme} from "../assets/themes/${theme}/parameters-bundle.css.json";`).join("\n");
+	const themeUrlsByName = "{\n" + themesOnFileSystem.join(",\n") + "\n}";
 	const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`;
 	const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n");
 
+
+// static imports file content
+	const contentStatic = `// @ts-nocheck
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+${importLines}
+
+const themeUrlsByName = ${themeUrlsByName};
+const isInlined = obj => typeof (obj) === "object";
+
+const loadThemeProperties = async (themeName) => {
+	if (typeof themeUrlsByName[themeName] === "object") {
+		// inlined from build
+		throw new Error("[themes] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs");
+	}
+	return (await fetch(themeUrlsByName[themeName])).json();
+};
+
+${availableThemesArray}
+  .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadThemeProperties));
+`;
+
+
 // dynamic imports file content
 	const contentDynamic = `// @ts-nocheck
 import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
@@ -44,8 +73,9 @@ ${availableThemesArray}
   .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
 `;
 
-	await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
+	await fs.mkdir(path.dirname(outputFile), { recursive: true });
 	return Promise.all([
+		fs.writeFile(outputFile, contentStatic),
 		fs.writeFile(outputFileDynamic, contentDynamic)
 	]);
 };

packages/tools/lib/hbs2lit/src/compiler.js

@@ -17,10 +17,12 @@ const hbs2lit = async (file, componentName) => {
 
 	sPreprocessed = removeWhiteSpaces(sPreprocessed);
 
+	const blockSignature = process.env.UI5_TS ? `this: ${componentName}` : ""
+
 	// icons hack
 	if (sPreprocessed.startsWith("<g ") || sPreprocessed.startsWith("<g>")) {
 		return `
-		function block0 (this: ${componentName}) {
+		function block0 (${blockSignature}) {
 			return svg\`${sPreprocessed}\`
 		}`;
 	}