# Le dépôt des composants de Flow : 146 composants, le catalogue et le testeur

> Une visite de totaljs/flowstreamcomponents, les composants open source de Flow : quels groupes il couvre, comment db.json est généré, comment Flow charge le catalogue et comment tester un composant avec le testeur fourni.

Framework: flow
Product: Flow (flow@11.1)
Language: fr
Content-SHA256: 8436c845d2e96a6350ff99f7d8aba552f829756b16198f19bd4d99d619a9c41c
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

[`totaljs/flowstreamcomponents`](https://github.com/totaljs/flowstreamcomponents) contient les composants open source que propose l’éditeur de Flow. Dans la révision documentée ici (`e34d283`), il compte **146 composants** dans `components/`, 32 plus anciens conservés dans `archived/`, le générateur du catalogue (`db.js`), le catalogue lui-même (`db.json`) et un testeur.

## Ce que couvre le catalogue

Les composants sont organisés en groupes. Quelques-uns des plus importants :

| Groupe | Composants (exemples) |
|---|---|
| Common (40) | `delay`, `print`, `counter`, `switch`, `merge`, `code`, `request`, `throttle`, `transform`, `macro`, `modify`, `stringoperations` |
| Total.js (17) | `taction`, `troute`, `tschema`, `tcors`, `tresponse`, `tauthtoken`, `twebsocketroute`, `tuploadedfiles`, `tsql`, `querybuilderpg` |
| Total.js API Services (13) | `tapiocrapi`, `tapigeoipapi`, `tapiweatherapi`, `tapismsapi`, `tapichatgptapi`, `tapiinvoiceparserapi`, `tapicheckvatapi`, `tapiprintapi` |
| Databases (8) | `postgresql`, `mysql`, `sqlite3`, `mongodb-query`, `mongodb-insert`, `influxdb`, `nosql`, `localstorage` |
| Triggers (7) | `timer`, `trigger`, `crontab`, `minutely`, `notify` |
| Files (6) | `filewriter`, `filewatcher`, `fileswatcher`, `fsrename`, `fstouch`, `fsunlink` |
| Flow, FlowStream, Stats, Checks, Security... | `debug`, `flowstats`, `input`, `output`, `publish`, `subscribe`, `stopwatch`, `checkurl`, `checklog`, `checkfreespace`, `totp`, `iplimiter` |
| MQTT, AI, Ollama | `mqtt-broker`, `mqtt-publish`, `mqtt-subscribe`, `aiagent`, `aitool`, `aicontext`, `chatgpt`, `ollamaprompt`, `ollamals`, `ollamawebsearch` |

Il y a aussi des composants pour l’analyse (`xmlparser`, `dataparser`, `csvdataset`, `cheerio`), les dates et fuseaux horaires (`date`, `timezone`, `duration`), le texte et les modèles (`tangular`, `qrcode`), OAuth2 (`oauth2`), les téléchargements (`downloader`, `urldownload`), les notifications (`sms`, `rssreader`, `openweather`, `googlesearch`) et le matériel de Linux (`nvidiasmi`). Le dossier `archived/` conserve pour référence la génération précédente de la famille (GPIO et I2C de Raspberry Pi, RabbitMQ, métriques système).

## Comment Flow les trouve : `db.json`

Flow ne télécharge pas le HTML de chaque composant. Il télécharge **un catalogue**, un fichier JSON (par défaut `https://cdn.totaljs.com/flowstream/webcomponents/db.json`, défini dans [les réglages](/en/flow/settings-and-files/)) avec une entrée par composant :

```json
{
  "id": "taction",
  "group": "Total.js",
  "name": "Action",
  "url": "https://cdn.totaljs.com/flowstream/webcomponents/taction.html",
  "author": "Peter Širka | Total.js",
  "icon": "ti ti-totaljs",
  "color": "",
  "version": "2",
  "kind": "",
  "readme": "This component creates similar functionality as Total.js Actions. ..."
}
```

L’éditeur affiche la liste avec le `readme` et télécharge l’`url` du composant quand vous l’ajoutez. Pour proposer vos propres composants à côté des officiels, publiez vos fichiers HTML et un `db.json` à vous et écrivez son adresse dans le réglage `components2`.

`db.js` génère le catalogue : il lit chaque fichier de `components/`, prend `group`, `name`, `author`, `icon`, `color`, `version` et `kind` dans ses `exports`, prend le texte de `<readme>`, construit l’`url` sur le CDN et écrit `db.json` trié par nom. Exécutez-le avec Node.js après avoir ajouté ou modifié un composant.

## Le testeur

`tester.js` exécute un composant sans l’éditeur et `tests/` contient des exemples (`counter.js`, `example.js`, `example-multiple.js`, `influxdb.js`, `sqlite3.js`, `trigger.js`) et un `readme.md` avec toutes les options. Un test ressemble à ceci :

```js
require('../tester')(async function(describe, done) {

	await describe(function(test, next) {

		let messages = 0;
		let status = 0;

		test.status = function(data) {
			status = data;
		};

		test.input('Hello World!');
		messages++;

		setTimeout(function() {
			test.ok(status === messages, 'Counting');
			next();
		}, 2000);

	});

	done();
});
```

`describe` charge le composant, `test.input(data)` lui envoie un message, `test.output` et `test.message` reçoivent ce qu’il envoie, `test.configure({...})` change sa configuration, `test.trigger()` appelle son trigger et `test.ok()` et `test.fail()` marquent le résultat. Pour exécuter tous les tests : `cd flowstreamcomponents`, `npm install total4` une fois, puis `node tester.js`. Le testeur de cette révision est écrit pour Total.js 4 (`require('total4')`), comme le dit son readme.

## Contribuer

Le dépôt demande de suivre les normes et directives de code de Total.js, que son readme référence ; le contact est `info@totaljs.com`. Pour écrire un composant, voir [écrire un composant](/en/flow/write-a-component/).