Skip to content

Commit 166b5a1

Browse files
spearcatspearcat
committed
Make stuff async where it could be, use watchImmediate from @vueuse, log load fails as warnings in console
1 parent 6ba1d33 commit 166b5a1

File tree

10 files changed

+57
-60
lines changed

10 files changed

+57
-60
lines changed

‎src/App.vue

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,20 @@ import { authenticateOnStartup } from './lib/atproto/signed-in-user';
44
import router from './router';
55
import { ref, watch } from 'vue';
66
import { useVanillaCss } from './lib/shared-globals';
7+
import { watchImmediate } from '@vueuse/core';
78
89
const isInPage = ref(false);
9-
watch(router.currentRoute, route => {
10+
watchImmediate(router.currentRoute, route => {
1011
isInPage.value = route.path.startsWith('/page/');
11-
}, { immediate: true });
12+
});
1213
13-
watch(useVanillaCss, useVanillaCss => {
14+
watchImmediate(useVanillaCss, useVanillaCss => {
1415
if (useVanillaCss) {
1516
document.body.setAttribute('vanilla-css', 'true');
1617
} else {
1718
document.body.removeAttribute('vanilla-css');
1819
}
19-
}, { immediate: true });
20+
});
2021
2122
authenticateOnStartup();
2223
</script>

