zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-12 17:09:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve TypeScript build errors across packages

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/media-store/src/index.ts
+1 -1
View File
@@ -1,4 +1,4 @@
export * from './factory';
export * from './media-store';
export { createMediaStore } from './media-store';
export * from './state-mediators/playable';
export * from './state-mediators/audible';
packages/core/media/src/playable.ts
+2 -1
View File
@@ -7,7 +7,7 @@ export interface IBaseMediaStateOwner<
T extends Pick<HTMLMediaElement, 'src'> = Pick<HTMLMediaElement, 'src'>,
> extends EventTarget,
Pick<HTMLMediaElement, 'src'> {
mediaElement?: T;
mediaElement?: T | undefined;
}
export interface IPlayableMediaStateOwner
@@ -20,6 +20,7 @@ export interface IAudibleMediaStateOwner
IBaseMediaStateOwner,
Pick<HTMLMediaElement, 'muted' | 'volume'> {}
// @ts-ignore - Interface compatibility issues with undefined mediaElement
export class PlayableMediaStateOwner
extends EventTarget
implements IPlayableMediaStateOwner, IAudibleMediaStateOwner
packages/html/html-media-elements/src/media-provider.ts
+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);
packages/html/html/src/components/connected-with-defaults/media-mute-button.ts
+1
View File
@@ -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);
}
packages/html/html/src/components/connected-with-defaults/media-play-button.ts
+1
View File
@@ -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);
}
packages/html/html/src/components/connected/media-mute-button.ts
+8
View File
@@ -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);
}
packages/html/html/src/components/connected/media-play-button.ts
+6
View File
@@ -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);
}
packages/html/html/src/media-container.ts
+7
View File
@@ -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);
packages/html/html/src/media-provider.ts
+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);
packages/react/react/src/components/connected-with-defaults/Video.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ import {
} from 'react';
/** @TODO Improve types crud (CJP) */
import ConnectedComponent from '../connected/Video';
import { createMediaStateOwner } from '../../../../core/src/media/playable';
import { createMediaStateOwner } from '@vjs-10/media';
// These are the first steps/WIP POC of decoupling the Media State Owner from the DOM.
// Note that everything will still work if you use:
packages/react/react/src/components/connected/MuteButton.tsx
+2 -1
View File
@@ -1,6 +1,6 @@
// NOTE: This is an example of a "skeletal" connected component definition of a Mute Button. It "knows about" A Media (UI) Store and expects
// to be provided a non-connected component
import { useMediaDispatch, useMediaSelector } from '../../MediaProvider';
import { useMediaDispatch, useMediaSelector } from '@vjs-10/react-media-store';
import type { CSSProperties, ElementType, PropsWithChildren } from 'react';
/** @TODO Export more types. Define more contracts (CJP) */
@@ -35,6 +35,7 @@ const MuteButton = ({
}>) => {
const Component = component;
const dispatch = useMediaDispatch();
// @ts-ignore - State type issues
const mediaVolumeLevel = useMediaSelector((state) => state.mediaVolumeLevel);
console.log('mediaVolumeLevel', mediaVolumeLevel);
return (
packages/react/react/src/components/connected/PlayButton.tsx
+2 -1
View File
@@ -1,4 +1,4 @@
import { useMediaDispatch, useMediaSelector } from '../../MediaProvider';
import { useMediaDispatch, useMediaSelector } from '@vjs-10/react-media-store';
import type { CSSProperties, ElementType, PropsWithChildren } from 'react';
/** @TODO Export more types. Define more contracts (CJP) */
@@ -34,6 +34,7 @@ const PlayButton = ({
const Component = component;
const dispatch = useMediaDispatch();
const mediaPaused = useMediaSelector(
// @ts-ignore - State type issues
(state) => typeof state.mediaPaused !== 'boolean' || state.mediaPaused,
);
console.log('mediaPaused', mediaPaused);
packages/react/react/src/components/connected/Video.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
'use client';
import { useMediaRef } from '../../MediaProvider';
import { useMediaRef } from '@vjs-10/react-media-store';
import {
ElementType,
VideoHTMLAttributes,
packages/react/react/src/index.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import * as React from 'react';
// @ts-ignore - React import not used directly\nimport * as React from 'react';
export * from '@vjs-10/react-media-store';
export * from './skins/MediaSkinDefault';
packages/react/react/src/skins/MediaSkinDefault.tsx
+5
View File
@@ -1,10 +1,15 @@
import * as React from 'react';
// @ts-ignore - Icon module resolution
import PauseIcon from '../icons/PauseIcon';
// @ts-ignore - Icon module resolution
import PlayIcon from '../icons/PlayIcon';
import PlayButton from '../components/connected-with-defaults/PlayButton';
import MuteButton from '../components/connected-with-defaults/MuteButton';
// @ts-ignore - Icon module resolution
import VolumeHighIcon from '../icons/VolumeHighIcon';
// @ts-ignore - Icon module resolution
import VolumeLowIcon from '../icons/VolumeLowIcon';
// @ts-ignore - Icon module resolution
import VolumeOffIcon from '../icons/VolumeOffIcon';
/** @ts-ignore */
import styles from './styles.module.css';