# O repositório de componentes do Flow: 146 componentes, o catálogo e o tester

> Uma visita a totaljs/flowstreamcomponents, os componentes de código aberto do Flow: que grupos cobre, como o db.json é gerado, como o Flow carrega o catálogo e como testar um componente com o tester incluído.

Framework: flow
Product: Flow (flow@11.1)
Language: pt
Content-SHA256: 17e8fa43a612a9f323caa113b180f258d83b08426236c93db2e666cf82b79609
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

[`totaljs/flowstreamcomponents`](https://github.com/totaljs/flowstreamcomponents) contém os componentes de código aberto que o editor do Flow oferece. Na revisão documentada aqui (`e34d283`) tem **146 componentes** em `components/`, 32 mais antigos guardados em `archived/`, o gerador do catálogo (`db.js`), o próprio catálogo (`db.json`) e um tester.

## O que o catálogo cobre

Os componentes estão organizados em grupos. Alguns dos maiores:

| Grupo | Componentes (exemplos) |
|---|---|
| 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` |

Além disso, há componentes para análise (`xmlparser`, `dataparser`, `csvdataset`, `cheerio`), datas e fusos horários (`date`, `timezone`, `duration`), texto e modelos (`tangular`, `qrcode`), OAuth2 (`oauth2`), transferências (`downloader`, `urldownload`), notificações (`sms`, `rssreader`, `openweather`, `googlesearch`) e o hardware do Linux (`nvidiasmi`). A pasta `archived/` guarda, para referência, a geração anterior da família (GPIO e I2C do Raspberry Pi, RabbitMQ, métricas do sistema).

## Como o Flow os encontra: `db.json`

O Flow não descarrega o HTML de cada componente. Descarrega **um catálogo**, um ficheiro JSON (por predefinição `https://cdn.totaljs.com/flowstream/webcomponents/db.json`, definido em [as definições](/en/flow/settings-and-files/)) com uma entrada por componente:

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

O editor mostra a lista com o `readme` e descarrega o `url` do componente quando o acrescenta. Para oferecer os seus próprios componentes junto dos oficiais, publique os seus ficheiros HTML e um `db.json` seu e escreva o endereço dele na definição `components2`.

O `db.js` gera o catálogo: lê cada ficheiro de `components/`, tira `group`, `name`, `author`, `icon`, `color`, `version` e `kind` dos seus `exports`, tira o texto de `<readme>`, constrói o `url` na CDN e escreve `db.json` ordenado por nome. Execute-o com Node.js depois de acrescentar ou alterar um componente.

## O tester

`tester.js` executa um componente sem o editor e `tests/` tem exemplos (`counter.js`, `example.js`, `example-multiple.js`, `influxdb.js`, `sqlite3.js`, `trigger.js`) e um `readme.md` com todas as opções. Um teste tem este aspeto:

```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` carrega o componente, `test.input(data)` envia-lhe uma mensagem, `test.output` e `test.message` recebem o que ele envia, `test.configure({...})` altera a sua configuração, `test.trigger()` chama o seu trigger e `test.ok()` e `test.fail()` marcam o resultado. Para executar todos os testes: `cd flowstreamcomponents`, `npm install total4` uma vez e `node tester.js`. O tester desta revisão está escrito para Total.js 4 (`require('total4')`), como diz o seu readme.

## Contribuir

O repositório pede para seguir as normas e orientações de código do Total.js e o seu readme liga-as; o contacto é `info@totaljs.com`. Para escrever um componente, veja [escrever um componente](/en/flow/write-a-component/).