1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import * as Misskey from 'misskey-js';
import { inject, isRef, onActivated, onBeforeUnmount, provide, ref, toValue, watch } from 'vue';
import { DI } from './di.js';
import type { MaybeRefOrGetter, Ref } from 'vue';
export type PageMetadata = {
title: string;
subtitle?: string;
icon?: string | null;
avatar?: Misskey.entities.User | null;
userName?: Misskey.entities.User | null;
needWideArea?: boolean;
};
type PageMetadataGetter = () => PageMetadata;
type PageMetadataReceiver = (getter: PageMetadataGetter) => void;
const RECEIVER_KEY = Symbol('ReceiverKey');
const setReceiver = (v: PageMetadataReceiver): void => {
provide<PageMetadataReceiver>(RECEIVER_KEY, v);
};
const getReceiver = (): PageMetadataReceiver | undefined => {
return inject<PageMetadataReceiver>(RECEIVER_KEY);
};
const METADATA_KEY = Symbol('MetadataKey');
const setMetadata = (v: Ref<PageMetadata | null>): void => {
provide<Ref<PageMetadata | null>>(METADATA_KEY, v);
};
export const definePage = (maybeRefOrGetterMetadata: MaybeRefOrGetter<PageMetadata>): void => {
const metadataRef = ref(toValue(maybeRefOrGetterMetadata));
const metadataGetter = () => metadataRef.value;
const receiver = getReceiver();
// setup handler
receiver?.(metadataGetter);
// update handler
onBeforeUnmount(watch(
() => toValue(maybeRefOrGetterMetadata),
(metadata) => {
metadataRef.value = metadata;
receiver?.(metadataGetter);
},
{ deep: true },
));
onActivated(() => {
receiver?.(metadataGetter);
});
provide(DI.pageMetadata, metadataRef);
};
export const provideMetadataReceiver = (receiver: PageMetadataReceiver): void => {
setReceiver(receiver);
};
export const provideReactiveMetadata = (metadataRef: Ref<PageMetadata | null>): void => {
setMetadata(metadataRef);
};
|
