En React, avant de pouvoir utiliser un composant bouton, vous écrivez import Button from './Button'. En Vue, vous écrivez import Button from './Button.vue' puis vous l'enregistrez dans l'objet components. En Svelte, vous écrivez import Button from './Button.svelte'. Une ligne de boilerplate par composant, par fichier. Dans une vraie application avec 50 composants par page, cela fait 50 instructions d'import en haut de chaque fichier.
En FLIN, vous écrivez <Button />. C'est tout. Pas d'import. Pas d'export. Pas d'enregistrement. Pas de configuration. Le système de composants découvre Button.flin automatiquement et le rend en place, exactement comme <button> est une balise HTML native.
La Session 092 a construit ce système -- l'architecture de composants sans import qui donne à FLIN l'impression d'être du HTML avec des super-pouvoirs.
La règle fondamentale : majuscule signifie composant
Tout le système sans import repose sur une seule règle d'analyse : toute balise de type HTML qui commence par une majuscule est un composant. Toute balise qui commence par une minuscule est un élément HTML standard.
flin<button>Click me</button> // Élément HTML (minuscule)
<Button>Click me</Button> // Composant FLIN (majuscule)
<div class="container"> // Élément HTML
<Container> // Composant FLINLe ComponentRegistry : découverte sans configuration
Le ComponentRegistry maintient un cache de composants compilés et une liste de répertoires à chercher pour les fichiers .flin. Quand le moteur de rendu rencontre <Button /> et ne trouve pas Button dans le cache, il déclenche une recherche à travers tous les chemins de recherche.
L'algorithme de recherche essaie deux noms de fichiers pour chaque chemin : le nom exact (Button.flin) et la variante en minuscules (button.flin). Les composants locaux (dans le répertoire components/ du projet) ont priorité sur les composants de bibliothèque (dans flinui/), permettant les surcharges sans configuration.
Pourquoi c'est révolutionnaire
| Framework | Import/Setup nécessaire | Lignes |
|---|---|---|
| React | import React from 'react' + import Button from './Button' + export default App | 3+ |
| Vue | import { ref } from 'vue' + import Button from './Button.vue' + export default { components: { Button } } | 3+ |
| Svelte | import Button from './Button.svelte' | 1+ |
| FLIN | Rien | 0 |
Le fichier commence immédiatement avec la logique et le markup. Pas de préambule. Pas de cérémonie. Pas de boilerplate.
Composants imbriqués
Les composants peuvent utiliser d'autres composants sans aucune déclaration spéciale :
flin// UserCard.flin (utilise Card, Avatar, Badge -- tous auto-découverts)
<Card title={props.user.name}>
<Avatar name={props.user.name} src={props.user.avatar} />
<Text>{props.user.email}</Text>
<Badge variant={props.user.role == "admin" ? "primary" : "default"}>
{props.user.role}
</Badge>
</Card>La philosophie FLIN concrétisée
Le système de composants sans import est l'expression la plus pure de la philosophie fondamentale de FLIN : "Écrivez des applications comme en 1995. Avec la puissance de 2025."
En 1995, HTML n'avait pas de système d'import. Vous n'importiez pas <img> ou <table> ou <form>. Vous les utilisiez simplement. Le navigateur savait ce qu'ils étaient.
FLIN étend cela aux composants personnalisés. Vous n'importez pas <Button> ou <Card> ou <Modal>. Vous les utilisez simplement. Le runtime sait où les trouver.
Ceci est la partie 81 de la série "How We Built FLIN", documentant comment un CEO à Abidjan et un CTO IA ont construit un système de composants sans import dans un langage de programmation.
Navigation de la série : - [80] Error Tracking and Performance Monitoring - [81] FlinUI: Zero-Import Component System (vous êtes ici) - [82] From Zero to 70 Components in One Session - [83] FlinUI Complete: 365+ Components