# The Flow components repository: 146 components, the catalogue and the tester

> A tour of totaljs/flowstreamcomponents, the open-source components of Flow: what groups it covers, how db.json is generated, how Flow loads the catalogue and how to test a component with the included tester.

Framework: flow
Product: Flow (flow@11.1)
Language: en
Content-SHA256: aeb0ed5cbcc859e08dd0521f12ad833aafcab1a12d2cfa6841f445b8ddbc6630
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

[`totaljs/flowstreamcomponents`](https://github.com/totaljs/flowstreamcomponents) holds the open-source components that the editor of Flow offers. In the revision documented here (`e34d283`) it has **146 components** in `components/`, 32 older ones kept in `archived/`, the generator of the catalogue (`db.js`), the catalogue itself (`db.json`) and a tester.

## What the catalogue covers

The components are organised in groups. Some of the bigger ones:

| Group | Components (examples) |
|---|---|
| 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` |

Besides, there are components for parsing (`xmlparser`, `dataparser`, `csvdataset`, `cheerio`), dates and time zones (`date`, `timezone`, `duration`), text and templates (`tangular`, `qrcode`), OAuth2 (`oauth2`), downloads (`downloader`, `urldownload`), notifications (`sms`, `rssreader`, `openweather`, `googlesearch`) and the hardware of Linux (`nvidiasmi`). The folder `archived/` keeps the older generation of the family (Raspberry Pi GPIO and I2C, RabbitMQ, system metrics) for reference.

## How Flow finds them: `db.json`

Flow does not download the HTML of every component. It downloads **a catalogue**, a JSON file (by default `https://cdn.totaljs.com/flowstream/webcomponents/db.json`, set in [the settings](/en/flow/settings-and-files/)) with one entry 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. ..."
}
```

The editor shows the list with the `readme` and downloads the `url` of the component when you add it. To offer your own components next to the official ones, publish your HTML files and a `db.json` of your own and write its address in the setting `components2`.

`db.js` generates the catalogue: it reads each file of `components/`, takes `group`, `name`, `author`, `icon`, `color`, `version` and `kind` from its `exports`, takes the text of `<readme>`, builds the `url` on the CDN and writes `db.json` sorted by name. Run it with Node.js after you add or change a component.

## The tester

`tester.js` runs a component without the editor and `tests/` has examples (`counter.js`, `example.js`, `example-multiple.js`, `influxdb.js`, `sqlite3.js`, `trigger.js`) and a `readme.md` with all the options. A test looks like this:

```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` loads the component, `test.input(data)` sends it a message, `test.output` and `test.message` receive what it sends, `test.configure({...})` changes its configuration, `test.trigger()` calls its trigger and `test.ok()` and `test.fail()` mark the result. To run all the tests: `cd flowstreamcomponents`, `npm install total4` once, and `node tester.js`. The tester of this revision is written for Total.js 4 (`require('total4')`), as its readme says.

## Contribute

The repository asks you to follow the coding standards and guidelines of Total.js, and its readme links them; the contact is `info@totaljs.com`. To write a component, see [write a component](/en/flow/write-a-component/).