Fonctionnalites

| Fonctionnalite | Description | |----------------|-------------| | Zero Dependances | Aucun package npm requis - Node.js pur | | 4 Types de Pages | ○ Static, ● SSG, ƒ Dynamic, ⚡ Ultra | | Themes JSV | Templates .jsv avec heritage, boucles, conditions | | VSV Components | Composants .jsv/.tsv avec JSX, SSR natif | | Tailwind CSS | Moteur Tailwind integre, zero config | | SSR Natif | Server-Side Rendering sans configuration | | Securite | Headers securises, rate limiting, protection XSS | | CMS Ready | Systeme de themes et modules pour CMS |

Installation

npm install veko

C est tout. Zero dependances a installer.

Prerequis : Node.js >= 18.0.0

4 Types de Pages

Veko.js supporte 4 types de pages pour tous les cas d usage :

| Type | Symbole | Description | Cas d usage | |------|---------|-------------|-------------| | Static | ○ | Prerendu une seule fois | Pages fixes, CGU, FAQ | | SSG | ● | Genere au build avec donnees | Blog, produits, docs | | Dynamic | ƒ | Rendu serveur a chaque requete | Dashboard, admin | | Ultra | ⚡ | Build a la demande, cache intelligent | Pages configurables |

// Exemple de routing avec types
app.get('/', handler);              // ○ Static
app.get('/blog', ssgHandler);       // ● SSG
app.get('/admin', dynamicHandler);  // ƒ Dynamic
app.get('/settings', ultraHandler); // ⚡ Ultra

Demarrage Rapide

API Simple

const { createApp } = require('veko');

const app = createApp({ port: 3000 });

app.get('/', (req, res) => {
  res.json({ message: 'Hello Veko!' });
});

app.post('/api/users', (req, res) => {
  res.status(201).json({ user: req.body });
});

app.listen();

Themes JSV

Systeme de templates .jsv avec syntaxe Jinja-like :

Syntaxe

<!-- Variables -->
{{ title }}
{{ user.name | capitalize }}

<!-- Conditions -->
{% if user %}
  <p>Bienvenue {{ user.name }}</p>
{% else %}
  <a href="/login">Connexion</a>
{% endif %}

<!-- Boucles -->
{% for post in posts %}
  <article>
    <h2>{{ post.title }}</h2>
    <p>{{ post.content | truncate(100) }}</p>
  </article>
{% endfor %}

<!-- Heritage -->
{% extends 'layout' %}
{% block content %}
  Mon contenu ici
{% endblock %}

<!-- Inclusions -->
{% include 'partials/nav' %}

Filtres disponibles

| Filtre | Description | Exemple | |--------|-------------|---------| | upper | Majuscules | {{ name \| upper }} | | lower | Minuscules | {{ name \| lower }} | | capitalize | Premiere lettre maj | {{ name \| capitalize }} | | truncate | Tronquer | {{ text \| truncate(100) }} | | date | Formater date | {{ date \| date('long') }} | | json | JSON format | {{ obj \| json }} | | markdown | Markdown to HTML | {{ content \| markdown }} | | default | Valeur par defaut | {{ name \| default('Anonyme') }} |

Structure des themes

themes/
+-- default/
|   +-- layout.jsv        # Layout principal
|   +-- partials/
|   |   +-- nav.jsv       # Navigation
|   +-- pages/
|   |   +-- home.jsv      # Page accueil
|   |   +-- blog.jsv      # Liste blog
|   |   +-- login.jsv     # Connexion
|   +-- admin/
|       +-- layout.jsv    # Layout admin
|       +-- dashboard.jsv
+-- modern/               # Theme alternatif
+-- dark/                 # Theme sombre
+-- minimal/              # Theme minimaliste

Changer de theme

const TemplateEngine = require('./engine/template');

const engine = new TemplateEngine({
  themesDir: './themes',
  theme: 'default'
});

// Changer de theme
engine.setTheme('modern');

// Lister les themes
console.log(engine.listThemes()); // ['default', 'modern', 'dark', 'minimal']

CMS Demo

Un exemple complet de CMS avec themes et authentification :

cd examples/cms-demo
npm install
npm run setup   # Cree la base SQLite
node index.js   # http://localhost:3000

Compte admin : admin / demo

Fonctionnalites du CMS

• 4 themes switchables (default, modern, dark, minimal)
• Authentification (login/register)
• CRUD articles avec SQLite
• Dashboard admin avec statistiques
• API REST complete

Apercu des themes

| Theme | Style | |-------|-------| | default | Classique Tailwind, clair et professionnel | | modern | Gradient purple/pink, glassmorphism | | dark | Terminal/hacker style, vert sur noir | | minimal | Typographie serif, ultra-minimaliste |

VSV Components

Directives Reactives

| Directive | Description | Exemple | |-----------|-------------|---------| | $state | Etat reactif | const [val, setVal] = $state(0) | | $computed | Valeur derivee | const double = $computed(() => val() * 2) | | $effect | Effets de bord | $effect(() => console.log(val())) | | $ref | Reference DOM | const el = $ref(null) | | $memo | Memoisation | const cached = $memo(() => heavy()) |

Structure du Projet

mon-projet/
+-- app.js                 # Point d entree
+-- package.json
+-- themes/                # Themes JSV
|   +-- default/
|   |   +-- layout.jsv
|   |   +-- pages/
|   |   +-- admin/
|   +-- modern/
|   +-- dark/
+-- components/            # Composants VSV
|   +-- Home.jsv
+-- public/                # Fichiers statiques
+-- db/                    # Base de donnees
+-- .veko/                 # Cache (auto)

Securite

Securite integree par defaut, sans dependances :

• Headers securises automatiques (X-Content-Type-Options, X-Frame-Options, X-XSS-Protection)
• Rate limiting integre
• Body parsing securise avec erreurs 400
• Protection path traversal sur les fichiers statiques
• HTML escaping dans les pages d erreur

Documentation

| Document | Description | |----------|-------------| | Guide de Demarrage | Installation et premier projet | | VSV Components | Composants, assets, Tailwind | | API Reference | Reference complete de l API | | Securite | Bonnes pratiques securite | | Plugins | Creer et utiliser des plugins | | Authentification | JWT, sessions, auth patterns |

Contribution

git clone https://github.com/wiltark/veko.js.git
cd veko.js
npm test

Licence

MIT - Wiltark