mackuba.eu
Thread viewer for Bluesky
converted post context to typed context
+29
-32
+2
-3
src/components/embeds/ImagesComponent.svelte
+2
-3
src/components/embeds/ImagesComponent.svelte
···
1
1
<script lang="ts">
2
-
import { getContext } from 'svelte';
2
+
import { getPostContext } from '../posts/PostComponent.svelte';
3
3
import { InlineImageEmbed, RawImageEmbed } from '../../models/embeds';
4
-
import { Post } from '../../models/posts';
5
4
6
5
let { embed }: { embed: InlineImageEmbed | RawImageEmbed } = $props();
7
-
let { post }: { post: Post } = getContext('post');
6
+
let { post } = getPostContext();
8
7
9
8
function imageURL(img: json): string {
10
9
if (img.fullsize) {
+2
-3
src/components/embeds/LinkComponent.svelte
+2
-3
src/components/embeds/LinkComponent.svelte
···
1
1
<script lang="ts">
2
-
import { getContext } from 'svelte';
2
+
import { getPostContext } from '../posts/PostComponent.svelte';
3
3
import { isValidURL, truncateText } from '../../utils.js';
4
4
import GIFPlayer from './GIFPlayer.svelte';
5
5
import { InlineLinkEmbed, RawLinkEmbed } from '../../models/embeds.js';
6
-
import { Post } from '../../models/posts.js';
7
6
8
7
let { embed }: { embed: InlineLinkEmbed | RawLinkEmbed } = $props();
9
-
let { post }: { post: Post } = getContext('post');
8
+
let { post } = getPostContext();
10
9
11
10
let showingGIF = $state(false);
12
11
+2
-2
src/components/embeds/QuoteComponent.svelte
+2
-2
src/components/embeds/QuoteComponent.svelte
···
1
1
<script lang="ts">
2
-
import { getContext } from 'svelte';
2
+
import { getPostContext } from '../posts/PostComponent.svelte';
3
3
import { BasePost, Post, MissingPost } from '../../models/posts.js';
4
4
import { InlineRecordEmbed, InlineRecordWithMediaEmbed } from '../../models/embeds.js';
5
5
import { ATProtoRecord, FeedGeneratorRecord, StarterPackRecord, UserListRecord } from '../../models/records.js';
···
10
10
import StarterPackView from '../embeds/StarterPackView.svelte';
11
11
import UserListView from '../embeds/UserListView.svelte';
12
12
13
-
let { post }: { post: Post } = getContext('post');
14
13
let { record }: { record: ATProtoRecord } = $props();
14
+
let { post } = getPostContext();
15
15
16
16
async function loadQuotedRecord(): Promise<ATProtoRecord> {
17
17
let { collection } = atURI(record.uri);
+2
-3
src/components/embeds/VideoComponent.svelte
+2
-3
src/components/embeds/VideoComponent.svelte
···
1
1
<script lang="ts">
2
-
import { getContext } from 'svelte';
2
+
import { getPostContext } from '../posts/PostComponent.svelte';
3
3
import { InlineVideoEmbed, RawVideoEmbed } from '../../models/embeds';
4
-
import { Post } from '../../models/posts';
5
4
6
5
let { embed }: { embed: InlineVideoEmbed | RawVideoEmbed } = $props();
7
-
let { post }: { post: Post } = getContext('post');
6
+
let { post } = getPostContext();
8
7
9
8
function videoURL(embed: InlineVideoEmbed | RawVideoEmbed) {
10
9
if (embed instanceof InlineVideoEmbed) {
+2
-2
src/components/posts/BlockedPostContent.svelte
+2
-2
src/components/posts/BlockedPostContent.svelte
···
1
1
<script lang="ts">
2
-
import { setContext } from 'svelte';
2
+
import { setPostContext } from './PostComponent.svelte';
3
3
import { Post } from '../../models/posts.js';
4
4
5
5
import EmbedComponent from '../embeds/EmbedComponent.svelte';
···
8
8
9
9
let { post, placement }: { post: Post, placement: PostPlacement } = $props();
10
10
11
-
setContext('post', { post, placement });
11
+
setPostContext({ post, placement });
12
12
</script>
13
13
14
14
{#if post.isPageRoot && post.parentReference}
+3
-3
src/components/posts/HiddenRepliesLink.svelte
+3
-3
src/components/posts/HiddenRepliesLink.svelte
···
1
1
<script lang="ts">
2
2
import { showBiohazardDialog } from '../../skythread.js';
3
3
import { account } from '../../models/account.svelte.js';
4
-
import { Post, parseThreadPost } from '../../models/posts.js';
4
+
import { parseThreadPost } from '../../models/posts.js';
5
5
import { linkToPostThread } from '../../router.js';
6
-
import { getContext } from 'svelte';
6
+
import { getPostContext } from './PostComponent.svelte';
7
7
8
8
type Props = {
9
9
onLoad: (posts: (AnyPost | null)[]) => void,
···
11
11
}
12
12
13
13
let { onLoad, onError }: Props = $props();
14
-
let { post }: { post: Post } = getContext('post');
14
+
let { post } = getPostContext();
15
15
let loading = $state(false);
16
16
17
17
function onLinkClick(e: Event) {
+2
-2
src/components/posts/LoadMoreLink.svelte
+2
-2
src/components/posts/LoadMoreLink.svelte
···
1
1
<script lang="ts">
2
2
import { Post, parseThreadPost } from '../../models/posts.js';
3
3
import { linkToPostThread } from '../../router.js';
4
-
import { getContext } from 'svelte';
4
+
import { getPostContext } from './PostComponent.svelte';
5
5
6
6
type Props = {
7
7
onLoad: (root: Post) => void,
···
9
9
}
10
10
11
11
let { onLoad, onError }: Props = $props();
12
-
let { post }: { post: Post } = getContext('post');
12
+
let { post } = getPostContext();
13
13
let loading = $state(false);
14
14
15
15
async function onLinkClick(e: Event) {
+2
-3
src/components/posts/PostBody.svelte
+2
-3
src/components/posts/PostBody.svelte
···
1
1
<script lang="ts">
2
-
import { getContext } from 'svelte';
2
+
import { getPostContext } from './PostComponent.svelte';
3
3
import { sanitizeHTML } from '../../utils.js';
4
-
import { Post } from '../../models/posts.js';
5
4
import RichTextFromFacets from '../RichTextFromFacets.svelte';
6
5
7
6
const highlightID = 'search-results';
8
7
9
-
let { post }: { post: Post } = getContext('post');
8
+
let { post } = getPostContext();
10
9
let { highlightedMatches = undefined }: { highlightedMatches?: string[] | undefined } = $props();
11
10
12
11
let bodyElement: HTMLElement | undefined = $state();
+6
-2
src/components/posts/PostComponent.svelte
+6
-2
src/components/posts/PostComponent.svelte
···
1
+
<script module lang="ts">
2
+
export const [getPostContext, setPostContext] = createContext<{ post: Post, placement: PostPlacement}>();
3
+
</script>
4
+
1
5
<script lang="ts">
2
-
import { setContext } from 'svelte';
6
+
import { createContext } from 'svelte';
3
7
import { HiddenRepliesError } from '../../api/bluesky_api.js';
4
8
import { account } from '../../models/account.svelte.js';
5
9
import { Post, BlockedPost } from '../../models/posts.js';
···
43
47
let missingHiddenReplies: number | undefined = $state();
44
48
let hiddenRepliesError: Error | undefined = $state();
45
49
46
-
setContext('post', { post, placement });
50
+
setPostContext({ post, placement });
47
51
48
52
// TODO: make Post reactive
49
53
let quoteCount: number | undefined = $state(post.quoteCount);
+2
-3
src/components/posts/PostHeader.svelte
+2
-3
src/components/posts/PostHeader.svelte
···
1
1
<script lang="ts">
2
-
import { getContext } from 'svelte';
3
-
import { Post } from '../../models/posts.js';
2
+
import { getPostContext } from './PostComponent.svelte';
4
3
import { PostPresenter } from '../../utils/post_presenter.js';
5
4
import PostSubtreeLink from './PostSubtreeLink.svelte';
6
5
7
-
let { post, placement }: { post: Post, placement: PostPlacement } = getContext('post');
6
+
let { post, placement } = getPostContext();
8
7
let presenter = new PostPresenter(post, placement);
9
8
10
9
let avatar: HTMLImageElement | undefined = $state();
+2
-3
src/components/posts/PostTagsRow.svelte
+2
-3
src/components/posts/PostTagsRow.svelte
···
1
1
<script lang="ts">
2
-
import { getContext } from 'svelte';
3
-
import { Post } from '../../models/posts.js';
2
+
import { getPostContext } from './PostComponent.svelte';
4
3
import { linkToHashtagPage } from '../../router.js';
5
4
6
-
let { post }: { post: Post } = getContext('post');
5
+
let { post } = getPostContext();
7
6
</script>
8
7
9
8
<p class="tags">