@ui5/webcomponents-tools 0.0.0-fd6264051 → 0.0.0-ff1549e7b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-fd6264051",
+  "version": "0.0.0-ff1549e7b",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -21,26 +21,19 @@
     "directory": "packages/tools"
   },
   "dependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/preset-env": "^7.13.10",
-    "@openui5/sap.ui.core": "1.95.0",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.5",
-    "@rollup/plugin-replace": "^3.0.0",
-    "@rollup/plugin-url": "^6.0.0",
-    "@wdio/cli": "^7.12.2",
-    "@wdio/dot-reporter": "^7.10.1",
-    "@wdio/local-runner": "^7.12.2",
-    "@wdio/mocha-framework": "^7.12.2",
-    "@wdio/spec-reporter": "^7.10.1",
-    "@webcomponents/webcomponentsjs": "^2.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
+    "@wdio/cli": "^7.19.7",
+    "@wdio/devtools-service": "^7.19.7",
+    "@wdio/dot-reporter": "^7.19.7",
+    "@wdio/local-runner": "^7.19.7",
+    "@wdio/mocha-framework": "^7.19.7",
+    "@wdio/spec-reporter": "^7.19.7",
+    "@wdio/static-server-service": "^7.19.5",
     "chai": "^4.3.4",
     "child_process": "^1.0.2",
     "chokidar": "^3.5.1",
     "chokidar-cli": "^3.0.0",
-    "cli-color": "^2.0.1",
     "command-line-args": "^5.1.1",
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
@@ -50,33 +43,41 @@
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.22.1",
     "esprima": "^4.0.1",
-    "folder-hash": "^4.0.1",
     "getopts": "^2.3.0",
     "glob": "^7.1.6",
     "glob-parent": "^6.0.2",
+    "globby": "^13.1.1",
     "handlebars": "^4.7.7",
     "is-port-reachable": "^3.1.0",
     "jsdoc": "^3.6.6",
     "json-beautify": "^1.1.1",
     "mkdirp": "^1.0.4",
+    "modify-selectors": "^2.0.0",
     "nps": "^5.10.0",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
-    "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-import": "^14.0.2",
+    "postcss-selector-parser": "^6.0.10",
+    "prompts": "^2.4.2",
     "properties-reader": "^2.2.0",
     "recursive-readdir": "^2.2.2",
     "resolve": "^1.20.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.41.4",
-    "rollup-plugin-filesize": "^9.1.1",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "serve": "^12.0.0",
     "slash": "3.0.0",
-    "wdio-chromedriver-service": "^7.0.0"
+    "vite": "^3.0.4",
+    "wdio-chromedriver-service": "^7.3.2",
+    "zx": "^4.3.0"
   },
   "peerDependencies": {
-    "chromedriver": "*"
+    "chromedriver": "*",
+    "typescript": "^4.9.4"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "yargs": "^17.5.1"
   }
 }

package/components-package/rollup-plugins/empty-module.js

@@ -1,15 +0,0 @@
-const slash = require("slash");
-
-function emptyModulePlugin({ emptyModules }) {
-	return {
-		name: "ui5-dev-empty-module-plugin",
-		load(id) {
-			if (emptyModules.some(mod => slash(id).includes(mod))) {
-				return `export default ""`;
-			}
-			return null;
-		},
-	};
-}
-
-module.exports = emptyModulePlugin;

package/components-package/rollup.js

