feat: generate TS from HBS templates

[pskelin]

HBS templates are now compiled to TypeScript

• this is bound the the component instance and usage of members and events is type checked

• generated template signature now looks like this:
  function block0 (this: Button, context: UI5Element, tags: string[], suffix: string | undefined)
context is left for compatibility reasons, but the template uses this internally.

new render method

staitc getters are only used by the framework to retrieve the template. if writing a template by hand, it would be a class method and this usage would be correct. This is now also possible, a component can implement a render method, access this in it and return a template literal

class Button extends UI5Element {
    ...
    render() {
        return html`<button>${this.icon}</button>`
    }
}

Linking templates to components

There is no way to directly express which component is used for which template from the .hbs file itself. The current tooling relies on convention, so the template and the component must comply to the following rules:

• they must have the same name
• they must both be in the src folder (not in any subfolder)

example:

src/
   Input.ts
   Input.hbs

The tooling will generate a .ts file from the .hbs file, it will be created in src/generated/templates which is in .gitignore and it will have the correct import to src/Input.d.ts

Linking static area templates (popovers) to components

Components that have a static area template for popovers will have the following file structure

src/
   Input.ts
   Input.hbs
   InputPopover.hbs

There is no way to express the connection from InputPopover.hbs to Input.ts (the input component instance will be passed to the template as this). Instead of making up complex naming conventions, the tooling will look for a InputPopover.d.ts file in the same folder. It is up to the developer to create this file and export the Input type from it.

src/
   Input.ts
   Input.hbs
   InputPopover.d.ts
   InputPopover.hbs

and the content of InputPopover.d.ts

import type Input from "./Input";
export default Input;

fixes: #6394

[ilhan007]

There is also an issue #6394 to link