create-nexwire 4.2.4 → 4.3.0

package/express/src/resources/src/layouts/Layout/Header.vue

@@ -1,105 +1,124 @@
-<template>
-  <header :class="{ scrolled: isScrolled }">
-    <nav class="navbar bg-transparent p-0">
-      <div class="container-fluid p-0 row-gap-2 column-gap-1">
-        <button
-          id="off-canvas"
-          type="button"
-          class="nav-btn order-0"
-          title="Toggle Button"
-          @click="props.onToggleSidebar">
-          <i class="bi bi-layout-text-sidebar-reverse"></i>
-        </button>
-        <div id="pagebar" class="card card-body nav-card order-5 order-sm-2"></div>
-        <template v-for="btn in featureButtons" :key="btn.id">
-          <button v-if="!btn.render" type="button" class="nav-btn order-3 order-sm-3" :class="btn.class" :title="btn.title || undefined" :aria-label="btn.label || 'button'" v-bind="btn.attrs" @click="btn.onClick">
-            <i v-if="btn.icon" :class="btn.icon"></i>
-            <span v-if="btn.label" class="ms-1">{{ btn.label }}</span>
-          </button>
-          <template v-else>
-            <component :is="featureComponent(btn)" />
-          </template>
-        </template>
-        <div class="btn-group order-4 order-sm-4">
-          <button type="button" class="nav-btn w-100" title="user" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" aria-label="button">
-            <i class="bi bi-person-circle"></i>
-          </button>
-          <ul class="dropdown-menu dropdown-menu-end">
-            <li>
-              <a class="dropdown-item" href="#">
-                <div class="d-flex align-items-center">
-                  <div class="flex-shrink-0 me-3">
-                    <i class="bi bi-person-circle fs-1"></i>
-                  </div>
-                  <div class="flex-grow-1 text-capitalize">
-                    <h6 class="mb-0">{{ authUser?.name }}</h6>
-                    <small class="text-muted">{{ authUser.role?.name }}</small>
-                  </div>
-                </div>
-              </a>
-            </li>
-            <li>
-              <div class="dropdown-divider my-1"></div>
-            </li>
-            <li>
-              <router-link class="dropdown-item" to="/profile">
-                <i class="bi bi-person-check me-3"></i><span>My Profile</span>
-              </router-link>
-            </li>
-            <li>
-              <button type="button" class="dropdown-item" @click="props.onLogout">
-                <i class="bi bi-power me-3"></i><span>Log Out</span>
-              </button>
-            </li>
-          </ul>
-        </div>
-        <button id="theme-switch" type="button" title="theme" class="nav-btn order-1 order-sm-5" aria-label="button" @click="props.onToggleTheme">
-          <i :class="themeIconClass"></i>
-        </button>
-      </div>
-    </nav>
-  </header>
-</template>
-
-<script setup lang="ts">
-import { computed, h, inject } from "vue";
-import { authUser } from "@/composables/useAuth";
-
-interface ButtonEntry {
-  id: symbol;
-  icon?: string;
-  label: string;
-  title: string;
-  attrs?: Record<string, string>;
-  class?: any;
-  onClick: () => void;
-  render?: () => any[];
-}
-
-const featureButtons = inject<ButtonEntry[]>("featureButtons")!;
-
-function featureComponent(btn: ButtonEntry) {
-  return {
-    name: "FeatureSlot",
-    render: () => h("div", { class: ["order-3 order-sm-4", btn.class] }, btn.render!())
-  };
-}
-
-interface HeaderProps {
-  isScrolled: boolean;
-  themeMode: "light" | "dark" | "auto";
-  onLogout: () => void | Promise<void>;
-  onToggleSidebar: () => void;
-  onToggleTheme: () => void;
-}
-
-const props = defineProps<HeaderProps>();
-
-const themeIconClass = computed(() => {
-  if (props.themeMode === "light") return "bi bi-brightness-high-fill";
-  if (props.themeMode === "dark") return "bi bi-moon-stars";
-  return "bi bi-circle-half";
-});
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <header :class="{ scrolled: isScrolled }">
+    <nav class="navbar bg-transparent p-0">
+      <div class="container-fluid p-0 row-gap-2 column-gap-1">
+        <button id="off-canvas" type="button" class="nav-btn order-0" title="Toggle Button" @click="props.onToggleSidebar">
+          <i class="bi bi-layout-text-sidebar-reverse"></i>
+        </button>
+        <div id="pagebar" class="card card-body nav-card order-5 order-sm-2"></div>
+        <template v-for="btn in featureButtons" :key="btn.id">
+          <button
+            v-if="!btn.render"
+            type="button"
+            class="nav-btn order-3 order-sm-3"
+            :class="btn.class"
+            :title="btn.title || undefined"
+            :aria-label="btn.label || 'button'"
+            v-bind="btn.attrs"
+            @click="btn.onClick"
+          >
+            <i v-if="btn.icon" :class="btn.icon"></i>
+            <span v-if="btn.label" class="ms-1">{{ btn.label }}</span>
+          </button>
+          <template v-else>
+            <component :is="featureComponent(btn)" />
+          </template>
+        </template>
+        <div class="btn-group order-4 order-sm-4">
+          <button
+            type="button"
+            class="nav-btn w-100"
+            title="user"
+            data-bs-toggle="dropdown"
+            data-bs-display="static"
+            aria-expanded="false"
+            aria-label="button"
+          >
+            <i class="bi bi-person-circle"></i>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li>
+              <a class="dropdown-item" href="#">
+                <div class="d-flex align-items-center">
+                  <div class="flex-shrink-0 me-3">
+                    <i class="bi bi-person-circle fs-1"></i>
+                  </div>
+                  <div class="flex-grow-1 text-capitalize">
+                    <h6 class="mb-0">{{ authUser?.name }}</h6>
+                    <small class="text-muted">{{ authUser.role?.name }}</small>
+                  </div>
+                </div>
+              </a>
+            </li>
+            <li>
+              <div class="dropdown-divider my-1"></div>
+            </li>
+            <li>
+              <router-link class="dropdown-item" to="#">
+                <i class="bi bi-person-check me-3"></i><span>My Profile</span>
+              </router-link>
+            </li>
+            <li>
+              <button type="button" class="dropdown-item" @click="props.onLogout">
+                <i class="bi bi-power me-3"></i><span>Log Out</span>
+              </button>
+            </li>
+          </ul>
+        </div>
+        <button
+          id="theme-switch"
+          type="button"
+          title="theme"
+          class="nav-btn order-1 order-sm-5"
+          aria-label="button"
+          @click="props.onToggleTheme"
+        >
+          <i :class="themeIconClass"></i>
+        </button>
+      </div>
+    </nav>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed, h, inject } from "vue";
+import { authUser } from "@/composables/useAuth";
+
+interface ButtonEntry {
+  id: symbol;
+  icon?: string;
+  label: string;
+  title: string;
+  attrs?: Record<string, string>;
+  class?: any;
+  onClick: () => void;
+  render?: () => any[];
+}
+
+const featureButtons = inject<ButtonEntry[]>("featureButtons")!;
+
+function featureComponent(btn: ButtonEntry) {
+  return {
+    name: "FeatureSlot",
+    render: () => h("div", { class: ["order-3 order-sm-4", btn.class] }, btn.render!())
+  };
+}
+
+interface HeaderProps {
+  isScrolled: boolean;
+  themeMode: "light" | "dark" | "auto";
+  onLogout: () => void | Promise<void>;
+  onToggleSidebar: () => void;
+  onToggleTheme: () => void;
+}
+
+const props = defineProps<HeaderProps>();
+
+const themeIconClass = computed(() => {
+  if (props.themeMode === "light") return "bi bi-brightness-high-fill";
+  if (props.themeMode === "dark") return "bi bi-moon-stars";
+  return "bi bi-circle-half";
+});
+</script>
+
+<style lang="scss" scoped></style>

