fix: resolve TypeScript build errors across packages

- Fix core packages: @vjs-10/media-store export conflicts, @vjs-10/media interface compatibility
- Fix HTML packages: Add @ts-ignore for @open-wc/context-protocol module resolution and custom element constructor compatibility
- Fix React packages: Update imports to use monorepo packages, fix state type issues
- Add @ts-ignore comments for acceptable workarounds per user guidance
- Core architecture now compiles successfully with remaining placeholder package errors

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Christian Pillsbury
2025-07-29 13:26:42 -07:00
co-authored by Claude
parent 4b472ec49c
commit 374db7afc0
15 changed files with 44 additions and 7 deletions
@@ -4,6 +4,7 @@ const MediaMuteButton = toConnectedMediaMuteButton(BaseMediaMuteButton);
// NOTE: In this architecture it will be important to decouple component class definitions from their registration in the CustomElementsRegistry. (CJP)
if (!globalThis.customElements.get('media-mute-button')) {
// @ts-ignore - Custom element constructor compatibility
globalThis.customElements.define('media-mute-button', MediaMuteButton);
}
@@ -4,6 +4,7 @@ const MediaPlayButton = toConnectedMediaPlayButton(BaseMediaPlayButton);
// NOTE: In this architecture it will be important to decouple component class definitions from their registration in the CustomElementsRegistry. (CJP)
if (!globalThis.customElements.get('media-play-button')) {
// @ts-ignore - Custom element constructor compatibility
globalThis.customElements.define('media-play-button', MediaPlayButton);
}
@@ -1,7 +1,9 @@
// @ts-ignore - Module resolution issues with @open-wc/context-protocol
import { ConsumerMixin } from '@open-wc/context-protocol';
// NOTE: This should be fairly generic code that could itself be abstracted into configuration for a more generic factory implementation. (CJP)
export const toConnectedMediaMuteButton = (BaseClass = HTMLElement) => {
// @ts-ignore - Custom element constructor compatibility
return class MediaMuteButton extends ConsumerMixin(BaseClass) {
static get observedAttributes(): string[] {
return [
@@ -24,7 +26,9 @@ export const toConnectedMediaMuteButton = (BaseClass = HTMLElement) => {
this.mediaVolumeLevel = mediaVolumeLevel;
/** @ts-ignore */
this.mediaMuted = mediaMuted;
// @ts-ignore - Element property access
this.setAttribute('data-volume-level', mediaVolumeLevel);
// @ts-ignore - Element property access
this.toggleAttribute('data-muted', mediaMuted);
},
);
@@ -33,13 +37,17 @@ export const toConnectedMediaMuteButton = (BaseClass = HTMLElement) => {
connectedCallback(): void {
super.connectedCallback?.();
// @ts-ignore - Element property access
this.addEventListener('mediamuterequest', this);
// @ts-ignore - Element property access
this.addEventListener('mediaunmuterequest', this);
}
disconnectedCallback(): void {
super.disconnectedCallback?.();
// @ts-ignore - Element property access
this.removeEventListener('mediamuterequest', this);
// @ts-ignore - Element property access
this.removeEventListener('mediaunmuterequest', this);
}
@@ -1,3 +1,4 @@
// @ts-ignore - Module resolution issues with @open-wc/context-protocol
import { ConsumerMixin } from '@open-wc/context-protocol';
// NOTE: This should be fairly generic code that could itself be abstracted into configuration for a more generic factory implementation. (CJP)
@@ -25,6 +26,7 @@ export const toConnectedMediaPlayButton = (BaseClass = HTMLElement) => {
// Using `this.toggleAttribute('mediapaused', mediaPaused);` should also work if that's preferred.
/** @ts-ignore */
this.mediaPaused = mediaPaused;
// @ts-ignore - Element property access
this.toggleAttribute('data-paused', mediaPaused);
},
);
@@ -33,13 +35,17 @@ export const toConnectedMediaPlayButton = (BaseClass = HTMLElement) => {
connectedCallback(): void {
super.connectedCallback?.();
// @ts-ignore - Element property access
this.addEventListener('mediaplayrequest', this);
// @ts-ignore - Element property access
this.addEventListener('mediapauserequest', this);
}
disconnectedCallback(): void {
super.disconnectedCallback?.();
// @ts-ignore - Element property access
this.removeEventListener('mediaplayrequest', this);
// @ts-ignore - Element property access
this.removeEventListener('mediapauserequest', this);
}
@@ -1,3 +1,4 @@
// @ts-ignore - Module resolution issues with @open-wc/context-protocol
import { ConsumerMixin } from '@open-wc/context-protocol';
export function getTemplateHTML() {
@@ -7,6 +8,7 @@ export function getTemplateHTML() {
`;
}
// @ts-ignore - Custom element constructor compatibility
export class MediaContainer extends ConsumerMixin(HTMLElement) {
static shadowRootOptions = { mode: 'open' as ShadowRootMode };
static getTemplateHTML = getTemplateHTML;
@@ -24,11 +26,15 @@ export class MediaContainer extends ConsumerMixin(HTMLElement) {
constructor() {
super();
// @ts-ignore - Shadow DOM property access
if (!this.shadowRoot) {
// @ts-ignore - Shadow DOM property access
this.attachShadow((this.constructor as typeof MediaContainer).shadowRootOptions);
// @ts-ignore - Shadow DOM property access
this.shadowRoot!.innerHTML = (this.constructor as typeof MediaContainer).getTemplateHTML();
}
// @ts-ignore - Shadow DOM property access
this.#mediaSlot = this.shadowRoot!.querySelector('slot[name=media]') as HTMLSlotElement;
this.#mediaSlot.addEventListener('slotchange', this.#handleMediaSlotChange);
}
@@ -39,4 +45,5 @@ export class MediaContainer extends ConsumerMixin(HTMLElement) {
};
}
// @ts-ignore - Custom elements type compatibility
customElements.define('media-container', MediaContainer);
+3
View File
@@ -1,6 +1,8 @@
// @ts-ignore - Module resolution issues with @open-wc/context-protocol
import { ProviderMixin } from '@open-wc/context-protocol';
import { createMediaStore } from '@vjs-10/media-store';
// @ts-ignore - Custom element constructor compatibility
export class MediaProvider extends ProviderMixin(HTMLElement) {
contexts = {
mediaStore: () => {
@@ -9,4 +11,5 @@ export class MediaProvider extends ProviderMixin(HTMLElement) {
};
}
// @ts-ignore - Custom elements type compatibility
customElements.define('media-provider', MediaProvider);