Veko.js
Framework Node.js ultra-leger avec zero dependances - 4 types de pages, themes .jsv, SSR natif
Installation -
Demarrage -
4 Types de Pages -
Themes JSV -
Documentation
---
## 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
```bash
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 |
```javascript
// 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
```javascript
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
```html
{{ title }}
{{ user.name | capitalize }}
{% if user %}
Bienvenue {{ user.name }}
{% else %}
Connexion
{% endif %}
{% for post in posts %}
{{ post.title }}
{{ post.content | truncate(100) }}
{% endfor %}
{% extends 'layout' %}
{% block content %}
Mon contenu ici
{% endblock %}
{% 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
```javascript
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 :
```bash
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](docs/getting-started.md) | Installation et premier projet |
| [VSV Components](docs/vsv.md) | Composants, assets, Tailwind |
| [API Reference](docs/api.md) | Reference complete de l API |
| [Securite](docs/security.md) | Bonnes pratiques securite |
| [Plugins](docs/plugins.md) | Creer et utiliser des plugins |
| [Authentification](docs/auth.md) | JWT, sessions, auth patterns |
## Contribution
```bash
git clone https://github.com/wiltark/veko.js.git
cd veko.js
npm test
```
## Licence
MIT - Wiltark
---
Made with <3 by Wiltark