@arc-js/initiator

@arc-js/initiator est un plugin d'initialisation intelligent pour les applications React avec TypeScript/Javascript. Il génère automatiquement les fichiers de configuration, de routage et d'internationalisation basés sur la structure de votre projet.

✨ Fonctionnalités Principales

🗺️ Génération Automatique

• Génération automatique des routes à partir de la structure du système de fichiers
• Configuration modulaire avec détection automatique des modules
• Internationalisation automatisée avec extraction des clés de traduction
• Fichiers de configuration générés dynamiquement

⚙️ Initialisation Intelligente

• Détection automatique des fichiers de pages et modules
• Génération de fichiers TypeScript typesafe
• Support des layouts hiérarchiques avec héritage automatique
• Configuration minimale requise

📁 Structure de Projet

• Organisation modulaire naturelle
• Support des pages spéciales (layout, error, 404)
• Routes dynamiques avec paramètres
• Modules indépendants avec leur propre configuration

📦 Installation

Installation globale (recommandée)

npm install -g @arc-js/initiator
# ou
yarn global add @arc-js/initiator
# ou
pnpm add -g @arc-js/initiator

Installation locale

npm install @arc-js/initiator
# ou
yarn add @arc-js/initiator
# ou
pnpm add @arc-js/initiator

🚀 Utilisation Rapide

Commande de base

# Depuis la racine de votre projet
arc-init
# ou
npx @arc-js/initiator

Options disponibles

# Initialiser avec un répertoire spécifique
arc-init --dir ./mon-projet

# Forcer la régénération des fichiers
arc-init --force

# Mode silencieux (moins de logs)
arc-init --quiet

# Afficher l'aide
arc-init --help

Structure de projet générée

src/
├── auto-config.ts      # Configuration générée
├── auto-intl.ts        # Internationalisation générée
├── auto-routes.tsx     # Routes générées
├── config.json         # Configuration racine
├── locales/
│   ├── en.json         # Traductions anglais
│   └── fr.json         # Traductions français
├── pages/
│   ├── _layout.tsx     # Layout racine
│   ├── _error.tsx      # Page d'erreur
│   ├── _404.tsx        # Page 404
│   └── index.tsx       # Page d'accueil
└── modules/
    └── example/
        ├── config.json # Configuration du module
        ├── locales/
        │   ├── en.json # Traductions module
        │   └── fr.json # Traductions module
        └── pages/
            └── index.tsx # Page du module

🔧 Fonctionnalités Détaillées

1. Génération de Routes

Le plugin scanne automatiquement vos dossiers pages/ et modules/*/pages/ pour :

• Créer des routes React Router automatiquement
• Gérer les layouts hiérarchiques
• Supporter les pages d'erreur spécifiques
• Générer des composants lazy-loaded

2. Internationalisation

Extraction automatique des clés de traduction :

• Scan des fichiers source pour les appels t()
• Détection des modules avec fichiers de traduction
• Génération des imports dynamiques
• Support multi-langue

3. Configuration

Génération centralisée de configuration :

• Configuration racine depuis config.json
• Configuration des modules depuis modules/*/config.json
• Fichier TypeScript avec imports dynamiques

📚 API du Plugin

Fonction principale

import init from '@arc-js/initiator';

// Initialisation par défaut (utilise __dirname)
init();

// Avec répertoire personnalisé
init('/chemin/vers/mon/projet');

Classes exportées

import { 
  TranslationGenerator, 
  RouteGenerator, 
  ConfigGenerator 
} from '@arc-js/initiator';

// Utilisation avancée
const translationGen = new TranslationGenerator(config);
const routeGen = new RouteGenerator(config);
const configGen = new ConfigGenerator(config);

Interfaces TypeScript

import type {
  TranslationConfig,
  RouteConfig,
  ConfigGeneratorOptions,
  TranslationKey,
  RouteFile
} from '@arc-js/initiator';

🎯 Exemples d'Utilisation

Exemple 1 : Script d'initialisation

// scripts/init.js
import init from '@arc-js/initiator';

// Initialiser avec le répertoire du projet
init(process.cwd());

console.log('✅ Initialisation terminée !');

Exemple 2 : Personnalisation avancée

// scripts/custom-init.ts
import { RouteGenerator } from '@arc-js/initiator';

const customConfig = {
  srcDir: './src',
  modulesDir: './src/modules',
  pagesDir: './src/views', // Dossier personnalisé
  outputFile: './src/generated/routes.tsx',
  layoutFileName: 'layout',
  errorFileName: 'error-page',
  notFoundFileName: 'not-found-page'
};

const generator = new RouteGenerator(customConfig);
await generator.generate();

Exemple 3 : Intégration avec un build personnalisé

{
  "scripts": {
    "dev": "vite",
    "build": "npm run generate && vite build",
    "generate": "node scripts/generate-all.js",
    "generate:routes": "node scripts/generate-routes.js",
    "generate:intl": "node scripts/generate-intl.js",
    "generate:config": "node scripts/generate-config.js"
  }
}

🔧 Configuration Avancée

Configuration de la traduction

