Des exemples pratiques. Des démos en direct.
Choisissez un exemple pour l'ouvrir en plein écran, avec l'aperçu en direct et son code source côte à côte.
Bases
4Les motifs dont toute application Nuclo est faite.
Compteur
Mutez l'état, puis appelez update(). Le texte dynamique se rafraîchit.
Liste de tâches
Utilisez list() pour les éléments répétés. Appelez update() après chaque mutation.
Filtre de recherche
Filtrez un tableau en JavaScript ordinaire. Rendez le résultat avec list().
Styles
Utilisez css() pour les classes. Utilisez cx() pour de petits changements conditionnels.
Composants
4Des fonctions ordinaires avec des paramètres statiques et dynamiques, des enfants, des listes appariées par identité et des données imbriquées. Chaque aperçu compte ses montages.
Paramètres statiques et dynamiques
Un paramètre valeur est lu une fois, à la construction du composant. Un paramètre fonction est lu à chaque update(). Le composant lui-même ne s'exécute qu'une fois dans les deux cas, et le compteur de montages le prouve.
Enfants et modificateurs
Un composant transmet ses enfants avec un spread : constructeurs, texte, objets d'attributs et modificateurs. Les parties conditionnelles vont dans when(), ainsi le composant qui les entoure n'est jamais reconstruit.
Identité des listes
list() conserve une ligne tant que son élément est dans le tableau : réordonnez, insérez et renommez sans perdre les saisies ni le focus. Un interrupteur clone les objets à chaque mise à jour pour montrer ce que coûte la rupture d'identité.
Données imbriquées
Une équipe avec des membres avec des tâches : un composant par niveau, des appels list() imbriqués, des comptes dérivés comme fonctions sur les mêmes objets. Les changements profonds ne retouchent que leurs propres nœuds.
API
13Une petite démo par brique, les mêmes que la documentation intègre.
Constructeurs de balises
Un constructeur prend des attributs, des enfants statiques et du texte dynamique. Renommer change l'état, puis appelle update().
Composants
Un composant est une fonction ordinaire. Chaque appel à Counter() garde son propre compte.
Attributs
Les valeurs d'attributs peuvent être des fonctions. Le second bouton bascule busy et appelle update() ; les disabled et aria-busy de Save suivent.
Événements
onInput et onKeyDown sont des attributs ordinaires. Tapez, puis appuyez sur Échap pour effacer.
Cycle de vie
onMount démarre un intervalle et retourne son nettoyage. Le démontage exécute le nettoyage, le compte se met donc en pause jusqu'à ce que le minuteur soit remonté.
Mises à jour explicites
count++ ne change que la variable. Le texte se rattrape au prochain update(), venant du bouton ou de n'importe quoi d'autre sur cette page.
Valeurs dynamiques
Modifiez le nom. Le texte statique a été fixé à la construction de l'élément ; le texte dynamique s'exécute à nouveau à chaque update(). forceUpdate() reconstruit l'arbre, le texte statique se rattrape donc aussi.
update()
Chaque update() exécute chaque valeur dynamique, même quand ses données n'ont pas changé. Les autres démos de cette page font aussi monter le compte.
scope()
Les deux boutons ajoutent un article et renomment l'utilisateur. update('cart') ne rafraîchit que le panneau du scope.
when()
La première condition vraie l'emporte ; sinon .else() est rendu. Une nouvelle branche est construite de zéro.
list()
Les lignes sont appariées par identité. Cochez une ligne, puis Reverse : le même <li> se déplace, case à cocher comprise.
region() et into()
Une mise en page avec une région principale empilée et une région latérale, remplies depuis l'extérieur. Tapez dans Home, ouvrez la boîte de dialogue et fermez-la : le texte reste. Article remplit les deux régions avec un seul into().
forceUpdate()
update() ne rafraîchit que la ligne lang dynamique. forceUpdate() appelle App à nouveau et retouche le même <h1>. La forme explicite ne reconstruit que cet arbre, pas toute la page.
Styles
3Créer une classe, composer une classe et utiliser un petit thème.
Formulaires
3La validation comme fonctions ordinaires sur un état ordinaire, champs touchés, étapes et lignes dynamiques.
Validation de champs
Des règles comme fonction sur un état ordinaire, des erreurs affichées une fois le champ touché, une vérification asynchrone avec debounce et état en attente, et une soumission qui attend tout cela.
Assistant multi-étapes
Trois étapes comme branches when() sur un seul objet de données. Suivant touche les champs de l'étape et n'avance que s'ils passent. La révision liste tout avec des liens Modifier.
Lignes dynamiques
Des lignes de facture dans un tableau rendu avec list(). Chaque ligne se valide elle-même, le total compte les lignes valides, et les lignes gardent leurs saisies quand d'autres sont ajoutées ou retirées.
SVG
27Graphiques, animations, outils et jeux à partir des constructeurs de balises SVG, pilotés par des données ordinaires, des événements de pointeur et update().
Graphique à barres
Des rects à partir d'un tableau. Leurs y et height sont des fonctions des données, update() déplace donc les barres.
Graphique linéaire
Un path dont le d est construit à partir des points, avec une aire en dégradé et un cercle par point.
Graphique en anneau
Un cercle par part. stroke-dasharray donne à chacune sa portion de l'anneau et stroke-dashoffset son départ.
Animation SVG
SMIL en constructeurs : animateSvg fait pulser le soleil, animateTransformSvg met la planète en orbite. Un dur dynamique règle la vitesse.
Jauge
Un arc qui se remplit avec stroke-dashoffset et une aiguille qui tourne avec une transformation CSS. Les deux sont des fonctions d'un seul nombre.
Graphique radar
Cinq valeurs sur cinq axes. La forme est un seul path dont le d est calculé à partir des données, update() le fait donc se transformer.
Carte de chaleur
Une grille de rects dont le fill-opacity suit un niveau. Cliquez sur une cellule pour l'augmenter ; un enfant titleSvg est son infobulle.
Infobulle au survol
Des événements de pointeur sur des éléments SVG. onPointerEnter choisit le point actif et un groupe infobulle glisse jusqu'à lui.
Éditeur de courbe
Faites glisser les poignées d'une Bézier cubique. onPointerDown choisit un point, onPointerMove sur le svg le déplace et le path suit.
Horloge
Les aiguilles sont des lignes dont le transform est une fonction de l'heure. onMount démarre le tic-tac et retourne le nettoyage.
Icônes à bascule
Une icône de menu qui se transforme en croix avec des transitions CSS, et un cœur qui éclate avec une animation SMIL déclenchée au clic.
Flux en direct
Deux séries défilent vers la gauche sur un minuteur. Une transition CSS aussi longue qu'un tic rend le glissement fluide, et le survol lit n'importe quel échantillon.
Graphique en chandeliers
Quarante emplacements lisent leur propre chandelier. Changez l'intervalle, basculez la moyenne, survolez pour les chiffres, ou laissez le chandelier en direct avancer.
Course de barres
Dix barres ne quittent jamais le DOM. Leur rang fixe un translateY, une transition fait donc glisser chacune vers sa ligne quand les valeurs changent.
Graphique en aires empilées
Quatre bandes se transforment entre les dispositions empilée, flux et pourcentage. Masquer une série ne fait que donner à sa bande une épaisseur nulle, chaque path garde donc sa forme.
Treemap
Une disposition squarifiée dans laquelle on descend. Changer la métrique fait glisser chaque cellule vers sa nouvelle boîte, et cliquer sur un groupe fait apparaître ses enfants.
Histogramme en direct
Des échantillons affluent de quatre distributions. Les classes se recomptent à chaque changement, une cloche ajustée suit la moyenne, et un curseur règle le nombre de classes.
Carnet de dessin
Des événements de pointeur dessinent des polylignes. list() en rend une par trait, et le trait en cours s'allonge à chaque update().
Bouton rotatif
Un curseur personnalisé : l'angle du pointeur fixe la valeur, les flèches la font avancer par pas, et pathLength="100" transforme la valeur en tiret.
Roue chromatique
Choisissez une teinte par l'angle et une saturation par la distance. Quatre-vingt-dix secteurs, un dégradé radial et un disque sombre font la roue.
Spirographe
Une roue roule à l'intérieur d'un anneau et un stylo la trace. Chaque image allonge un tiret et ne met à jour que son scope().
Balles rebondissantes
Gravité, murs et collisions dans une boucle requestAnimationFrame. Tirez en arrière et relâchez pour lancer une balle.
Blobs gluants
Un flou et un filtre de matrice de couleurs fondent les blobs ensemble. Une traînée de cercles suit le pointeur.
Graphe de forces
Les nœuds se repoussent, les liens tirent, et la disposition se refroidit jusqu'au repos. Faites glisser un nœud, ou cliquez sur l'un d'eux pour faire pousser un enfant.
Brosse et zoom
Brossez une plage sur la vue d'ensemble pour zoomer le graphique au-dessus. Un clipPath qui suit la brosse colore la sélection.
Morpion
Jouez contre l'ordinateur. when() ajoute chaque marque, et une animation CSS sur son tiret la dessine.
Texte circulaire
Tapez un badge. textPath courbe le texte autour d'un cercle et textLength l'ajuste à exactement un tour.
Routage
6Tables de routes, correspondance, route active, couches et chargeurs. nuclo-router est un paquet séparé : npm install nuclo nuclo-router.
Une application routée
Une vraie application avec son propre routeur, dans le cadre : une table de routes, un outlet(), des liens ordinaires, un état en attente et une 404. Cliquez un peu partout, puis utilisez Retour.
Routes imbriquées
Docs est une mise en page avec des routes enfants. Un sujet est rendu dans son outlet() et les liens ./topic se résolvent par rapport à la route de la mise en page. Tapez dans les notes, puis changez de sujet : la mise en page n'est jamais reconstruite.
Chargeurs de route
La page d'article exporte un load() qui s'exécute avant la construction de la page. Observez router.pending pendant l'attente, et l'état d'erreur avec Réessayer quand il lève une exception sur l'article cassé.
Couches
Le formulaire de commande pousse la page client comme une couche et attend son résultat. Le formulaire n'est pas re-rendu, ses notes survivent donc. Enregistrer résout le push, Annuler ou Retour le ferme.
Routeurs multiples et chargement
Deux routeurs, deux indicateurs de chargement. La mise en page boutique et sa section ont chacune un load() : ils s'exécutent en parallèle sous un seul router.pending. La barre latérale a son propre routeur, créé mais jamais démarré, avec son propre drapeau de chargement rafraîchi depuis onNavigate.
Correspondance de motifs
Des motifs statiques, :param et *rest, et une table de sections montée sous deux parents. Tapez un chemin et observez match(), qui se résout sans rien charger.
Applications
15Des programmes plus grands, en plein écran, avec leur vrai code source derrière des onglets : un bureau avec des fenêtres, une grille de données, un chat, des jeux, des éditeurs et des bibliothèques qui possèdent leur propre état.
Constructeur de pages
Écrivez directement sur la page, faites glisser les poignées pour réordonner les blocs ou les déplacer dans des mises en page, appuyez sur / pour insérer, et cliquez droit pour les actions. Stylez les mises en page grid et flex, annulez les modifications, prévisualisez à la taille d'un téléphone et exportez le HTML.
Pas à pas d'algorithmes
Le moteur est du JavaScript ordinaire : des générateurs qui mutent un tableau et cèdent la main après chaque étape. Le lecteur appelle next() et update() ; les barres sont une list() sur les mêmes objets, un échange déplace donc deux éléments.
Tableau Kanban
Un tableau d'équipe : ajoutez des tâches, assignez-les à des personnes, modifiez-les dans une boîte de dialogue, filtrez par personne ou recherche, faites-les glisser entre les colonnes et annulez une suppression. Les colonnes et les cartes sont des tableaux ordinaires des mêmes objets ; chaque déplacement est un splice(). Les lignes sont appariées par identité, ainsi glisser, trier, assigner ou modifier une carte réutilise son élément. Le compteur de montages à l'écran le prouve.
Inspecteur three.js
Une bibliothèque qui possède son propre état. Le panneau lit les positions, couleurs et drapeaux directement depuis les objets three.js et y réécrit les modifications. La boucle de rendu appelle update() une fois par image ; rien n'est dupliqué.
Défilement infini
Un fil sans fin : un faux fetch() rapide génère chaque page à la volée dans un seul tableau ordinaire. Seules les lignes proches de la fenêtre sont dans le DOM : la list() rend posts.slice(start, end) entre deux espaceurs, la page reste donc légère à cent mille billets. Une sentinelle à la vraie fin demande la page suivante avant d'apparaître à l'écran.
Bureau
Un bureau fonctionnel avec Fichiers, Notes, Terminal, Calculatrice, Minuteur, un tableau Kanban, Finances et un Calendrier. Créez et organisez des dossiers, modifiez des notes et utilisez des commandes shell sur un seul disque simulé partagé, enregistré dans votre navigateur. Tapez dans la Calculatrice directement au clavier, cliquez n'importe où dans le Terminal pour donner le focus à sa ligne de saisie, faites glisser des cartes entre les colonnes du tableau, ou tenez un livre de comptes dans le tableur Finances et regardez ses graphiques bouger — le livre vit dans IndexedDB. Les fenêtres gardent leur état quand vous les déplacez, redimensionnez et passez d'une application à l'autre ; un minuteur en cours remplit la zone de notification de la barre des tâches avec into().
Graphe de nœuds
Reliez des nombres, du texte et des interrupteurs à travers des nœuds mathématiques, de comparaison et If, et chaque valeur se met à jour pendant que vous tapez. Les fonctions sont aussi des graphes : leurs nœuds Input et Output sont les ports de chaque Call, et un Call peut nommer sa propre fonction, factorial et sum sont donc récursifs avec un If comme porte de sortie. Le moteur est du JavaScript ordinaire : chaque nœud est un générateur qui cède la main pour demander une entrée, et une seule boucle les pilote depuis sa propre pile, ainsi sum(50000) s'imbrique sur cinquante mille appels en un dixième de seconde environ sans toucher à la pile d'appels JavaScript. Seul un budget d'étapes arrête une récursion sans issue. Glisser écrit x et y et ne met à jour que le scope du canevas ; le compteur d'exécutions montre que le graphe ne s'exécute jamais pour un déplacement.
Grille de données
Une table de travail sur 10 000 objets ligne ordinaires. Recherche, filtre, tri et pagination sont des fonctions ordinaires sur le tableau, et le corps de la table est une list() sur la page courante. Les lignes sont appariées par identité, le tri déplace donc les lignes qui restent sur la page, et une ligne modifiée est le même objet partout. Le compteur de lignes construites le prouve.
Chat
Un chat avec trois canaux, chacun un objet ordinaire : son historique, son curseur, sa saisie en cours, son brouillon et sa position de défilement, ainsi changer de canal garde chacun exactement tel qu'il était, et update("chat-sidebar") ne rafraîchit que les badges de non-lus. L'historique se charge vers le haut sans fin avec unshift() et un scrollTop qui grandit de la hauteur ajoutée. Votre message s'affiche avant que le serveur l'ait, send() retouche le même objet, et Réessayer, Modifier, Supprimer et les réactions ne reconstruisent jamais sa ligne. Les messages rendent le code, le gras, les liens et les @mentions.
Tableau de bord en direct
Des cartes qui se rafraîchissent à des rythmes différents, de 20 fois par seconde à une fois par seconde. Chaque carte est un scope(), et son minuteur appelle update() avec l'id de cette carte, un tic n'évalue donc que cette carte. Chaque valeur dynamique est comptée à l'écran : passez à un update() simple et l'horloge est évaluée une centaine de fois par seconde pour changer une fois.
Éditeur de pixels
L'image est un seul tableau ordinaire de 1024 chaînes de couleur, et chaque cellule y lit sa couleur. Un trait écrit dans le tableau et appelle update() ; quand il se termine, l'éditeur en garde une copie avec slice(). Annuler, rétablir et chaque étape de la list() d'historique remettent un tableau plus ancien en place : ni store, ni données immuables.
Snake
Une boucle de jeu est un minuteur qui appelle step() sur des objets ordinaires, puis update() une fois par tic. Le serpent est une list() de ses objets cellule, et à chaque tic l'objet queue devient la nouvelle tête, un seul élément bouge donc et aucun n'est construit : le compteur de segments construits ne monte que quand le serpent mange. La nourriture apparaît avec une animation keyframes().
Séquenceur pas à pas
Une bibliothèque qui possède sa propre horloge. Web Audio réserve chaque note à l'avance sur sa propre ligne de temps, et le motif est un tableau 2D ordinaire de booléens que la grille bascule et que l'ordonnanceur lit, un clic s'entend donc au passage suivant. La tête de lecture ne met à jour que son scope() quand le pas audible change. L'audio démarre au premier Lecture et se ferme dans le nettoyage du montage, quitter l'exemple arrête donc le son.
Sélecteur de langue
Chaque libellé est une valeur statique, écrite comme dans une application monolingue, update() ne le relit donc jamais : les clics du panier ne rafraîchissent que les quantités et les totaux. Changer de langue appelle forceUpdate() sur cet arbre, ce qui exécute le composant à nouveau et retouche les mêmes éléments, lang et dir compris. Monnaie, pluriels, dates et listes viennent d'Intl, et le panier et un coupon saisi survivent au changement.
Éditeur de thème
Une petite bibliothèque de composants : createCss() nomme les jetons et variants() en construit boutons, badges, cartes, champs, alertes et interrupteurs. Les jetons sont des variables CSS, chaque classe est donc compilée une seule fois. Chaque contrôle écrit un objet thème ordinaire et appelle update(), qui réécrit le texte d'un seul élément style.