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

package/README.md

@@ -1,6 +1,4 @@
-![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png)
-
-# UI5 Web Components - Tools
+# ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_water.png)UI5 Web Components - Tools
 
 [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
 
@@ -10,10 +8,10 @@ used by other UI5 Web Components packages, such as `main` and `fiori`.
 ## Resources
 - [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)
 - [UI5 Web Components - Home Page](https://sap.github.io/ui5-webcomponents)
-- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/playground/)
+- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/play/)
 
 ## Support
-We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
+We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/).
 
 ## Contribute
 Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/docs/6-contributing/02-conventions-and-guidelines.md).

package/assets-meta.js

@@ -1,20 +1,16 @@
 const assetsMeta = {
   "themes": {
-    "default": "sap_fiori_3",
+    "default": "sap_horizon",
     "all": [
       "sap_fiori_3",
       "sap_fiori_3_dark",
-      "sap_belize",
-      "sap_belize_hcb",
-      "sap_belize_hcw",
       "sap_fiori_3_hcb",
       "sap_fiori_3_hcw",
-	  "sap_horizon",
-	  "sap_horizon_dark",
-	  "sap_horizon_hcb",
-	  "sap_horizon_hcw",
-	  "sap_horizon_exp"
-    ]
+	    "sap_horizon",
+	    "sap_horizon_dark",
+	    "sap_horizon_hcb",
+	    "sap_horizon_hcw",
+    ],
   },
   "languages": {
     "default": "en",
@@ -22,6 +18,7 @@ const assetsMeta = {
       "ar",
       "bg",
       "ca",
+      "cnr",
       "cs",
       "cy",
       "da",
@@ -49,6 +46,7 @@ const assetsMeta = {
       "ko",
       "lt",
       "lv",
+      "mk",
       "ms",
       "nl",
       "no",
@@ -60,6 +58,7 @@ const assetsMeta = {
       "sh",
       "sk",
       "sl",
+      "sr",
       "sv",
       "th",
       "tr",
@@ -77,6 +76,7 @@ const assetsMeta = {
       "ar_SA",
       "bg",
       "ca",
+      "cnr",
       "cs",
       "da",
       "de",
@@ -124,6 +124,7 @@ const assetsMeta = {
       "lt",
       "lv",
       "ms",
+      "mk",
       "nb",
       "nl",
       "nl_BE",

package/components-package/cypress/support/commands.js

@@ -0,0 +1,66 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+import "cypress-real-events";
+
+const realEventCmdCallback = (originalFn, element, ...args) => {
+	cy.get(element)
+		.should($el => {
+			if ($el[0].tagName.includes("-") && $el[0].shadowRoot) {
+				expect($el[0].shadowRoot.hasChildNodes(), "Custom elements with shadow DOM have content in their shadow DOM").to.be.true;
+			}
+		})
+		.and("be.visible")
+		.then(() => {
+			return originalFn(element, ...args)
+		});
+};
+
+const commands = [
+	"realClick",
+	"realHover",
+	"realTouch",
+	"realSwipe",
+	"realMouseDown",
+	"realMouseUp",
+	"realMouseMove"
+];
+
+commands.forEach(cmd => {
+	Cypress.Commands.overwrite(cmd, realEventCmdCallback)
+});

package/components-package/cypress/support/component-index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width,initial-scale=1.0">
+	<meta name="sap-allowedThemeOrigins" content="https://example.com">
+	<title>Components App</title>
+	<script data-ui5-config type="application/json">{}</script>
+</head>
+
+<body>
+	<div data-cy-root></div>
+</body>
+
+</html>

package/components-package/cypress/support/component.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+import "cypress-real-events";
+
+export type Renderable = HTMLTemplateResult;
+export interface MountUI5Options extends MountLitTemplateOptions {
+	ui5Configuration: object;
+}
+export type MountOptions = Partial<MountUI5Options>;
+export declare function mount(component: JSX.Element, options?: MountOptions): CypressChainable<JQuery<HTMLElement>>;
+declare global {
+	namespace Cypress {
+		interface Chainable {
+			/**
+			 * Mount your component into Cypress sandbox
+			 * @param component content to render by preact render function
+			 * @param options render options for custom rendering
+			 */
+			mount: typeof mount;
+		}
+	}
+}
+

package/components-package/cypress/support/component.js

@@ -0,0 +1,46 @@
+import "@cypress/code-coverage/support";
+import { setupHooks, getContainerEl } from "@cypress/mount-utils";
+import { mount as preactMount } from "./cypress-ct-preact.js";
+import "./commands.js";
+
+function applyConfiguration(options) {
+	const configurationScript = document.head.querySelector("script[data-ui5-config]");
+
+	if (options.ui5Configuration) {
+		configurationScript.innerHTML = JSON.stringify(options.ui5Configuration);
+	}
+}
+
+function cleanup() {
+	preactMount(null, getContainerEl());
+}
+
+function mount(component, options = {}) {
+	const container = getContainerEl();
+
+	// Apply custom configuration
+	applyConfiguration(options);
+
+	// Mount JSX Element
+	preactMount(component, container);
+
+	cy.get(container)
+	.find("*")
+	.should($el => {
+		const shadowrootsExist = [...$el].every(el => {
+			if (el.tagName.includes("-") && el.shadowRoot) {
+				return el.shadowRoot.hasChildNodes();
+			}
+
+			return true;
+		})
+
+		expect(shadowrootsExist, "Custom elements with shadow DOM have content in their shadow DOM").to.be.true;
+	})
+
+	return cy.get(container);
+}
+
+setupHooks(cleanup);
+
+Cypress.Commands.add('mount', mount)

package/components-package/cypress/support/cypress-ct-preact.js

@@ -0,0 +1,11 @@
+import { render } from 'preact';
+
+function mount(component, container) {
+	render(null, container);
+
+	return render(component, container);
+}
+
+export {
+	mount,
+};

package/components-package/cypress.config.js

@@ -0,0 +1,33 @@
+const { defineConfig } = require('cypress')
+const path = require("path");
+const coverageTask = require('@cypress/code-coverage/task');
+
+const suites = {
+	SUITE1: [
+		"**/specs/base/*.cy.{jsx,tsx}",
+		"**/specs/[A-I]*.cy.{js,jsx,ts,tsx}",
+	],
+	SUITE2: [
+		"**/specs/[^A-I]*.cy.{js,jsx,ts,tsx}",
+	],
+};
+
+module.exports = defineConfig({
+	component: {
+		setupNodeEvents(on, config) {
+			coverageTask(on, config)
+			return config
+		},
+		supportFile: path.join(__dirname, "cypress/support/component.js"),
+		indexHtmlFile: path.join(__dirname, "cypress/support/component-index.html"),
+		specPattern: suites[process.env.TEST_SUITE] || ["**/specs/**/*.cy.{js,ts,jsx,tsx}"],
+		devServer: {
+			bundler: 'vite',
+		}
+	},
+	video: false,
+	screenshotOnRunFailure: false,
+	scrollBehavior: false,
+	viewportHeight: 1080,
+	viewportWidth: 1440,
+})

package/components-package/eslint.js

@@ -3,33 +3,98 @@ const path = require("path");
 const tsMode = fs.existsSync(path.join(process.cwd(), "tsconfig.json"));
 
 /**
- * Typescript Rules
+ * Returns eslint rules specific to typescript files
+ * @returns
  */
-const overrides = tsMode ? [{
-	files: ["*.ts"],
-	parser: "@typescript-eslint/parser",
-	plugins: ["@typescript-eslint"],
-	extends: [
-		"plugin:@typescript-eslint/recommended",
-		"plugin:@typescript-eslint/recommended-requiring-type-checking"
-	],
-	parserOptions: {
-	  "project": ["./tsconfig.json", "./packages/*/tsconfig.json"],
-	},
-	rules: {
-		"no-shadow": "off",
-		"@typescript-eslint/no-shadow": ["error"],
-		"@typescript-eslint/no-unsafe-member-access": "off",
-		"@typescript-eslint/no-floating-promises": "off",
-		"@typescript-eslint/no-explicit-any": "off",
-		"@typescript-eslint/no-unsafe-assignment": "off",
-		"@typescript-eslint/ban-ts-comment": "off",
-		"@typescript-eslint/no-unsafe-call": "off",
-		"@typescript-eslint/no-non-null-assertion": "off",
-		"@typescript-eslint/no-empty-function": "off",
-		"lines-between-class-members": "off",
+const getTsModeOverrides = () => {
+	const tsConfiguration = {
+		files: ["*.ts"],
+		parser: "@typescript-eslint/parser",
+		plugins: ["@typescript-eslint"],
+		extends: [
+			"plugin:@typescript-eslint/recommended",
+			"plugin:@typescript-eslint/recommended-requiring-type-checking"
+		],
+		parserOptions: {
+			"project": [
+				"./tsconfig.json",
+				"./cypress/tsconfig.json",
+			],
+			EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
+		},
+		rules: {
+			"no-shadow": "off",
+			"@typescript-eslint/consistent-type-imports": "error",
+			"import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+			"@typescript-eslint/no-shadow": ["error"],
+			"@typescript-eslint/no-unsafe-member-access": "off",
+			"@typescript-eslint/no-floating-promises": "off",
+			"@typescript-eslint/no-explicit-any": "off",
+			"@typescript-eslint/no-unsafe-assignment": "off",
+			"@typescript-eslint/ban-ts-comment": "off",
+			"@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",
+		}
+	};
+
+	const tsxConfiguration = JSON.parse(JSON.stringify(tsConfiguration));
+	tsxConfiguration.files = ["*.tsx"];
+	tsxConfiguration.plugins.push("jsx-no-leaked-values");
+	tsxConfiguration.rules = {
+		...tsxConfiguration.rules,
+		"jsx-no-leaked-values/jsx-no-leaked-values": "error",
+		"@typescript-eslint/unbound-method": "off", // to be able to attach on* listeners
+		"@typescript-eslint/no-misused-promises": "off", // to be able to have async event listeners
+		"operator-linebreak": "off",
+		"no-nested-ternary": "off",
+		"implicit-arrow-linebreak": "off",
+		"function-paren-newline": "off",
+		"comma-dangle": "off"
+	};
+
+	const cypressConfiguration = {
+		"files": ["**/cypress/**/*.ts", "**/cypress/**/*.tsx"],
+
+		"plugins": [
+			"cypress"
+		],
+		extends: [
+			"plugin:cypress/recommended"
+		],
+		"env": {
+			"cypress/globals": true
+		},
+		"rules": {
+			"max-nested-callbacks": 0,
+			"no-unused-expressions": 0,
+			"@typescript-eslint/no-namespace": "off",
+			"cypress/no-assigning-return-values": "error",
+			"cypress/no-unnecessary-waiting": "error",
+			"cypress/assertion-before-screenshot": "warn",
+			"cypress/no-force": "warn",
+			"cypress/no-async-tests": "error",
+			"cypress/no-async-before": "error",
+			"cypress/no-pause": "error",
+			"import/no-extraneous-dependencies": [
+				"error",
+				{
+					"devDependencies": [
+						"**/cypress/**/*.ts"
+					]
+				}
+			]
+		}
 	}
-}] : [];
+
+	return [
+		tsConfiguration,
+		tsxConfiguration,
+		cypressConfiguration,
+	];
+}
 
 module.exports = {
 	"env": {
@@ -38,7 +103,7 @@ module.exports = {
 	},
 	"root": true,
 	"extends": "airbnb-base",
-	overrides,
+	"overrides": tsMode ? getTsModeOverrides() : [],
 	"parserOptions": {
 		"ecmaVersion": 2018,
 		"sourceType": "module"
@@ -81,6 +146,7 @@ module.exports = {
 		"curly": [2, "all"],
 		// "default-case": 1, // removed for UI5 WebComponents
 		"import/extensions": ["error", "always"], // override for UI5 WebComponents
+		"import/order": "off",
 		"no-alert": 2,
 		"no-caller": 2,
 		"no-div-regex": 2,
@@ -122,7 +188,7 @@ module.exports = {
 		"no-shadow-restricted-names": 2,
 		"no-undef-init": 2,
 		"no-undef": 2,
-		"no-unused-vars": [2, {"vars":"all", "args":"none"}],
+		"no-unused-vars": [2, { "vars": "all", "args": "none" }],
 
 		"brace-style": [2, "1tbs", { "allowSingleLine": true }],
 		"camelcase": [1, { "properties": "never" }], // added for UI5 WebComponents
@@ -138,7 +204,7 @@ module.exports = {
 		"no-new-object": 2,
 		"no-spaced-func": 2,
 		"quote-props": [2, "as-needed", { "keywords": true, "unnecessary": false }],
-		"semi-spacing": [1, {"before": false, "after": true}],
+		"semi-spacing": [1, { "before": false, "after": true }],
 		"semi": 2,
 		"keyword-spacing": 2,
 		"space-infix-ops": 2,

package/components-package/nps.js

@@ -1,24 +1,32 @@
 const path = require("path");
 const fs = require("fs");
-const resolve = require("resolve");
 const LIB = path.join(__dirname, `../lib/`);
-const preprocessJSDocScript = resolve.sync("@ui5/webcomponents-tools/lib/jsdoc/preprocess.js");
+let websiteBaseUrl = "/";
+
+if (process.env.DEPLOY) {
+	websiteBaseUrl = "/ui5-webcomponents/";
+} else if (process.env.DEPLOY_NIGHTLY) {
+	websiteBaseUrl = "/ui5-webcomponents/nightly/";
+}
 
 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` : "";
-	const tsOption = options.typescript;
-	const tsCommand = tsOption ? "tsc" : "";
-	const tsWatchCommand = tsOption ? "tsc --watch" : "";
+	// 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.legacy || options.jsx;
+	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 {
@@ -51,22 +59,27 @@ const getScripts = (options) => {
 	}
 
 	const scripts = {
-		clean: 'rimraf jsdoc-dist && rimraf src/generated && rimraf dist && rimraf .port && nps "scope.testPages.clean"',
+		clean: 'rimraf src/generated && rimraf dist && rimraf .port && nps "scope.testPages.clean"',
 		lint: `eslint . ${eslintConfig}`,
 		lintfix: `eslint . ${eslintConfig} --fix`,
+		generate: {
+			default: `${tsCrossEnv} nps prepare.all`,
+			all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps copyProps" "nps build.illustrations"',
+			styleRelated: "nps build.styles build.jsonImports build.jsImports",
+		},
 		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"',
+			default: `${tsCrossEnv} nps clean prepare.all ${options.legacy ? "copy" : ""} copyProps 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,
 		},
-		typescript: tsCommand,
 		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"`,
+				themes: `node "${LIB}/css-processors/css-processor-themes.mjs"`,
+				components: `node "${LIB}/css-processors/css-processor-components.mjs"`,
 			},
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
@@ -74,50 +87,51 @@ 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}`,
+			bundle: `vite build ${viteConfig} --mode testing  --base ${websiteBaseUrl}`,
+			bundle2: ``,
 			illustrations: createIllustrationsJSImportsScript,
 		},
+		copyProps: `node "${LIB}/copy-and-watch/index.js" --silent "src/i18n/*.properties" dist/`,
 		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/`,
-			props: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.properties" dist/`,
+			src: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.{js,json}" dist/`,
+			props: `node "${LIB}/copy-and-watch/index.js" --silent "src/i18n/*.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" ${options.legacy ? '"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,
-			props: 'nps "copy.props --watch --safe --skip-initial-copy"',
-			bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
+			typescript: tsWatchCommandStandalone,
+			props: 'nps "copyProps --watch --safe --skip-initial-copy"',
+			bundle: `node ${LIB}/dev-server/dev-server.mjs ${viteConfig}`,
 			styles: {
 				default: 'concurrently "nps watch.styles.themes" "nps watch.styles.components"',
 				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"`,
 			},
-			templates: 'chokidar "src/**/*.hbs" -c "nps build.templates"',
-			api: 'chokidar "test/**/*.sample.html" -c "nps generateAPI"',
+			templates: 'chokidar "src/**/*.hbs" -i "src/generated" -c "nps build.templates"',
 			i18n: 'chokidar "src/i18n/messagebundle.properties" -c "nps build.i18n.defaultsjs"'
 		},
 		start: "nps prepare watch.devServer",
 		test: `node "${LIB}/test-runner/test-runner.js"`,
+		"test-cy-ci": `cross-env CYPRESS_COVERAGE=true yarn cypress run --component --browser chrome`,
+		"test-cy-ci-suite-1": `cross-env CYPRESS_COVERAGE=true TEST_SUITE=SUITE1 yarn cypress run --component --browser chrome`,
+		"test-cy-ci-suite-2": `cross-env CYPRESS_COVERAGE=true TEST_SUITE=SUITE2 yarn cypress run --component --browser chrome`,
+		"test-cy-open": `cross-env CYPRESS_COVERAGE=true yarn cypress open --component --browser chrome`,
+		"test-cy-single": `cross-env yarn cypress run --component --browser chrome --spec ${process.argv[3]}`,
 		"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",
+			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",
@@ -126,16 +140,13 @@ const getScripts = (options) => {
 				replace: `node "${LIB}/scoping/scope-test-pages.js" test/pages/scoped demo`,
 			},
 			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}`,
+			watch: 'concurrently "nps watch.templates" "nps watch.props" "nps watch.styles"',
+			bundle: `node ${LIB}/dev-server/dev-server.mjs ${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/"
+			default: tsOption ? "nps generateAPI.generateCEM 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" : "" }`,
 		},
 	};
 

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 = {}