@@ -1,239 +0,0 @@
-const process = require("process");
-const fs = require("fs");
-const os = require("os");
-const { babel } = require("@rollup/plugin-babel");
-const { nodeResolve } = require("@rollup/plugin-node-resolve");
-const url = require("@rollup/plugin-url");
-const { terser } = require("rollup-plugin-terser");
-const json = require("@rollup/plugin-json");
-const replace = require("@rollup/plugin-replace");
-const commonjs = require("@rollup/plugin-commonjs");
-const colors = require("cli-color");
-const filesize = require("rollup-plugin-filesize");
-const livereload = require("rollup-plugin-livereload");
-const emptyModulePlugin = require("./rollup-plugins/empty-module.js");
-
-const packageFile = JSON.parse(fs.readFileSync("./package.json"));
-const packageName = packageFile.name;
-const DEPLOY_PUBLIC_PATH = process.env.DEPLOY_PUBLIC_PATH || "";
-
-const warningsToSkip = [{
-	warningCode: "THIS_IS_UNDEFINED",
-	filePath: /.+zxing.+/,
-}];
-
-function ui5DevImportCheckerPlugin() {
-	return {
-		name: "ui5-dev-import-checker-plugin",
-		transform(code, file) {
-			const re = new RegExp(`^import.*"${packageName}/`);
-			if (re.test(code)) {
-				throw new Error(`illegal import in ${file}`);
-			}
-		},
-	};
-}
-
-function onwarn(warning, warn) {
-	// Skip warning for known false positives that will otherwise polute the log
-	let skip = warningsToSkip.find(warningToSkip => {
-		let loc, file;
-		return warning.code === warningToSkip.warningCode
-			&& (loc = warning.loc)
-			&& (file = loc.file)
-			&& file.match(warningToSkip.filePath);
-	});
-	if (skip) {
-		return;
-	}
-
-	// warn everything else
-	warn( warning );
-}
-
-const reportedForPackages = new Set(); // sometimes writeBundle is called more than once per bundle -> suppress extra messages
-function ui5DevReadyMessagePlugin() {
-	return {
-		name: "ui5-dev-message-ready-plugin",
-		writeBundle: (assets, bundle) => {
-			if (reportedForPackages.has(packageName)) {
-				return;
-			}
-			console.log(colors.blue(`${colors.bold(packageName)} successfully built!`));
-
-			if (fs.existsSync(".port")) {
-				const port = `${fs.readFileSync(".port")}`;
-				if (port) {
-					console.log(colors.blue(`Navigate to: ${colors.bold(`http://localhost:${port}/test-resources/pages/`)}`));
-				}
-			}
-			reportedForPackages.add(packageName);
-		},
-	};
-}
-
-const getPlugins = ({ transpile }) => {
-	const plugins = [];
-
-	if (process.env.DEV) {
-		plugins.push(replace({
-			values: {
-				'const DEV_MODE = false': 'const DEV_MODE = true',
-			},
-			preventAssignment: false,
-		}));
-	}
-
-	if (process.env.DEV && !process.env.ENABLE_CLDR) {
-		// Empty the CLDR assets file for better performance during development
-		plugins.push(emptyModulePlugin({
-			emptyModules: [
-				"localization/dist/Assets.js",
-			],
-		}));
-	}
-
-	if (!process.env.DEV) {
-		plugins.push(filesize(
-			{
-				reporter(options, bundle, {
-					minSize, gzipSize, brotliSize, bundleSize,
-					fileName,
-					// "showBeforeSizes: release"
-					lastVersion,
-					// "showBeforeSizes: "release" or "showBeforeSizes": "build"
-					bundleSizeBefore, brotliSizeBefore, minSizeBefore, gzipSizeBefore,
-				}) {
-				// If a promise is returned, it will be awaited before rendering.
-					return `${fileName.padEnd(35)} ${minSize} / gzipped: ${gzipSize}`;
-				},
-			},
-
-		));
-	}
-
-	const publicPath = DEPLOY_PUBLIC_PATH;
-
-	plugins.push(ui5DevImportCheckerPlugin());
-
-	if (!transpile) {
-		plugins.push(json({
-			include: [
-				/.*assets\/.*\.json/,
-			],
-			namedExports: false,
-		}));
-	}
-
-	if (transpile) {
-		plugins.push(url({
-			limit: 0,
-			include: [
-				/.*assets\/.*\.json/,
-			],
-			emitFiles: true,
-			fileName: "[name].[hash][extname]",
-			publicPath,
-		}));
-	}
-
-	if (transpile) {
-		plugins.push(commonjs());
-		plugins.push(babel({
-			presets: ["@babel/preset-env"],
-			exclude: /node_modules\/(?!(lit-html|@ui5\/webcomponents))/, // exclude all node_modules/ except lit-html and all starting with @ui5/webcomponents
-			sourcemap: false,
-			babelHelpers: "bundled",
-		}));
-	}
-
-	plugins.push(nodeResolve());
-
-	if (!process.env.DEV) {
-		plugins.push(terser({
-			numWorkers: 1,
-		}));
-	}
-
-	const es6DevMain = process.env.DEV && !transpile && packageName === "@ui5/webcomponents";
-	if (es6DevMain && os.platform() !== "win32") {
-		plugins.push(livereload({
-			watch: [
-				"dist/resources/bundle.esm.js",
-				"dist/**/*.html",
-				"dist/**/*.json",
-			],
-		}));
-	}
-
-	if (process.env.DEV) {
-		plugins.push(ui5DevReadyMessagePlugin());
-	}
-
-	return plugins;
-};
-
-const getES6Config = (input = "bundle.esm.js") => {
-	return [{
-		input,
-		output: {
-			dir: "dist/resources",
-			format: "esm",
-			sourcemap: true,
-		},
-		moduleContext: id => {
-			if (typeof id === "string" && id.includes("url-search-params-polyfill")) {
-				// suppress the rollup error for this module as it uses this in the global scope correctly even without changing the context here
-				return "window";
-			}
-		},
-		watch: {
-			clearScreen: false,
-		},
-		plugins: getPlugins({ transpile: false }),
-		onwarn: onwarn,
-	}];
-};
-
-const getES5Config = (input = "bundle.es5.js") => {
-	return [{
-		input,
-		output: {
-			dir: "dist/resources",
-			format: "iife",
-			inlineDynamicImports: true,
-			name: "sap-ui-webcomponents-bundle",
-			extend: "true",	// Whether or not to extend the global variable defined by the name option in umd or iife formats.
-			sourcemap: true,
-		},
-		moduleContext: id => {
-			if (id.includes("url-search-params-polyfill")) {
-				// suppress the rollup error for this module as it uses this in the global scope correctly even without changing the context here
-				return "window";
-			}
-		},
-		watch: {
-			clearScreen: false,
-		},
-		plugins: getPlugins({ transpile: true }),
-		onwarn: onwarn,
-	}];
-};
-
-let config = getES6Config();
-
-if (process.env.ES5_BUILD && fs.existsSync("bundle.es5.js")) {
-	config = config.concat(getES5Config());
-}
-
-if (process.env.SCOPE) {
-	if (fs.existsSync("bundle.scoped.esm.js")) {
-		config = config.concat(getES6Config("bundle.scoped.esm.js"));
-
-		if (fs.existsSync("bundle.scoped.es5.js") && process.env.ES5_BUILD) {
-			config = config.concat(getES5Config("bundle.scoped.es5.js"));
-		}
-	}
-}
-
-module.exports = config;

package/lib/documentation/index.js

@@ -1,165 +0,0 @@
-const cssVariables = {};
-const template = require('./templates/template').template;
-const sinceTemplate = require('./templates/api-component-since').template;
-const propertiesTemplate = require('./templates/api-properties-section').template;
-const slotsTemplate = require('./templates/api-slots-section').template;
-const eventsTemplate = require('./templates/api-events-section').template;
-const methodsTemplate = require('./templates/api-methods-section').template;
-const cssVariablesTemplate = require('./templates/api-css-variables-section').template;
-const Handlebars = require('handlebars/dist/handlebars.min.js');
-const fs = require('fs');
-const path = require('path');
-const mkdirp = require('mkdirp');
-const beautify = require("json-beautify");
-
-
-const apiJSONPath = path.normalize(process.argv[2]);
-const api = JSON.parse(fs.readFileSync(apiJSONPath));
-
-fs.writeFileSync(apiJSONPath, beautify(api, null, 2, 100));
-
-const entries = api['symbols'];
-const compiledHandlebars = Handlebars.compile(template);
-const compiledSinceTemplate = Handlebars.compile(sinceTemplate);
-const linkMatcher = /{@link(\s)(\w+)\s*}/gi;
-const sinceMarker = "<!--since_tag_marker-->";
-
-const getComponentByName = name => {
-	return entries.find(element => {
-		return element.basename === name;
-	})
-};
-
-const getCSSVarsByName = name => {
-	return cssVariables[name] || [];
-};
-
-const capitalize = str => {
-	return str.replace(/^./, str => str.toUpperCase());
-};
-
-Handlebars.registerHelper('toLowerCase', function (str) {
-	return str ? str.toLowerCase() : "";
-});
-
-Handlebars.registerHelper('toKebabCase', function (str) {
-	const kebab = str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-	return kebab !== str ? kebab : undefined;
-});
-
-Handlebars.registerHelper('checkEven', function (iIndex) {
-	return (iIndex % 2 === 0) ? "api-table-roll-even" : "api-table-roll-odd";
-});
-
-Handlebars.registerPartial('properties', propertiesTemplate);
-Handlebars.registerPartial('slots', slotsTemplate);
-Handlebars.registerPartial('events', eventsTemplate);
-Handlebars.registerPartial('methods', methodsTemplate);
-Handlebars.registerPartial('cssVariables', cssVariablesTemplate);
-
-mkdirp.sync(`dist/test-resources/api`);
-
-let entriesAPI = [];
-
-const appendCSSVarsAPI = entry => {
-	entry.cssVariables = getCSSVarsByName(entry.basename);
-	return entry;
-}
-
-const componentHasEntityItem = (component, entity, name) => {
-	return component[entity].some(x => x && x.name === name);
-};
-const removeEmpty = arr => arr.filter(x => x);
-
-const calculateAPI = component => {
-	if (entriesAPI.indexOf(component.basename) !== -1) {
-		return component;
-	}
-	const entities = ["properties", "slots", "events", "methods", "cssVariables"];
-
-	// Initialize all entities with [] if necessary, and remove undefined things, and only leave public things
-	entities.forEach(entity => {
-		component[entity] = removeEmpty(component[entity] || []).filter(x => x.visibility === "public");
-	});
-
-	component = appendCSSVarsAPI(component);
-
-	let parent = getComponentByName(component.extends);
-	if (parent) {
-		let parentComponent = calculateAPI(parent);
-		entities.forEach(entity => {
-			parentComponent[entity].forEach( x => {
-				if (!componentHasEntityItem(component, entity, x.name)) {
-					component[entity].push(x);
-				}
-			});
-		});
-	}
-
-	entriesAPI.push(component.basename);
-
-	return component;
-};
-
-const appendAdditionalEntriesAPI = entry => {
-	if (entry.appenddocs) {
-		const additionalEntries = entry.appenddocs.split(" ");
-		entry.additionalDocs = [];
-
-		additionalEntries.forEach(entryName => {
-			let additionalEntry = getComponentByName(entryName);
-			additionalEntry = calculateAPI(additionalEntry);
-			entry.additionalDocs.push(additionalEntry);
-		});
-	}
-
-	return entry;
-}
-
-const generateSamplePage = entry => {
-	let content = "";
-
-	try {
-		content = fs.readFileSync(`dist/test-resources/samples/${capitalize(entry.basename)}.sample.html`, 'utf8');
-	} catch (err) { }
-
-	if (content) {
-		entry.slots.forEach(slotData => {
-			if (!slotData.type.startsWith("Node") && !slotData.type.startsWith("HTMLElement")) { // interface -> don't show in documentation
-				slotData.type = "HTMLElement" + (slotData.type.endsWith("[]") ? "[]" : "");
-			}
-		});
-		const APIReference = compiledHandlebars(entry).replace(/\[\]/g, " [0..n]");
-		const EntitySince = compiledSinceTemplate(entry).replace(/\[\]/g, " [0..n]");
-
-		content = content.replace('<!-- JSDoc marker -->', APIReference);
-		content = content.replace(sinceMarker, EntitySince);
-
-		content = content.replace(linkMatcher, match => {
-			const component = linkMatcher.exec(match)[2];
-
-			// reset the regex
-			linkMatcher.lastIndex = 0;
-
-			return `<a href="#" onclick="redirect(event, '${component}')">${component}</a>`;
-		});
-
-		fs.writeFile(`dist/test-resources/api/${entry.basename}.sample.html`, content, (err) => {
-			// console.log(err);
-		});
-	}
-}
-
-const generateComponentAPI = entry => {
-	// (1) calculate the API
-	entry = calculateAPI(entry);
-
-	// (2) append additional API for composition components - List -> ListIems, TabContainer -> Tabs, Table -> TableRow/Column/Cell
-	entry = appendAdditionalEntriesAPI(entry);
-
-	// (3) generate sample page
-	generateSamplePage(entry);
-}
-
-entries.forEach(generateComponentAPI);
-entriesAPI = [];

package/lib/documentation/templates/api-component-since.js

@@ -1,3 +0,0 @@
-module.exports = {
-	template: `{{#if this.since}}v{{this.since}}{{/if}}`
-};

package/lib/documentation/templates/api-css-variables-section.js

@@ -1,24 +0,0 @@
-module.exports = {
-    template: `
-      {{#if cssVariables}}
-        <h3 class="comment-api-title" >CSS variables</h3>
-        <p class="small-space-top">You can use the following CSS varialbes to change the component styling.</p>
-  
-        <div class="small-space-top api-table">
-          <div class="head api-table-header-roll">
-            <div class="cell api-table-header-cell">Name</div>
-            <div class="cell api-table-header-cell">Description</div>
-          </div>
-  
-          {{#each cssVariables}}
-            <div class="row {{checkEven @index}}">
-              <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-              <div class="cell api-table-content-cell api-table-content-cell-description">
-                  {{{this.description}}}
-              </div>
-            </div>
-          {{/each}}
-  
-        </div>
-      {{/if}}`
-};

package/lib/documentation/templates/api-events-section.js

@@ -1,35 +0,0 @@
-module.exports = {
-  template: `
-    {{#if events}}
-      <h3 class="comment-api-title space-top">Events</h3>
-      <p class="small-space-top" >This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as <code>addEventListener</code>. </p>
-
-      <div class="small-space-top api-table">
-        <div class="head api-table-header-roll">
-          <div class="cell api-table-header-cell">Name</div>
-          <div class="cell api-table-header-cell">Description</div>
-        </div>
-
-        {{#each events}}
-          <div class="row {{checkEven @index}}">
-            <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-            <div class="cell api-table-content-cell api-table-content-cell-description">
-            {{{this.description}}}
-            {{#if this.since}}
-                <div class="api-table-content-cell-bold api-table-content-cell-since">since v{{{this.since}}}</div>
-            {{/if}}
-            </div>
-          </div>
-
-          {{#each this.parameters}}
-            <tr class="api-table-event-param">
-              <div class="api-table-content-event-params-wrapper">
-                <div class="cell api-table-param-name api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-                <div class="cell api-table-event-param-cell api-table-content-cell api-table-content-cell-description"><strong class="bold" >type:</strong> {{this.type}} <br/> <strong class="api-table-event-description bold">description:</strong> {{{this.description}}}</div>
-              </div>
-            </tr>
-          {{/each}}
-        {{/each}}
-      </div>
-    {{/if}}`
-};

package/lib/documentation/templates/api-methods-section.js

@@ -1,26 +0,0 @@
-module.exports = {
-  template: `
-    {{#if methods}}
-      <h3 class="comment-api-title space-top">Methods</h3>
-      <p class="small-space-top" >This Web Component exposes public methods. You can invoke them directly on the Web Component instance.</p>
-
-      <div class="small-space-top api-table">
-        <div class="head api-table-header-roll">
-          <div class="cell api-table-header-cell">Name</div>
-          <div class="cell api-table-header-cell">Description</div>
-        </div>
-
-        {{#each methods}}
-          <div class="row {{checkEven @index}}">
-            <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-            <div class="cell api-table-content-cell api-table-content-cell-description">{{{this.description}}}</div>
-          </div>
-
-          {{#each this.parameters}}
-            <div class="cell api-table-content-cell api-table-content-cell-bold api-table-param-name">{{this.name}}</div>
-            <div class="cell api-table-event-param-cell api-table-content-cell api-table-content-cell-description"><strong class="bold" >type:</strong> {{this.type}} <br/> <strong class="api-table-event-description bold">description:</strong> {{{this.description}}}</div>
-          {{/each}}
-        {{/each}}
-      </div>
-    {{/if}}`
-};

package/lib/documentation/templates/api-properties-section.js

@@ -1,42 +0,0 @@
-module.exports = {
-  template: `
-    {{#if properties}}
-      <h3 class="comment-api-title" >Properties/Attributes</h3>
-      <p class="small-space-top" >You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.</p>
-
-      <div class="small-space-top api-table">
-        <div class="head api-table-header-roll">
-          <div class="cell api-table-header-cell">Name</div>
-          <div class="cell api-table-header-cell">Type</div>
-          <div class="cell api-table-header-cell">Default Value</div>
-          <div class="cell api-table-header-cell">Description</div>
-        </div>
-
-        {{#each properties}}
-          <div class="row {{checkEven @index}}">
-            <div class="cell api-table-content-cell api-table-content-cell-bold">
-              {{this.name}}
-              {{#if this.readonly}}
-                (readonly)
-              {{/if}}
-                <br>
-              {{#if (toKebabCase this.name)}}
-                  {{#unless this.noattribute}}
-                     <code>{{toKebabCase this.name}}</code>
-                 {{/unless}}
-              {{/if}}
-            </div>
-            <div class="cell api-table-content-cell">{{this.type}}</div>
-            <div class="cell api-table-content-cell">{{this.defaultValue}}</div>
-            <div class="cell api-table-content-cell api-table-content-cell-description">
-                {{{this.description}}}
-                {{#if this.since}}
-                    <div class="api-table-content-cell-bold api-table-content-cell-since">since v{{{this.since}}}</div>
-                {{/if}}
-            </div>
-          </div>
-        {{/each}}
-
-      </div>
-    {{/if}}`
-};

package/lib/documentation/templates/api-slots-section.js

@@ -1,28 +0,0 @@
-module.exports = {
-  template: `
-  {{#if slots}}
-    <h3 class="comment-api-title space-top" >Slots</h3>
-	<p class="small-space-top" >
-	  This Element provides slot(s). This means it can display its child nodes.<br>
-	  Unless targeting the default slot, use the <code>slot</code> attribute to define the destination slot for each child.<br>
-	  Text, along with HTML Elements with no <code>slot</code> attribute, goes the the <code>default</code> slot.
-	</p>
-
-    <div class="small-space-top api-table">
-      <div class="head api-table-header-roll">
-        <div class="cell api-table-header-cell">Slot</div>
-        <div class="cell api-table-header-cell">Type</div>
-        <div class="cell api-table-header-cell">Description</div>
-      </div>
-
-      {{#each slots}}
-        <div class="row {{checkEven @index}}">
-          <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-          <div class="cell api-table-content-cell">{{this.type}}</div>
-          <div class="cell api-table-content-cell api-table-content-cell-description">{{{this.description}}}</div>
-        </div>
-      {{/each}}
-
-    </div>
-  {{/if}}`
-};