package/express/src/resources/src/main.ts

@@ -15,7 +15,9 @@ import "bootstrap/dist/js/bootstrap.bundle.min.js";
 
 const app = createApp(App);
 const pinia = createPinia();
-const head = createHead({ titleTemplate: (title) => (title ? `${title} | nexwire` : "nexwire") });
+const head = createHead({
+  init: [{ titleTemplate: (title) => (title ? `${title} | nexwire` : "nexwire") }],
+});
 
 app.use(pinia);
 app.use(router);

package/express/src/resources/src/plugins/gum.ts

@@ -50,7 +50,7 @@ type ValidationErrorPayload = {
 };
 
 function normalizeValidationErrors(payload?: ValidationErrorPayload): NormalizedErrors {
-  const normalized: NormalizedErrors = { ...(payload?.errors || {}) };
+  const normalized: NormalizedErrors = { ...payload?.errors };
 
   const issues = payload?.error?.issues;
   if (Array.isArray(issues)) {

package/express/src/resources/src/plugins/pulse.ts

@@ -1,147 +1,157 @@
-import { io, type Socket } from "socket.io-client";
-import type { App } from "vue";
-
-declare const __SOCKET_ENABLED__: boolean;
-
-type EventCallback<T = unknown> = (payload: T) => void;
-
-type ChannelBinding = {
-  event: string;
-  callback: EventCallback;
-  wrapped: EventCallback;
-};
-
-type PulseChannel = {
-  listen: <T = unknown>(event: string, callback: EventCallback<T>) => PulseChannel;
-  stopListening: (event: string, callback?: EventCallback) => PulseChannel;
-};
-
-export type PulseClient = {
-  connect: () => PulseClient;
-  disconnect: () => PulseClient;
-  channel: (name: string) => PulseChannel;
-  private: (room: string) => PulseChannel;
-  leave: (room: string) => PulseClient;
-};
-
-function createPulse(): PulseClient {
-  if (!__SOCKET_ENABLED__) {
-    const n = (): PulseChannel => ({ listen: () => n(), stopListening: () => n() });
-    const c: PulseClient = {
-      connect: () => c,
-      disconnect: () => c,
-      channel: n,
-      private: n,
-      leave: () => c
-    };
-    return c;
-  }
-  let socket: Socket | null = null;
-  const channels = new Map<string, ChannelBinding[]>();
-  const joinedRooms = new Set<string>();
-
-  const socketUrl = () => {
-    const explicit = import.meta.env.VITE_SOCKET_URL || import.meta.env.VITE_API_URL;
-    if (explicit) return explicit;
-    return window.location.origin;
-  };
-
-  const ensureConnected = () => {
-    if (socket) return socket;
-
-    socket = io(socketUrl(), {
-      withCredentials: true,
-      transports: ["websocket", "polling"]
-    });
-
-    socket.on("connect", () => {
-      for (const room of joinedRooms) {
-        socket?.emit("join", room);
-      }
-    });
-
-    return socket;
-  };
-
-  const channel = (name: string): PulseChannel => {
-    const room = String(name).trim();
-    if (!room) throw new Error("Channel name is required");
-
-    const currentSocket = ensureConnected();
-    joinedRooms.add(room);
-    currentSocket.emit("join", room);
-
-    const api: PulseChannel = {
-      listen: <T = unknown>(event: string, callback: EventCallback<T>) => {
-        const wrapped = (payload: unknown) => callback(payload as T);
-        const bindings = channels.get(room) || [];
-        bindings.push({ event, callback: callback as EventCallback, wrapped });
-        channels.set(room, bindings);
-        currentSocket.on(event, wrapped);
-        return api;
-      },
-      stopListening: (event: string, callback?: EventCallback) => {
-        const bindings = channels.get(room) || [];
-        const kept: ChannelBinding[] = [];
-
-        for (const binding of bindings) {
-          const matchesEvent = binding.event === event;
-          const matchesCallback = !callback || binding.callback === callback;
-          if (matchesEvent && matchesCallback) {
-            currentSocket.off(binding.event, binding.wrapped);
-          } else {
-            kept.push(binding);
-          }
-        }
-
-        if (kept.length > 0) channels.set(room, kept);
-        else channels.delete(room);
-        return api;
-      }
-    };
-
-    return api;
-  };
-
-  const pulse: PulseClient = {
-    connect: () => {
-      ensureConnected();
-      return pulse;
-    },
-    disconnect: () => {
-      socket?.disconnect();
-      socket = null;
-      return pulse;
-    },
-    channel,
-    private: (room: string) => channel(`private:${room}`),
-    leave: (room: string) => {
-      if (!socket) return pulse;
-
-      const bindings = channels.get(room) || [];
-      for (const binding of bindings) {
-        socket.off(binding.event, binding.wrapped);
-      }
-
-      channels.delete(room);
-      joinedRooms.delete(room);
-      return pulse;
-    }
-  };
-
-  return pulse;
-}
-
-export const pulse = createPulse();
-
-export const PulsePlugin = {
-  install(app: App) {
-    app.config.globalProperties.$pulse = pulse;
-  }
-};
-
-declare module "vue" {
-  interface ComponentCustomProperties {
-    $pulse: PulseClient;
-  }
-}
+import { io, type Socket } from "socket.io-client";
+import type { App } from "vue";
+
+// 1. Read the value Vite inlines into this module. Do not use a bare `define`
+//    global here: in dev it is a window global and can survive a server
+//    restart or browser cache, leaving Pulse enabled after SOCKET=false.
+const isSocketEnabled = import.meta.env.VITE_SOCKET_ENABLED === true;
+
+type EventCallback<T = unknown> = (payload: T) => void;
+
+type ChannelBinding = {
+  event: string;
+  callback: EventCallback;
+  wrapped: EventCallback;
+};
+
+type PulseChannel = {
+  listen: <T = unknown>(event: string, callback: EventCallback<T>) => PulseChannel;
+  stopListening: (event: string, callback?: EventCallback) => PulseChannel;
+};
+
+export type PulseClient = {
+  connect: () => PulseClient;
+  disconnect: () => PulseClient;
+  channel: (name: string) => PulseChannel;
+  private: (room: string) => PulseChannel;
+  leave: (room: string) => PulseClient;
+};
+
+function createPulse(): PulseClient {
+  // 2. If disabled, return the no-op dummy client immediately
+  if (!isSocketEnabled) {
+    const dummyChannel = (): PulseChannel => ({
+      listen: () => dummyChannel(),
+      stopListening: () => dummyChannel()
+    });
+
+    const dummyClient: PulseClient = {
+      connect: () => dummyClient,
+      disconnect: () => dummyClient,
+      channel: dummyChannel,
+      private: dummyChannel,
+      leave: () => dummyClient
+    };
+
+    return dummyClient;
+  }
+
+  let socket: Socket | null = null;
+  const channels = new Map<string, ChannelBinding[]>();
+  const joinedRooms = new Set<string>();
+
+  const socketUrl = () => {
+    const explicit = import.meta.env.VITE_SOCKET_URL || import.meta.env.VITE_API_URL;
+    if (explicit) return explicit;
+    return window.location.origin;
+  };
+
+  const ensureConnected = () => {
+    if (socket) return socket;
+
+    socket = io(socketUrl(), {
+      withCredentials: true,
+      transports: ["websocket", "polling"]
+    });
+
+    socket.on("connect", () => {
+      for (const room of joinedRooms) {
+        socket?.emit("join", room);
+      }
+    });
+
+    return socket;
+  };
+
+  const channel = (name: string): PulseChannel => {
+    const room = String(name).trim();
+    if (!room) throw new Error("Channel name is required");
+
+    const currentSocket = ensureConnected();
+    joinedRooms.add(room);
+    currentSocket.emit("join", room);
+
+    const api: PulseChannel = {
+      listen: <T = unknown>(event: string, callback: EventCallback<T>) => {
+        const wrapped = (payload: unknown) => callback(payload as T);
+        const bindings = channels.get(room) || [];
+        bindings.push({ event, callback: callback as EventCallback, wrapped });
+        channels.set(room, bindings);
+        currentSocket.on(event, wrapped);
+        return api;
+      },
+      stopListening: (event: string, callback?: EventCallback) => {
+        const bindings = channels.get(room) || [];
+        const kept: ChannelBinding[] = [];
+
+        for (const binding of bindings) {
+          const matchesEvent = binding.event === event;
+          const matchesCallback = !callback || binding.callback === callback;
+          if (matchesEvent && matchesCallback) {
+            currentSocket.off(binding.event, binding.wrapped);
+          } else {
+            kept.push(binding);
+          }
+        }
+
+        if (kept.length > 0) channels.set(room, kept);
+        else channels.delete(room);
+        return api;
+      }
+    };
+
+    return api;
+  };
+
+  const pulse: PulseClient = {
+    connect: () => {
+      ensureConnected();
+      return pulse;
+    },
+    disconnect: () => {
+      socket?.disconnect();
+      socket = null;
+      return pulse;
+    },
+    channel,
+    private: (room: string) => channel(`private:${room}`),
+    leave: (room: string) => {
+      if (!socket) return pulse;
+
+      const bindings = channels.get(room) || [];
+      for (const binding of bindings) {
+        socket.off(binding.event, binding.wrapped);
+      }
+
+      channels.delete(room);
+      joinedRooms.delete(room);
+      return pulse;
+    }
+  };
+
+  return pulse;
+}
+
+export const pulse = createPulse();
+
+export const PulsePlugin = {
+  install(app: App) {
+    app.config.globalProperties.$pulse = pulse;
+  }
+};
+
+declare module "vue" {
+  interface ComponentCustomProperties {
+    $pulse: PulseClient;
+  }
+}