SolidJS, qui vient d'être publiée dans sa première version stable, est une bibliothèque JavaScript déclarative pour la création d'interfaces utilisateur. Il s'agit d'un framework JSX réactif et précompilé dont l'originalité est de ne pas utiliser de DOM virtuel.

Au lieu de cela, SolidJS compile ses modèles vers de vrais nœuds DOM et encapsule les mises à jour dans des réactions à grain fin.

SolidJS est construit sur la base de simples primitives réactives à usage général. Les primitives sont composables. SolidJS capable de faire du rendu concurrent.

La programmation SolidJS est déclarative. Voici un exemple de code

import { render } from "solid-js/web";

const HelloMessage = props => <div>Hello {props.name}</div>;

render(() => <HelloMessage name="Taylor" />, document.getElementById("hello-example"));

Ce code montre qu'avec Solide JS un composant simple est juste une fonction qui accepte des propriétés. SolidJS utilise une fonction render pour créer le point de montage réactif de votre application.

Le JSX est ensuite compilé en expressions DOM réelles efficaces :

import  {  render ,  template ,  insert ,  createComponent  }  depuis  "solid-js/web"  ;

const  _tmpl$  =  template ( `<div>Bonjour </div>` ) ;

const  HelloMessage  =  props  =>  {
  const  _el$  =  _tmpl$ . cloneNode ( true ) ;
  insert ( _el$ ,  ( )  =>  props . nom ) ;
  return  _el$ ;
} ;

render (
  ( )  =>  createComponent ( HelloMessage ,  {  name : "Taylor"  } ) ,
  document . getElementById ( "hello-example" )
) ;

SolidJS dispose d'un site officiel solidjs.com sur lequel on trouvera de nombreuses ressources.  Une boucle d'évaluation interactive est proposée en ligne pour se faire la main avec SolidJS.

SolidJS est un logiciel libre sous licence MIT, disponible sur GitHub.

La boucle d'évaluation interactive de SolidJS