docs: clean up HBS references (#12168)

Author: ilhan007

docs/4-development/01-package.md

@@ -4,7 +4,7 @@ sidebar_label: Create Web Components Project
 
 # Create UI5 Web Components Project (Package)
 
-This tutorial explains how to create web components project, ready to be published as NPM package, on top of the  UI5 Web Components framework (`@ui5/webcomponents-base`) and tools (`@ui5/webcomponents-tools`) to make use of development server, theming, HBS template support, i18n, test setup, etc.
+This tutorial explains how to create web components project, ready to be published as NPM package, on top of the  UI5 Web Components framework (`@ui5/webcomponents-base`) and tools (`@ui5/webcomponents-tools`) to make use of development server, theming, JSX template support, i18n, test setup, etc.
 
 ## Initialize New Project
 
@@ -176,7 +176,7 @@ The main files describing a Web Component are:
 | File                       | Purpose        |
 |----------------------------|----------------|
 | `src/MyComponent.js`  | Web Component class |
-| `src/MyComponent.hbs` | Handlebars template |
+| `src/MyComponentTemplate.tsx` | JSX template |
 
 In order to understand how a UI5 Web Component works and what lies behind these two files, read the next articles
 to understand more about [Developing web components](./02-component.md).

docs/4-development/02-component.md

@@ -109,26 +109,6 @@ class MyDemoComponent extends UI5Element {
 
 **Note:** The build scripts automatically transpile your `.css` files to JavaScript files. For example, your `my-package/src/theme/MyDemoComponent.css` will be transpiled to `my-package/src/generated/themes/MyDemoComponent.css.ts`, which, in addition to your component's CSS, also contains definitions for all CSS variables for the default theme.
 
-### dependencies
-This option accepts an array of dependencies, which are all other web components used inside the `.hbs` template file. Without this, the internally used web components won't be defined.
-
-Furthermore, to utilize the Scoping feature, you must list all the internally used web components in the `dependencies` static getter. The framework reads the dependencies and scopes the tag names of the listed web components.
-
-For example, if the `ui5-icon` tag (or any other standard or custom UI5 Web Component) is used inside the template, you must import the `Icon` web component and add it to the `dependencies` static getter as shown:
-
-```ts
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-
-@customElement({
-    dependencies: [Icon]
-})
-class MyDemoComponent extends UI5Element {
-    // class implementation
-}
-```
-
 ### languageAware
 This option accepts a boolean value and determines if the component should be re-rendered whenever the language changes. Use this setting if your component has translatable texts and needs to be re-rendered when the app changes the language.
 

docs/4-development/04-slots.md

@@ -9,13 +9,12 @@ Currently, there are two types of slots: "named" and "unnamed". The difference b
 ## Unnamed slots
 
 Use unnamed slots when your component doesn't need to be aware of or interact with the children passed to a specific slot.
-To define an unnamed slot, simply add a `<slot>` element within your `.hbs` template. For example:
+To define an unnamed slot, simply add a `<slot>` element within your template. For example:
 
-```hbs
-{{!-- MyDemoComponent.hbs --}}
-<div>
-   <slot name="mySlot"></slot>
-</div>
+```tsx
+export default function MyDemoComponentTemplate() {
+	return <div><slot name="mySlot"></slot></div>;
+}
 ```
 
 On the consuming side, elements can be passed to this slot using the `slot` attribute:
@@ -118,10 +117,14 @@ class MyDemoComponent extends UI5Element {
 
 To render individual slots, you have to iterate all children in that slot and use the `_individualSlot` property that the framework sets automatically on each child:
 
-```hbs
-{{#each mySlot}}
-    <slot name="{{this._individualSlot}}"></slot>
-{{/each}}
+```tsx
+export default function MyDemoComponentTemplate() {
+	return (
+		<div>
+			{ this.mySlot.map(mySlotEl => <slot name={mySlotEl._individualSlot}></slot>)}
+		</div>
+	);
+}
 ```
 
 **Note:** When this option is set to `true`, the `_individualSlot` property is set to each direct child, where `_individualSlot` returns a string following the pattern `{nameOfTheSlot}-{index}` and the slot attribute is changed based on that pattern.