# De componentenrepository van Flow: 146 componenten, de catalogus en de tester

> Een rondleiding door totaljs/flowstreamcomponents, de open-sourcecomponenten van Flow: welke groepen het dekt, hoe db.json wordt gegenereerd, hoe Flow de catalogus laadt en hoe je een component test met de meegeleverde tester.

Framework: flow
Product: Flow (flow@11.1)
Language: nl
Content-SHA256: 5dd6b4cf58b92c47d762a82b1b6c402fcc25d324adab29429ab7bda5e014dde3
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

[`totaljs/flowstreamcomponents`](https://github.com/totaljs/flowstreamcomponents) bevat de open-sourcecomponenten die de editor van Flow aanbiedt. In de hier gedocumenteerde revisie (`e34d283`) heeft het **146 componenten** in `components/`, 32 oudere in `archived/`, de generator van de catalogus (`db.js`), de catalogus zelf (`db.json`) en een tester.

## Wat de catalogus dekt

De componenten zijn in groepen georganiseerd. Enkele van de grotere:

| Groep | Componenten (voorbeelden) |
|---|---|
| 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` |

Daarnaast zijn er componenten voor parsen (`xmlparser`, `dataparser`, `csvdataset`, `cheerio`), datums en tijdzones (`date`, `timezone`, `duration`), tekst en sjablonen (`tangular`, `qrcode`), OAuth2 (`oauth2`), downloads (`downloader`, `urldownload`), meldingen (`sms`, `rssreader`, `openweather`, `googlesearch`) en de hardware van Linux (`nvidiasmi`). De map `archived/` bewaart ter referentie de oudere generatie van de familie (GPIO en I2C van Raspberry Pi, RabbitMQ, systeemmetrics).

## Hoe Flow ze vindt: `db.json`

Flow downloadt niet de HTML van elke component. Het downloadt **een catalogus**, een JSON-bestand (standaard `https://cdn.totaljs.com/flowstream/webcomponents/db.json`, ingesteld in [de instellingen](/en/flow/settings-and-files/)) met één item per component:

```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. ..."
}
```

De editor toont de lijst met de `readme` en downloadt de `url` van de component wanneer je die toevoegt. Om je eigen componenten naast de officiële aan te bieden, publiceer je je HTML-bestanden en een eigen `db.json` en schrijf je het adres ervan in de instelling `components2`.

`db.js` genereert de catalogus: het leest elk bestand van `components/`, haalt `group`, `name`, `author`, `icon`, `color`, `version` en `kind` uit de `exports`, haalt de tekst van `<readme>` op, bouwt de `url` op de CDN en schrijft `db.json` gesorteerd op naam. Voer het uit met Node.js nadat je een component hebt toegevoegd of gewijzigd.

## De tester

`tester.js` voert een component uit zonder de editor en `tests/` bevat voorbeelden (`counter.js`, `example.js`, `example-multiple.js`, `influxdb.js`, `sqlite3.js`, `trigger.js`) en een `readme.md` met alle opties. Een test ziet er zo uit:

```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` laadt de component, `test.input(data)` stuurt er een bericht naartoe, `test.output` en `test.message` ontvangen wat hij verstuurt, `test.configure({...})` wijzigt zijn configuratie, `test.trigger()` roept zijn trigger aan en `test.ok()` en `test.fail()` markeren het resultaat. Om alle tests uit te voeren: `cd flowstreamcomponents`, eenmalig `npm install total4` en `node tester.js`. De tester van deze revisie is geschreven voor Total.js 4 (`require('total4')`), zoals zijn readme zegt.

## Bijdragen

De repository vraagt om de codestandaarden en richtlijnen van Total.js te volgen en zijn readme linkt ernaar; het contact is `info@totaljs.com`. Om een component te schrijven, zie [een component schrijven](/en/flow/write-a-component/).