wexts 3.0.2 → 4.1.0

package/templates/nextjs-web/features/dashboard/components.tsx

@@ -1,74 +1,74 @@
-import { connection } from 'next/server';
-import { Suspense } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { getTodos, getUser } from './api';
-
-export async function UserProfile() {
-    await connection();
-    try {
-        const user = await getUser();
-        if (!user) return null;
-
-        return (
-            <div className="space-y-2">
-                <div className="h-20 w-20 rounded-full bg-gradient-to-br from-primary to-indigo-600 flex items-center justify-center text-3xl text-white font-bold mx-auto mb-4 shadow-lg shadow-primary/25">
-                    {user.email?.[0]?.toUpperCase() || 'U'}
-                </div>
-                <div className="text-center">
-                    <h3 className="text-xl font-semibold">User ID: {user.id}</h3>
-                    <p className="text-sm text-muted-foreground">{user.email}</p>
-                </div>
-            </div>
-        );
-    } catch (e) {
-        return null;
-    }
-}
-
-export async function TodoList() {
-    await connection();
-    try {
-        const todos = await getTodos();
-
-        return (
-            <div className="space-y-4">
-                {todos.length === 0 ? (
-                    <p className="text-center text-muted-foreground py-4">No todos found.</p>
-                ) : (
-                    todos.map((todo: any) => (
-                        <div key={todo.id} className="flex items-center gap-4 p-3 rounded-lg bg-secondary/50 hover:bg-secondary transition-colors">
-                            <div className={`h-10 w-10 rounded-full flex items-center justify-center ${todo.completed ? 'bg-green-100 text-green-600' : 'bg-primary/10 text-primary'}`}>
-                                {todo.completed ? '✓' : '⚡'}
-                            </div>
-                            <div>
-                                <p className={`font-medium ${todo.completed ? 'line-through text-muted-foreground' : ''}`}>{todo.title}</p>
-                                <p className="text-xs text-muted-foreground">{new Date(todo.createdAt).toLocaleDateString()}</p>
-                            </div>
-                        </div>
-                    ))
-                )}
-            </div>
-        );
-    } catch (e) {
-        return <p className="text-center text-destructive py-4">Failed to load todos.</p>;
-    }
-}
-
-export function UserProfileSkeleton() {
-    return (
-        <div className="animate-pulse space-y-4">
-            <div className="h-20 w-20 rounded-full bg-secondary mx-auto" />
-            <div className="h-4 w-32 bg-secondary mx-auto rounded" />
-        </div>
-    );
-}
-
-export function TodoListSkeleton() {
-    return (
-        <div className="space-y-4">
-            {[1, 2, 3].map(i => (
-                <div key={i} className="h-16 w-full bg-secondary rounded-lg animate-pulse" />
-            ))}
-        </div>
-    );
-}
+import { connection } from 'next/server';
+import { Suspense } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { getTodos, getUser } from './api';
+
+export async function UserProfile() {
+    await connection();
+    try {
+        const user = await getUser();
+        if (!user) return null;
+
+        return (
+            <div className="space-y-2">
+                <div className="h-20 w-20 rounded-full bg-gradient-to-br from-primary to-indigo-600 flex items-center justify-center text-3xl text-white font-bold mx-auto mb-4 shadow-lg shadow-primary/25">
+                    {user.email?.[0]?.toUpperCase() || 'U'}
+                </div>
+                <div className="text-center">
+                    <h3 className="text-xl font-semibold">User ID: {user.id}</h3>
+                    <p className="text-sm text-muted-foreground">{user.email}</p>
+                </div>
+            </div>
+        );
+    } catch (e) {
+        return null;
+    }
+}
+
+export async function TodoList() {
+    await connection();
+    try {
+        const todos = await getTodos();
+
+        return (
+            <div className="space-y-4">
+                {todos.length === 0 ? (
+                    <p className="text-center text-muted-foreground py-4">No todos found.</p>
+                ) : (
+                    todos.map((todo: any) => (
+                        <div key={todo.id} className="flex items-center gap-4 p-3 rounded-lg bg-secondary/50 hover:bg-secondary transition-colors">
+                            <div className={`h-10 w-10 rounded-full flex items-center justify-center ${todo.completed ? 'bg-green-100 text-green-600' : 'bg-primary/10 text-primary'}`}>
+                                {todo.completed ? '✓' : '⚡'}
+                            </div>
+                            <div>
+                                <p className={`font-medium ${todo.completed ? 'line-through text-muted-foreground' : ''}`}>{todo.title}</p>
+                                <p className="text-xs text-muted-foreground">{new Date(todo.createdAt).toLocaleDateString()}</p>
+                            </div>
+                        </div>
+                    ))
+                )}
+            </div>
+        );
+    } catch (e) {
+        return <p className="text-center text-destructive py-4">Failed to load todos.</p>;
+    }
+}
+
+export function UserProfileSkeleton() {
+    return (
+        <div className="animate-pulse space-y-4">
+            <div className="h-20 w-20 rounded-full bg-secondary mx-auto" />
+            <div className="h-4 w-32 bg-secondary mx-auto rounded" />
+        </div>
+    );
+}
+
+export function TodoListSkeleton() {
+    return (
+        <div className="space-y-4">
+            {[1, 2, 3].map(i => (
+                <div key={i} className="h-16 w-full bg-secondary rounded-lg animate-pulse" />
+            ))}
+        </div>
+    );
+}

