thelounge/client/js/vue.ts
Reto Brunner 0311e5f836 add socket-events import to entry point
socket-events aren't ever imported, if we don't do that however
webpack never actually sees any code that leads to it and skips
bundling it.

So for now, do an import that has the side effect of registering
all the events until we have a proper registration in place that's
a bit more sane to call
2024-04-21 15:11:52 +02:00

84 lines
2 KiB
TypeScript

import constants from "./constants";
import "../css/style.css";
import {createApp} from "vue";
import {store, CallableGetters, key} from "./store";
import App from "../components/App.vue";
import storage from "./localStorage";
import {router} from "./router";
import socket from "./socket";
import "./socket-events"; // this sets up all socket event listeners, do not remove
import eventbus from "./eventbus";
import "./webpush";
import "./keybinds";
import {LoungeWindow} from "./types";
const favicon = document.getElementById("favicon");
const faviconNormal = favicon?.getAttribute("href") || "";
const faviconAlerted = favicon?.dataset.other || "";
export const VueApp = createApp(App);
VueApp.use(router);
VueApp.use(store, key);
VueApp.mount("#app");
socket.open();
store.watch(
(state) => state.sidebarOpen,
(sidebarOpen) => {
if (window.innerWidth > constants.mobileViewportPixels) {
storage.set("thelounge.state.sidebar", sidebarOpen.toString());
eventbus.emit("resize");
}
}
);
store.watch(
(state) => state.userlistOpen,
(userlistOpen) => {
storage.set("thelounge.state.userlist", userlistOpen.toString());
eventbus.emit("resize");
}
);
store.watch(
(_, getters: CallableGetters) => getters.title,
(title) => {
document.title = title;
}
);
// Toggles the favicon to red when there are unread notifications
store.watch(
(_, getters: CallableGetters) => getters.highlightCount,
(highlightCount) => {
favicon?.setAttribute("href", highlightCount > 0 ? faviconAlerted : faviconNormal);
const nav: LoungeWindow["navigator"] = window.navigator;
if (nav.setAppBadge) {
if (highlightCount > 0) {
nav.setAppBadge(highlightCount);
} else {
if (nav.clearAppBadge) {
nav.clearAppBadge();
}
}
}
}
);
VueApp.config.errorHandler = function (e) {
if (e instanceof Error) {
store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
} else {
store.commit("currentUserVisibleError", `Vue error: ${String(e)}`);
}
// eslint-disable-next-line no-console
console.error(e);
};