@ui5/webcomponents-tools 0.0.0-f2abb18c2 → 0.0.0-f651a470c

package/components-package/nps.js

@@ -1,29 +1,76 @@
 const path = require("path");
-
+const fs = require("fs");
+const resolve = require("resolve");
 const LIB = path.join(__dirname, `../lib/`);
-const serveConfig = path.join(__dirname, `serve.json`);
-const polyfillDir = path.dirname(require.resolve("@webcomponents/webcomponentsjs"));
-const polyfillPath = path.join(polyfillDir, "{*.js,*.map,*.md,bundles/**/*.*}");
+const preprocessJSDocScript = resolve.sync("@ui5/webcomponents-tools/lib/jsdoc/preprocess.js");
 
 const getScripts = (options) => {
 
-	const port = options.port;
+	// 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 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` : "";
+	const tsOption = options.typescript;
+	const tsCommand = tsOption ? "tsc" : "";
+	const tsWatchCommand = tsOption ? "tsc --watch" : "";
+	const tsCrossEnv = tsOption ? "cross-env UI5_TS=true" : "";
+	const copySrcGenerated = tsOption ? "" : "copy.srcGenerated";
+
+	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;
+	if (fs.existsSync("config/vite.config.js")) {
+		// old project setup where config file is in separate folder
+		viteConfig = "-c config/vite.config.js";
+	} else if (fs.existsSync("vite.config.js")) {
+		// preferred way of custom configuration in root project folder
+		viteConfig = "";
+	} else {
+		// no custom configuration - use default from tools project
+		viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-package/vite.config.js")}"`;
+	}
+
+	let eslintConfig;
+	if (fs.existsSync(".eslintrc.js") || fs.existsSync(".eslintrc.cjs")) {
+		// preferred way of custom configuration in root project folder
+		eslintConfig = "";
+	} else {
+		// no custom configuration - use default from tools project
+		eslintConfig = `--config  "${require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")}"`;
+	}
 
 	const scripts = {
-		clean: "rimraf dist",
-		lint: "eslint . --config config/.eslintrc.js",
-		prepare: "nps clean build.templates build.styles build.i18n build.jsonImports copy build.samples",
+		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`,
+			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,
 		build: {
-			default: "nps lint prepare build.bundle",
+			default: "nps prepare lint build.bundle",
 			templates: `mkdirp dist/generated/templates && node "${LIB}/hbs2ui5/index.js" -d src/ -o dist/generated/templates`,
 			styles: {
-				default: "nps build.styles.themes build.styles.components",
-				themes: "postcss src/**/parameters-bundle.css --config config/postcss.themes --base src --dir dist/css/",
-				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/",
+				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
 			},
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
-				defaultsjs: `node "${LIB}/i18n/defaults.js" src/i18n dist/generated/i18n`,
+				defaultsjs: `node "${LIB}/i18n/defaults.js" src/i18n src/generated/i18n`,
 				json: `node "${LIB}/i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
 			},
 			jsonImports: {
@@ -31,59 +78,65 @@ const getScripts = (options) => {
 				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`,
 			},
-			bundle: "rollup --config config/rollup.config.js --environment ES5_BUILD",
-			samples: {
-				default: "nps build.samples.api build.samples.docs",
-				api: `jsdoc -c "${LIB}/jsdoc/config.json"`,
-				docs: `node "${LIB}/documentation/index.js" dist/api.json`,
-			}
+			jsImports: {
+				default: "mkdirp dist/generated/js-imports && nps build.jsImports.illustrationsLoaders",
+				illustrationsLoaders: createIllustrationsLoadersScript,
+			},
+			bundle: `vite build ${viteConfig}`,
+			illustrations: createIllustrationsJSImportsScript,
 		},
 		copy: {
-			default: "nps copy.src copy.test copy.webcomponents-polyfill",
-			src: `node "${LIB}/copy-and-watch/index.js" "src/**/*.js" dist/`,
-			test: `node "${LIB}/copy-and-watch/index.js" "test/**/*.*" dist/test-resources`,
-			"webcomponents-polyfill": `node "${LIB}/copy-and-watch/index.js" "${polyfillPath}" dist/webcomponentsjs/`,
+			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/`,
+			props: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.properties" dist/`,
 		},
 		watch: {
-			default: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles"',
+			default: `${tsCrossEnv} concurrently "nps watch.templates" "nps watch.api" "nps watch.src" "nps watch.typescript" "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"',
-			test: 'nps "copy.test --watch --safe --skip-initial-copy"',
-			bundle: "rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,DEPLOY_PUBLIC_PATH:/resources/",
+			typescript: tsWatchCommand,
+			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"',
 				themes: 'nps "build.styles.themes -w"',
-				components: 'nps "build.styles.components -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"`,
+				},
 			},
