feat(create-package): generate jsx component template (SAP#10531)

Running npm init @ui5/webcomponents-package will generate jsx component template (previously hbs template).
plamenivanov91 · Jan 13, 2025 · dd2d45d · dd2d45d
1 parent a38a28e
commit dd2d45d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/packages/create-package/template/src/MyFirstComponent.hbs b/packages/create-package/template/src/MyFirstComponent.hbs
diff --git a/packages/create-package/template/src/MyFirstComponent.ts b/packages/create-package/template/src/MyFirstComponent.ts
@@ -1,12 +1,12 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.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_NAMETemplate from "./INIT_PACKAGE_VAR_CLASS_NAMETemplate.js";
 
 // Styles
 import INIT_PACKAGE_VAR_CLASS_NAMECss from "./generated/themes/INIT_PACKAGE_VAR_CLASS_NAME.css.js";
@@ -26,17 +26,14 @@ import { COUNT } from "./generated/i18n/i18n-defaults.js";
  */
 @customElement({
 	tag: "INIT_PACKAGE_VAR_TAG",
-	renderer: litRender,
+	renderer: jsxRenderer,
 	styles: INIT_PACKAGE_VAR_CLASS_NAMECss,
 	template: INIT_PACKAGE_VAR_CLASS_NAMETemplate,
 })
 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

diff --git a/packages/create-package/template/src/MyFirstComponentTemplate.tsx b/packages/create-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_NAMETemplate(this: INIT_PACKAGE_VAR_CLASS_NAME) {
+	return (
+		<div class="root" onClick={this.onClick}>
+			{this.counterText} :: {this.count}
+		</div>
+	);
+}