feat(element): add lightweight reactive element base (#513)

packages/html/src/ui/fullscreen-button/fullscreen-button-element.ts

@@ -1,4 +1,3 @@
-import type { PropertyValues } from '@lit/reactive-element';
 import { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';
 import {
   applyElementProps,
@@ -7,6 +6,7 @@ import {
   logMissingFeature,
   selectFullscreen,
 } from '@videojs/core/dom';
+import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';
 
 import { playerContext } from '../../player/context';
 import { PlayerController } from '../../player/player-controller';
@@ -18,7 +18,7 @@ export class FullscreenButtonElement extends MediaElement {
   static override properties = {
     label: { type: String },
     disabled: { type: Boolean },
-  };
+  } satisfies PropertyDeclarationMap<keyof FullscreenButtonCore.Props>;
 
   label = FullscreenButtonCore.defaultProps.label;
   disabled = FullscreenButtonCore.defaultProps.disabled;

packages/html/src/ui/media-element.ts

@@ -1,10 +1,6 @@
-import { ReactiveElement } from '@lit/reactive-element';
+import { ReactiveElement } from '@videojs/element';
 import type { Constructor } from '@videojs/utils/types';
 
-export class MediaElement extends ReactiveElement {
-  protected createRenderRoot() {
-    return this;
-  }
-}
+export class MediaElement extends ReactiveElement {}
 
 export interface MediaElementConstructor extends Constructor<MediaElement> {}

packages/html/src/ui/mute-button/mute-button-element.ts

@@ -1,4 +1,3 @@
-import type { PropertyValues } from '@lit/reactive-element';
 import { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';
 import {
   applyElementProps,
@@ -7,6 +6,7 @@ import {
   logMissingFeature,
   selectVolume,
 } from '@videojs/core/dom';
+import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';
 
 import { playerContext } from '../../player/context';
 import { PlayerController } from '../../player/player-controller';
@@ -18,7 +18,7 @@ export class MuteButtonElement extends MediaElement {
   static override properties = {
     label: { type: String },
     disabled: { type: Boolean },
-  };
+  } satisfies PropertyDeclarationMap<keyof MuteButtonCore.Props>;
 
   label = MuteButtonCore.defaultProps.label;
   disabled = MuteButtonCore.defaultProps.disabled;

packages/html/src/ui/play-button/play-button-element.ts

@@ -1,4 +1,3 @@
-import type { PropertyValues } from '@lit/reactive-element';
 import { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';
 import {
   applyElementProps,
@@ -7,6 +6,7 @@ import {
   logMissingFeature,
   selectPlayback,
 } from '@videojs/core/dom';
+import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';
 
 import { playerContext } from '../../player/context';
 import { PlayerController } from '../../player/player-controller';
@@ -18,7 +18,7 @@ export class PlayButtonElement extends MediaElement {
   static override properties = {
     label: { type: String },
     disabled: { type: Boolean },
-  };
+  } satisfies PropertyDeclarationMap<keyof PlayButtonCore.Props>;
 
   label = PlayButtonCore.defaultProps.label;
   disabled = PlayButtonCore.defaultProps.disabled;

packages/html/src/ui/poster/poster-element.ts

@@ -1,6 +1,6 @@
-import type { PropertyValues } from '@lit/reactive-element';
 import { PosterCore, PosterDataAttrs } from '@videojs/core';
 import { applyStateDataAttrs, logMissingFeature, selectPlayback } from '@videojs/core/dom';
+import type { PropertyValues } from '@videojs/element';
 
 import { playerContext } from '../../player/context';
 import { PlayerController } from '../../player/player-controller';

packages/html/src/ui/time/time-element.ts

@@ -1,6 +1,6 @@
-import type { PropertyValues } from '@lit/reactive-element';
 import { TimeCore, TimeDataAttrs, type TimeType } from '@videojs/core';
 import { applyElementProps, applyStateDataAttrs, logMissingFeature, selectTime } from '@videojs/core/dom';
+import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';
 
 import { playerContext } from '../../player/context';
 import { PlayerController } from '../../player/player-controller';
@@ -13,7 +13,7 @@ export class TimeElement extends MediaElement {
     type: { type: String },
     negativeSign: { type: String, attribute: 'negative-sign' },
     label: { type: String },
-  };
+  } satisfies PropertyDeclarationMap<keyof TimeCore.Props>;
 
   type: TimeType = TimeCore.defaultProps.type;
   negativeSign = TimeCore.defaultProps.negativeSign;