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

packages/html/src/player/context.ts

@@ -1,5 +1,5 @@
-import { type Context, createContext } from '@lit/context';
 import type { AnyPlayerStore, PlayerStore } from '@videojs/core/dom';
+import { type Context, createContext } from '@videojs/element/context';
 
 export const PLAYER_CONTEXT_KEY = Symbol('@videojs/player');
 

packages/html/src/player/player-controller.ts

@@ -1,8 +1,8 @@
-import { ContextConsumer } from '@lit/context';
-import type { ReactiveController, ReactiveControllerHost } from '@lit/reactive-element';
 import type { PlayerStore } from '@videojs/core/dom';
+import type { ReactiveController, ReactiveControllerHost } from '@videojs/element';
+import { ContextConsumer } from '@videojs/element/context';
 import type { InferStoreState, Selector } from '@videojs/store';
-import { StoreController } from '@videojs/store/lit';
+import { StoreController } from '@videojs/store/html';
 
 import type { PlayerContext } from './context';
 

packages/html/src/store/container-mixin.ts

@@ -1,5 +1,5 @@
-import { ContextConsumer } from '@lit/context';
-import type { Media, MediaContainer, PlayerStore, PlayerTarget } from '@videojs/core/dom';
+import type { MediaContainer, PlayerStore, PlayerTarget } from '@videojs/core/dom';
+import { ContextConsumer } from '@videojs/element/context';
 import { noop } from '@videojs/utils/function';
 import type { MediaElementConstructor } from '@/ui/media-element';
 import type { PlayerContext } from '../player/context';
@@ -25,10 +25,6 @@ export function createContainerMixin<Store extends PlayerStore>(context: PlayerC
         return this.#consumer.value ?? null;
       }
 
-      protected createRenderRoot() {
-        return this;
-      }
-
       override connectedCallback() {
         super.connectedCallback();
 

packages/html/src/store/provider-mixin.ts

@@ -1,5 +1,5 @@
-import { ContextProvider } from '@lit/context';
 import type { PlayerStore } from '@videojs/core/dom';
+import { ContextProvider } from '@videojs/element/context';
 import { isNull } from '@videojs/utils/predicate';
 import type { MediaElementConstructor } from '@/ui/media-element';
 import type { PlayerContext } from '../player/context';
@@ -30,10 +30,6 @@ export function createProviderMixin<Store extends PlayerStore>(
         return this.#store;
       }
 
-      protected createRenderRoot() {
-        return this;
-      }
-
       override connectedCallback() {
         super.connectedCallback();
         this.#provider.setValue(this.store);

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;