wexts 1.0.1

package/templates/nestjs-api/src/todos/todos.service.ts

@@ -0,0 +1,53 @@
+import { Injectable, NotFoundException, ForbiddenException } from '@nestjs/common';
+import { PrismaService } from '../prisma/prisma.service';
+import { CreateTodoDto, UpdateTodoDto } from './dto/todo.dto';
+
+@Injectable()
+export class TodosService {
+    constructor(private prisma: PrismaService) { }
+
+    async findAll(userId: string) {
+        return this.prisma.todo.findMany({
+            where: { userId },
+            orderBy: { createdAt: 'desc' },
+        });
+    }
+
+    async findOne(id: string, userId: string) {
+        const todo = await this.prisma.todo.findUnique({ where: { id } });
+
+        if (!todo) {
+            throw new NotFoundException('Todo not found');
+        }
+
+        if (todo.userId !== userId) {
+            throw new ForbiddenException('Access denied');
+        }
+
+        return todo;
+    }
+
+    async create(dto: CreateTodoDto, userId: string) {
+        return this.prisma.todo.create({
+            data: {
+                ...dto,
+                userId,
+            },
+        });
+    }
+
+    async update(id: string, dto: UpdateTodoDto, userId: string) {
+        await this.findOne(id, userId); // Check ownership
+
+        return this.prisma.todo.update({
+            where: { id },
+            data: dto,
+        });
+    }
+
+    async remove(id: string, userId: string) {
+        await this.findOne(id, userId); // Check ownership
+
+        return this.prisma.todo.delete({ where: { id } });
+    }
+}

package/templates/nestjs-api/src/users/users.controller.ts

@@ -0,0 +1,17 @@
+import { Controller, Get, UseGuards, Request } from '@nestjs/common';
+import { FusionController, FusionGet } from 'wexts/nest';
+import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
+import { UsersService } from './users.service';
+
+@FusionController('users')
+@Controller('users')
+@UseGuards(JwtAuthGuard)
+export class UsersController {
+    constructor(private usersService: UsersService) { }
+
+    @FusionGet()
+    @Get('me')
+    async getMe(@Request() req) {
+        return this.usersService.findById(req.user.userId);
+    }
+}

package/templates/nestjs-api/src/users/users.module.ts

@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { UsersController } from './users.controller';
+import { UsersService } from './users.service';
+
+@Module({
+    controllers: [UsersController],
+    providers: [UsersService],
+    exports: [UsersService],
+})
+export class UsersModule { }

package/templates/nestjs-api/src/users/users.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@nestjs/common';
+import { PrismaService } from '../prisma/prisma.service';
+
+@Injectable()
+export class UsersService {
+    constructor(private prisma: PrismaService) { }
+
+    async findById(id: string) {
+        return this.prisma.user.findUnique({
+            where: { id },
+            select: {
+                id: true,
+                email: true,
+                name: true,
+                createdAt: true,
+            },
+        });
+    }
+}

package/templates/nestjs-api/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "declaration": true,
+        "removeComments": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "allowSyntheticDefaultImports": true,
+        "target": "ES2021",
+        "sourceMap": true,
+        "outDir": "./dist",
+        "baseUrl": "./",
+        "incremental": true,
+        "skipLibCheck": true,
+        "strictNullChecks": false,
+        "noImplicitAny": false,
+        "strictBindCallApply": false,
+        "forceConsistentCasingInFileNames": false,
+        "noFallthroughCasesInSwitch": false
+    }
+}

package/templates/nextjs-web/.env.local.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=http://localhost:5050

package/templates/nextjs-web/README.md

