Octane : compiler des composants React vers le DOM

Ce que le dépôt promet réellement · octanejs octane

Octane est un framework UI JavaScript et le successeur d'Inferno. Les composants sont écrits avec l'API React, et un compilateur les transforme en code DOM direct avant leur publication. Pas de DOM virtuel, pas de comptabilité de règles de hooks, ni de tableaux de dépendances à maintenir à la main. Le projet a été créé par Dominic Gannaway, qui a également créé Inferno et a travaillé sur React, Lexical, Ripple et Svelte. Le runtime et le compilateur sont tous deux dans le paquet `octane`, avec des adaptateurs de bundler à `octane/compiler/vite` et `octane/compiler/bundler`.

Le scénario d’usage décrit · octanejs octane

Le JSX standard fonctionne dans les fichiers `.tsx`, donc un composant collé depuis la documentation React s'exécute tel quel. Le dialecte `.tsrx`, décrit comme le successeur spirituel de JSX, ajoute des directives de template `@if`, `@for`, `@switch` et `@try` qui compilent en chemins rapides à clés, plus une syntaxe `@{ ... }` qui place la configuration à côté de la sortie. Les deux dialectes peuvent être mélangés dans une même application et importés à travers la frontière. Une extension VS Code fournit la coloration syntaxique, les diagnostics, la navigation et les complétions pour les fichiers `.tsrx`. L'extension s'appelle TSRX for VS Code.

Les composants qui font la différence · octanejs octane

Dans Octane, le tableau de dépendances peut être omis pour `useEffect`, `useMemo`, `useCallback`, etc. Le compilateur le dérive de ce que la fermeture capture réellement, y compris les setters stables, les dispatchs, les refs et les getters d'état. Les tableaux explicites se comportent exactement comme dans React. Les hooks sont suivis par site d'appel et non par ordre d'appel, donc un hook peut vivre dans un `if` ou après un retour anticipé. La seule règle restante est appliquée par le compilateur : un hook dans une boucle JS ordinaire est une erreur de compilation, car chaque itération partagerait un seul emplacement de site d'appel. Utilisez plutôt la directive `@for` à clés.

Installer et lancer le projet · octanejs octane

Octane utilise de vrais événements DOM délégués, des composants de formulaire contrôlés sur des événements natifs, et des refs comme props ordinaires. `ref` peut être un callback, un objet, ou même un tableau des deux. Pas de système d'événements synthétiques. Le projet exclut délibérément les composants de classe, les Server Components et la couche d'événements synthétiques, et documente ces différences dans le dépôt. Le README indique que la plateforme est utilisée directement, et non réimplémentée.

Options, fichiers et habitudes de travail · octanejs octane

Le runtime inclut `useLinkedState`, qui réinitialise ou ajuste l'état local dès qu'une entrée change, sans effet et sans mise à jour d'état pendant le rendu. Les promesses dans le rendu sont sûres sans wrapper `cache()` : les créations alimentant `use()` sont mémorisées à leurs déclarations, les requêtes indépendantes démarrent ensemble, et les arbres de fetch descendants préchargent pendant qu'un ancêtre est suspendu. Le SSR en streaming et l'hydratation stable en octets prennent en charge le flush Suspense hors ordre sur les flux Node ou web, ainsi que le rendu tamponné et statique si vous le souhaitez. L'hydratation différée via `<Hydrate>` garde le HTML serveur visible mais inerte jusqu'à son activation, et divise ses enfants dans leur propre chunk par défaut. La propriété `class` / `className` compose à la manière de clsx partout. `useState` et `useReducer` retournent `[state, update, getState]`, donc un callback différé peut lire la dernière valeur.

Limites à garder dans le périmètre · octanejs octane

Les paquets publiés d'Octane nécessitent Node.js 22.22.2 ou plus récent. La commande de scaffold `npm create octane my-app` crée un projet qui tourne avec `npm run dev` ; `--template spa` est une application client seul et `--template fullstack` ajoute le routage, le SSR en streaming, l'hydratation et un build de production. Si le drapeau est omis, il demande. Dans un projet existant, exécutez `pnpm dlx @octanejs/cli init` pour laisser le CLI câbler les paramètres TypeScript et les outils. La configuration manuelle consiste à ajouter `octane` et `@octanejs/vite-plugin`, enregistrer le plugin dans `vite.config.ts`, puis appeler `createRoot` dans `main.ts`. Rspack et Rsbuild sont également pris en charge.

Licence et maintenance · octanejs octane

Octane est en alpha ; le runtime, le compilateur et les chemins SSR/hydratation fonctionnent, mais les API bougent encore. La suite principale contient plus de 3 900 tests comportementaux distincts couvrant la conformité, la différence, l'hydratation, le runtime, le compilateur et la couverture SSR. Le projet `octane-prod` réexécute la suite normale contre le chemin du compilateur de production et n'est pas compté à nouveau. Le README précise qu'il s'agit d'un compte de suite Octane, pas une affirmation que chaque test a été porté depuis React ; le rapport de parité et le registre de couverture suivent la couverture dérivée de React. Le dépôt est un monorepo pnpm avec le paquet runtime/compilateur `octane`, les paquets de couche applicative, les outils et de nombreux bindings `@octanejs/*` portant des bibliothèques React. La documentation est sur octanejs.dev et dans le dépôt. La licence est MIT, copyright Dominic Gannaway.

Conclusion éditoriale

octanejs-octane s’adresse aux lecteurs dont le besoin correspond aux formats et aux commandes décrits dans son README. Il ne convient pas de lui prêter une capacité que la source ne documente pas. Avant de l’intégrer, exécutez son entrée de démarrage propre, contrôlez la sortie produite et vérifiez la licence ainsi que les dépendances dans le contexte réel du projet.

Sources officielles

1. Official documentation
2. Official README
3. Project repository
4. Release notes