-			templates: "chokidar \"src/**/*.hbs\" -c \"nps build.templates\"",
-			samples: "chokidar \"test/**/*.sample.html\" -c \"nps build.samples\"",
-		},
-		dev: 'concurrently "nps serve" "nps watch"',
-		start: "nps prepare dev",
-		serve: {
-			default: "nps serve.prepare serve.run",
-			prepare: `node "${LIB}/copy-and-watch/index.js" "${serveConfig}" dist/`,
-			run: `serve --no-clipboard -l ${port} dist`,
-		},
-		test: {
-			// --success first - report the exit code of the test run (first command to finish), as serve is always terminated and has a non-0 exit code
-			default: 'concurrently "nps serve" "nps test.run" --kill-others --success first',
-			run: "cross-env WDIO_LOG_LEVEL=error FORCE_COLOR=0 wdio config/wdio.conf.js",
-			spec: "wdio run config/wdio.conf.js",
+			templates: 'chokidar "src/**/*.hbs" -c "nps build.templates"',
+			api: 'chokidar "test/**/*.sample.html" -c "nps generateAPI"',
+			i18n: 'chokidar "src/i18n/messagebundle.properties" -c "nps build.i18n.defaultsjs"'
 		},
-		startWithScope: "nps scope.prepare scope.dev",
+		start: "nps prepare watch.devServer",
+		test: `node "${LIB}/test-runner/test-runner.js"`,
+		"test-suite-1": `node "${LIB}/test-runner/test-runner.js" --suite suite1`,
+		"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",
 			lint: `node "${LIB}/scoping/lint-src.js"`,
 			testPages: {
 				default: "nps scope.testPages.clean scope.testPages.copy scope.testPages.replace",
-				clean: "rimraf dist/test-resources/pages/scoped",
-				copy: `node "${LIB}/copy-and-watch/index.js" "dist/test-resources/pages/**/*" dist/test-resources/scoped`,
-				replace: `node "${LIB}/scoping/scope-test-pages.js" dist/test-resources/scoped demo`,
+				clean: "rimraf test/pages/scoped",
+				copy: `node "${LIB}/copy-and-watch/index.js" --silent "test/pages/**/*" test/pages/scoped`,
+				replace: `node "${LIB}/scoping/scope-test-pages.js" test/pages/scoped demo`,
 			},
-			dev: 'concurrently "nps serve" "nps scope.watch"',
-			watch: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps scope.bundle" "nps watch.styles"',
-			bundle: "rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,SCOPE"
-		}
+			watchWithBundle: 'concurrently "nps scope.watch" "nps scope.bundle" ',
+			watch: 'concurrently "nps watch.templates" "nps watch.api" "nps watch.src" "nps watch.props" "nps watch.styles"',
+			bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
+		},
+		generateAPI: {
+			default: "nps generateAPI.prepare generateAPI.preprocess generateAPI.jsdoc generateAPI.cleanup generateAPI.prepareManifest",
+			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"`,
+			cleanup: "rimraf jsdoc-dist/"
+		},
 	};
 
 	return scripts;

package/components-package/postcss.components.js

@@ -6,16 +6,16 @@ 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}),
-	]
-};
+		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 }),
+		]
+}

package/components-package/postcss.themes.js

@@ -1,23 +1,26 @@
 const postcssImport = require('postcss-import');
-const combineSelectors = require('postcss-combine-duplicated-selectors');
+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'}),
-		postcssCSStoESM({toReplace: 'src'}),
-	]
+		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 }),
+		]
 };

package/components-package/vite.config.js

@@ -0,0 +1,13 @@
+// vite.config.js
+import { defineConfig } from 'vite';
+import virtualIndex from '../lib/dev-server/virtual-index-html-plugin.js';
+
+export default defineConfig(async () => {
+	const data = await virtualIndex();
+	return {
+		build: {
+			emptyOutDir: false,
+		},
+		plugins: [data],
+	}
+  })