La Règle d'Or : un fichier .flin suffit

bashnpx create-next-app@latest my-todo --typescript --tailwind --app --eslint
cd my-todo
npm install prisma @prisma/client
npx prisma init

prisma// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Todo {
  id        Int      @id @default(autoincrement())
  title     String
  done      Boolean  @default(false)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

bashnpx prisma migrate dev --name init
npx prisma generate

typescript// app/api/todos/route.ts
import { PrismaClient } from '@prisma/client';
import { NextResponse } from 'next/server';

const prisma = new PrismaClient();

export async function GET() {
    const todos = await prisma.todo.findMany({
        orderBy: { createdAt: 'desc' }
    });
    return NextResponse.json(todos);
}

export async function POST(request: Request) {
    const body = await request.json();
    const todo = await prisma.todo.create({
        data: { title: body.title }
    });
    return NextResponse.json(todo, { status: 201 });
}

typescript// app/api/todos/[id]/route.ts
import { PrismaClient } from '@prisma/client';
import { NextResponse } from 'next/server';

const prisma = new PrismaClient();

export async function PATCH(
    request: Request,
    { params }: { params: { id: string } }
) {
    const body = await request.json();
    const todo = await prisma.todo.update({
        where: { id: parseInt(params.id) },
        data: { done: body.done }
    });
    return NextResponse.json(todo);
}

export async function DELETE(
    request: Request,
    { params }: { params: { id: string } }
) {
    await prisma.todo.delete({
        where: { id: parseInt(params.id) }
    });
    return NextResponse.json({ success: true });
}

tsx// app/page.tsx
'use client';

import { useState, useEffect } from 'react';

interface Todo {
    id: number;
    title: string;
    done: boolean;
}

export default function TodoApp() {
    const [todos, setTodos] = useState<Todo[]>([]);
    const [newTodo, setNewTodo] = useState('');
    const [filter, setFilter] = useState<'all' | 'active' | 'completed'>('all');

    useEffect(() => {
        fetch('/api/todos')
            .then(res => res.json())
            .then(setTodos);
    }, []);

    const addTodo = async () => {
        if (!newTodo.trim()) return;
        const res = await fetch('/api/todos', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ title: newTodo })
        });
        const todo = await res.json();
        setTodos([todo, ...todos]);
        setNewTodo('');
    };

    const toggleTodo = async (todo: Todo) => {
        const res = await fetch(`/api/todos/${todo.id}`, {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ done: !todo.done })
        });
        const updated = await res.json();
        setTodos(todos.map(t => t.id === updated.id ? updated : t));
    };

    const deleteTodo = async (id: number) => {
        await fetch(`/api/todos/${id}`, { method: 'DELETE' });
        setTodos(todos.filter(t => t.id !== id));
    };

    const filtered = todos.filter(todo => {
        if (filter === 'active') return !todo.done;
        if (filter === 'completed') return todo.done;
        return true;
    });

    return (
        <main className="max-w-md mx-auto p-4">
            <h1 className="text-2xl font-bold mb-4">Mes Todos</h1>
            <div className="flex gap-2 mb-4">
                <input
                    className="flex-1 border rounded px-3 py-2"
                    value={newTodo}
                    onChange={e => setNewTodo(e.target.value)}
                    onKeyDown={e => e.key === 'Enter' && addTodo()}
                    placeholder="Que faut-il faire ?"
                />
            </div>
            <nav className="flex gap-2 mb-4">
                <button onClick={() => setFilter('all')}>Tous</button>
                <button onClick={() => setFilter('active')}>Actifs</button>
                <button onClick={() => setFilter('completed')}>Faits</button>
            </nav>
            <ul>
                {filtered.map(todo => (
                    <li key={todo.id} className="flex items-center gap-2 py-1">
                        <input
                            type="checkbox"
                            checked={todo.done}
                            onChange={() => toggleTodo(todo)}
                        />
                        <span className={todo.done ? 'line-through' : ''}>
                            {todo.title}
                        </span>
                        <button onClick={() => deleteTodo(todo.id)}>x</button>
                    </li>
                ))}
            </ul>
            <footer className="mt-4 text-sm text-gray-500">
                {todos.filter(t => !t.done).length} éléments restants
            </footer>
        </main>
    );
}

Fichiers créés ou modifiés         Objectif
-------------------------------    ---------------------------
package.json                       Dépendances
prisma/schema.prisma               Schéma de base de données
.env                               DATABASE_URL
app/api/todos/route.ts             Endpoints GET et POST
app/api/todos/[id]/route.ts        Endpoints PATCH et DELETE
app/page.tsx                       Composant React

flin// app.flin -- Application todo complète avec persistance en base de données

todos = []
filter = "all"
newTodo = ""

