# A Flow komponenstárolója: 146 komponens, a katalógus és a teszter

> Körút a totaljs/flowstreamcomponents tárolóban, a Flow nyílt forráskódú komponenseinél: milyen csoportokat fed le, hogyan készül a db.json, hogyan tölti be a Flow a katalógust, és hogyan tesztelhetsz egy komponenst a mellékelt tesztelővel.

Framework: flow
Product: Flow (flow@11.1)
Language: hu
Content-SHA256: 0ef8ce7f6c44584420ecd13897e9c72dc54f5d35dc8fb33472acc564a53bb38d
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

A [`totaljs/flowstreamcomponents`](https://github.com/totaljs/flowstreamcomponents) tartalmazza a Flow szerkesztője által kínált nyílt forráskódú komponenseket. Az itt dokumentált revízióban (`e34d283`) **146 komponens** van a `components/` mappában, 32 régebbi az `archived/` mappában, ott a katalógus generátora (`db.js`), maga a katalógus (`db.json`) és egy teszter.

## Mit fed le a katalógus

A komponensek csoportokba vannak szervezve. Néhány a nagyobbak közül:

| Csoport | Komponensek (példák) |
|---|---|
| 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` |

Emellett vannak komponensek az elemzéshez (`xmlparser`, `dataparser`, `csvdataset`, `cheerio`), dátumokhoz és időzónákhoz (`date`, `timezone`, `duration`), szöveghez és sablonokhoz (`tangular`, `qrcode`), OAuth2-höz (`oauth2`), letöltésekhez (`downloader`, `urldownload`), értesítésekhez (`sms`, `rssreader`, `openweather`, `googlesearch`) és a Linux hardveréhez (`nvidiasmi`). Az `archived/` mappa referenciaként őrzi a család régebbi generációját (Raspberry Pi GPIO és I2C, RabbitMQ, rendszermetrikák).

## Hogyan találja meg őket a Flow: `db.json`

A Flow nem tölti le minden komponens HTML-jét. Egy **katalógust** tölt le, egy JSON fájlt (alapértelmezés szerint `https://cdn.totaljs.com/flowstream/webcomponents/db.json`, a [beállítások](/en/flow/settings-and-files/) között állítható), komponensenként egy bejegyzéssel:

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

A szerkesztő a `readme` szöveggel mutatja a listát, és a komponens `url` címét tölti le, amikor hozzáadod. Hogy a hivatalosak mellett saját komponenseket is kínálj, tedd közzé a HTML fájljaidat és egy saját `db.json` fájlt, és írd a címét a `components2` beállításba.

A `db.js` előállítja a katalógust: beolvassa a `components/` minden fájlját, az `exports` részéből kiveszi a `group`, `name`, `author`, `icon`, `color`, `version` és `kind` értékeket, átveszi a `<readme>` szövegét, felépíti az `url` címet a CDN-en, és névsorba rendezve írja a `db.json` fájlt. Futtasd Node.js-szel, miután hozzáadtál vagy módosítottál egy komponenst.

## A teszter

A `tester.js` szerkesztő nélkül futtat egy komponenst, a `tests/` mappa példákat (`counter.js`, `example.js`, `example-multiple.js`, `influxdb.js`, `sqlite3.js`, `trigger.js`) és egy `readme.md` fájlt tartalmaz az összes beállítással. Egy teszt így néz ki:

```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();
});
```

A `describe` betölti a komponenst, a `test.input(data)` üzenetet küld neki, a `test.output` és a `test.message` fogadja, amit küld, a `test.configure({...})` megváltoztatja a konfigurációját, a `test.trigger()` meghívja a triggerét, a `test.ok()` és a `test.fail()` pedig megjelöli az eredményt. Az összes teszt futtatásához: `cd flowstreamcomponents`, egyszer `npm install total4`, majd `node tester.js`. Ennek a revíziónak a tesztere Total.js 4-hez készült (`require('total4')`), ahogy a readme is mondja.

## Közreműködés

A tároló kéri a Total.js kódolási szabványainak és irányelveinek követését, a readme pedig hivatkozik rájuk; az elérhetőség `info@totaljs.com`. Komponens írásához lásd a [komponens írása](/en/flow/write-a-component/) oldalt.