# Das Flow-Komponenten-Repository: 146 Komponenten, der Katalog und der Tester

> Ein Rundgang durch totaljs/flowstreamcomponents, die Open-Source-Komponenten von Flow: welche Gruppen es abdeckt, wie db.json erzeugt wird, wie Flow den Katalog lädt und wie man eine Komponente mit dem mitgelieferten Tester testet.

Framework: flow
Product: Flow (flow@11.1)
Language: de
Content-SHA256: 6cb9164e2999f612a2732b2e06339092bff6a2deb0aecca1a782945ff6f010d9
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

[`totaljs/flowstreamcomponents`](https://github.com/totaljs/flowstreamcomponents) enthält die Open-Source-Komponenten, die der Editor von Flow anbietet. In der hier dokumentierten Revision (`e34d283`) hat es **146 Komponenten** in `components/`, 32 ältere in `archived/`, den Generator des Katalogs (`db.js`), den Katalog selbst (`db.json`) und einen Tester.

## Was der Katalog abdeckt

Die Komponenten sind in Gruppen organisiert. Einige der größeren:

| Gruppe | Komponenten (Beispiele) |
|---|---|
| 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` |

Außerdem gibt es Komponenten für das Parsen (`xmlparser`, `dataparser`, `csvdataset`, `cheerio`), Datum und Zeitzonen (`date`, `timezone`, `duration`), Text und Vorlagen (`tangular`, `qrcode`), OAuth2 (`oauth2`), Downloads (`downloader`, `urldownload`), Benachrichtigungen (`sms`, `rssreader`, `openweather`, `googlesearch`) und die Hardware von Linux (`nvidiasmi`). Der Ordner `archived/` bewahrt die ältere Generation der Familie (Raspberry-Pi-GPIO und I2C, RabbitMQ, Systemmetriken) zur Referenz auf.

## Wie Flow sie findet: `db.json`

Flow lädt nicht das HTML jeder Komponente herunter. Es lädt **einen Katalog**, eine JSON-Datei (standardmäßig `https://cdn.totaljs.com/flowstream/webcomponents/db.json`, festgelegt in [den Einstellungen](/en/flow/settings-and-files/)) mit einem Eintrag pro Komponente:

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

Der Editor zeigt die Liste mit dem `readme` und lädt die `url` der Komponente herunter, wenn Sie sie hinzufügen. Um eigene Komponenten neben den offiziellen anzubieten, veröffentlichen Sie Ihre HTML-Dateien und eine eigene `db.json` und tragen deren Adresse in die Einstellung `components2` ein.

`db.js` erzeugt den Katalog: Es liest jede Datei in `components/`, entnimmt `group`, `name`, `author`, `icon`, `color`, `version` und `kind` ihren `exports`, übernimmt den Text von `<readme>`, baut die `url` auf dem CDN und schreibt `db.json` nach Namen sortiert. Führen Sie es mit Node.js aus, nachdem Sie eine Komponente hinzugefügt oder geändert haben.

## Der Tester

`tester.js` führt eine Komponente ohne den Editor aus, und `tests/` enthält Beispiele (`counter.js`, `example.js`, `example-multiple.js`, `influxdb.js`, `sqlite3.js`, `trigger.js`) sowie eine `readme.md` mit allen Optionen. Ein Test sieht so aus:

```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` lädt die Komponente, `test.input(data)` schickt ihr eine Nachricht, `test.output` und `test.message` empfangen, was sie sendet, `test.configure({...})` ändert ihre Konfiguration, `test.trigger()` ruft ihren Trigger auf und `test.ok()` und `test.fail()` markieren das Ergebnis. So führen Sie alle Tests aus: `cd flowstreamcomponents`, einmal `npm install total4` und `node tester.js`. Der Tester dieser Revision ist für Total.js 4 geschrieben (`require('total4')`), wie sein Readme sagt.

## Beitragen

Das Repository bittet darum, die Coding-Standards und Richtlinien von Total.js einzuhalten, und sein Readme verlinkt sie; der Kontakt ist `info@totaljs.com`. Um eine Komponente zu schreiben, siehe [Eine Komponente schreiben](/en/flow/write-a-component/).