Structure du projet Prefresh

Le projet Prefresh est organisé en plusieurs répertoires et fichiers principaux :

• .github/workflows/ : Contient les configurations des flux de travail pour GitHub Actions.
• .vscode/ : Fichiers de configuration spécifiques à l'environnement Visual Studio Code.
• docs/ : Documentation générale du projet.
• examples/ : Exemples d'utilisation et d'intégration de Prefresh.
• packages/ : Répertoire central contenant les différents modules de Prefresh. Il inclut des sous-packages pour diverses configurations de build comme @prefresh/core, @prefresh/nollup, @prefresh/preact-cli, @prefresh/snowpack, @prefresh/vite, et @prefresh/webpack, ainsi que le package principal prefresh.
• scripts/ : Scripts utilitaires pour le développement et la maintenance du projet.
• .editorconfig : Fichier de configuration pour uniformiser le style de code entre différents éditeurs.
• .gitignore : Définit les fichiers et dossiers à ignorer par Git.
• .npmrc : Configuration spécifique pour le gestionnaire de paquets npm.
• .prettierrc : Configuration pour l'outil de formatage de code Prettier.
• LICENSE : Fichier contenant les termes de la licence sous laquelle le projet est distribué.
• package.json : Le fichier manifeste du projet, décrivant les dépendances, les scripts et les métadonnées.
• README.md : Le fichier d'accueil principle fournissant une description du projet et des instructions de base.
• tsconfig.json : Configuration du compilateur TypeScript.

Points d'entrée et configuration

Fichiers d'initialisation

Les points d'entrée de Prefresh se trouvent généralement dans les sous-packages de packages/. Par exemple, dans le contexte de l'intégration avec Vite, le fichier principal pourrait être packages/@prefresh/vite/index.js.

// packages/@prefresh/vite/index.js
 import { createContext } from '@prefresh/core';
 import { initializeVitePlugin } from './vite-plugin-init';

 export default function prefreshPlugin(options = {}) {
   const context = createContext(options);
   initializeVitePlugin(context);
   return {
     name: 'prefresh',
   };
 }
 

• createContext : Cette fonctino du package @prefresh/core est responsable de l'initialisation du contexte nécessaire au fonctionnement du rechargement à chaud (HMR).
• initializeVitePlugin : Une fonction spécifique à l'intégration Vite, qui configure le comportement de Prefresh dans l'écosystème Vite.

Configurations clés

package.json (Exemple pour @prefresh/vite)

{
   "name": "@prefresh/vite",
   "version": "2.5.0",
   "description": "Integration de Prefresh pour Vite avec HMR",
   "main": "index.js",
   "scripts": {
     "build": "ts-node build.ts",
     "dev": "vite"
   },
   "keywords": ["preact", "hmr", "vite", "plugin"],
   "author": "L'équipe Preact",
   "license": "MIT",
   "dependencies": {
     "@prefresh/core": "^1.1.0"
   },
   "devDependencies": {
     "vite": "^3.0.0",
     "@types/node": "^18.0.0",
     "ts-node": "^10.9.0"
   }
 }
 

Ce fichier définit les métadonnées du package, les dépendances (y compris @prefresh/core) et les scripts pour le développement et la construction.

tsconfig.json

{
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",
     "strict": true,
     "jsx": "react",
     "jsxImportSource": "preact",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "outDir": "./dist",
     "declaration": true
   },
   "include": ["packages/**/*.ts", "packages/**/*.tsx"],
   "exclude": ["node_modules", "dist"]
 }
 

Ce fichier configure le compilateur TypeScript, en spécifiant les options pour la compilation des sources TypeScript et JSX, y compris la cible ECMAScript, le système de modules, et les options d'interopérabilité.