Veko.js

Framework Node.js ultra-leger avec zero dependances - VSV Components, Tailwind CSS integre, SSR natif

Installation - Demarrage - Fonctionnalites - VSV Components - Documentation

---

Fonctionnalites

Fonctionnalite	Description
Zero Dependances	Aucun package npm requis - Node.js pur
VSV Components	Composants .jsv/.tsv avec JSX, SSR natif, hydratation selective
Asset Imports	Import CSS, images, JS, fonts dans les composants (comme React)
Tailwind CSS	Moteur Tailwind integre, zero config, genere uniquement le CSS utilise
SSR Natif	Server-Side Rendering sans configuration
Securite	Headers securises, rate limiting, protection XSS integres
PHP Templates	Support de templates PHP-like pour le prototypage rapide
Serveur HTTP Pur	Node.js http natif, pas d Express

Installation

npm install veko

C est tout. Zero dependances a installer.

Prerequis : Node.js >= 18.0.0

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();

Application VSV Avec Tailwind

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

async function main() {
  const app = await createVSVApp({
    port: 3000,
    tailwind: true
  });

  app.vsvRoute('/', 'Home', {
    title: 'Accueil',
    getProps: async (req) => ({
      message: 'Hello World!'
    })
  });

  app.listen();
}

main();

VSV Components

Composant .jsv

// components/Home.jsv
import './styles/home.css';
import logo from './images/logo.png';

export default function Home({ title, message }) {
  const [count, setCount] = $state(0);

  return (
    <div class="flex flex-col items-center p-8">
      <img src={logo} alt="Logo" class="w-32 mb-4" />
      <h1 class="text-3xl font-bold text-gray-900">{title}</h1>
      <p class="text-gray-500 mt-2">{message}</p>
      <button
        class="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
        $click={() => setCount(c => c + 1)}
      >
        Clicks: {count()}
      </button>
    </div>
  );
}

Composant TypeScript .tsv

// components/Card.tsv
interface CardProps {
  title: string;
  description: string;
  image?: string;
}

export default function Card({ title, description, image }: CardProps) {
  return (
    <div class="max-w-sm rounded-xl shadow-lg overflow-hidden bg-white">
      {image && <img src={image} alt={title} class="w-full h-48 object-cover" />}
      <div class="p-6">
        <h2 class="text-xl font-bold mb-2">{title}</h2>
        <p class="text-gray-600">{description}</p>
      </div>
    </div>
  );
}

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())

Asset Imports

Importez des fichiers directement dans vos composants comme dans React :

import './styles.css';           // CSS injecte automatiquement
import logo from './logo.png';   // Image -> URL servie
import './analytics.js';         // Script injecte

Type	Extensions
CSS	.css, .scss, .sass, .less
Images	.png, .jpg, .jpeg, .gif, .svg, .ico, .webp, .avif
Fonts	.woff, .woff2, .ttf, .eot, .otf
Scripts	.js, .mjs

Tailwind CSS Integre

Activez Tailwind CSS sans aucune installation supplementaire :

const app = await createVSVApp({ tailwind: true });

Supporte : toutes les classes utilitaires, responsive (sm:, md:, lg:, xl:), dark mode (dark:), etats (hover:, focus:, active:), directive @apply.

Structure du Projet

mon-projet/
+-- app.js                 # Point d entree
+-- package.json
+-- components/            # Composants VSV
|   +-- Home.jsv
|   +-- Header.jsv
|   +-- styles/
|   |   +-- global.css
|   +-- images/
|       +-- logo.png
+-- pages/                 # Pages VSV
|   +-- Home.jsv
|   +-- About.jsv
+-- public/                # Fichiers statiques
|   +-- css/
|   +-- js/
|   +-- images/
+-- plugins/               # Plugins custom
+-- .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

---

Made with <3 by Wiltark