@ui5/webcomponents-tools 0.0.0-fc993d8cd → 0.0.0-fca1107e7

package/components-package/eslint.js

@@ -15,6 +15,7 @@ const overrides = tsMode ? [{
 	],
 	parserOptions: {
 	  "project": ["./tsconfig.json", "./packages/*/tsconfig.json"],
+	  EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
 	},
 	rules: {
 		"no-shadow": "off",
@@ -27,6 +28,7 @@ const overrides = tsMode ? [{
 		"@typescript-eslint/no-unsafe-call": "off",
 		"@typescript-eslint/no-non-null-assertion": "off",
 		"@typescript-eslint/no-empty-function": "off",
+		"@typescript-eslint/no-empty-interface": "off",
 		"lines-between-class-members": "off",
 	}
 }] : [];

package/components-package/nps.js

@@ -8,17 +8,20 @@ const getScripts = (options) => {
 
 	// The script creates all JS modules (dist/illustrations/{illustrationName}.js) out of the existing SVGs
 	const illustrationsData = options.illustrationsData || [];
-	const illustrations = illustrationsData.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath}`);
+	const illustrations = illustrationsData.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath} ${illustration.collection}`);
 	const createIllustrationsJSImportsScript = illustrations.join(" && ");
 
-	// The script creates the "dist/generated/js-imports/Illustration.js" file that registers loaders (dynamic JS imports) for each illustration
-	const illustrationDestinationPaths = illustrationsData.map(illustrations => illustrations.destinationPath);
-	const createIllustrationsLoadersScript = options.fioriPackage ? `node ${LIB}/generate-js-imports/illustrations.js ${illustrationDestinationPaths[0]} ${illustrationDestinationPaths[1]} dist/generated/js-imports` : "";
+	// 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(" && ");
+
 	const tsOption = options.typescript;
