Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Improve type inference for oEmbed type in TypeScript #113

Merged
merged 4 commits into from
Feb 13, 2024
Merged

feat: Improve type inference for oEmbed type in TypeScript #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
209a86c
Improve typescript oEmbed type
r4ai Feb 3, 2024
b445791
Update `Metadata` type in README
r4ai Feb 3, 2024
fcb3266
lint
jacktuck Feb 12, 2024
13b2cc4
fix: add type guard to oEmbed test
r4ai Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
59 changes: 44 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,21 +58,7 @@ type Metadata = {
author?: string
theme_color?: string
canonical_url?: string
oEmbed?: {
type: 'photo' | 'video' | 'link' | 'rich'
version?: string
title?: string
author_name?: string
author_url?: string
provider_name?: string
provider_url?: string
cache_age?: number
thumbnails?: [{
url?: string
width?: number
height?: number
}]
}
oEmbed?: OEmbedPhoto | OEmbedVideo | OEmbedLink | OEmbedRich
twitter_card: {
card: string
site?: string
Expand Down Expand Up @@ -147,6 +133,49 @@ type Metadata = {
}
}
}

type OEmbedBase = {
type: "photo" | "video" | "link" | "rich"
version: string
title?: string
author_name?: string
author_url?: string
provider_name?: string
provider_url?: string
cache_age?: number
thumbnails?: [
{
url?: string
width?: number
height?: number
}
]
}

type OEmbedPhoto = OEmbedBase & {
type: "photo"
url: string
width: number
height: number
}

type OEmbedVideo = OEmbedBase & {
type: "video"
html: string
width: number
height: number
}

type OEmbedLink = OEmbedBase & {
type: "link"
}

type OEmbedRich = OEmbedBase & {
type: "rich"
html: string
width: number
height: number
}
```

## The who 💖
Expand Down
63 changes: 44 additions & 19 deletions src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,25 +24,7 @@ export type Metadata = {
author?: string;
theme_color?: string;
canonical_url?: string;
oEmbed?: {
type: "photo" | "video" | "link" | "rich";
width?: number;
height?: number;
version?: string;
title?: string;
author_name?: string;
author_url?: string;
provider_name?: string;
provider_url?: string;
cache_age?: number;
thumbnails?: [
{
url?: string;
width?: number;
height?: number;
}
];
};
oEmbed?: OEmbedPhoto | OEmbedVideo | OEmbedLink | OEmbedRich;
twitter_card: {
card: string;
site?: string;
Expand Down Expand Up @@ -117,3 +99,46 @@ export type Metadata = {
};
};
};

type OEmbedBase = {
type: "photo" | "video" | "link" | "rich";
version: string;
title?: string;
author_name?: string;
author_url?: string;
provider_name?: string;
provider_url?: string;
cache_age?: number;
thumbnails?: [
{
url?: string;
width?: number;
height?: number;
}
];
};

type OEmbedPhoto = OEmbedBase & {
type: "photo";
url: string;
width: number;
height: number;
};

type OEmbedVideo = OEmbedBase & {
type: "video";
html: string;
width: number;
height: number;
};

type OEmbedLink = OEmbedBase & {
type: "link";
};

type OEmbedRich = OEmbedBase & {
type: "rich";
html: string;
width: number;
height: number;
};
26 changes: 17 additions & 9 deletions test/oembed/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,15 @@ test("width/height should be numbers", async () => {

const result = await unfurl("http://localhost/html/oembed");

expect(result.oEmbed.width).toEqual(640);
expect(result.oEmbed.height).toEqual(640);
expect(result.oEmbed?.type).toEqual("video");
const oEmbed =
result.oEmbed?.type === "video" ? result.oEmbed : (result.oEmbed as never);
Comment on lines +36 to +37
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the oEmbed type is "link", width and height do not exist, so it must first be checked that the oEmbed type is "video".

Also, with only expect(result.oEmbed?.type).toEqual("video"), TypeScript cannot infer that the type of result.oEmbed is OEmbedVideo. Therefore, the following type guard is additionally written.

const oEmbed = result.oEmbed?.type === "video" ? result.oEmbed : (result.oEmbed as never)

At this line, Since we have already checked that result.oEmbed?.type === "video" in the above line, the "else" part is regarded as never.


expect(result.oEmbed.thumbnails[0].width).toEqual(200);
expect(result.oEmbed.thumbnails[0].height).toEqual(200);
expect(oEmbed.width).toEqual(640);
expect(oEmbed.height).toEqual(640);

expect(oEmbed.thumbnails?.[0].width).toEqual(200);
expect(oEmbed.thumbnails?.[0].height).toEqual(200);
});

test("should decode entities in OEmbed URL", async () => {
Expand All @@ -54,11 +58,15 @@ test("should decode entities in OEmbed URL", async () => {

const result = await unfurl("http://localhost/html/oembed");

expect(result.oEmbed.width).toEqual(640);
expect(result.oEmbed.height).toEqual(640);
expect(result.oEmbed?.type).toEqual("video");
const oEmbed =
result.oEmbed?.type === "video" ? result.oEmbed : (result.oEmbed as never);

expect(oEmbed.width).toEqual(640);
expect(oEmbed.height).toEqual(640);

expect(result.oEmbed.thumbnails[0].width).toEqual(200);
expect(result.oEmbed.thumbnails[0].height).toEqual(200);
expect(oEmbed.thumbnails?.[0].width).toEqual(200);
expect(oEmbed.thumbnails?.[0].height).toEqual(200);
});

test("should prefer fetching JSON oEmbed", async () => {
Expand Down Expand Up @@ -118,7 +126,7 @@ test("should upgrade to HTTPS if needed", async () => {

const result = await unfurl("http://localhost/html/oembed-http");

expect(result.oEmbed.version).toEqual("1.0");
expect(result.oEmbed?.version).toEqual("1.0");
});

test("should build oEmbed from JSON", async () => {
Expand Down