‎src/components/MarkdownRenderer.vue

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,48 +11,29 @@ import { compileStringAsync as sassCompileString } from 'sass';
1111
import AtImgCe from './custom-elements/AtImg.ce.vue';
1212
import AtLinkCe from './custom-elements/AtLink.ce.vue';
1313
import AtAnchorCe from './custom-elements/AtAnchor.ce.vue';
14-
import AWStylesheetCe from './custom-elements/AWStylesheet.ce.vue';
14+
import AtWebStylesheetCe from './custom-elements/AtWebStylesheet.ce.vue';
1515
import OmitVanillaCssCe from './custom-elements/OmitVanillaCss.ce.vue';
16+
import { watchImmediate } from '@vueuse/core';
1617
1718
const module = shallowRef<MDXModule>();
1819
19-
watch(() => markdown, async markdown => {
20+
watchImmediate(() => markdown, async markdown => {
2021
console.log('setting module.value', module.value);
2122
module.value = markdown ? await renderMarkdown(markdown) : undefined;
2223
console.log('set module.value', module.value);
23-
}, { immediate: true });
24-
25-
const stylesheet = ref('');
26-
27-
watch(module, async module => {
28-
if (!module) {
29-
stylesheet.value = '';
30-
return;
31-
}
32-
33-
if ('stylesheet' in module) {
34-
stylesheet.value = module.stylesheet as string;
35-
} else if ('scssStylesheet' in module) {
36-
stylesheet.value = (await sassCompileString(module.stylesheet as string, {
37-
sourceMap: false,
38-
})).css;
39-
} else {
40-
stylesheet.value = '';
41-
}
4224
});
4325
4426
const components: MDXComponents = {
4527
img: AtImgCe,
4628
link: AtLinkCe,
4729
a: AtAnchorCe,
48-
Stylesheet: AWStylesheetCe,
30+
Stylesheet: AtWebStylesheetCe,
4931
OmitVanillaCss: OmitVanillaCssCe,
5032
};
5133
5234
</script>
5335

5436
<template>
55-
<component :is="'style'" id="mdx-styles">{{ stylesheet }}</component>
5637
<div class="mdx-root">
5738
<module.default v-if="module" :components="components" />
5839
</div>

‎src/components/SignInGate.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ import { ref, watch } from 'vue';
33
44
import MModal from './MModal.vue';
55
import { authenticateIfNecessary, user } from '@/lib/atproto/signed-in-user';
6+
import { watchImmediate } from '@vueuse/core';
67
78
const handle = ref('');
89
const open = ref(false);
910
10-
watch(user, user => {
11+
watchImmediate(user, user => {
1112
handle.value = user?.handle ?? '';
1213
});
1314

‎src/components/custom-elements/AtAnchor.ce.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { getRelativeOrAbsoluteBlobUrl } from '@/lib/component-helpers';
33
import { injectPage } from '@/lib/injection-keys';
44
import { page } from '@/lib/shared-globals';
5+
import { watchImmediate } from '@vueuse/core';
56
import { inject, ref, watch } from 'vue';
67
78
const props = defineProps<{
@@ -10,18 +11,19 @@ const props = defineProps<{
1011
1112
const realHref = ref<string>();
1213
13-
watch(page!, page => {
14+
watchImmediate(page, async page => {
1415
if (!page) {
1516
console.warn(`no page for link ${props.href}`);
1617
return;
1718
}
1819
19-
getRelativeOrAbsoluteBlobUrl(
20+
await getRelativeOrAbsoluteBlobUrl(
2021
props.href,
2122
{ path: page.filePath, repo: page.did }
2223
)
23-
.then(uri => realHref.value = uri);
24-
}, { immediate: true });
24+
.then(uri => realHref.value = uri)
25+
.catch(err => console.warn(err));
26+
});
2527
</script>
2628

2729
<template>

‎src/components/custom-elements/AtImg.ce.vue

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { getRelativeOrAbsoluteBlobUrl } from '@/lib/component-helpers';
33
import { injectPage } from '@/lib/injection-keys';
44
import { page } from '@/lib/shared-globals';
5+
import { watchImmediate } from '@vueuse/core';
56
import { inject, ref, watch } from 'vue';
67
78
const props = defineProps<{
@@ -16,26 +17,30 @@ const props = defineProps<{
1617
const realSrc = ref<string>();
1718
const realSrcSet = ref<string>();
1819
19-
watch(page!, page => {
20+
watchImmediate(page, async page => {
2021
if (!page) {
2122
console.warn(`no page for img ${props.src}`);
2223
return;
2324
}
2425
25-
getRelativeOrAbsoluteBlobUrl(
26-
props.src,
27-
{ path: page.filePath, repo: page.did },
28-
true
29-
)
30-
.then(uri => realSrc.value = uri);
26+
await Promise.all([
27+
getRelativeOrAbsoluteBlobUrl(
28+
props.src,
29+
{ path: page.filePath, repo: page.did },
30+
true
31+
)
32+
.then(uri => realSrc.value = uri)
33+
.catch(err => console.warn(err)),
3134
32-
getRelativeOrAbsoluteBlobUrl(
33-
props.srcset,
34-
{ path: page.filePath, repo: page.did },
35-
true
36-
)
37-
.then(uri => realSrcSet.value = uri);
38-
}, { immediate: true });
35+
getRelativeOrAbsoluteBlobUrl(
36+
props.srcset,
37+
{ path: page.filePath, repo: page.did },
38+
true
39+
)
40+
.then(uri => realSrcSet.value = uri)
41+
.catch(err => console.warn(err)),
42+
]);
43+
});
3944
4045
</script>
4146

‎src/components/custom-elements/AtLink.ce.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { getRelativeOrAbsoluteBlobUrl } from '@/lib/component-helpers';
33
import { injectPage } from '@/lib/injection-keys';
44
import { page } from '@/lib/shared-globals';
5+
import { watchImmediate } from '@vueuse/core';
56
import { inject, ref, watch } from 'vue';
67
78
const props = defineProps<{
@@ -12,18 +13,19 @@ const props = defineProps<{
1213
1314
const realHref = ref<string>();
1415
15-
watch(page!, page => {
16+
watchImmediate(page, async page => {
1617
if (!page) {
1718
console.warn(`no page for link ${props.href}`);
1819
return;
1920
}
2021
21-
getRelativeOrAbsoluteBlobUrl(
22+
await getRelativeOrAbsoluteBlobUrl(
2223
props.href,
2324
{ path: page.filePath, repo: page.did }
2425
)
25-
.then(uri => realHref.value = uri);
26-
}, { immediate: true });
26+
.then(uri => realHref.value = uri)
27+
.catch(err => console.warn(err));
28+
});
2729
</script>
2830

2931
<template>

‎src/components/custom-elements/AtStyle.ce.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<component :is="'style'" v-bind:$attrs><slot></slot></component>
3+
</template>

‎src/components/custom-elements/AWStylesheet.ce.vue renamed to ‎src/components/custom-elements/AtWebStylesheet.ce.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { getRelativeOrAbsoluteBlobUrl } from '@/lib/component-helpers';
33
import { injectPage } from '@/lib/injection-keys';
44
import { page } from '@/lib/shared-globals';
5+
import { watchImmediate } from '@vueuse/core';
56
import { inject, ref, watch } from 'vue';
67
78
const props = defineProps<{
@@ -10,18 +11,19 @@ const props = defineProps<{
1011
1112
const realHref = ref<string>();
1213
13-
watch(page!, page => {
14+
watchImmediate(page, async page => {
1415
if (!page) {
1516
console.warn(`no page for link ${props.href}`);
1617
return;
1718
}
1819
19-
getRelativeOrAbsoluteBlobUrl(
20+
await getRelativeOrAbsoluteBlobUrl(
2021
props.href,
2122
{ path: page.filePath, repo: page.did }
2223
)
23-
.then(uri => realHref.value = uri);
24-
}, { immediate: true });
24+
.then(uri => realHref.value = uri)
25+
.catch(err => console.warn(err));
26+
});
2527
</script>
2628

2729
<template>

‎src/lib/atproto/signed-in-user.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
type Session,
55
} from '@atcute/oauth-browser-client';
66
import { reactive, ref, shallowRef, watch } from 'vue';
7-
import { useLocalStorage } from '@vueuse/core';
7+
import { useLocalStorage, watchImmediate } from '@vueuse/core';
88
import type { At } from '@atcute/client/lexicons';
99

1010
import { AtpOauthClient } from './oauth';
@@ -48,9 +48,9 @@ export type User = { [K in keyof LoginState]: LoginState[K] };
4848

4949
export const user = ref<LoginState>();
5050

51-
watch([account, agents], ([account, agents]) => {
51+
watchImmediate([account, agents], ([account, agents]) => {
5252
user.value = account !== undefined && agents !== undefined ? new LoginState() : undefined;
53-
})
53+
});
5454

5555
const oauthClient = new AtpOauthClient();
5656
export async function authenticateIfNecessary(

‎src/views/PageView.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@ import { downloadFile, getGetBlobUrl, type Page } from '@/lib/atproto/atweb-unau
55
import { useRoute } from 'vue-router';
66
import { resolveHandleAnonymously } from '@/lib/atproto/handles/resolve';
77
import { page } from '@/lib/shared-globals';
8+
import { watchImmediate } from '@vueuse/core';
89
910
const route = useRoute();
1011
11-
watch(
12+
watchImmediate(
1213
route,
1314
() => {
1415
resolveHandleAnonymously(route.params.handle as string)
1516
.then(did => downloadFile(did, route.params.rkey as string))
1617
.then(newPage => (page.value = newPage));
1718
},
18-
{ immediate: true },
1919
);
2020
2121
const type = ref<'markdown' | 'pre' | 'image' | 'generic' | 'none'>('none');
2222
const contents = ref<string>('');
2323
24-
watch(page, async page => {
24+
watchImmediate(page, async page => {
2525
console.log('watched', page);
2626
2727
if (page === undefined) return;

0 commit comments

Comments
 (0)