-	const tsCommand = tsOption ? "tsc" : "";
-	const tsWatchCommand = tsOption ? "tsc --watch" : "";
+	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" : "";
-	const copySrcGenerated = tsOption ? "" : "copy.srcGenerated";
 
 	if (tsOption) {
 		try {
@@ -54,19 +57,25 @@ const getScripts = (options) => {
 		clean: 'rimraf jsdoc-dist && rimraf src/generated && rimraf dist && rimraf .port && nps "scope.testPages.clean"',
 		lint: `eslint . ${eslintConfig}`,
 		lintfix: `eslint . ${eslintConfig} --fix`,
-		prepare: {
-			default: `${tsCrossEnv} nps clean prepare.all typescript generateAPI`,
+		generate: {
+			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",
 		},
-		typescript: tsCommand,
+		prepare: {
+			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: tsCommandOld,
+		},
 		build: {
-			default: "nps prepare lint build.bundle",
-			templates: `mkdirp dist/generated/templates && node "${LIB}/hbs2ui5/index.js" -d src/ -o dist/generated/templates`,
+			default: "nps prepare lint build.bundle", // build.bundle2
+			templates: `mkdirp src/generated/templates && ${tsCrossEnv} node "${LIB}/hbs2ui5/index.js" -d src/ -o src/generated/templates`,
 			styles: {
-				default: `nps build.styles.themes build.styles.components ${copySrcGenerated}`,
-				themes: `node "${LIB}/postcss-p/postcss-p.mjs"`,
-				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/", // When updating this, also update the new files script
+				default: `concurrently "nps build.styles.themes" "nps build.styles.components" "nps build.styles.componentStyles"`,
+				themes: `node "${LIB}/css-processors/css-processor-themes.mjs"`,
+				components: `node "${LIB}/css-processors/css-processor-components.mjs"`,
+				componentStyles: `node "${LIB}/css-processors/css-processor-component-styles.mjs"`,
 			},
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
@@ -74,38 +83,36 @@ const getScripts = (options) => {
 				json: `node "${LIB}/i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
 			},
 			jsonImports: {
-				default: "mkdirp dist/generated/json-imports && nps build.jsonImports.themes build.jsonImports.i18n",
-				themes: `node "${LIB}/generate-json-imports/themes.js" dist/generated/assets/themes dist/generated/json-imports`,
-				i18n: `node "${LIB}/generate-json-imports/i18n.js" dist/generated/assets/i18n dist/generated/json-imports`,
+				default: "mkdirp src/generated/json-imports && nps build.jsonImports.themes build.jsonImports.i18n",
+				themes: `node "${LIB}/generate-json-imports/themes.js" dist/generated/assets/themes src/generated/json-imports`,
+				i18n: `node "${LIB}/generate-json-imports/i18n.js" dist/generated/assets/i18n src/generated/json-imports`,
 			},
 			jsImports: {
-				default: "mkdirp dist/generated/js-imports && nps build.jsImports.illustrationsLoaders",
+				default: "mkdirp src/generated/js-imports && nps build.jsImports.illustrationsLoaders",
 				illustrationsLoaders: createIllustrationsLoadersScript,
 			},
 			bundle: `vite build ${viteConfig}`,
+			bundle2: ``,
 			illustrations: createIllustrationsJSImportsScript,
 		},
 		copy: {
 			default: "nps copy.src copy.props",
-			src: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
-			srcGenerated: `node "${LIB}/copy-and-watch/index.js" --silent "src/generated/**/*.js" dist/generated/`,
+			src: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.{js,json}" dist/`,
+			// srcGenerated2: `node "${LIB}/copy-and-watch/index.js" --silent "src/generated/**/*.{js,json}" dist/generated/`,
 			props: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.properties" dist/`,
 		},
 		watch: {
-			default: `${tsCrossEnv} concurrently "nps watch.templates" "nps watch.api" "nps watch.src" "nps watch.typescript" "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: tsWatchCommand,
+			typescript: tsWatchCommandStandalone,
 			props: 'nps "copy.props --watch --safe --skip-initial-copy"',
 			bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
 			styles: {
-				default: 'concurrently "nps watch.styles.themes" "nps watch.styles.components"',
+				default: 'concurrently "nps watch.styles.themes" "nps watch.styles.components"  "nps watch.styles.componentStyles" ',
 				themes: 'nps "build.styles.themes -w"',
-				components: {
-					default: 'concurrently "nps watch.styles.components.existingFiles" "nps watch.styles.components.newFiles"',
-					existingFiles: `nps "build.styles.components -w"`,
-					newFiles: `node "${LIB}/postcss-new-files/index.js" --srcFiles="src/themes/*.css"`,
-				},
+				components: `nps "build.styles.components -w"`,
+				componentStyles: `nps "build.styles.componentStyles -w"`,
 			},
 			templates: 'chokidar "src/**/*.hbs" -c "nps build.templates"',
 			api: 'chokidar "test/**/*.sample.html" -c "nps generateAPI"',
@@ -117,7 +124,7 @@ const getScripts = (options) => {
 		"test-suite-2": `node "${LIB}/test-runner/test-runner.js" --suite suite2`,
 		startWithScope: "nps scope.prepare scope.watchWithBundle",
 		scope: {
-			prepare: "nps scope.lint prepare scope.testPages",
+			prepare: "nps scope.lint scope.testPages",
 			lint: `node "${LIB}/scoping/lint-src.js"`,
 			testPages: {
 				default: "nps scope.testPages.clean scope.testPages.copy scope.testPages.replace",
@@ -130,11 +137,13 @@ const getScripts = (options) => {
 			bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
 		},
 		generateAPI: {
-			default: "nps generateAPI.prepare generateAPI.preprocess generateAPI.jsdoc generateAPI.cleanup generateAPI.prepareManifest",
+			default: `nps ${ tsOption ? "generateAPI.generateCEM generateAPI.validateCEM" : "generateAPI.prepare generateAPI.preprocess generateAPI.jsdoc generateAPI.cleanup generateAPI.prepareManifest generateAPI.validateCEM"}`,
+			generateCEM: `cem analyze --config "${LIB}/cem/custom-elements-manifest.config.mjs" ${ options.dev ? "--dev" : "" }`,
+			validateCEM: `node "${LIB}/cem/validate.js" ${ options.dev ? "--dev" : "" }`,
 			prepare: `node "${LIB}/copy-and-watch/index.js" --silent "dist/**/*.js" jsdoc-dist/`,
 			prepareManifest: `node "${LIB}/generate-custom-elements-manifest/index.js" dist dist`,
 			preprocess: `node "${preprocessJSDocScript}" jsdoc-dist/ src`,
-			jsdoc: `jsdoc -c "${LIB}/jsdoc/configTypescript.json"`,
+			jsdoc: `jsdoc -c "${LIB}/jsdoc/config.json"`,
 			cleanup: "rimraf jsdoc-dist/"
 		},
 	};

package/components-package/postcss.components.js

@@ -1,21 +1 @@
-const postcssImport = require('postcss-import');
-const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
-const cssnano = require('cssnano');
-const fs = require("fs");
-
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
-
-module.exports = {
-		plugins: [
-			postcssImport(),
-			cssnano({
-				preset: [
-					'default', {
-						mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
-						mergeRules: false, // https://github.com/cssnano/cssnano/issues/730
-					},
-				]
-			}),
-			postcssCSStoESM({ toReplace: 'src', includeDefaultTheme: true, packageName }),
-		]
-}
+module.exports = {}

package/components-package/postcss.themes.js

@@ -1,26 +1 @@
-const postcssImport = require('postcss-import');
-const combineSelectors = require('../lib/postcss-combine-duplicated-selectors/index.js');
-const postcssCSStoJSON = require('../lib/postcss-css-to-json/index.js');
-const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
-const cssnano = require('cssnano');
-const fs = require("fs");
-
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
-
-module.exports = {
-		plugins: [
-			postcssImport(),
-			combineSelectors({
-				removeDuplicatedProperties: true
-			}),
-			cssnano({
-				preset: [
-					'default', {
-						mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
-					},
-				]
-			},),
-			postcssCSStoJSON({ toReplace: 'src', packageName }),
-			postcssCSStoESM({ toReplace: 'src', packageName }),
-		]
-};
+module.exports = {};

package/components-package/wdio.js

@@ -1,3 +1,5 @@
+const dns = require("node:dns");
+
 exports.config = {
 	//
 	// ====================
@@ -56,7 +58,15 @@ exports.config = {
 		'goog:chromeOptions': {
 			// to run chrome headless the following flags are required
 			// (see https://developers.google.com/web/updates/2017/04/headless-chrome)
-			args: ['--headless', '--disable-gpu'],
+			args: [
+				'--headless',
+				'--start-maximized',
+				'--no-sandbox',
+				'--disable-gpu',
+				'--disable-infobars',
+				'--disable-extensions',
+				'--disable-dev-shm-usage',
+			],
 			// args: ['--disable-gpu'],
 		}
 	}],
@@ -99,8 +109,7 @@ exports.config = {
 	// Services take over a specific job you don't want to take care of. They enhance
 	// your test setup with almost no effort. Unlike plugins, they don't add new
 	// commands. Instead, they hook themselves up into the test process.
-	services: ['chromedriver', 'devtools',
-		['static-server', {
+	services: ['chromedriver', ['static-server', {
 			folders: [
 				{ mount: '/', path: './dist' },
 			],
@@ -153,6 +162,9 @@ exports.config = {
 	 */
 	// beforeSession: function (config, capabilities, specs) {
 	// },
+	beforeSession: () => {
+        dns.setDefaultResultOrder('ipv4first');
+    },
 	/**
 	 * Gets executed before test execution begins. At this point you can access to all global
 	 * variables like `browser`. It is the perfect place to define custom commands.

package/components-package/wdio.sync.js

@@ -56,7 +56,15 @@ exports.config = {
 		'goog:chromeOptions': {
 			// to run chrome headless the following flags are required
 			// (see https://developers.google.com/web/updates/2017/04/headless-chrome)
-			args: ['--headless', '--disable-gpu'],
+			args: [
+				'--headless',
+				'--start-maximized',
+				'--no-sandbox',
+				'--disable-gpu',
+				'--disable-infobars',
+				'--disable-extensions',
+				'--disable-dev-shm-usage',
+			],
 			// args: ['--disable-gpu'],
 		}
 	}],

package/icons-collection/nps.js

@@ -21,7 +21,7 @@ const copyIconAssetsCommand = (options) => {
 		return 	{
 			default: "nps copy.json-imports copy.icon-collection",
 			"json-imports": `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
-			"icon-collection": `node "${LIB}/copy-and-watch/index.js" --silent "src/*.json" dist/generated/assets/`,
+			"icon-collection": `node "${LIB}/copy-and-watch/index.js" --silent "src/*.json" src/generated/assets/`,
 		}
 	}
 
@@ -32,7 +32,7 @@ const copyIconAssetsCommand = (options) => {
 
 	options.versions.forEach((v) => {
 		command.default += ` copy.icon-collection${v}`;
-		command[`icon-collection${v}`] = `node "${LIB}/copy-and-watch/index.js" --silent "src/${v}/*.json" dist/generated/assets/${v}/`;
+		command[`icon-collection${v}`] = `node "${LIB}/copy-and-watch/index.js" --silent "src/${v}/*.json" src/generated/assets/${v}/`;
 	});
 
 	return command;
@@ -41,22 +41,24 @@ const copyIconAssetsCommand = (options) => {
 const getScripts = (options) => {
 	const createJSImportsCmd = createIconImportsCommand(options);
 	const copyAssetsCmd = copyIconAssetsCommand(options);
-	const tsCommand = options.typescript ? "tsc" : "";
+	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: `${tsCrossEnv} nps clean copy build.i18n build.icons build.jsonImports copyjson`,
+		copyjson: "copy-and-watch \"src/generated/**/*.json\" dist/generated/",
 		build: {
 			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`,
-				json: `mkdirp dist/generated/assets/i18n && node "${LIB}/i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
+				json: `mkdirp src/generated/assets/i18n && node "${LIB}/i18n/toJSON.js" src/i18n src/generated/assets/i18n`,
 			},
 			jsonImports: {
-				default: "mkdirp dist/generated/json-imports && nps build.jsonImports.i18n",
-				i18n: `node "${LIB}/generate-json-imports/i18n.js" dist/generated/assets/i18n dist/generated/json-imports`,
+				default: "mkdirp src/generated/json-imports && nps build.jsonImports.i18n",
+				i18n: `node "${LIB}/generate-json-imports/i18n.js" src/generated/assets/i18n src/generated/json-imports`,
 			},
 			icons: createJSImportsCmd,
 		},

package/lib/amd-to-es6/index.js

@@ -0,0 +1,102 @@
+const fs = require("fs").promises;
+const path = require("path");
+const basePath = process.argv[2];
+const babelCore = require("@babel/core");
+const babelParser = require("@babel/parser");
+const babelGenerator = require("@babel/generator").default;
+const replaceAsync = require('replace-in-file');
+
+const convertSAPUIDefineToDefine = async (filePath) => {
+	return replaceAsync({
+		files: filePath,
+		processor: (input) => {
+			return input.replace("sap.ui.define", "define").replace(", /* bExport= */ false", "").replace(", /* bExport= */ true", "");
+		}
+	})
+}
+
+const convertAmdToEs6 = async (code) => {
+	return (await babelCore.transformAsync(code, {
+		plugins: [['babel-plugin-amd-to-esm', {}]]
+	})).code;
+}
+
+const convertAbsImportsToRelative = (filePath, code) => {
+	let changed = false;
+	// console.log("File processing started: ", srcPath);
+
+	if (code.includes("import(")) {
+		// esprima can't parse this, but it's from the project files
+		return;
+	}
+
+	const tree = babelParser.parse(code, { sourceType: "module" });
+	const importer = filePath.replace(basePath, "");
+	const importerDir = path.dirname(importer);
+	// console.log("Importer -> ", importer);
+
+	tree?.program?.body?.forEach(node => {
+		if (node.type === "ImportDeclaration") {
+			let importee = node.source.value;
+			// console.log(importee);
+			if (importee.startsWith(".")) {
+				// add .js extension if missing
+				if (!importee.endsWith(".js")) {
+					node.source.value += ".js"
+					changed = true;
+				}
+				return;
+			}
+			let importeeDir = path.dirname(importee);
+			let importeeFile = path.basename(importee);
+			let relativePath = path.relative(importerDir, importeeDir);
+			if (relativePath.length === 0) {
+				relativePath = "."
+			}
+			if (!relativePath.startsWith(".")) {
+				relativePath = "./" + relativePath;
+			}
+
+			relativePath = relativePath.replace(/\\/g, "/"); // the browser expects unix paths
+			let relativeImport = `${relativePath}/${importeeFile}.js`;
+			// console.log(importee + " --> " + relativeImport);
+			node.source.value = relativeImport;
+			changed = true;
+		}
+	});
+
+	return changed ? babelGenerator(tree).code : code;
+}
+
+const replaceGlobalCoreUsage = (filePath, code) => {
+	if (!filePath.includes("Configuration"))  {
+		const replaced = code.replace(/sap\.ui\.getCore\(\)/g, `Core`);
+		return code !== replaced ? `import Core from 'sap/ui/core/Core';${replaced}` : code;
+	}
+
+	return code;
+};
+
+const transformAmdToES6Module = async (filePath) => {
+	await convertSAPUIDefineToDefine(filePath);
+
+	let code = (await fs.readFile(filePath)).toString();
+
+	code = await convertAmdToEs6(code);
+
+	code = replaceGlobalCoreUsage(filePath, code);
+
+	code = convertAbsImportsToRelative(filePath, code);
+
+	return fs.writeFile(filePath, code);
+}
+
+const transformAmdToES6Modules = async () => {
+	const { globby } = await import("globby");
+	const fileNames = await globby(basePath.replace(/\\/g, "/") + "**/*.js");
+	return Promise.all(fileNames.map(transformAmdToES6Module).filter(x => !!x));
+};
+
+transformAmdToES6Modules().then(() => {
+	console.log("Success: all amd modules are transformed to es6!");
+});

package/lib/amd-to-es6/no-remaining-require.js

@@ -0,0 +1,33 @@
+const fs = require("fs").promises;
+const path = require("path");
+const basePath = process.argv[2];
+const babelCore = require("@babel/core");
+const babelParser = require("@babel/parser");
+const babelGenerator = require("@babel/generator").default;
+const walk = require("estree-walk");
+
+const checkHasRequire = (filePath, code) => {
+	code = code.replace(/sap\.ui\.require/g, "unhandledRequire");
+
+	const tree = babelParser.parse(code, { sourceType: "module" });
+	walk(tree, {
+		CallExpression: function (node) {
+            if (node.type === "CallExpression" && node?.callee?.name === "unhandledRequire") {
+                throw new Error(`sap.ui.require found in ${filePath}`);
+            }
+    	}
+    });
+}
+
+const checkFile = async (filePath) => {
+	let code = (await fs.readFile(filePath)).toString();
+	checkHasRequire(filePath, code);
+}
+
+const checkAll = async () => {
+	const { globby } = await import("globby");
+	const fileNames = await globby(basePath.replace(/\\/g, "/") + "**/*.js");
+	return Promise.all(fileNames.map(checkFile).filter(x => !!x));
+};
+
+checkAll();