const translationConfig = {
  srcDir: './src',
  supportedLocales: ['en', 'fr', 'es'], // Langues supportées
  outputFile: './src/auto-intl.ts',
  modulesDir: './src/modules',
  localesDir: './src/locales'
};

Configuration du routage

const routeConfig = {
  srcDir: './src',
  modulesDir: './src/modules',
  pagesDir: './src/pages', // Ou 'views', 'screens', etc.
  outputFile: './src/auto-routes.tsx',
  layoutFileName: '_layout', // Fichier de layout
  errorFileName: '_error',   // Fichier d'erreur
  notFoundFileName: '_404'   // Fichier 404
};

Fichier config.json racine

{
  "name": "Mon Application",
  "version": "1.0.0",
  "description": "Description de l'application",
  "author": "Votre Nom",
  "defaultLocale": "fr",
  "supportedLocales": ["fr", "en"],
  "apiUrl": "https://api.example.com",
  "features": {
    "auth": true,
    "analytics": false,
    "pwa": true
  }
}

Fichier config.json de module

{
  "name": "Module Admin",
  "description": "Module d'administration",
  "author": "Équipe Admin",
  "version": "1.0.0",
  "routePrefix": "/admin",
  "isEnabled": true,
  "dependencies": ["auth"],
  "permissions": ["admin", "superuser"]
}

📁 Conventions de Fichiers

Pages spéciales

| Fichier | Description | Route générée | |---------|-------------|---------------| | _layout.tsx | Layout du dossier | Non accessible directement | | _error.tsx | Page d'erreur | Utilisée comme errorElement | | _404.tsx | Page non trouvée | Route catch-all | | [param].tsx | Route paramétrée | /:param | | [...slug].tsx | Route catch-all | /* | | index.tsx | Page d'index | / ou /dossier/ |

Structure de module

modules/
└── nom-du-module/
    ├── config.json         # Configuration du module
    ├── locales/            # Traductions du module
    │   ├── en.json
    │   └── fr.json
    ├── pages/              # Pages du module
    │   ├── _layout.tsx     # Layout du module
    │   ├── _error.tsx      # Erreur du module
    │   ├── _404.tsx        # 404 du module
    │   └── index.tsx       # Page d'accueil du module
    └── components/         # Composants du module (optionnel)

🔄 Workflow de Développement

1. Initialisation du projet

# Créer un nouveau projet
npm create vite@latest mon-app -- --template react-ts
cd mon-app

# Installer l'initiator
npm install @arc-js/initiator

# Générer la structure initiale
npx @arc-js/initiator

2. Ajout d'un nouveau module

# Créer la structure du module
mkdir -p src/modules/admin/{locales,pages,components}

# Ajouter les fichiers de base
touch src/modules/admin/config.json
touch src/modules/admin/pages/index.tsx
touch src/modules/admin/locales/fr.json

# Régénérer les fichiers
npx @arc-js/initiator

3. Développement avec hot-reload

# Démarrer le serveur de développement
npm run dev

# Dans un autre terminal, surveiller les changements
npx @arc-js/initiator --watch

🛠️ Intégration avec d'autres outils

Avec Vite

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      external: ['@arc-js/initiator']
    }
  }
});

Avec Next.js (Adaptation)

// next.config.js
const { generateRoutes } = require('@arc-js/initiator/adapters/next');

module.exports = {
  async rewrites() {
    const routes = await generateRoutes();
    return routes.map(route => ({
      source: route.path,
      destination: route.filePath
    }));
  }
};

Avec Webpack

// webpack.config.js
const { GenerateRoutesPlugin } = require('@arc-js/initiator/webpack');

module.exports = {
  plugins: [
    new GenerateRoutesPlugin({
      watch: process.env.NODE_ENV === 'development'
    })
  ]
};

🐛 Dépannage

Problèmes courants

1. "Cannot find module"

   # Réinstaller le plugin
   npm install @arc-js/initiator

2. Fichiers non générés

   # Forcer la régénération
   npx @arc-js/initiator --force
      
   # Vérifier les permissions
   chmod +x node_modules/.bin/arc-init

3. Erreurs TypeScript

   # Vérifier les types
   npm run type-check
      
   # Régénérer les fichiers
   npx @arc-js/initiator

Logs de débogage

# Activer les logs détaillés
DEBUG=arc-js:* npx @arc-js/initiator

# Sauvegarder les logs dans un fichier
npx @arc-js/initiator 2>&1 | tee init.log

📄 Licence

MIT License - Voir le fichier LICENSE pour plus de détails.

🤝 Contribution

Les contributions sont les bienvenues ! Pour contribuer :

1. Fork le projet
2. Créer une branche (git checkout -b feature/amazing-feature)
3. Commit vos changements (git commit -m 'Add amazing feature')
4. Push vers la branche (git push origin feature/amazing-feature)
5. Ouvrir une Pull Request

🐛 Signaler un Bug

Envoyez nous un mail à l'adresse [email protected] pour :

• Signaler un bug
• Proposer une amélioration
• Poser une question

@arc-js/initiator - Le plugin d'initialisation intelligent pour React et TypeScript.

Développé par l'équipe INICODE