@ui5/webcomponents-tools 2.1.0 → 2.2.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.1.1...v2.2.0-rc.0) (2024-08-08)
+
+
+### Features
+
+* **core:** add asset files with fetch URLs ([#9591](https://github.com/SAP/ui5-webcomponents/issues/9591)) ([f039cf6](https://github.com/SAP/ui5-webcomponents/commit/f039cf6e96e43fbc45e55e53871c91c9ee8e4179))
+
+
+
+
+
+## [2.1.1](https://github.com/SAP/ui5-webcomponents/compare/v2.1.0...v2.1.1) (2024-08-02)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
 # [2.1.0](https://github.com/SAP/ui5-webcomponents/compare/v2.1.0-rc.3...v2.1.0) (2024-08-02)
 
 **Note:** Version bump only for package @ui5/webcomponents-tools

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

@@ -5,6 +5,7 @@
     <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>

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

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+import { RenderOptions, HTMLTemplateResult } from 'lit';
+export type Renderable = HTMLTemplateResult;
+export interface MountUI5Options extends MountLitTemplateOptions {
+    ui5Configuration: object;
+}
+export type MountOptions = Partial<MountUI5Options>;
+export declare function mount<T extends keyof HTMLElementTagNameMap = any>(component: string | Renderable, options?: MountOptions): Cypress.Chainable<JQuery<HTMLElementTagNameMap[T]>>;
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            /**
+             * Mount your component into Cypress sandbox
+             * @param component content to render by lit-html render function
+             * @param options render options for custom rendering
+             */
+            mount: typeof mount;
+        }
+    }
+}

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

@@ -1,4 +1,34 @@
+import { setupHooks } from '@cypress/mount-utils';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { mount } from 'cypress-ct-lit'
 import "./commands.js";
 
-Cypress.Commands.add('mount', mount)
+let dispose;
+
+function cleanup() {
+	dispose?.();
+}
+
+function ui5Mount(component, options = {}) {
+	const configurationScript = document.head.querySelector("script[data-ui5-config]")
+	cleanup();
+
+	if (options.ui5Configuration) {
+		configurationScript.innerHTML = JSON.stringify(options.ui5Configuration);
+
+	}
+
+	dispose = () => {
+		configurationScript.innerHTML = "{}";
+	}
+
+	if (typeof component === "string") {
+		return mount(unsafeHTML(component), options)
+	}
+
+	return mount(component, options)
+}
+
+setupHooks(cleanup);
+
+Cypress.Commands.add('mount', ui5Mount)

package/components-package/cypress.config.js