package/templates/nextjs-web/features/dashboard/index.ts

@@ -1,3 +1,3 @@
-export * from './api';
-export * from './components';
-export * from './DashboardView';
+export * from './api';
+export * from './components';
+export * from './DashboardView';

package/templates/nextjs-web/hooks/index.ts

@@ -1,4 +1,4 @@
-// Global hooks folder
-// Add your custom hooks here
-
-export { };
+// Global hooks folder
+// Add your custom hooks here
+
+export { };

package/templates/nextjs-web/lib/api-client.ts

@@ -1,89 +1,89 @@
-import { axiosInstance } from './axios-global-config';
-import { deleteCookie, getCookie, setCookie } from 'cookies-next';
-
-// <======================== axios main configurations ======================>
-export const axios_config = (
-    useToken = true,
-    isFormData = false,
-    method = "GET"
-) => {
-    const headers: Record<string, string> = {
-        Accept: "application/json",
-    };
-
-    if (!isFormData) {
-        headers["Content-Type"] = "application/json";
-    }
-
-    // Add specific headers for PATCH requests to handle CORS
-    if (method === "PATCH") {
-        headers["Access-Control-Request-Method"] = "PATCH";
-        headers["Access-Control-Request-Headers"] = "Content-Type, Authorization";
-    }
-
-    if (useToken) {
-        const token = getCookie("wexts_token");
-        if (token) headers.Authorization = `Bearer ${token}`;
-    }
-
-    return { headers };
-};
-
-// <========================= get data in client side ======================>
-export const getData = async (endpoint: string) => {
-    const response = await axiosInstance.get(endpoint, axios_config());
-    return response.data;
-};
-
-// <========================= post data in client side ======================>
-export const postData = async (
-    endpoint: string,
-    data: any,
-    useToken = true
-) => {
-    const isFormData = data instanceof FormData;
-    const response = await axiosInstance.post(endpoint, data, axios_config(useToken, isFormData, "POST"));
-    return response.data;
-};
-
-// <========================= put data in client side ======================>
-export const putData = async (endpoint: string, data: any) => {
-    const response = await axiosInstance.put(endpoint, data, axios_config(true, false, "PUT"));
-    return response.data;
-};
-
-// <========================= patch data in client side ======================>
-export const patchData = async (
-    endpoint: string,
-    data: any,
-    useToken = true
-) => {
-    const isFormData = data instanceof FormData;
-    const response = await axiosInstance.patch(endpoint, data, axios_config(useToken, isFormData, "PATCH"));
-    return response.data;
-};
-
-// <========================= delete data in client side ======================>
-export const deleteData = async (endpoint: string, data?: any) => {
-    const config = axios_config(true, false, "DELETE");
-    const response = await axiosInstance.delete(endpoint, {
-        ...config,
-        data: data
-    });
-    return response.data;
-};
-
-// ======= Auth helpers to integrate with login/logout =======
-export function applyLogin(accessToken: string) {
-    setCookie('wexts_token', accessToken, {
-        maxAge: 60 * 60 * 24 * 7, // 1 week
-        path: '/',
-        secure: process.env.NODE_ENV === 'production',
-        sameSite: 'lax'
-    });
-}
-
-export async function applyLogout() {
-    deleteCookie('wexts_token');
-    if (typeof window !== 'undefined') window.location.replace('/login');
-}
+import { axiosInstance } from './axios-global-config';
+import { deleteCookie, getCookie, setCookie } from 'cookies-next';
+
+// <======================== axios main configurations ======================>
+export const axios_config = (
+    useToken = true,
+    isFormData = false,
+    method = "GET"
+) => {
+    const headers: Record<string, string> = {
+        Accept: "application/json",
+    };
+
+    if (!isFormData) {
+        headers["Content-Type"] = "application/json";
+    }
+
+    // Add specific headers for PATCH requests to handle CORS
+    if (method === "PATCH") {
+        headers["Access-Control-Request-Method"] = "PATCH";
+        headers["Access-Control-Request-Headers"] = "Content-Type, Authorization";
+    }
+
+    if (useToken) {
+        const token = getCookie("wexts_token");
+        if (token) headers.Authorization = `Bearer ${token}`;
+    }
+
+    return { headers };
+};
+
+// <========================= get data in client side ======================>
+export const getData = async (endpoint: string) => {
+    const response = await axiosInstance.get(endpoint, axios_config());
+    return response.data;
+};
+
+// <========================= post data in client side ======================>
+export const postData = async (
+    endpoint: string,
+    data: any,
+    useToken = true
+) => {
+    const isFormData = data instanceof FormData;
+    const response = await axiosInstance.post(endpoint, data, axios_config(useToken, isFormData, "POST"));
+    return response.data;
+};
+
+// <========================= put data in client side ======================>
+export const putData = async (endpoint: string, data: any) => {
+    const response = await axiosInstance.put(endpoint, data, axios_config(true, false, "PUT"));
+    return response.data;
+};
+
+// <========================= patch data in client side ======================>
+export const patchData = async (
+    endpoint: string,
+    data: any,
+    useToken = true
+) => {
+    const isFormData = data instanceof FormData;
+    const response = await axiosInstance.patch(endpoint, data, axios_config(useToken, isFormData, "PATCH"));
+    return response.data;
+};
+
+// <========================= delete data in client side ======================>
+export const deleteData = async (endpoint: string, data?: any) => {
+    const config = axios_config(true, false, "DELETE");
+    const response = await axiosInstance.delete(endpoint, {
+        ...config,
+        data: data
+    });
+    return response.data;
+};
+
+// ======= Auth helpers to integrate with login/logout =======
+export function applyLogin(accessToken: string) {
+    setCookie('wexts_token', accessToken, {
+        maxAge: 60 * 60 * 24 * 7, // 1 week
+        path: '/',
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'lax'
+    });
+}
+
+export async function applyLogout() {
+    deleteCookie('wexts_token');
+    if (typeof window !== 'undefined') window.location.replace('/login');
+}

