use-nemo : Créez Vos Propres Directives React comme "use client"

1. Le Concept : Des Directives Personnalisées au Build Time

// src/components/CheckoutPage.tsx
"use analytics";

export function CheckoutPage() {
  return <div>Checkout...</div>;
}

// 🔮 Au build, use-nemo injecte automatiquement :
// - Le tracking de page view
// - Les événements e-commerce
// - Le monitoring de performance

2. Installation et Configuration

npm install use-nemo

# ou avec pnpm
pnpm add use-nemo

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import customDirectives from 'use-nemo';

export default defineConfig({
  plugins: [
    customDirectives(), // ← Ajouter AVANT react()
    react()
  ],
});

3. Créer Votre Première Directive

Créons une directive "use debug"qui injecte automatiquement des logs de développement dans vos composants.

import { directiveRegistry, injectCode } from 'use-nemo';
import type { DirectiveHandler } from 'use-nemo';

const useDebugDirective: DirectiveHandler = {
  name: 'debug', // → "use debug"
  handler({ code, id }) {
    console.log(`[useDebug] Processing: ${id}`);
    
    return injectCode(code, () => {
      console.log('🐛 [DEBUG] Component mounted:', 
        window.location.pathname);
      console.log('🐛 [DEBUG] Timestamp:', 
        new Date().toISOString());
    });
  },
};

directiveRegistry.register(useDebugDirective);

// src/components/Dashboard.tsx
"use debug";

export function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      {/* Le code de debug est injecté automatiquement */}
    </div>
  );
}

4. Cas d'Usage Avancés pour l'Entreprise

Au-delà des exemples ludiques, use-nemo ouvre des possibilités intéressantes pour standardiser des patterns dans des projets d'entreprise.

5. API et Helpers Disponibles

interface DirectiveHandler {
  name: string; // Sans le préfixe "use"
  handler(context: DirectiveContext): string | null;
}

interface DirectiveContext {
  code: string;      // Code source du fichier
  id: string;        // Chemin du fichier
  directiveName: string; // Nom de la directive
}

6. Limites et Considérations

7. Conclusion : Un Outil de Niche Mais Puissant

use-nemo illustre parfaitement la philosophie de l'écosystème JavaScript : si un pattern vous manque, créez-le. Né d'un mème (le fameux "use nemo" 🐟), cette bibliothèque offre une solution élégante pour étendre le système de directives de React.

Pour les équipes qui travaillent sur des projets Vite avec des besoins récurrents d'injection de code (analytics, monitoring, feature flags), use-nemo peut significativement réduire le boilerplate et améliorer la cohérence du codebase.

Questions Fréquentes

use-nemo fonctionne-t-il avec Next.js ?

Non directement. use-nemo est un plugin Vite, et Next.js utilise Webpack ou Turbopack. Pour Next.js, utilisez les directives natives ("use client", "use server") ou créez des Higher-Order Components.

Peut-on utiliser plusieurs directives dans un même fichier ?

Oui. Chaque directive est traitée indépendamment. Vous pouvez combiner "use debug" et "use analytics" dans le même composant.

Le code injecté impacte-t-il les performances ?

Cela dépend de ce que vous injectez. L'injection elle-même se fait au build time (0 overhead). Mais le code injecté s'exécute au runtime, donc évitez les opérations lourdes.

Comment débugger les transformations ?

Ajoutez des console.log dans votre handler pour voir les transformations pendant le build. Vous pouvez aussi inspecter les fichiers générés dans le dossier .vite ou dist.