create-nexwire 4.2.3 → 4.2.5

package/hono/src/resources/src/helpers/assets.ts

@@ -0,0 +1,51 @@
+// src/helpers/assets.ts
+
+// 1. Eagerly load ALL images in the entire src folder.
+// This tells Vite: "Find every image, hash it, and give me the final URL."
+const allImages = import.meta.glob("/src/**/*.{png,jpg,jpeg,svg,webp,gif}", {
+  eager: true,
+  import: "default"
+});
+
+/**
+ * Resolves ANY image path (using @, relative, or absolute) for both dev and prod.
+ */
+export default function asset(path: string): string {
+  // 1. If it's already a full URL or data URI, return it as is.
+  if (path.startsWith("http") || path.startsWith("data:")) {
+    return path;
+  }
+
+  // 2. Normalize the path.
+  // Vite's glob keys always start from the root, like "/src/assets/..."
+  let cleanPath = path;
+
+  // Convert alias `@/` to `/src/`
+  if (cleanPath.startsWith("@/")) {
+    cleanPath = cleanPath.replace("@/", "/src/");
+  }
+  // Convert absolute `/` to `/src/` (assuming you mean inside src)
+  else if (cleanPath.startsWith("/") && !cleanPath.startsWith("/src/")) {
+    cleanPath = `/src${cleanPath}`;
+  }
+  // Convert relative `../../` (This is the tricky part)
+  else if (cleanPath.startsWith("../")) {
+    // We can't easily resolve `../../` from a utility file, so we just
+    // try to find a matching suffix in the glob keys.
+    // (e.g., if you pass "../../assets/foo.png", we look for "assets/foo.png" inside /src)
+    const match = Object.keys(allImages).find((key) => key.endsWith(cleanPath.replace(/^(\.\.\/)+/, "")));
+    if (match) {
+      return allImages[match] as string;
+    }
+  }
+
+  // 3. Look up the normalized path in the glob object
+  const resolved = allImages[cleanPath] as string | undefined;
+
+  if (!resolved) {
+    console.warn(`[getAssetUrl] Image not found: ${path}. Returning original path.`);
+    return path;
+  }
+
+  return resolved;
+}

package/hono/src/resources/src/main.ts

@@ -1,5 +1,5 @@
 import "@/plugins/axios";
-import { createHead } from "@vueuse/head";
+import { createHead } from "@unhead/vue/client";
 import { createPinia } from "pinia";
 import { createApp } from "vue";
 import { DialogPlugin } from "@/plugins/dialog";
@@ -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/hono/src/resources/src/pages/auth/forgetPassword.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { useHead } from "@vueuse/head";
+import { useHead } from "@unhead/vue";
 import { ref } from "vue";
 import Button from "@/components/Button.vue";
 import Input from "@/components/Input.vue";

package/hono/src/resources/src/pages/auth/login.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { useHead } from "@vueuse/head";
+import { useHead } from "@unhead/vue";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 import Checkbox from "@/components/Checkbox.vue";

package/hono/src/resources/src/pages/auth/register.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { useHead } from "@vueuse/head";
+import { useHead } from "@unhead/vue";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 import Input from "@/components/Input.vue";

