@ui5/create-webcomponents-package 0.0.0-1b5f0ec39 → 0.0.0-1c3388f4d

package/template/src/MyFirstComponent.ts

@@ -1,48 +1,56 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 
 // Template
-import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACKAGE_VAR_CLASS_NAMETemplate.lit.js";
+import {{INIT_PACKAGE_VAR_CLASS_NAME}}Template from "./{{INIT_PACKAGE_VAR_CLASS_NAME}}Template.js";
 
 // Styles
-import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
+import {{INIT_PACKAGE_VAR_CLASS_NAME}}Css from "./generated/themes/{{INIT_PACKAGE_VAR_CLASS_NAME}}.css.js";
 
-import { PLEASE_WAIT } from "./generated/i18n/i18n-defaults.js";
+import { COUNT } from "./generated/i18n/i18n-defaults.js";
 
 /**
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>INIT_PACKAGE_VAR_TAG</code> component is a demo component that displays some text.
+ * The <code>{{INIT_PACKAGE_VAR_TAG}}</code> component is a demo component that displays some text.
  *
  * @constructor
- * @alias demo.components.INIT_PACKAGE_VAR_CLASS_NAME
- * @extends sap.ui.webc.base.UI5Element
- * @tagname INIT_PACKAGE_VAR_TAG
+ * @extends UI5Element
  * @public
  */
 @customElement({
-	tag: "INIT_PACKAGE_VAR_TAG",
-	renderer: litRender,
-	styles: INIT_PACKAGE_VAR_CLASS_NAMECss,
-	template: INIT_PACKAGE_VAR_CLASS_NAMETemplate,
+	tag: "{{INIT_PACKAGE_VAR_TAG}}",
+	renderer: jsxRenderer,
+	styles: {{INIT_PACKAGE_VAR_CLASS_NAME}}Css,
+	template: {{INIT_PACKAGE_VAR_CLASS_NAME}}Template,
 })