package/templates/nextjs-web/lib/api.ts

@@ -1,115 +1,115 @@
-/**
- * WEXTS Internal SDK
- * Type-safe API client - ZERO URLs needed!
- * Works in both Client and Server Components
- */
-
-// HTTP client - uses relative paths only
-async function request<T>(method: string, path: string, data?: any): Promise<T> {
-    const url = `/api${path}`;
-
-    const options: RequestInit = {
-        method,
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-    };
-
-    if (data) {
-        options.body = JSON.stringify(data);
-    }
-
-    const response = await fetch(url, options);
-
-    if (!response.ok) {
-        const error = await response.json().catch(() => ({ message: response.statusText }));
-        throw new Error(error.message || 'Request failed');
-    }
-
-    return response.json();
-}
-
-// ==========================================
-// TYPE-SAFE API - NO URLs ANYWHERE!
-// ==========================================
-
-export const api = {
-    /**
-     * Authentication API
-     */
-    auth: {
-        /**
-         * Register new user
-         * @example await api.auth.register({ email, password, name })
-         */
-        register: (data: { email: string; password: string; name?: string }) =>
-            request<{ user: any; access_token: string }>('POST', '/auth/register', data),
-
-        /**
-         * Login user
-         * @example await api.auth.login({ email, password })
-         */
-        login: (data: { email: string; password: string }) =>
-            request<{ user: any; access_token: string }>('POST', '/auth/login', data),
-
-        /**
-         * Get current user
-         * @example const user = await api.auth.me()
-         */
-        me: () => request<any>('GET', '/auth/me'),
-    },
-
-    /**
-     * Users API
-     */
-    users: {
-        /**
-         * Get current user profile
-         * @example const profile = await api.users.me()
-         */
-        me: () => request<any>('GET', '/users/me'),
-    },
-
-    /**
-     * Todos API
-     */
-    todos: {
-        /**
-         * Get all todos
-         * @example const todos = await api.todos.findAll()
-         */
-        findAll: () => request<any[]>('GET', '/todos'),
-
-        /**
-         * Get single todo
-         * @example const todo = await api.todos.findOne('123')
-         */
-        findOne: (id: string) => request<any>('GET', `/todos/${id}`),
-
-        /**
-         * Create new todo
-         * @example await api.todos.create({ title: 'Task', description: 'Do it' })
-         */
-        create: (data: { title: string; description?: string }) =>
-            request<any>('POST', '/todos', data),
-
-        /**
-         * Update todo
-         * @example await api.todos.update('123', { completed: true })
-         */
-        update: (id: string, data: { title?: string; description?: string; completed?: boolean }) =>
-            request<any>('PUT', `/todos/${id}`, data),
-
-        /**
-         * Delete todo
-         * @example await api.todos.delete('123')
-         */
-        delete: (id: string) => request<void>('DELETE', `/todos/${id}`),
-    },
-};
-
-/**
- * Export type-safe API
- */
-export type API = typeof api;
+/**
+ * WEXTS Internal SDK
+ * Type-safe API client - ZERO URLs needed!
+ * Works in both Client and Server Components
+ */
+
+// HTTP client - uses relative paths only
+async function request<T>(method: string, path: string, data?: any): Promise<T> {
+    const url = `/api${path}`;
+
+    const options: RequestInit = {
+        method,
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+    };
+
+    if (data) {
+        options.body = JSON.stringify(data);
+    }
+
+    const response = await fetch(url, options);
+
+    if (!response.ok) {
+        const error = await response.json().catch(() => ({ message: response.statusText }));
+        throw new Error(error.message || 'Request failed');
+    }
+
+    return response.json();
+}
+
+// ==========================================
+// TYPE-SAFE API - NO URLs ANYWHERE!
+// ==========================================
+
+export const api = {
+    /**
+     * Authentication API
+     */
+    auth: {
+        /**
+         * Register new user
+         * @example await api.auth.register({ email, password, name })
+         */
+        register: (data: { email: string; password: string; name?: string }) =>
+            request<{ user: any; access_token: string }>('POST', '/auth/register', data),
+
+        /**
+         * Login user
+         * @example await api.auth.login({ email, password })
+         */
+        login: (data: { email: string; password: string }) =>
+            request<{ user: any; access_token: string }>('POST', '/auth/login', data),
+
+        /**
+         * Get current user
+         * @example const user = await api.auth.me()
+         */
+        me: () => request<any>('GET', '/auth/me'),
+    },
+
+    /**
+     * Users API
+     */
+    users: {
+        /**
+         * Get current user profile
+         * @example const profile = await api.users.me()
+         */
+        me: () => request<any>('GET', '/users/me'),
+    },
+
+    /**
+     * Todos API
+     */
+    todos: {
+        /**
+         * Get all todos
+         * @example const todos = await api.todos.findAll()
+         */
+        findAll: () => request<any[]>('GET', '/todos'),
+
+        /**
+         * Get single todo
+         * @example const todo = await api.todos.findOne('123')
+         */
+        findOne: (id: string) => request<any>('GET', `/todos/${id}`),
+
+        /**
+         * Create new todo
+         * @example await api.todos.create({ title: 'Task', description: 'Do it' })
+         */
+        create: (data: { title: string; description?: string }) =>
+            request<any>('POST', '/todos', data),
+
+        /**
+         * Update todo
+         * @example await api.todos.update('123', { completed: true })
+         */
+        update: (id: string, data: { title?: string; description?: string; completed?: boolean }) =>
+            request<any>('PUT', `/todos/${id}`, data),
+
+        /**
+         * Delete todo
+         * @example await api.todos.delete('123')
+         */
+        delete: (id: string) => request<void>('DELETE', `/todos/${id}`),
+    },
+};
+
+/**
+ * Export type-safe API
+ */
+export type API = typeof api;

