create-nexwire 4.2.4 → 4.3.0

package/hono/src/resources/src/stores/auth.ts

@@ -1,164 +1,184 @@
-import axios from "axios";
-import { defineStore } from "pinia";
-import { ref } from "vue";
-import { type AuthUser, clearUser, setUser } from "@/composables/useAuth";
-
-type LoginPayload = { email: string; password: string; remember?: boolean };
-type RegisterPayload = {
-  name: string;
-  email: string;
-  password: string;
-  password_confirmation: string;
-};
-type VerifyEmailPayload = { email: string; token: string };
-type ForgotPayload = { email: string };
-type ResetPayload = {
-  email: string;
-  token: string;
-  password: string;
-  password_confirmation: string;
-};
-
-type ApiResponse<T> = { message: string; data?: T };
-type AuthData = { user: AuthUser };
-
-async function request<T>(method: "GET" | "POST", path: string, payload?: unknown): Promise<ApiResponse<T>> {
-  try {
-    const response = await axios.request<ApiResponse<T>>({
-      method,
-      url: `/api/auth${path}`,
-      data: payload
-    });
-
-    return response.data;
-  } catch (error: unknown) {
-    if (axios.isAxiosError(error)) {
-      throw new Error(String(error.response?.data?.message || error.message || "Request failed"));
-    }
-    throw new Error("Request failed");
-  }
-}
-
-const MAX_BOOTSTRAP_ATTEMPTS = 5;
-const BOOTSTRAP_BACKOFF_MS = 500;
-
-const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
-export const useAuthStore = defineStore("auth", () => {
-  const user = ref<AuthUser | null>(null);
-  const isAuthenticated = ref(false);
-  const processing = ref(false);
-  const initialized = ref(false);
-
-  const syncUser = (value: AuthUser | null) => {
-    user.value = value;
-    isAuthenticated.value = !!value;
-    if (value) setUser(value);
-    else clearUser();
-  };
-
-  const bootstrap = async () => {
-    if (initialized.value) return;
-
-    for (let attempt = 1; attempt <= MAX_BOOTSTRAP_ATTEMPTS; attempt++) {
-      try {
-        const response = await axios.get<ApiResponse<AuthUser>>("/api/auth/me");
-        syncUser((response.data?.data || null) as AuthUser | null);
-        break;
-      } catch (error) {
-        const backendUnreachable = axios.isAxiosError(error) && !error.response;
-        if (!backendUnreachable || attempt === MAX_BOOTSTRAP_ATTEMPTS) {
-          syncUser(null);
-          break;
-        }
-        await sleep(BOOTSTRAP_BACKOFF_MS * 2 ** (attempt - 1));
-      }
-    }
-
-    initialized.value = true;
-  };
-
-  const login = async (payload: LoginPayload) => {
-    processing.value = true;
-    try {
-      const data = await request<AuthData>("POST", "/login", payload);
-      syncUser((data?.data?.user || null) as AuthUser | null);
-      initialized.value = true;
-      return data.message || "Login successful";
-    } finally {
-      processing.value = false;
-    }
-  };
-
-  const register = async (payload: RegisterPayload) => {
-    processing.value = true;
-    try {
-      const data = await request<AuthData>("POST", "/register", payload);
-      const createdUser = (data?.data?.user || null) as AuthUser | null;
-      if (createdUser) {
-        syncUser(createdUser);
-        initialized.value = true;
-      } else {
-        syncUser(null);
-      }
-      return data.message || "Registration successful";
-    } finally {
-      processing.value = false;
-    }
-  };
-
-  const verifyEmail = async (payload: VerifyEmailPayload) => {
-    processing.value = true;
-    try {
-      const data = await request<unknown>("POST", "/verify-email", payload);
-      return data.message || "Email verified successfully";
-    } finally {
-      processing.value = false;
-    }
-  };
-
-  const forgotPassword = async (payload: ForgotPayload) => {
-    processing.value = true;
-    try {
-      const data = await request<unknown>("POST", "/forgot-password", payload);
-      return data.message || "If this email exists, a reset link has been sent";
-    } finally {
-      processing.value = false;
-    }
-  };
-
-  const resetPassword = async (payload: ResetPayload) => {
-    processing.value = true;
-    try {
-      const data = await request<unknown>("POST", "/reset-password", payload);
-      return data.message || "Password reset successfully";
-    } finally {
-      processing.value = false;
-    }
-  };
-
-  const logout = async () => {
-    processing.value = true;
-    try {
-      await request<unknown>("POST", "/logout");
-    } finally {
-      syncUser(null);
-      processing.value = false;
-      initialized.value = true;
-    }
-  };
-
-  return {
-    user,
-    isAuthenticated,
-    processing,
-    initialized,
-    bootstrap,
-    register,
-    login,
-    forgotPassword,
-    resetPassword,
-    verifyEmail,
-    logout
-  };
-});
+import axios from "axios";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { type AuthUser, clearUser, setUser } from "@/composables/useAuth";
+
+type LoginPayload = { email?: string; phone?: string; password: string; remember?: boolean };
+type VerifyEmailPayload = { email: string; token: string };
+type ForgotPayload = { email: string };
+
+type RegisterPayload = {
+  name: string;
+  email?: string;
+  phone?: string;
+  password: string;
+  password_confirmation: string;
+};
+
+type ResetPayload = {
+  email: string;
+  token: string;
+  password: string;
+  password_confirmation: string;
+};
+
+type ApiResponse<T> = { message: string; data?: T };
+type AuthData = { user: AuthUser };
+
+async function request<T>(method: "GET" | "POST", path: string, payload?: unknown): Promise<ApiResponse<T>> {
+  try {
+    const response = await axios.request<ApiResponse<T>>({
+      method,
+      url: `/api/auth${path}`,
+      data: payload
+    });
+
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error)) {
+      throw new Error(String(error.response?.data?.message || error.message || "Request failed"));
+    }
+    throw new Error("Request failed");
+  }
+}
+
+const MAX_BOOTSTRAP_ATTEMPTS = 5;
+const BOOTSTRAP_BACKOFF_MS = 500;
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const useAuthStore = defineStore("auth", () => {
+  const user = ref<AuthUser | null>(null);
+  const isAuthenticated = ref(false);
+  const processing = ref(false);
+  const initialized = ref(false);
+
+  const syncUser = (value: AuthUser | null) => {
+    user.value = value;
+    isAuthenticated.value = !!value;
+    if (value) setUser(value);
+    else clearUser();
+  };
+
+  let bootstrapPromise: Promise<void> | null = null;
+  const bootstrap = async () => {
+    if (initialized.value) return;
+
+    // Reuse the same request if multiple navigations call bootstrap.
+    if (bootstrapPromise) {
+      return bootstrapPromise;
+    }
+
+    bootstrapPromise = (async () => {
+      for (let attempt = 1; attempt <= MAX_BOOTSTRAP_ATTEMPTS; attempt++) {
+        try {
+          const response = await axios.get<ApiResponse<AuthUser>>("/api/auth/me");
+
+          syncUser((response.data?.data || null) as AuthUser | null);
+          initialized.value = true;
+          return;
+        } catch (error) {
+          const backendUnreachable = axios.isAxiosError(error) && !error.response;
+
+          if (!backendUnreachable || attempt === MAX_BOOTSTRAP_ATTEMPTS) {
+            syncUser(null);
+            initialized.value = true;
+            return;
+          }
+
+          await sleep(BOOTSTRAP_BACKOFF_MS * 2 ** (attempt - 1));
+        }
+      }
+    })();
+
+    try {
+      await bootstrapPromise;
+    } finally {
+      bootstrapPromise = null;
+    }
+  };
+
+  const login = async (payload: LoginPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<AuthData>("POST", "/login", payload);
+      syncUser((data?.data?.user || null) as AuthUser | null);
+      initialized.value = true;
+      return data.message || "Login successful";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const register = async (payload: RegisterPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<AuthData>("POST", "/register", payload);
+      const createdUser = (data?.data?.user || null) as AuthUser | null;
+      if (createdUser) {
+        syncUser(createdUser);
+        initialized.value = true;
+      } else {
+        syncUser(null);
+      }
+      return data.message || "Registration successful";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const verifyEmail = async (payload: VerifyEmailPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<unknown>("POST", "/verify-email", payload);
+      return data.message || "Email verified successfully";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const forgotPassword = async (payload: ForgotPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<unknown>("POST", "/forgot-password", payload);
+      return data.message || "If this email exists, a reset link has been sent";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const resetPassword = async (payload: ResetPayload) => {
+    processing.value = true;
+    try {
+      const data = await request<unknown>("POST", "/reset-password", payload);
+      return data.message || "Password reset successfully";
+    } finally {
+      processing.value = false;
+    }
+  };
+
+  const logout = async () => {
+    processing.value = true;
+    try {
+      await request<unknown>("POST", "/logout");
+    } finally {
+      syncUser(null);
+      processing.value = false;
+      initialized.value = true;
+    }
+  };
+
+  return {
+    user,
+    isAuthenticated,
+    processing,
+    initialized,
+    bootstrap,
+    register,
+    login,
+    forgotPassword,
+    resetPassword,
+    verifyEmail,
+    logout
+  };
+});

package/hono/src/resources/vite.config.ts

@@ -1,46 +1,64 @@
 import path from "node:path";
 import { fileURLToPath, URL } from "node:url";
 import vue from "@vitejs/plugin-vue";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 
-const cacheBase = process.env.LOCALAPPDATA || process.env.TEMP || ".";
-const apiUrl = process.env.APP_URL || "http://localhost:3000";
-const socketEnabled = process.env.SOCKET !== "false";
+const configDir = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(configDir, "../..");
 
-const proxy: Record<string, any> = {
-  "/api": { target: apiUrl, changeOrigin: true },
-  "/health": { target: apiUrl, changeOrigin: true },
-  "/storage": { target: apiUrl, changeOrigin: true }
-};
+export default defineConfig(({ mode }) => {
+  // 1. Load the .env file just like the backend does. Resolve it from the
+  // config file so a different process cwd cannot point Vite at the wrong .env.
+  const env = loadEnv(mode, projectRoot, "");
 
-proxy["/socket.io"] = { target: apiUrl, changeOrigin: true, ws: true };
+  const cacheBase = process.env.LOCALAPPDATA || process.env.TEMP || ".";
+  const apiUrl = env.APP_URL || "http://localhost:3000";
 
-export default defineConfig({
-  define: {
-    __SOCKET_ENABLED__: socketEnabled,
-    __API_URL__: JSON.stringify(apiUrl)
-  },
-  root: "src/resources",
-  cacheDir: path.join(cacheBase, "nexwire", "vite-cache", "resources"),
-  plugins: [vue()],
-  css: {
-    preprocessorOptions: {
-      scss: {
-        quietDeps: true
+  // Match the backend default: Socket.IO is off unless SOCKET=true
+  const socketEnabled = env.SOCKET === "true";
+
+  const proxy: Record<string, any> = {
+    "/api": { target: apiUrl, changeOrigin: true },
+    "/health": { target: apiUrl, changeOrigin: true },
+    "/storage": { target: apiUrl, changeOrigin: true }
+  };
+
+  if (socketEnabled) {
+    proxy["/socket.io"] = { target: apiUrl, changeOrigin: true, ws: true, timeout: 10000 };
+  }
+
+  return {
+    define: {
+      // 3. ALWAYS stringify the value when using Vite define
+      // `import.meta.env.*` is inlined into every module in dev as well as in
+      // the production bundle, so the UI never depends on a stale global.
+      "import.meta.env.VITE_SOCKET_ENABLED": JSON.stringify(socketEnabled),
+      __SOCKET_ENABLED__: JSON.stringify(socketEnabled),
+      __API_URL__: JSON.stringify(apiUrl)
+    },
+    root: fileURLToPath(new URL(".", import.meta.url)),
+    cacheDir: path.join(cacheBase, "nexwire", "vite-cache", "resources"),
+    plugins: [vue()],
+    css: {
+      preprocessorOptions: {
+        scss: {
+          quietDeps: true,
+          silenceDeprecations: ["import", "if-function", "global-builtin", "color-functions", "slash-div"]
+        }
       }
+    },
+    resolve: {
+      alias: {
+        "@": fileURLToPath(new URL("./src", import.meta.url))
+      }
+    },
+    build: {
+      outDir: "../../public",
+      emptyOutDir: true
+    },
+    server: {
+      port: 5173,
+      proxy // /socket.io is only proxied when SOCKET=true
     }
-  },
-  resolve: {
-    alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url))
-    }
-  },
-  build: {
-    outDir: "../../public",
-    emptyOutDir: true
-  },
-  server: {
-    port: 5173,
-    proxy
-  }
+  };
 });

package/hono/src/types/global.d.ts

@@ -1,26 +1,32 @@
-declare module "*.vue" {
-  import type { DefineComponent } from "vue";
-
-  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-  export default component;
-}
-
-declare module "bootstrap/js/dist/modal.js" {
-  export default class Modal {
-    constructor(element: Element, options?: { backdrop?: boolean | "static"; keyboard?: boolean });
-    show(): void;
-    hide(): void;
-    dispose(): void;
-  }
-}
-
-declare module "bootstrap/js/dist/toast.js" {
-  export default class Toast {
-    static getOrCreateInstance(element: Element): Toast;
-    show(): void;
-  }
-}
-
-declare module "luxon";
-declare module "nodemailer";
-declare module "vue-select";
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default component;
+}
+
+declare module "bootstrap/js/dist/modal.js" {
+  export default class Modal {
+    constructor(element: Element, options?: { backdrop?: boolean | "static"; keyboard?: boolean });
+    show(): void;
+    hide(): void;
+    dispose(): void;
+  }
+}
+
+declare module "bootstrap/js/dist/toast.js" {
+  export default class Toast {
+    static getOrCreateInstance(element: Element): Toast;
+    show(): void;
+  }
+}
+
+declare module "luxon";
+declare module "nodemailer";
+declare module "vue-select";
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL?: string;
+  readonly VITE_SOCKET_URL?: string;
+  readonly VITE_SOCKET_ENABLED?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nexwire",
-  "version": "4.2.4",
+  "version": "4.3.0",
   "type": "module",
   "description": "Scaffold a new nexwire project",
   "bin": {
@@ -72,7 +72,7 @@
     "ioredis": "^5",
     "lodash-es": "^4",
     "luxon": "^3",
-    "maildev": "^3",
+    "maildev": "^2.2.1",
     "mysql2": "^3",
     "nodemailer": "^10",
     "pinia": "^3",