-class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
+class {{INIT_PACKAGE_VAR_CLASS_NAME}} extends UI5Element {
+	@i18n("{{INIT_PACKAGE_VAR_NAME}}")
 	static i18nBundle: I18nBundle;
 
-	static async onDefine() {
-		INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
+	/**
+	 * Defines the component count.
+	 * @default 0
+	 * @public
+	 */
+	@property({ type: Number })
+	count = 0;
+
+	onClick() {
+		this.count++;
 	}
 
-	get pleaseWaitText() {
-		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(PLEASE_WAIT);
+	get counterText() {
+		return {{INIT_PACKAGE_VAR_CLASS_NAME}}.i18nBundle.getText(COUNT);
 	}
 }
 
-INIT_PACKAGE_VAR_CLASS_NAME.define();
+{{INIT_PACKAGE_VAR_CLASS_NAME}}.define();
 
-export default INIT_PACKAGE_VAR_CLASS_NAME;
+export default {{INIT_PACKAGE_VAR_CLASS_NAME}};

package/template/src/MyFirstComponentTemplate.tsx

@@ -0,0 +1,9 @@
+import type {{INIT_PACKAGE_VAR_CLASS_NAME}} from "./{{INIT_PACKAGE_VAR_CLASS_NAME}}.js";
+
+export default function {{INIT_PACKAGE_VAR_CLASS_NAME}}Template(this: {{INIT_PACKAGE_VAR_CLASS_NAME}}) {
+	return (
+		<div class="root" onClick={this.onClick}>
+			{this.counterText} :: {this.count}
+		</div>
+	);
+}

package/template/{bundle.esm.js → src/bundle.esm.ts}

@@ -6,15 +6,15 @@ import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
 import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
 import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
-import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
 
 // Enable additional themes and i18n texts
-import "./dist/Assets.js";
+import "./Assets.js";
 
-// Import your web components here from the dist/ directory
-import "./dist/INIT_PACKAGE_VAR_CLASS_NAME.js";
+// Import your web components here from the src/ directory
+import "./{{INIT_PACKAGE_VAR_CLASS_NAME}}.js";
 
+// @ts-expect-error
 window["sap-ui-webcomponents-bundle"] = {
 	renderFinished,
 	configuration: {
@@ -25,7 +25,6 @@ window["sap-ui-webcomponents-bundle"] = {
 		getNoConflict,
 		setNoConflict,
 		getCalendarType,
-		getRTL,
 		getFirstDayOfWeek,
 	},
 };

package/template/src/i18n/messagebundle.properties

@@ -1,2 +1,3 @@
-#please wait text for the sample component
-PLEASE_WAIT=wait
+# the "counter" text for the sample component
+COUNT=Count
+

package/template/src/i18n/messagebundle_de.properties

@@ -1 +1 @@
-PLEASE_WAIT=Bitte warten
+COUNT=Zählung

package/template/src/i18n/messagebundle_en.properties

@@ -1 +1 @@
-PLEASE_WAIT=Please wait
+COUNT=Count

package/template/src/i18n/messagebundle_es.properties

@@ -1 +1 @@
-PLEASE_WAIT=Espere
+COUNT=Cuenta

package/template/src/i18n/messagebundle_fr.properties

@@ -1 +1 @@
-PLEASE_WAIT=Patientez.
+COUNT=Comte

package/template/src/themes/MyFirstComponent.css

@@ -1,11 +1,17 @@
-:host {
-    border: 2px solid var(--my-component-border-color);
-    background-color: var(--sapBackgroundColor);
-    color: var(--sapTextColor);
-    display: block;
-    width: 24rem;
-    height: 3rem;
-    text-align: center;
-    vertical-align: middle;
-    line-height: 3rem;
+.root {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	padding: 0 2rem;
+	color: var(--sapAvatar_6_TextColor);
+	background-color: var(--sapAvatar_6_Background);
+	border: 2px solid var(--my-component-border-color);
+	border-radius: 0.5rem;
+	box-shadow: var(--sapContent_Shadow0);
+	text-align: center;
+	line-height: 3rem;
+	font-size: 1.25rem;
+	user-select: none;
+	cursor: pointer;
 }

package/template/src/themes/sap_horizon_dark/parameters-bundle.css

@@ -1,3 +1,3 @@
 :root {
-    --my-component-border-color: blue;
+    --my-component-border-color: darkblue;
 }

package/template/src/themes/sap_horizon_hcw/parameters-bundle.css

@@ -1,3 +1,3 @@
 :root {
-    --my-component-border-color: orange;
+    --my-component-border-color: black;
 }

package/template/tsconfig.template.json

@@ -0,0 +1,14 @@
+{
+	"extends": "@ui5/webcomponents-tools/tsconfig.json",
+	"include": [
+		"src/**/*",
+		"global.d.ts"
+	],
+	"compilerOptions": {
+		{{INIT_PACKAGE_CYPRESS_ROOT_TSCONFIG}}
+		"outDir": "dist",
+		"experimentalDecorators": true,
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext"
+	},
+}

package/template/vite.config.js

@@ -0,0 +1,14 @@
+import viteConfig from "@ui5/webcomponents-tools/components-package/vite.config.js"; //eslint-disable-line
+
+// Modifying the default Vite configuration provided by the @ui5/webcomponents-tools package.
+// You can directly access and update the properties you need to change.
+// Ensure that the property exists before modifying it to avoid unintended errors.
+// For available configuration options, refer to: https://vite.dev/config/#configuring-vite
+//
+// Ensure the plugins array exists
+// viteConfig.plugins = viteConfig.plugins || [];
+//
+// Push a new fake plugin
+// viteConfig.plugins.push({ name: 'my-custom-plugin' });
+
+export default viteConfig;

package/template/.eslintignore

@@ -1,5 +0,0 @@
-# Note: Changes to this file also must be applied to the top level .eslintignore file.
-dist
-test
-src/generated
-jsdoc-dist

package/template/config/postcss.components/postcss.config.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/postcss.components.js"); // eslint-disable-line

package/template/config/postcss.themes/postcss.config.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/postcss.themes.js"); // eslint-disable-line

package/template/config/wdio.conf.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/wdio.js"); // eslint-disable-line

package/template/global.d.ts

@@ -1,12 +0,0 @@
-// eslint-disable-next-line
-import "@ui5/webcomponents-base/dist/global";
-import { TemplateFunction } from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
-
-export {};
-
-declare global {
-	module "*.lit.js" {
-		const content: TemplateFunction;
-		export default content;
-	}
-}

package/template/src/Assets.js

@@ -1,5 +0,0 @@
-import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
-
-// own INIT_PACKAGE_VAR_NAME package assets
-import "./generated/json-imports/Themes.js";
-import "./generated/json-imports/i18n.js";

package/template/src/MyFirstComponent.hbs

@@ -1 +0,0 @@
-<div>This is: INIT_PACKAGE_VAR_TAG. {{pleaseWaitText}}</div>

package/template/src/MyFirstComponent.js

@@ -1,67 +0,0 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-
-// Template
-import INIT_PACKAGE_VAR_CLASS_NAMETemplate from "./generated/templates/INIT_PACKAGE_VAR_CLASS_NAMETemplate.lit.js";
-
-// Styles
-import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
-
-import { PLEASE_WAIT } from "./generated/i18n/i18n-defaults.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "INIT_PACKAGE_VAR_TAG",
-	properties: {
-	},
-	slots: {
-	},
-	events: {
-	},
-};
-
-/**
- * @class
- *
- * <h3 class="comment-api-title">Overview</h3>
- *
- * The <code>INIT_PACKAGE_VAR_TAG</code> component is a demo component that displays some text.
- *
- * @constructor
- * @alias demo.components.INIT_PACKAGE_VAR_CLASS_NAME
- * @extends sap.ui.webc.base.UI5Element
- * @tagname INIT_PACKAGE_VAR_TAG
- * @public
- */
-class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return INIT_PACKAGE_VAR_CLASS_NAMETemplate;
-	}
-
-	static get styles() {
-		return INIT_PACKAGE_VAR_CLASS_NAMECss;
-	}
-
-	static async onDefine() {
-		INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
-	}
-
-	get pleaseWaitText() {
-		return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(PLEASE_WAIT);
-	}
-}
-
-INIT_PACKAGE_VAR_CLASS_NAME.define();
-
-export default INIT_PACKAGE_VAR_CLASS_NAME;

package/template/src/themes/sap_fiori_3/parameters-bundle.css

@@ -1,3 +0,0 @@
-:root {
-    --my-component-border-color: green;
-}

package/template/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -1,3 +0,0 @@
-:root {
-    --my-component-border-color: blue;
-}

package/template/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -1,3 +0,0 @@
-:root {
-    --my-component-border-color: lightblue;
-}

package/template/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -1,3 +0,0 @@
-:root {
-    --my-component-border-color: gray;
-}

package/template/test/pages/index.html

@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-	<meta charset="utf-8">
-
-	<title>INIT_PACKAGE_VAR_TAG</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta charset="utf-8">
-
-	<script data-ui5-config type="application/json">
-		{
-			"language": "EN"
-		}
-	</script>
-
-	<script src="../../bundle.esm.js" type="module"></script>
-
-    <style>
-        code { color: blue; font-size: small; }
-    </style>
-
-</head>
-
-<body>
-	<ul>
-	    <li><a href="?sap-ui-theme=sap_fiori_3">Fiori 3</a></li>
-		<li><a href="?sap-ui-theme=sap_fiori_3_dark">Fiori 3 Dark</a></li>
-		<li><a href="?sap-ui-theme=sap_fiori_3_hcb">Fiori 3 High Contrast Black</a></li>
-		<li><a href="?sap-ui-theme=sap_fiori_3_hcw">Fiori 3 High Contrast White</a></li>
-		<li><a href="?sap-ui-theme=sap_horizon">Horizon</a></li>
-		<li><a href="?sap-ui-theme=sap_horizon_dark">Horizon Dark</a></li>
-		<li><a href="?sap-ui-theme=sap_horizon_hcb">Horizon High Contrast Black</a></li>
-		<li><a href="?sap-ui-theme=sap_horizon_hcw">Horizon High Contrast White</a></li>
-	</ul>
-    <br>
-    <span>or in the browser console, for example:</span>
-    <code>window['sap-ui-webcomponents-bundle'].configuration.setTheme("sap_horizon_hcb")</code>
-
-    <br><br>
-
-    <a href="?sap-ui-language=en">English</a> |
-    <a href="?sap-ui-language=de">German</a> |
-    <a href="?sap-ui-language=es">Spanish</a> |
-    <a href="?sap-ui-language=fr">French</a>
-
-    <br><br>
-
-    <h1>Test your web components here</h1>
-    <INIT_PACKAGE_VAR_TAG id="myFirstComponent"></INIT_PACKAGE_VAR_TAG>
-</body>
-
-</html>

package/template/test/specs/Demo.spec.js

@@ -1,14 +0,0 @@
-const assert = require("assert");
-
-describe("INIT_PACKAGE_VAR_TAG rendering", async () => {
-	before(async () => {
-		await browser.url("test/pages/index.html");
-	});
-
-	it("tests if web component is correctly rendered", async () => {
-
-		const innerContent = await browser.$("#myFirstComponent").shadow$("div");
-
-		assert.ok(innerContent, "content rendered");
-	});
-});

package/template/tsconfig.json

@@ -1,15 +0,0 @@
-{
-    "include": ["src/**/*", "global.d.ts"],
-    "compilerOptions": {
-      "target": "ES2021",
-      // Generate d.ts files
-      "declaration": true,
-      "outDir": "dist",
-      "skipLibCheck": true,
-      "sourceMap": true,
-      "inlineSources": true,
-      "strict": true,
-      "moduleResolution": "node",
-      "experimentalDecorators": true,
-    },
-}