package/templates/nextjs-web/lib/axios-global-config.ts

@@ -1,17 +1,17 @@
-import axios from 'axios';
-
-const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5050';
-
-export const axiosInstance = axios.create({
-    baseURL: API_URL,
-    timeout: 10000,
-});
-
-// Add response interceptor for error handling
-axiosInstance.interceptors.response.use(
-    (response) => response,
-    (error) => {
-        // Handle global errors here if needed
-        return Promise.reject(error);
-    }
-);
+import axios from 'axios';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5050';
+
+export const axiosInstance = axios.create({
+    baseURL: API_URL,
+    timeout: 10000,
+});
+
+// Add response interceptor for error handling
+axiosInstance.interceptors.response.use(
+    (response) => response,
+    (error) => {
+        // Handle global errors here if needed
+        return Promise.reject(error);
+    }
+);

package/templates/nextjs-web/lib/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs))
-}
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}

package/templates/nextjs-web/lib/wexts-client.ts

@@ -1,4 +1,4 @@
-'use client';
-
-export { FusionProvider as WextsProvider, useFusion as useWexts } from 'wexts/next';
-export { useAuth } from 'wexts/next';
+'use client';
+
+export { FusionProvider as WextsProvider, useFusion as useWexts } from 'wexts/next';
+export { useAuth } from 'wexts/next';

package/templates/nextjs-web/next-env.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.js";
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.js";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.