entity Todo {
    title: text
    done: bool = false
    created: time = now
}

filtered = match filter {
    "all"       -> Todo.all
    "active"    -> Todo.where(done == false)
    "completed" -> Todo.where(done == true)
}

<main>
    <h1>Mes Todos</h1>

    <input value={newTodo} placeholder="Que faut-il faire ?"
           enter={save Todo { title: newTodo }; newTodo = ""}>

    <nav>
        <button click={filter = "all"}>Tous</button>
        <button click={filter = "active"}>Actifs</button>
        <button click={filter = "completed"}>Faits</button>
    </nav>

    {for todo in filtered}
        <div class="todo-item">
            <input type="checkbox" checked={todo.done}
                   change={todo.done = !todo.done; save todo}>
            <span class={if todo.done then "done" else ""}>{todo.title}</span>
            <button click={delete todo}>x</button>
        </div>
    {/for}

    <footer>{Todo.where(done == false).count} éléments restants</footer>
</main>

flintodos = []
filter = "all"
newTodo = ""

flinentity Todo {
    title: text
    done: bool = false
    created: time = now
}

flinfiltered = match filter {
    "all"       -> Todo.all
    "active"    -> Todo.where(done == false)
    "completed" -> Todo.where(done == true)
}

flin<input value={newTodo} placeholder="Que faut-il faire ?"
       enter={save Todo { title: newTodo }; newTodo = ""}>

flin{for todo in filtered}
    <div class="todo-item">
        <input type="checkbox" checked={todo.done}
               change={todo.done = !todo.done; save todo}>
        <span class={if todo.done then "done" else ""}>{todo.title}</span>
        <button click={delete todo}>x</button>
    </div>
{/for}

// Étape 1 : Tout dans un fichier
app.flin

// Étape 2 : Pages séparées
index.flin
about.flin
products/index.flin
products/[id].flin

// Étape 3 : Extraire des composants
components/Header.flin
components/Footer.flin
components/ProductCard.flin

// Étape 4 : Séparer les entités (optionnel)
entities/User.flin
entities/Product.flin

// Étape 5 : Ajouter des routes d'API
api/users.flin
api/users/[id].flin

Étape                        L'écosystème JavaScript ajoute
-------------------------    -----------------------------------
Page unique                  React + config Vite
Pages multiples              React Router ou Next.js + sa config
Composants                   (déjà disponible, mais import/export nécessaires)
Base de données              Prisma + schéma + migration + .env
Routes d'API                 Express ou routes API Next.js + config
Build de production          Docker + Dockerfile + config de build

1. La classe est-elle correcte ?                   (vérifier votre code)
2. Tailwind traite-t-il le fichier ?               (vérifier tailwind.config.js)
3. PostCSS fonctionne-t-il ?                       (vérifier postcss.config.js)
4. Le CSS est-il importé ?                         (vérifier l'import globals.css)
5. Le serveur dev utilise-t-il la bonne config ?   (vérifier next.config.js)
6. Y a-t-il un problème de cache ?                 (supprimer .next, redémarrer)

1. La classe est-elle correcte ?                   (vérifier votre code)

bash# Déploiement FLIN
flin build
scp app /server:/usr/local/bin/
ssh server 'app'

# Déploiement Next.js
npm run build
# ... configurer Docker
# ... écrire le Dockerfile
# ... construire l'image
# ... pousser vers le registre
# ... configurer l'orchestrateur
# ... déployer

flinentity Product {
    name: text
    description: semantic text
    price: money
    stock: int
    category: text
    image: file
}

entity CartItem {
    product: Product
    quantity: int = 1
}

searchQuery = ""
category = "all"
cart = CartItem.all

products = if searchQuery.len > 3 then
    search searchQuery in Product by description limit 20
else if category != "all" then
    Product.where(category == category)
else
    Product.all

cartTotal = cart.reduce(0, (sum, item) => sum + item.product.price * item.quantity)

<main>
    <header>
        <h1>Boutique</h1>
        <input placeholder="Rechercher des produits..." value={searchQuery}>
        <span class="cart-badge">{cart.count} articles - {cartTotal}</span>
    </header>

    <nav>
        <button click={category = "all"}>Tous</button>
        <button click={category = "electronics"}>Électronique</button>
        <button click={category = "clothing"}>Vêtements</button>
        <button click={category = "books"}>Livres</button>
    </nav>

    <div class="products">
        {for product in products}
            <div class="product-card">
                <img src={product.image.url}>
                <h3>{product.name}</h3>
                <p class="price">{product.price}</p>
                <p class="stock">{product.stock} en stock</p>
                <button click={save CartItem { product: product }}>
                    Ajouter au panier
                </button>
            </div>
        {/for}
    </div>
</main>