[LiveComponent] TypeScript errors when subclassing live_controller

[boedah]

Hi!

I wanted to subclass live controller e.g. to be able to call _makeRequest via JavaScript or dispatch additional events.

When I use TypeScript via Webpack Encore and import LiveController from '@symfony/ux-live-component/src/live_controller';, the following errors remain:

ERROR in ./node_modules/@symfony/ux-live-component/src/live_controller.ts 11:0
Module parse failed: The keyword 'interface' is reserved (11:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { updateArrayDataFromChangedElement } from "./update_array_data";
|
> interface ElementLoadingDirectives {
|     element: HTMLElement|SVGElement,
|     directives: Directive[]

ERROR in ./node_modules/@symfony/ux-live-component/src/live_controller.ts 818:68-75
      TS2339: Property 'dataset' does not exist on type 'Element'.

ERROR in ./node_modules/@symfony/ux-live-component/src/normalize_attributes_for_comparison.ts
16:20-25
      TS2339: Property 'value' does not exist on type 'HTMLElement'.

ERROR in ./node_modules/@symfony/ux-live-component/src/normalize_attributes_for_comparison.ts
17:50-55
      TS2339: Property 'value' does not exist on type 'HTMLElement'.

Esp. the last three seem correct.

As you develop UX using TypeScript yourself, how do you not get these errors? :)

Another option would be to dispatch many more events during the live controller lifecycle, e.g.

• after the DOM has been updated (in my case to scroll to a specific spot in an overflown div)
• before/after an action is executed on the server component (with args)
• ...

Any ideas about the above issues are highly appreciated.

Cheers!