Skip to content

Commit 0f35563

Browse files
eps1loneps1lon
authored
[react] Allow Passing Blob/File/MediaSource/MediaStream to src of <img>, <video> and <audio> (DefinitelyTyped#72473)
1 parent ff845e6 commit 0f35563

File tree

7 files changed

+94
-4
lines changed

7 files changed

+94
-4
lines changed

‎types/react-dom/test/experimental-tests.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,3 +112,39 @@ function fragmentRefTest() {
112112
<div />
113113
</React.Fragment>;
114114
}
115+
116+
// @enableSrcObject
117+
function srcObjectTest() {
118+
<img src={new Blob()} />;
119+
<img src={new File([], "image.png")} />;
120+
<img
121+
// @ts-expect-error -- MediaStream is only valid on video/audio elements
122+
src={new MediaStream()}
123+
/>;
124+
<img
125+
// @ts-expect-error -- MediaSource is only valid on video/audio elements
126+
src={new MediaSource()}
127+
/>;
128+
<img
129+
// @ts-expect-error -- arbitrary object is not valid
130+
src={{}}
131+
/>;
132+
133+
<audio src={new Blob()} />;
134+
<audio src={new File([], "react.mp3")} />;
135+
<audio src={new MediaStream()} />;
136+
<audio src={new MediaSource()} />;
137+
<audio
138+
// @ts-expect-error -- arbitrary object is not valid
139+
src={{}}
140+
/>;
141+
142+
<video src={new Blob()} />;
143+
<video src={new File([], "react.mp3")} />;
144+
<video src={new MediaStream()} />;
145+
<video src={new MediaSource()} />;
146+
<video
147+
// @ts-expect-error -- arbitrary object is not valid
148+
src={{}}
149+
/>;
150+
}

‎types/react/experimental.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,4 +229,13 @@ declare module "." {
229229

230230
/** */
231231
export const unstable_Activity: ExoticComponent<ActivityProps>;
232+
233+
// @enableSrcObject
234+
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_IMG_SRC_TYPES {
235+
srcObject: Blob;
236+
}
237+
238+
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_MEDIA_SRC_TYPES {
239+
srcObject: Blob | MediaSource | MediaStream;
240+
}
232241
}

‎types/react/global.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,3 +158,7 @@ interface WebGLRenderingContext {}
158158
interface WebGL2RenderingContext {}
159159

160160
interface TrustedHTML {}
161+
162+
interface Blob {}
163+
interface MediaStream {}
164+
interface MediaSource {}

‎types/react/index.d.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3060,6 +3060,8 @@ declare namespace React {
30603060
width?: number | string | undefined;
30613061
}
30623062

3063+
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_IMG_SRC_TYPES {}
3064+
30633065
interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
30643066
alt?: string | undefined;
30653067
crossOrigin?: CrossOrigin;
@@ -3069,7 +3071,12 @@ declare namespace React {
30693071
loading?: "eager" | "lazy" | undefined;
30703072
referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
30713073
sizes?: string | undefined;
3072-
src?: string | undefined;
3074+
src?:
3075+
| string
3076+
| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_IMG_SRC_TYPES[
3077+
keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_IMG_SRC_TYPES
3078+
]
3079+
| undefined;
30733080
srcSet?: string | undefined;
30743081
useMap?: string | undefined;
30753082
width?: number | string | undefined;
@@ -3253,6 +3260,8 @@ declare namespace React {
32533260
type?: string | undefined;
32543261
}
32553262

3263+
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_MEDIA_SRC_TYPES {}
3264+
32563265
interface MediaHTMLAttributes<T> extends HTMLAttributes<T> {
32573266
autoPlay?: boolean | undefined;
32583267
controls?: boolean | undefined;
@@ -3263,7 +3272,12 @@ declare namespace React {
32633272
muted?: boolean | undefined;
32643273
playsInline?: boolean | undefined;
32653274
preload?: string | undefined;
3266-
src?: string | undefined;
3275+
src?:
3276+
| string
3277+
| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_MEDIA_SRC_TYPES[
3278+
keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_MEDIA_SRC_TYPES
3279+
]
3280+
| undefined;
32673281
}
32683282

32693283
interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {

‎types/react/ts5.0/experimental.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,4 +229,13 @@ declare module "." {
229229

230230
/** */
231231
export const unstable_Activity: ExoticComponent<ActivityProps>;
232+
233+
// @enableSrcObject
234+
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_IMG_SRC_TYPES {
235+
srcObject: Blob;
236+
}
237+
238+
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_MEDIA_SRC_TYPES {
239+
srcObject: Blob | MediaSource | MediaStream;
240+
}
232241
}

‎types/react/ts5.0/global.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,3 +158,7 @@ interface WebGLRenderingContext {}
158158
interface WebGL2RenderingContext {}
159159

160160
interface TrustedHTML {}
161+
162+
interface Blob {}
163+
interface MediaStream {}
164+
interface MediaSource {}

‎types/react/ts5.0/index.d.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3059,6 +3059,8 @@ declare namespace React {
30593059
width?: number | string | undefined;
30603060
}
30613061

3062+
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_IMG_SRC_TYPES {}
3063+
30623064
interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
30633065
alt?: string | undefined;
30643066
crossOrigin?: CrossOrigin;
@@ -3068,7 +3070,12 @@ declare namespace React {
30683070
loading?: "eager" | "lazy" | undefined;
30693071
referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
30703072
sizes?: string | undefined;
3071-
src?: string | undefined;
3073+
src?:
3074+
| string
3075+
| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_IMG_SRC_TYPES[
3076+
keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_IMG_SRC_TYPES
3077+
]
3078+
| undefined;
30723079
srcSet?: string | undefined;
30733080
useMap?: string | undefined;
30743081
width?: number | string | undefined;
@@ -3252,6 +3259,8 @@ declare namespace React {
32523259
type?: string | undefined;
32533260
}
32543261

3262+
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_MEDIA_SRC_TYPES {}
3263+
32553264
interface MediaHTMLAttributes<T> extends HTMLAttributes<T> {
32563265
autoPlay?: boolean | undefined;
32573266
controls?: boolean | undefined;
@@ -3262,7 +3271,12 @@ declare namespace React {
32623271
muted?: boolean | undefined;
32633272
playsInline?: boolean | undefined;
32643273
preload?: string | undefined;
3265-
src?: string | undefined;
3274+
src?:
3275+
| string
3276+
| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_MEDIA_SRC_TYPES[
3277+
keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_MEDIA_SRC_TYPES
3278+
]
3279+
| undefined;
32663280
}
32673281

32683282
interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {

0 commit comments

Comments
 (0)