summaryrefslogtreecommitdiff
path: root/packages/frontend/src/boot/common.ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/frontend/src/boot/common.ts')
-rw-r--r--packages/frontend/src/boot/common.ts211
1 files changed, 128 insertions, 83 deletions
diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index 46ec4533ec..918a3703c3 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -3,29 +3,32 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
-import { computed, watch, version as vueVersion, App } from 'vue';
+import { watch, version as vueVersion } from 'vue';
import { compareVersions } from 'compare-versions';
-import { version, lang, langsVersion, updateLocale, locale } from '@@/js/config.js';
+import { version, lang, langsVersion, updateLocale, locale, apiUrl } from '@@/js/config.js';
+import defaultLightTheme from '@@/themes/l-light.json5';
+import defaultDarkTheme from '@@/themes/d-green-lime.json5';
+import type { App } from 'vue';
import widgets from '@/widgets/index.js';
import directives from '@/directives/index.js';
import components from '@/components/index.js';
-import { applyTheme } from '@/scripts/theme.js';
-import { isDeviceDarkmode } from '@/scripts/is-device-darkmode.js';
+import { applyTheme } from '@/theme.js';
+import { isDeviceDarkmode } from '@/utility/is-device-darkmode.js';
import { updateI18n, i18n } from '@/i18n.js';
-import { $i, refreshAccount, login } from '@/account.js';
-import { defaultStore, ColdDeviceStorage } from '@/store.js';
+import { refreshCurrentAccount, login } from '@/accounts.js';
+import { store } from '@/store.js';
import { fetchInstance, instance } from '@/instance.js';
-import { deviceKind, updateDeviceKind } from '@/scripts/device-kind.js';
-import { reloadChannel } from '@/scripts/unison-reload.js';
-import { getUrlWithoutLoginId } from '@/scripts/login-id.js';
-import { getAccountFromId } from '@/scripts/get-account-from-id.js';
+import { deviceKind, updateDeviceKind } from '@/utility/device-kind.js';
+import { reloadChannel } from '@/utility/unison-reload.js';
+import { getUrlWithoutLoginId } from '@/utility/login-id.js';
+import { getAccountFromId } from '@/utility/get-account-from-id.js';
import { deckStore } from '@/ui/deck/deck-store.js';
import { miLocalStorage } from '@/local-storage.js';
import { fetchCustomEmojis } from '@/custom-emojis.js';
-import { setupRouter } from '@/router/main.js';
-import { createMainRouter } from '@/router/definition.js';
+import { prefer } from '@/preferences.js';
+import { $i } from '@/i.js';
-export async function common(createVue: () => App<Element>) {
+export async function common(createVue: () => Promise<App<Element>>) {
console.info(`Sharkey v${version}`);
if (_DEV_) {
@@ -33,11 +36,6 @@ export async function common(createVue: () => App<Element>) {
console.info(`vue ${vueVersion}`);
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- (window as any).$i = $i;
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- (window as any).$store = defaultStore;
-
window.addEventListener('error', event => {
console.error(event);
/*
@@ -97,32 +95,32 @@ export async function common(createVue: () => App<Element>) {
//#endregion
// タッチデバイスでCSSの:hoverを機能させる
- document.addEventListener('touchend', () => {}, { passive: true });
+ window.document.addEventListener('touchend', () => {}, { passive: true });
// URLに#pswpを含む場合は取り除く
- if (location.hash === '#pswp') {
- history.replaceState(null, '', location.href.replace('#pswp', ''));
+ if (window.location.hash === '#pswp') {
+ window.history.replaceState(null, '', window.location.href.replace('#pswp', ''));
}
// 一斉リロード
reloadChannel.addEventListener('message', path => {
- if (path !== null) location.href = path;
- else location.reload();
+ if (path !== null) window.location.href = path;
+ else window.location.reload();
});
// If mobile, insert the viewport meta tag
if (['smartphone', 'tablet'].includes(deviceKind)) {
- const viewport = document.getElementsByName('viewport').item(0);
+ const viewport = window.document.getElementsByName('viewport').item(0);
viewport.setAttribute('content',
`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`);
}
//#region Set lang attr
- const html = document.documentElement;
+ const html = window.document.documentElement;
html.setAttribute('lang', lang);
//#endregion
- await defaultStore.ready;
+ await store.ready;
await deckStore.ready;
const fetchInstanceMetaPromise = fetchInstance();
@@ -132,11 +130,11 @@ export async function common(createVue: () => App<Element>) {
});
//#region loginId
- const params = new URLSearchParams(location.search);
+ const params = new URLSearchParams(window.location.search);
const loginId = params.get('loginId');
if (loginId) {
- const target = getUrlWithoutLoginId(location.href);
+ const target = getUrlWithoutLoginId(window.location.href);
if (!$i || $i.id !== loginId) {
const account = await getAccountFromId(loginId);
@@ -145,71 +143,78 @@ export async function common(createVue: () => App<Element>) {
}
}
- history.replaceState({ misskey: 'loginId' }, '', target);
+ window.history.replaceState({ misskey: 'loginId' }, '', target);
}
//#endregion
// NOTE: この処理は必ずクライアント更新チェック処理より後に来ること(テーマ再構築のため)
- watch(defaultStore.reactiveState.darkMode, (darkMode) => {
- applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));
+ watch(store.r.darkMode, (darkMode) => {
+ applyTheme(darkMode
+ ? (prefer.s.darkTheme ?? defaultDarkTheme)
+ : (prefer.s.lightTheme ?? defaultLightTheme),
+ );
}, { immediate: miLocalStorage.getItem('theme') == null });
- document.documentElement.dataset.colorScheme = defaultStore.state.darkMode ? 'dark' : 'light';
+ window.document.documentElement.dataset.colorScheme = store.s.darkMode ? 'dark' : 'light';
- const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme'));
- const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme'));
+ const darkTheme = prefer.model('darkTheme');
+ const lightTheme = prefer.model('lightTheme');
watch(darkTheme, (theme) => {
- if (defaultStore.state.darkMode) {
- applyTheme(theme);
+ if (store.s.darkMode) {
+ applyTheme(theme ?? defaultDarkTheme);
}
});
watch(lightTheme, (theme) => {
- if (!defaultStore.state.darkMode) {
- applyTheme(theme);
+ if (!store.s.darkMode) {
+ applyTheme(theme ?? defaultLightTheme);
}
});
//#region Sync dark mode
- if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
- defaultStore.set('darkMode', isDeviceDarkmode());
+ if (prefer.s.syncDeviceDarkMode) {
+ store.set('darkMode', isDeviceDarkmode());
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (mql) => {
- if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
- defaultStore.set('darkMode', mql.matches);
+ if (prefer.s.syncDeviceDarkMode) {
+ store.set('darkMode', mql.matches);
}
});
//#endregion
+ if (prefer.s.darkTheme && store.s.darkMode) {
+ if (miLocalStorage.getItem('themeId') !== prefer.s.darkTheme.id) applyTheme(prefer.s.darkTheme);
+ } else if (prefer.s.lightTheme && !store.s.darkMode) {
+ if (miLocalStorage.getItem('themeId') !== prefer.s.lightTheme.id) applyTheme(prefer.s.lightTheme);
+ }
+
fetchInstanceMetaPromise.then(() => {
- if (defaultStore.state.themeInitial) {
- if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON.parse(instance.defaultLightTheme));
- if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON.parse(instance.defaultDarkTheme));
- defaultStore.set('themeInitial', false);
- }
+ // TODO: instance.defaultLightTheme/instance.defaultDarkThemeが不正な形式だった場合のケア
+ if (prefer.s.lightTheme == null && instance.defaultLightTheme != null) prefer.commit('lightTheme', JSON.parse(instance.defaultLightTheme));
+ if (prefer.s.darkTheme == null && instance.defaultDarkTheme != null) prefer.commit('darkTheme', JSON.parse(instance.defaultDarkTheme));
});
- watch(defaultStore.reactiveState.overridedDeviceKind, (kind) => {
+ watch(prefer.r.overridedDeviceKind, (kind) => {
updateDeviceKind(kind);
}, { immediate: true });
- watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
- document.documentElement.style.setProperty('--MI-modalBgFilter', v ? 'blur(4px)' : 'none');
+ watch(prefer.r.useBlurEffectForModal, v => {
+ window.document.documentElement.style.setProperty('--MI-modalBgFilter', v ? 'blur(4px)' : 'none');
}, { immediate: true });
- watch(defaultStore.reactiveState.useBlurEffect, v => {
+ watch(prefer.r.useBlurEffect, v => {
if (v) {
- document.documentElement.style.removeProperty('--MI-blur');
+ window.document.documentElement.style.removeProperty('--MI-blur');
} else {
- document.documentElement.style.setProperty('--MI-blur', 'none');
+ window.document.documentElement.style.setProperty('--MI-blur', 'none');
}
}, { immediate: true });
// Keep screen on
- const onVisibilityChange = () => document.addEventListener('visibilitychange', () => {
- if (document.visibilityState === 'visible') {
+ const onVisibilityChange = () => window.document.addEventListener('visibilitychange', () => {
+ if (window.document.visibilityState === 'visible') {
try {
navigator.wakeLock.request('screen');
} catch (err) {
@@ -217,13 +222,13 @@ export async function common(createVue: () => App<Element>) {
}
}
});
- if (defaultStore.state.keepScreenOn && 'wakeLock' in navigator) {
+ if (prefer.s.keepScreenOn && 'wakeLock' in navigator) {
navigator.wakeLock.request('screen')
.then(onVisibilityChange)
.catch(() => {
// On WebKit-based browsers, user activation is required to send wake lock request
// https://webkit.org/blog/13862/the-user-activation-api/
- document.addEventListener(
+ window.document.addEventListener(
'click',
() => navigator.wakeLock.request('screen').then(onVisibilityChange),
{ once: true },
@@ -231,13 +236,17 @@ export async function common(createVue: () => App<Element>) {
});
}
+ if (prefer.s.makeEveryTextElementsSelectable) {
+ window.document.documentElement.classList.add('forceSelectableAll');
+ }
+
//#region Fetch user
if ($i && $i.token) {
if (_DEV_) {
console.log('account cache found. refreshing...');
}
- refreshAccount();
+ refreshCurrentAccount();
}
//#endregion
@@ -245,9 +254,7 @@ export async function common(createVue: () => App<Element>) {
await fetchCustomEmojis();
} catch (err) { /* empty */ }
- const app = createVue();
-
- setupRouter(app, createMainRouter);
+ const app = await createVue();
if (_DEV_) {
app.config.performance = true;
@@ -262,19 +269,54 @@ export async function common(createVue: () => App<Element>) {
const rootEl = ((): HTMLElement => {
const MISSKEY_MOUNT_DIV_ID = 'sharkey_app';
- const currentRoot = document.getElementById(MISSKEY_MOUNT_DIV_ID);
+ const currentRoot = window.document.getElementById(MISSKEY_MOUNT_DIV_ID);
if (currentRoot) {
console.warn('multiple import detected');
return currentRoot;
}
- const root = document.createElement('div');
+ const root = window.document.createElement('div');
root.id = MISSKEY_MOUNT_DIV_ID;
- document.body.appendChild(root);
+ window.document.body.appendChild(root);
return root;
})();
+ if (instance.sentryForFrontend) {
+ const Sentry = await import('@sentry/vue');
+ Sentry.init({
+ app,
+ integrations: [
+ ...(instance.sentryForFrontend.vueIntegration !== undefined ? [
+ Sentry.vueIntegration(instance.sentryForFrontend.vueIntegration ?? undefined),
+ ] : []),
+ ...(instance.sentryForFrontend.browserTracingIntegration !== undefined ? [
+ Sentry.browserTracingIntegration(instance.sentryForFrontend.browserTracingIntegration ?? undefined),
+ ] : []),
+ ...(instance.sentryForFrontend.replayIntegration !== undefined ? [
+ Sentry.replayIntegration(instance.sentryForFrontend.replayIntegration ?? undefined),
+ ] : []),
+ ],
+
+ // Set tracesSampleRate to 1.0 to capture 100%
+ tracesSampleRate: 1.0,
+
+ // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+ ...(instance.sentryForFrontend.browserTracingIntegration !== undefined ? {
+ tracePropagationTargets: [apiUrl],
+ } : {}),
+
+ // Capture Replay for 10% of all sessions,
+ // plus for 100% of sessions with an error
+ ...(instance.sentryForFrontend.replayIntegration !== undefined ? {
+ replaysSessionSampleRate: 0.1,
+ replaysOnErrorSampleRate: 1.0,
+ } : {}),
+
+ ...instance.sentryForFrontend.options,
+ });
+ }
+
app.mount(rootEl);
// boot.jsのやつを解除
@@ -284,34 +326,37 @@ export async function common(createVue: () => App<Element>) {
removeSplash();
//#region Self-XSS 対策メッセージ
- console.log(
- `%c${i18n.ts._selfXssPrevention.warning}`,
- 'color: #f00; background-color: #ff0; font-size: 36px; padding: 4px;',
- );
- console.log(
- `%c${i18n.ts._selfXssPrevention.title}`,
- 'color: #f00; font-weight: 900; font-family: "Hiragino Sans W9", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 24px;',
- );
- console.log(
- `%c${i18n.ts._selfXssPrevention.description1}`,
- 'font-size: 16px; font-weight: 700;',
- );
- console.log(
- `%c${i18n.ts._selfXssPrevention.description2}`,
- 'font-size: 16px;',
- 'font-size: 20px; font-weight: 700; color: #f00;',
- );
- console.log(i18n.tsx._selfXssPrevention.description3({ link: 'https://misskey-hub.net/docs/for-users/resources/self-xss/' }));
+ if (!_DEV_) {
+ console.log(
+ `%c${i18n.ts._selfXssPrevention.warning}`,
+ 'color: #f00; background-color: #ff0; font-size: 36px; padding: 4px;',
+ );
+ console.log(
+ `%c${i18n.ts._selfXssPrevention.title}`,
+ 'color: #f00; font-weight: 900; font-family: "Hiragino Sans W9", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 24px;',
+ );
+ console.log(
+ `%c${i18n.ts._selfXssPrevention.description1}`,
+ 'font-size: 16px; font-weight: 700;',
+ );
+ console.log(
+ `%c${i18n.ts._selfXssPrevention.description2}`,
+ 'font-size: 16px;',
+ 'font-size: 20px; font-weight: 700; color: #f00;',
+ );
+ console.log(i18n.tsx._selfXssPrevention.description3({ link: 'https://misskey-hub.net/docs/for-users/resources/self-xss/' }));
+ }
//#endregion
return {
isClientUpdated,
+ lastVersion,
app,
};
}
function removeSplash() {
- const splash = document.getElementById('splash');
+ const splash = window.document.getElementById('splash');
if (splash) {
splash.style.opacity = '0';
splash.style.pointerEvents = 'none';
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-03 09:26:16 +0000