@mundogamernetwork/shared-ui 1.16.2 → 1.16.4

package/nuxt.config.ts

@@ -72,28 +72,20 @@ export default defineNuxtConfig({
 	build: {
 		transpile: ['@vue-leaflet/vue-leaflet'],
 	},
-	// pusher-js's browser build is a webpack-bundled UMD file: `module.exports
-	// = factory()` where factory() internally does
-	// `__webpack_exports__["default"] = Pusher` and returns that object. To a
-	// real ES module consumer that looks exactly like "this CJS module wants
-	// default-export interop", but esbuild's static CJS/ESM detection doesn't
-	// reliably recognize that shape here — on some dep-graph paths (this repo
-	// doesn't import pusher-js directly, plugins/echo.client.ts here and in
-	// several consuming apps' own copies of the same plugin do) the raw dist
-	// file gets served to the browser as-is instead of through Vite's
-	// optimized/interop-wrapped dep cache, and `import Pusher from
-	// "pusher-js"` throws "does not provide an export named 'default'" at
-	// evaluation time — before the plugin's own pusherKey guard ever runs, so
-	// it takes the whole plugin down, and on hosts where that happens during
-	// app bootstrap it silently breaks ALL click handling on the page (every
-	// header dropdown, the sidebar toggle, everything — not just this
-	// plugin's own WebSocket setup). needsInterop forces Vite to always
-	// treat it as CJS needing the default-export wrapper, which is the fix
-	// Vite ships for exactly this class of mismatch.
+	// pusher-js's browser build is a webpack-bundled UMD file
+	// (module.exports = factory(), no real ESM default export). needsInterop
+	// here was an earlier attempt at fixing plugins/echo.client.ts's import of
+	// it — proven unreliable across consuming hosts (still crashed on a real,
+	// non-symlinked install even with this exact config). The actual fix now
+	// lives in echo.client.ts itself: it no longer imports pusher-js as a
+	// module at all, instead pulling its source in as a plain string
+	// (`?raw`) and executing it directly, letting the UMD wrapper's own
+	// browser-global fallback (`root["Pusher"] = factory()`) self-register
+	// window.Pusher. laravel-echo is still a real, safely-interoppable
+	// dynamic import, so it stays here.
 	vite: {
 		optimizeDeps: {
-			include: ["pusher-js", "laravel-echo"],
-			needsInterop: ["pusher-js"],
+			include: ["laravel-echo"],
 		},
 	},
 	components: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.16.2",
+  "version": "1.16.4",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/plugins/echo.client.ts

@@ -1,6 +1,15 @@
-import Echo from "laravel-echo";
-import Pusher from "pusher-js";
 import axios from "axios";
+// Raw source, not a real import: pusher-js ships only a webpack-UMD bundle
+// (module.exports = factory(), no ESM default export), and Vite's CJS
+// interop for it doesn't reliably kick in across every consuming host —
+// including as a dynamic import, which still surfaced as an empty/unusable
+// module namespace object in testing (`Pusher is not a constructor`). The
+// UMD wrapper itself already knows how to self-register on `window` when no
+// module system is present (`else root["Pusher"] = factory()`, with `root`
+// passed in as `window` directly) — so instead of asking Vite/ESM to
+// understand this file at all, its source is pulled in as a plain string
+// and executed directly, letting that fallback branch do the work.
+import pusherSrc from "pusher-js/dist/web/pusher.js?raw";
 
 declare global {
 	interface Window {
@@ -13,7 +22,7 @@ export default defineNuxtPlugin({
 	name: "shared-ui-echo",
 	enforce: "post",
 	parallel: true,
-	setup(nuxtApp) {
+	async setup(nuxtApp) {
 	// Skip if already provided by the extending frontend's own Echo plugin
 	if (nuxtApp.$echo || window.Echo) {
 		return;
@@ -28,6 +37,20 @@ export default defineNuxtPlugin({
 		return;
 	}
 
+	// laravel-echo is a real ESM/CJS-interoppable package; a plain dynamic
+	// import is enough (and, unlike the static import this plugin used to
+	// have, confines any future interop failure to this plugin instead of
+	// crashing the whole client bundle before Vue mounts).
+	const EchoModule = await import("laravel-echo");
+	const Echo = (EchoModule as any).default ?? EchoModule;
+
+	// See the pusherSrc import comment above — self-registers window.Pusher.
+	if (!window.Pusher) {
+		// eslint-disable-next-line no-new-func
+		new Function(pusherSrc)();
+	}
+	const Pusher = window.Pusher;
+
 	const headers: Record<string, string> = {
 		Accept: "application/json",
 	};

package/services/userStatusService.ts

@@ -0,0 +1,21 @@
+import httpService from "./httpService";
+
+// httpService's baseURL always ends with /api/v1 (see httpService.ts's
+// getHttpService()), so the path here must NOT repeat that prefix — unlike
+// the per-site copies of this file, whose own httpService.ts instances
+// don't normalize it away.
+export const getUserStatus = async () => {
+	const params = {
+		platform_id: import.meta.env.VITE_SYSTEM_ID,
+	};
+	return await httpService.get(`/public/user-status`, { params });
+};
+
+export const userChangeStatus = async (status: boolean) => {
+	const params = {
+		platform_id: import.meta.env.VITE_SYSTEM_ID,
+		hidden_status: status,
+	};
+
+	return await httpService.post(`/public/user-status`, params);
+};

package/stores/auth.ts

@@ -13,6 +13,8 @@ export const useAuthStore = defineStore({
 			signedIn: false,
 			initialized: false,
 			loading: false,
+			showOnline: false,
+			statusLoaded: false,
 		};
 	},
 	actions: {
@@ -65,6 +67,31 @@ export const useAuthStore = defineStore({
 			this.signedIn = false;
 			this.initialized = false;
 			this.loading = false;
+			this.showOnline = false;
+			this.statusLoaded = false;
+		},
+		// Used by shop-frontend, the one site with no local stores/auth.ts of its
+		// own (it re-exports this store directly — see its own file for why).
+		// Every other site has its own copy of this same pattern in its local
+		// store, wired to its own services/userStatusService.ts.
+		async fetchOnlineStatus() {
+			if (this.statusLoaded || !this.signedIn) return;
+			try {
+				const { getUserStatus } = await import("../services/userStatusService");
+				const response = await getUserStatus();
+				this.showOnline = !response.data.data[0].user_status[0].hidden_status;
+				this.statusLoaded = true;
+			} catch (e: any) {
+				if (e?.response?.status !== 401) {
+					this.showOnline = false;
+					this.statusLoaded = true;
+				}
+			}
+		},
+		async toggleOnlineStatus() {
+			this.showOnline = !this.showOnline;
+			const { userChangeStatus } = await import("../services/userStatusService");
+			await userChangeStatus(!this.showOnline);
 		},
 	},
 	getters: {