feat(framework): add JSX template support with TypeScript

[pskelin]

JSX templates

This change is introducing JSX support for web component templates with full TypeScript support. Main benefits include

• code completion for properties, events and values
• type checking
• navigation from template to component with click
• easier debugging
• reduced bundle size

Docs:

https://github.com/SAP/ui5-webcomponents/blob/f6ec6aba443e0e2dc048439e931361e1cf4b2c04/docs/4-development/08-templates.md

Status

• configure packages tsconfig with correct JSX settings
• add a jsx-runtime (preact with patches) for working DOM updates
• automate creation of JSX prop types from class props
• add eventDetails to describe event names and event parameter types
• add generation of event handler properties from eventDetails (onSelectionChange={ (e) => { e.detail } })
• scoping of elements and events (<ui5-button-scoped>, ui5-selection-change event)
• @bound decorator for methods accessing this and dev check
• Templating best practices
  • accessing state in the template - use this parameter
  • use properties instead of attributes (and dev time warning)
  • component usage in templates (import class)
  • add key={} when iterating (items.map)
  • class attribute accepts an object of type Record<string, boolean> adding a class for each truthy value
  • write class and style objects inline in the template
  • writing partials and extending templates
  • using ref to get a DOM node instance
  • icon usage with the exported name
• 1st wave components conversion
• add docs
• describe thirdparty
• what to do with JSX.AriaRole ?

in follow up changes:

• TSX in cypress tests
• TSX in playground
• more components
• JS consumption

Size improvements

label	gzip main	gzip fiori
before	364.75 kB	620.38 kB
after	355.59 kB	603.66 kB
delta	-9.16 kB	-16.72 kB

A note for component developers

If you are developing components, HBS support is deprecated, but will not be removed until the next major release. You should still consider migrating to JSX for the benefits listed above.

If you are extending components from this repo without modifying the template, you can just switch the renderer to JSXRenderer from LitRenderer and the rest remains the same.

If you are extending the templates of components from this repo (or others migrated to JSX), you will need to switch to JSX as well, since implementation of partials is specific to the templating technology.

Fixes: #7896

[ui5-webcomponents-bot]

🎉 This PR is included in version v2.6.0-rc.0 🎉

The release is available on v2.6.0-rc.0

Your semantic-release bot 📦🚀