@@ -6,7 +6,7 @@ module.exports = defineConfig({
   component: {
     supportFile: path.join(__dirname, "cypress/support/component.js"),
     indexHtmlFile: path.join(__dirname, "cypress/support/component-index.html"),
-    specPattern: "test/specs/*.cy.js",
+    specPattern: "**/specs/*.cy.{js,ts}",
     devServer: {
       framework: 'cypress-ct-lit',
       bundler: 'vite',

package/components-package/eslint.js

@@ -14,7 +14,10 @@ const overrides = tsMode ? [{
 		"plugin:@typescript-eslint/recommended-requiring-type-checking"
 	],
 	parserOptions: {
-	  "project": ["./tsconfig.json", "./packages/*/tsconfig.json"],
+	  "project": [
+		"./tsconfig.json",
+		"./cypress/tsconfig.json",
+	],
 	  EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
 	},
 	rules: {

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

@@ -4,14 +4,43 @@ const path = require('path');
 const isTypeScript = process.env.UI5_TS;
 const ext = isTypeScript ? 'ts' : 'js';
 
+
+const getContent = function(caseLines, languagesKeysStringArray, packageName) {
+	return `// @ts-nocheck
+import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
+
+const importMessageBundle = async (localeId) => {
+	switch (localeId) {
+		${caseLines}
+		default: throw "unknown locale"
+	}
+}
+
+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. Check the \"Assets\" documentation for more information.\`);
+	}
+	return data;
+}
+
+const localeIds = [${languagesKeysStringArray}];
+
+localeIds.forEach(localeId => {
+	registerI18nLoader("${packageName}", localeId, importAndCheck);
+});
+`;
+}
+
 const generate = async () => {
 
 	const packageName = JSON.parse(await fs.readFile("package.json")).name;
 
 	const inputFolder = path.normalize(process.argv[2]);
 	const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.${ext}`);
+	const outputFileFetchMetaResolve = path.normalize(`${process.argv[3]}/i18n-fetch.${ext}`);
 
-// All languages present in the file system
+	// All languages present in the file system
 	const files = await fs.readdir(inputFolder);
 	const languages = files.map(file => {
 		const matches = file.match(/messagebundle_(.+?).json$/);
@@ -19,50 +48,32 @@ const generate = async () => {
 	}).filter(key => !!key);
 
 	let contentDynamic;
+	let contentFetchMetaResolve;
 
-// No i18n - just import dependencies, if any
+	// No i18n - just import dependencies, if any
 	if (languages.length === 0) {
 		contentDynamic = "";
-// There is i18n - generate the full file
+		contentFetchMetaResolve = "";
+	// There is i18n - generate the full file
 	} else {
 		// Keys for the array
 		const languagesKeysStringArray = languages.map(key => `"${key}",`).join("\n\t");
 
 		// 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");
+		const fetchMetaResolveString = languages.map(key => `		case "${key}": return (await fetch(new URL("../assets/i18n/messagebundle_${key}.json", import.meta.url))).json();`).join("\n");
 
 		// Resulting file content
-		contentDynamic = `// @ts-nocheck
-import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
-
-	const importMessageBundle = async (localeId) => {
-		switch (localeId) {
-	${dynamicImportsString}
-			default: throw "unknown locale"
-		}
-	}
-
-	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. Check the \"Assets\" documentation for more information.\`);
-		}
-		return data;
-	}
-
-	const localeIds = [${languagesKeysStringArray}];
-
-	localeIds.forEach(localeId => {
-		registerI18nLoader("${packageName}", localeId, importAndCheck);
-	});
-	`;
 
+		contentDynamic = getContent(dynamicImportsString, languagesKeysStringArray, packageName);
+		contentFetchMetaResolve = getContent(fetchMetaResolveString, languagesKeysStringArray, packageName);
 
 	}
 
 	await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
 	return Promise.all([
 		fs.writeFile(outputFileDynamic, contentDynamic),
+		fs.writeFile(outputFileFetchMetaResolve, contentFetchMetaResolve),
 	]);
 }
 

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

@@ -8,6 +8,7 @@ const ext = isTypeScript ? 'ts' : 'js';
 const generate = async () => {
 	const inputFolder = path.normalize(process.argv[2]);
 	const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.${ext}`);
+	const outputFileFetchMetaResolve = path.normalize(`${process.argv[3]}/Themes-fetch.${ext}`);
 
 // All supported optional themes
 	const allThemes = assets.themes.all;
@@ -23,14 +24,16 @@ const generate = async () => {
 
 	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");
+	const fetchMetaResolveLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await fetch(new URL("../assets/themes/${theme}/parameters-bundle.css.json", import.meta.url))).json();`).join("\n");
 
 // dynamic imports file content
-	const contentDynamic = `// @ts-nocheck
+	const contentDynamic = function (lines) {
+		return `// @ts-nocheck
 import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
 
 const loadThemeProperties = async (themeName) => {
 	switch (themeName) {
-${dynamicImportLines}
+${lines}
 		default: throw "unknown theme"
 	}
 };
@@ -46,10 +49,12 @@ const loadAndCheck = async (themeName) => {
 ${availableThemesArray}
   .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
 `;
+	}
 
 	await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
 	return Promise.all([
-		fs.writeFile(outputFileDynamic, contentDynamic)
+		fs.writeFile(outputFileDynamic, contentDynamic(dynamicImportLines)),
+		fs.writeFile(outputFileFetchMetaResolve, contentDynamic(fetchMetaResolveLines)),
 	]);
 };
 

package/lib/hbs2ui5/RenderTemplates/LitRenderer.js

@@ -3,11 +3,11 @@ const tsImports = (controlName, hasTypes) => {
 		return "";
 	}
 
-	const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
+	const importPrefix = process.env.UI5_BASE ? "../../../../../src/" : "@ui5/webcomponents-base/dist/"
 
 	return `import type UI5Element from "${importPrefix}UI5Element.js";
-	${importForControl(controlName, hasTypes)}
-	import type { ClassMapValue } from "${importPrefix}types.js";
+${importForControl(controlName, hasTypes)}
+import type { ClassMapValue } from "${importPrefix}types.js";
 	`;
 }
 const importForControl = (controlName, hasTypes) => {
@@ -18,13 +18,13 @@ const importForControl = (controlName, hasTypes) => {
 
 	if (process.env.UI5_BASE) {
 		// base package has a component in `test/elements` instead of `src`
-		return `import type ${controlName} from "../../../../test/elements/${controlName}.js";`
+		return `import type ${controlName} from "../../../${controlName}.js";`
 	}
 	return `import type ${controlName} from "../../${controlName}.js";`
 }
 
 const buildRenderer = (controlName, litTemplate, hasTypes) => {
-	const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
+	const importPrefix = process.env.UI5_BASE ? "../../../../../src/" : "@ui5/webcomponents-base/dist/"
 
 	// typescript cannot process package imports for the same package and the paths are changed to relative for base package templates
 	return `/* eslint no-unused-vars: 0 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "2.1.0",
+  "version": "2.2.0-rc.0",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -10,6 +10,7 @@
     "sapui5",
     "ui5"
   ],
+  "types": "./types/index.d.ts",
   "scripts": {},
   "bin": {
     "wc-dev": "bin/dev.js",
@@ -84,5 +85,5 @@
     "esbuild": "^0.19.9",
     "yargs": "^17.5.1"
   },
-  "gitHead": "3eecdf86ea2ce8b11a56e6a12adcf46fcb1f7600"
+  "gitHead": "8955aa596143ba93da03d4e6cf2bd547993c59c2"
 }

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"compilerOptions": {
+		"target": "ES2021",
+		"lib": [
+			"DOM",
+			"DOM.Iterable",
+			"ES2023"
+		],
+		"declaration": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"inlineSources": true,
+		"strict": true,
+		"moduleResolution": "node"
+	}
+}

package/types/index.d.ts

@@ -0,0 +1 @@
+import "../components-package/cypress/support/component"