@@ -0,0 +1,68 @@
+# Fusion Next.js Web
+
+Modern Next.js 16 frontend with wexts integration.
+
+## Features
+
+- ✅ Next.js 16 (App Router)
+- ✅ React 19
+- ✅ Tailwind CSS v4
+- ✅ TypeScript
+- ✅ wexts Provider & Hooks
+- ✅ Authentication Flow
+- ✅ Todo Management Dashboard
+
+## Setup
+
+```bash
+# Install dependencies
+npm install
+
+# Copy environment variables
+cp .env.local.example .env.local
+
+# Update NEXT_PUBLIC_API_URL in .env.local to point to your API
+
+# Start development server
+npm run dev
+```
+
+## Project Structure
+
+```
+app/
+├── layout.tsx          # Root layout with FusionProvider
+├── page.tsx            # Homepage with auth redirect
+├── globals.css         # Global styles
+├── login/
+│   └── page.tsx        # Login page
+├── register/
+│   └── page.tsx        # Registration page
+└── dashboard/
+    └── page.tsx        # Protected dashboard with todos
+```
+
+## Using Fusion Hooks
+
+```tsx
+import { useFusion, useAuth } from 'wexts/next';
+
+function MyComponent() {
+  const { client } = useFusion();
+  const { user, isAuthenticated } = useAuth();
+
+  // Make API calls
+  const data = await client.get('/endpoint');
+}
+```
+
+## Building for Production
+
+```bash
+npm run build
+npm start
+```
+
+## Environment Variables
+
+- `NEXT_PUBLIC_API_URL` - Backend API URL (default: http://localhost:5050)

package/templates/nextjs-web/app/dashboard/page.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { useAuth, useFusion } from 'wexts/next';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+interface Todo {
+    id: string;
+    title: string;
+    description?: string;
+    completed: boolean;
+}
+
+export default function DashboardPage() {
+    const { user, isAuthenticated, loading: authLoading, logout } = useAuth();
+    const { client } = useFusion();
+    const router = useRouter();
+
+    const [todos, setTodos] = useState<Todo[]>([]);
+    const [newTodoTitle, setNewTodoTitle] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (!authLoading && !isAuthenticated) {
+            router.push('/login');
+        }
+    }, [isAuthenticated, authLoading, router]);
+
+    useEffect(() => {
+        if (isAuthenticated) {
+            loadTodos();
+        }
+    }, [isAuthenticated]);
+
+    const loadTodos = async () => {
+        try {
+            const data = await client.get<Todo[]>('/todos');
+            setTodos(data);
+        } catch (err) {
+            console.error('Failed to load todos:', err);
+        }
+    };
+
+    const handleAddTodo = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!newTodoTitle.trim()) return;
+
+        setLoading(true);
+        try {
+            await client.post('/todos', { title: newTodoTitle });
+            setNewTodoTitle('');
+            await loadTodos();
+        } catch (err) {
+            console.error('Failed to add todo:', err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleToggleTodo = async (id: string, completed: boolean) => {
+        try {
+            await client.put(`/todos/${id}`, { completed: !completed });
+            await loadTodos();
+        } catch (err) {
+            console.error('Failed to update todo:', err);
+        }
+    };
+
+    const handleDeleteTodo = async (id: string) => {
+        try {
+            await client.delete(`/todos/${id}`);
+            await loadTodos();
+        } catch (err) {
+            console.error('Failed to delete todo:', err);
+        }
+    };
+
+    const handleLogout = async () => {
+        await logout();
+        router.push('/login');
+    };
+
+    if (authLoading) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-violet-600"></div>
+            </div>
+        );
+    }
+
+    if (!isAuthenticated) return null;
+
+    return (
+        <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+            <nav className="bg-white dark:bg-gray-800 shadow">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div className="flex justify-between h-16">
+                        <div className="flex items-center">
+                            <h1 className="text-2xl font-bold text-violet-600">Fusion Dashboard</h1>
+                        </div>
+                        <div className="flex items-center gap-4">
+                            <span className="text-sm text-gray-700 dark:text-gray-300">
+                                {user?.email}
+                            </span>
+                            <button
+                                onClick={handleLogout}
+                                className="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition"
+                            >
+                                Logout
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+
+            <main className="max-w-4xl mx-auto py-12 px-4">
+                <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8">
+                    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-8">
+                        My Todos
+                    </h2>
+
+                    <form onSubmit={handleAddTodo} className="mb-8">
+                        <div className="flex gap-3">
+                            <input
+                                type="text"
+                                value={newTodoTitle}
+                                onChange={(e) => setNewTodoTitle(e.target.value)}
+                                placeholder="Add a new todo..."
+                                className="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                            />
+                            <button
+                                type="submit"
+                                disabled={loading}
+                                className="px-6 py-3 bg-violet-600 text-white rounded-lg hover:bg-violet-700 font-medium disabled:opacity-50 transition"
+                            >
+                                Add
+                            </button>
+                        </div>
+                    </form>
+
+                    <div className="space-y-3">
+                        {todos.length === 0 ? (
+                            <p className="text-center text-gray-500 dark:text-gray-400 py-8">
+                                No todos yet. Create one above!
+                            </p>
+                        ) : (
+                            todos.map((todo) => (
+                                <div
+                                    key={todo.id}
+                                    className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition"
+                                >
+                                    <input
+                                        type="checkbox"
+                                        checked={todo.completed}
+                                        onChange={() => handleToggleTodo(todo.id, todo.completed)}
+                                        className="w-5 h-5 text-violet-600 rounded focus:ring-2 focus:ring-violet-500"
+                                    />
+                                    <span className={`flex-1 text-gray-900 dark:text-white ${todo.completed ? 'line-through opacity-50' : ''}`}>
+                                        {todo.title}
+                                    </span>
+                                    <button
+                                        onClick={() => handleDeleteTodo(todo.id)}
+                                        className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 text-sm font-medium"
+                                    >
+                                        Delete
+                                    </button>
+                                </div>
+                            ))
+                        )}
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+}