package/hono/src/resources/src/pages/auth/resetPassword.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script setup lang="ts">
-import { useHead } from "@vueuse/head";
+import { useHead } from "@unhead/vue";
 import { ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import Button from "@/components/Button.vue";

package/hono/src/resources/src/pages/auth/verifyEmail.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { useHead } from "@vueuse/head";
+import { useHead } from "@unhead/vue";
 import { ref } from "vue";
 import { useRoute } from "vue-router";
 import { useGum } from "@/plugins/gum";

package/hono/src/resources/src/pages/dashboard/index.vue

@@ -1,66 +1,66 @@
-<template>
-  <Pagebar title="Dashboard" />
-
-  <div class="dashboard-placeholder">
-    <div class="row g-2 mb-2">
-      <div class="col-12 col-md-4">
-        <div class="placeholder-card"></div>
-      </div>
-      <div class="col-12 col-md-4">
-        <div class="placeholder-card"></div>
-      </div>
-      <div class="col-12 col-md-4">
-        <div class="placeholder-card"></div>
-      </div>
-    </div>
-
-    <div class="placeholder-panel"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useHead } from "@vueuse/head";
-import { onMounted, onUnmounted } from "vue";
-import Pagebar from "@/components/Pagebar.vue";
-import { useAuth } from "@/composables/useAuth";
-import { pulse } from "@/plugins/pulse";
-
-useHead({ title: "Dashboard" });
-
-const { user } = useAuth();
-
-onMounted(() => {
-  const ch = pulse.channel("user");
-  ch.listen("user.changed", () => alert("me"));
-  onUnmounted(() => ch.stopListening("user.changed"));
-});
-
-// const hardRefresh = () => window.location.reload();
-</script>
-
-<style scoped>
-.placeholder-card,
-.placeholder-panel {
-  border: 1px solid var(--app-border);
-  border-radius: 0.3rem;
-  background: var(--app-surface);
-}
-
-.placeholder-card {
-  min-height: 220px;
-}
-
-.placeholder-panel {
-  min-height: 520px;
-}
-
-@media (max-width: 768px) {
-  .placeholder-card {
-    min-height: 160px;
-  }
-
-  .placeholder-panel {
-    min-height: 360px;
-  }
-}
-</style>
+<template>
+  <Pagebar title="Dashboard" />
+
+  <div class="dashboard-placeholder">
+    <div class="row g-2 mb-2">
+      <div class="col-12 col-md-4">
+        <div class="placeholder-card"></div>
+      </div>
+      <div class="col-12 col-md-4">
+        <div class="placeholder-card"></div>
+      </div>
+      <div class="col-12 col-md-4">
+        <div class="placeholder-card"></div>
+      </div>
+    </div>
+
+    <div class="placeholder-panel"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useHead } from "@unhead/vue";
+import { onMounted, onUnmounted } from "vue";
+import Pagebar from "@/components/Pagebar.vue";
+import { useAuth } from "@/composables/useAuth";
+import { pulse } from "@/plugins/pulse";
+
+useHead({ title: "Dashboard" });
+
+const { user } = useAuth();
+
+onMounted(() => {
+  const ch = pulse.channel("user");
+  ch.listen("user.changed", () => alert("me"));
+  onUnmounted(() => ch.stopListening("user.changed"));
+});
+
+// const hardRefresh = () => window.location.reload();
+</script>
+
+<style scoped>
+.placeholder-card,
+.placeholder-panel {
+  border: 1px solid var(--app-border);
+  border-radius: 0.3rem;
+  background: var(--app-surface);
+}
+
+.placeholder-card {
+  min-height: 220px;
+}
+
+.placeholder-panel {
+  min-height: 520px;
+}
+
+@media (max-width: 768px) {
+  .placeholder-card {
+    min-height: 160px;
+  }
+
+  .placeholder-panel {
+    min-height: 360px;
+  }
+}
+</style>

package/hono/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/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

@@ -20,13 +20,20 @@ export default defineConfig({
     __SOCKET_ENABLED__: socketEnabled,
     __API_URL__: JSON.stringify(apiUrl)
   },
-  root: "src/resources",
+  root: fileURLToPath(new URL(".", import.meta.url)),
   cacheDir: path.join(cacheBase, "nexwire", "vite-cache", "resources"),
   plugins: [vue()],
   css: {
     preprocessorOptions: {
       scss: {
-        quietDeps: true
+        quietDeps: true,
+        silenceDeprecations: [
+          "import",
+          "if-function",
+          "global-builtin",
+          "color-functions",
+          "slash-div",
+        ],
       }
     }
   },