@ui5/webcomponents-tools 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/lib/create-new-component/tsFileContentTemplate.js

@@ -22,13 +22,10 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
  * For the <code>${tagName}</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import ${packageName}/dist/${componentName}.js";</code>
+ * <code>import "${packageName}/dist/${componentName}.js";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.${library}.${componentName}
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ${tagName}
+ * @extends UI5Element
  * @public
  */
 @customElement({
@@ -43,7 +40,6 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
  * Example custom event.
  * Please keep in mind that all public events should be documented in the API Reference as shown below.
  *
- * @event sap.ui.webc.${library}.${componentName}#interact
  * @public
  */
 @event("interact", { detail: { /* event payload ( optional ) */ } })
@@ -51,9 +47,7 @@ class ${componentName} extends UI5Element {
 	/**
 	 * Defines the value of the component.
 	 *
-	 * @type {string}
-	 * @name sap.ui.webc.${library}.${componentName}.prototype.value
-	 * @defaultvalue ""
+	 * @default ""
 	 * @public
 	 */
 	@property()
@@ -62,9 +56,6 @@ class ${componentName} extends UI5Element {
 	/**
 	 * Defines the text of the component.
 	 *
-	 * @type {Node[]}
-	 * @name sap.ui.webc.${library}.${componentName}.prototype.default
-	 * @slot
 	 * @public
 	 */
 	@slot({ type: Node, "default": true })

package/lib/css-processors/css-processor-component-styles.mjs

@@ -0,0 +1,48 @@
+import { globby } from "globby";
+import * as esbuild from 'esbuild'
+import * as fs from "fs";
+import * as path from "path";
+import { writeFile, mkdir } from "fs/promises";
+import scopeVariables from "./scope-variables.mjs";
+
+const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
+const inputFiles = await globby("src/styles/*.module.css");
+const restArgs = process.argv.slice(2);
+
+let componentStylesPlugin = {
+    name: 'component-styles',
+    setup(build) {
+        build.initialOptions.write = false;
+
+        build.onEnd(result => {
+            result.outputFiles.forEach(async f => {
+                // scoping
+                const newText = scopeVariables(f.text, packageJSON);
+                await mkdir(path.dirname(f.path), {recursive: true});
+                writeFile(f.path, newText);
+                writeFile(f.path.replace(".module.css", ".css"), newText);
+            });
+        })
+    },
+}
+
+const config = {
+    entryPoints: inputFiles,
+    outdir: 'dist',
+    bundle: true,
+    outbase: 'src',
+    loader: {
+        ".module.css": "global-css"
+    },
+    plugins: [
+        componentStylesPlugin,
+    ]
+};
+
+if (restArgs.includes("-w")) {
+    let ctx = await esbuild.context(config);
+    await ctx.watch()
+    console.log('watching...')
+} else {
+    await esbuild.build(config);
+}

package/lib/css-processors/scope-variables.mjs

@@ -1,4 +1,7 @@
 import * as path from "path";
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
 
 /**
  * Tries to detect an override for a package

package/lib/dev-server/ssr-dom-shim-loader.js

@@ -0,0 +1,26 @@
+const fs = require("fs");
+
+/**
+ * UI5Elements loads the ssr-dom.js file with a package specifier to use the export conditions
+ * in the package.json so that a shim for the dom can be loaded from SSR environments
+ * This however makes the TS Checker plugin used for development try to load the file from dist as input
+ * This plugin loads an empty file and TS ignores the file completely
+ */
+
+const ssrDomShimLoader = async () => {
+	return {
+		name: 'ssr-dom-shim-loader',
+		resolveId(id) {
+			if (id === "@ui5/webcomponents-base/dist/ssr-dom.js") {
+				return "\0shim"
+			}
+		},
+		load(id) {
+			if (id === "\0shim") {
+				return "";
+			}
+		}
+	}
+};
+
+module.exports = ssrDomShimLoader;

package/lib/generate-js-imports/illustrations.js

@@ -21,12 +21,12 @@ const generateAvailableIllustrationsArray = (fileNames, exclusionPatterns = [])
   );
 };
 
-const generateDynamicImportsFileContent = (dynamicImports, availableIllustrations, collection, prefix = "") => {
+const generateDynamicImportsFileContent = (dynamicImports, availableIllustrations, collection, set, prefix = "") => {
   return `// @ts-nocheck
   import { registerIllustrationLoader } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
 
 export const loadIllustration = async (illustrationName) => {
-  const collectionAndPrefix = "${collection}/${prefix}";
+  const collectionAndPrefix = "${set}/${collection}/${prefix}";
   const cleanIllustrationName = illustrationName.startsWith(collectionAndPrefix) ? illustrationName.replace(collectionAndPrefix, "") : illustrationName;
   switch (cleanIllustrationName) {
 ${dynamicImports}
@@ -41,7 +41,7 @@ const loadAndCheck = async (illustrationName) => {
 };
 
 ${availableIllustrations}.forEach((illustrationName) =>
-  registerIllustrationLoader(\`${collection}/${prefix}\${illustrationName}\`, loadAndCheck)
+  registerIllustrationLoader(\`${set}/${collection}/${prefix}\${illustrationName}\`, loadAndCheck)
 );
 `;
 };
@@ -52,7 +52,7 @@ const getMatchingFiles = async (folder, pattern) => {
 };
 
 const generateIllustrations = async (config) => {
-  const { inputFolder, outputFile, collection, location, prefix, filterOut } = config;
+  const { inputFolder, outputFile, collection, location, prefix, filterOut, set } = config;
 
   const normalizedInputFolder = path.normalize(inputFolder);
   const normalizedOutputFile = path.normalize(outputFile);
@@ -62,7 +62,7 @@ const generateIllustrations = async (config) => {
   const dynamicImports = await generateDynamicImportLines(illustrations, location, filterOut);
   const availableIllustrations = generateAvailableIllustrationsArray(illustrations, filterOut);
 
-  const contentDynamic = generateDynamicImportsFileContent(dynamicImports, availableIllustrations, collection, prefix);
+  const contentDynamic = generateDynamicImportsFileContent(dynamicImports, availableIllustrations, collection, set, prefix);
 
   await fs.mkdir(path.dirname(normalizedOutputFile), { recursive: true });
   await fs.writeFile(normalizedOutputFile, contentDynamic);
@@ -74,10 +74,10 @@ const generateIllustrations = async (config) => {
 const config = {
   inputFolder: process.argv[2],
   outputFile: process.argv[3],
-  collection: process.argv[4],
-  location: process.argv[5],
-  prefix: process.argv[6],
-  filterOut: process.argv.slice(7),
+  set: process.argv[4],
+  collection: process.argv[5],
+  location: process.argv[6],
+  filterOut: process.argv.slice[7],
 };
 
 // Run the generation process

package/lib/generate-json-imports/i18n.js

@@ -9,7 +9,6 @@ const generate = async () => {
 	const packageName = JSON.parse(await fs.readFile("package.json")).name;
 
 	const inputFolder = path.normalize(process.argv[2]);
-	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
@@ -19,46 +18,16 @@ const generate = async () => {
 		return matches ? matches[1] : undefined;
 	}).filter(key => !!key);
 
-	let contentStatic, contentDynamic;
+	let 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");
 
@@ -76,7 +45,7 @@ import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registrie
 	const importAndCheck = async (localeId) => {
 		const data = await importMessageBundle(localeId);
 		if (typeof data === "string" && data.endsWith(".json")) {
-			throw new Error(\`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
+			throw new Error(\`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.\`);
 		}
 		return data;
 	}
@@ -91,9 +60,8 @@ import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registrie
 
 	}
 
-	await fs.mkdir(path.dirname(outputFile), { recursive: true });
+	await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
 	return Promise.all([
-		fs.writeFile(outputFile, contentStatic),
 		fs.writeFile(outputFileDynamic, contentDynamic),
 	]);
 }

package/lib/generate-json-imports/themes.js

@@ -7,7 +7,6 @@ const ext = isTypeScript ? 'ts' : 'js';
 
 const generate = async () => {
 	const inputFolder = path.normalize(process.argv[2]);
-	const outputFile = path.normalize(`${process.argv[3]}/Themes-static.${ext}`);
 	const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.${ext}`);
 
 // All supported optional themes
@@ -22,34 +21,9 @@ 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";
@@ -64,7 +38,7 @@ ${dynamicImportLines}
 const loadAndCheck = async (themeName) => {
 	const data = await loadThemeProperties(themeName);
 	if (typeof data === "string" && data.endsWith(".json")) {
-		throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
+		throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.\`);
 	}
 	return data;
 };
@@ -73,9 +47,8 @@ ${availableThemesArray}
   .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
 `;
 
-	await fs.mkdir(path.dirname(outputFile), { recursive: true });
+	await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
 	return Promise.all([
-		fs.writeFile(outputFile, contentStatic),
 		fs.writeFile(outputFileDynamic, contentDynamic)
 	]);
 };

package/lib/i18n/defaults.js

@@ -31,7 +31,7 @@ const generate = async () => {
 	// (2) as the messagebundle.properties file is always written in English,
 	// it makes sense to consider the messagebundle.properties content only when the default language is "en".
 	if (defaultLanguage === "en") {
-		defaultLanguageProperties = Object.assign({}, defaultLanguageProperties, properties);  
+		defaultLanguageProperties = Object.assign({}, defaultLanguageProperties, properties);
 	}
 
 	/*

package/lib/remove-dev-mode/remove-dev-mode.mjs

@@ -0,0 +1,37 @@
+import { globby } from "globby";
+import * as esbuild from 'esbuild'
+import * as fs from "fs";
+
+let customPlugin = {
+    name: 'ui5-tools',
+    setup(build) {
+        build.onLoad({ filter: /UI5Element.ts$/ }, async (args) => {
+          let text = await fs.promises.readFile(args.path, 'utf8');
+          text = text.replaceAll(/const DEV_MODE = true/g, "");
+          text = text.replaceAll(/if \(DEV_MODE\)/g, "if (false)");
+          return {
+            contents: text,
+            loader: 'ts',
+          }
+        })
+      },
+}
+
+const getConfig = async () => {
+    const config = {
+        entryPoints: await globby("src/**/*.ts"),
+        bundle: false,
+        minify: true,
+        sourcemap: true,
+        outdir: 'dist/prod',
+        outbase: 'src',
+        plugins: [
+            customPlugin,
+        ]
+    };
+    return config;
+}
+
+
+const config = await getConfig();
+const result = await esbuild.build(config);

package/lib/scoping/lint-src.js

@@ -7,25 +7,26 @@ const tags = getAllTags(process.cwd());
 
 const errors = [];
 
+const removeComments = str => str.replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "");
+
 glob.sync(path.join(process.cwd(), "src/**/*.css")).forEach(file => {
-	let content = String(fs.readFileSync(file));
+	let content = removeComments(String(fs.readFileSync(file)));
 	tags.forEach(tag => {
 		if (content.match(new RegExp(`(^|[^\.\-_A-Za-z0-9"\[])(${tag})([^\-_A-Za-z0-9]|$)`, "g"))) {
-			errors.push(`Warning! ${tag} found in ${file}`);
+			errors.push(`${tag} found in ${file}`);
 		}
 	});
 });
 
-glob.sync(path.join(process.cwd(), "src/**/*.js")).forEach(file => {
-	let content = String(fs.readFileSync(file));
+glob.sync(path.join(process.cwd(), "src/**/*.ts")).forEach(file => {
+	let content = removeComments(String(fs.readFileSync(file)));
 	tags.forEach(tag => {
 		if (content.match(new RegExp(`querySelector[A-Za-z]*..${tag}`, "g"))) {
-			errors.push(`Warning! querySelector for ${tag} found in ${file}`);
+			errors.push(`querySelector for ${tag} found in ${file}`);
 		}
 	});
 });
 
 if (errors.length) {
-	errors.forEach(error => console.log(error));
-	throw new Error("Errors found.");
+	throw new Error(`Scoping-related errors found (f.e. used ui5-input instead of [ui5-input]): \n ${errors.join("\n")}`);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-d9b978d1d",
+  "version": "0.0.0-da0d3eb88",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -21,6 +21,7 @@
     "directory": "packages/tools"
   },
   "dependencies": {
+    "@custom-elements-manifest/analyzer": "^0.8.4",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
     "@wdio/cli": "^7.19.7",
@@ -29,13 +30,17 @@
     "@wdio/mocha-framework": "^7.19.7",
     "@wdio/spec-reporter": "^7.19.7",
     "@wdio/static-server-service": "^7.19.5",
+    "ajv": "^8.12.0",
+    "cem-plugin-vs-code-custom-data-generator": "^1.4.2",
     "chai": "^4.3.4",
     "child_process": "^1.0.2",
     "chokidar": "^3.5.1",
     "chokidar-cli": "^3.0.0",
     "command-line-args": "^5.1.1",
+    "comment-parser": "^1.4.0",
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
+    "custom-element-jet-brains-integration": "^1.4.4",
     "escodegen": "^2.0.0",
     "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",
@@ -47,7 +52,6 @@
     "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",
     "nps": "^5.10.0",