package/templates/nextjs-web/app/globals.css

@@ -0,0 +1,28 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --primary: 262 83% 58%;
+  --primary-foreground: 0 0% 100%;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+  }
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

package/templates/nextjs-web/app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import { FusionProvider } from 'wexts/next';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+    title: 'Fusion App',
+    description: 'Built with wexts',
+};
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="en">
+            <body className={inter.className}>
+                <FusionProvider baseUrl={process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5050'}>
+                    {children}
+                </FusionProvider>
+            </body>
+        </html>
+    );
+}

package/templates/nextjs-web/app/login/page.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useState, FormEvent } from 'react';
+import { useAuth } from 'wexts/next';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+export default function LoginPage() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const { login } = useAuth();
+    const router = useRouter();
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        setError('');
+        setLoading(true);
+
+        try {
+            await login(email, password);
+            router.push('/dashboard');
+        } catch (err: any) {
+            setError(err.message || 'Login failed');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-violet-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 px-4">
+            <div className="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-10 rounded-2xl shadow-xl">
+                <div>
+                    <h2 className="text-center text-4xl font-bold text-gray-900 dark:text-white">
+                        Welcome Back
+                    </h2>
+                    <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
+                        Sign in to your account
+                    </p>
+                </div>
+
+                <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+                    {error && (
+                        <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4 text-sm text-red-600 dark:text-red-400">
+                            {error}
+                        </div>
+                    )}
+
+                    <div className="space-y-4">
+                        <div>
+                            <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                Email
+                            </label>
+                            <input
+                                id="email"
+                                name="email"
+                                type="email"
+                                autoComplete="email"
+                                required
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                className="appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent bg-white dark:bg-gray-700 transition"
+                                placeholder="you@example.com"
+                            />
+                        </div>
+
+                        <div>
+                            <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                Password
+                            </label>
+                            <input
+                                id="password"
+                                name="password"
+                                type="password"
+                                autoComplete="current-password"
+                                required
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                className="appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent bg-white dark:bg-gray-700 transition"
+                                placeholder="••••••••"
+                            />
+                        </div>
+                    </div>
+
+                    <div>
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-semibold rounded-lg text-white bg-violet-600 hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-violet-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                        >
+                            {loading ? 'Signing in...' : 'Sign in'}
+                        </button>
+                    </div>
+
+                    <div className="text-center text-sm">
+                        <span className="text-gray-600 dark:text-gray-400">Don't have an account? </span>
+                        <Link href="/register" className="font-medium text-violet-600 hover:text-violet-500 dark:text-violet-400">
+                            Sign up
+                        </Link>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}

package/templates/nextjs-web/app/page.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useAuth } from 'wexts/next';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function Home() {
+    const { isAuthenticated, user, loading } = useAuth();
+    const router = useRouter();
+
+    useEffect(() => {
+        if (!loading && !isAuthenticated) {
+            router.push('/login');
+        } else if (!loading && isAuthenticated) {
+            router.push('/dashboard');
+        }
+    }, [isAuthenticated, loading, router]);
+
+    if (loading) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-violet-600"></div>
+            </div>
+        );
+    }
+
+    return null;
+}