# Skriv en Flow-komponent: en HTML-fil

> En Flow-komponent är en enda HTML-fil med en Node.js-del, ett inställningsformulär och en design. Bygg en som ändrar texten i ett meddelande, lär dig filens delar och hur du testar den.

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

En komponent är **en `.html`-fil**. Flow läser filen, kör dess Node.js-del inuti flödet och visar dess design i editorn. De officiella komponenterna i [förrådet](/en/flow/the-components-repository/) använder alla det här formatet, så du kan läsa vilken som helst av dem som exempel.

## Ett exempel: `shout.html`

Den tar emot ett meddelande, omvandlar texten till versaler, lägger till ett suffix och skickar vidare det.

```html
<script total>

	exports.id = 'shout';
	exports.name = 'Shout';
	exports.group = 'Common';
	exports.version = '1';
	exports.icon = 'ti ti-speakerphone';
	exports.author = 'Forge';
	exports.config = { suffix: '!' };
	exports.inputs = [{ id: 'input', name: 'Input' }];
	exports.outputs = [{ id: 'output', name: 'Output' }];

	exports.make = function(instance, config) {

		let count = 0;

		instance.message = function($) {
			count++;
			instance.status({ shouted: count });
			$.data = String($.data).toUpperCase() + config.suffix;
			$.send('output');
		};

	};

</script>

<settings>
	<div class="padding">
		<ui-component name="input" path="?.suffix" config="maxlength:10">Suffix</ui-component>
	</div>
</settings>

<readme>
The component converts the text of a message to upper case and adds a suffix.
</readme>

<body>
	<header>
		<i class="ICON"></i>NAME
	</header>
	<footer>
		<div class="padding">Shouted: <b><ui-bind path="STATUS.shouted" config="text:value||0"></ui-bind></b></div>
	</footer>
</body>
```

## Filens delar

| Del | Vad den är till för |
|---|---|
| `<script total>` | komponentens Node.js-kod, som körs i flödets process |
| `<settings>` | konfigurationsformuläret, med gränssnittets komponenter (`ui-component`, sökvägar som börjar med `?.` pekar på komponentens `config`) |
| `<readme>` | hjälpen som visas i editorn |
| `<body>` | rutan i diagrammet: en `<header>` med platshållarna `ICON` och `NAME`, och eventuellt en `<footer>` eller en kropp, där `<ui-bind path="STATUS.x">` visar statusen och `CONFIG.x` konfigurationen |
| `<style>` | rutans CSS; `.CLASS` ersätts med en klass som är unik för komponenten |
| `<script>` (andra) | valfri JavaScript för editorn, för knappar i rutan (den kan skicka `{ TYPE: 'trigger', id: ... }` till flödet) |

## Node.js-delens `exports`

| Export | Betydelse |
|---|---|
| `id`, `name`, `group`, `version`, `icon`, `author` | komponentens identitet och var den visas i listan |
| `config` | standardkonfigurationen; formuläret i `<settings>` redigerar den |
| `inputs`, `outputs` | listan över kontakter `{ id, name }`. En komponent utan `inputs` är en källa |
| `kind` | valfritt: komponentens roll i katalogen (`trigger`, `action` eller `output`) |
| `make(instance, config)` | anropas en gång för varje ruta du placerar i diagrammet |

## `instance`

Inuti `make` definierar du beteendet genom att tilldela funktioner till instansen:

| Funktion | Anropas när |
|---|---|
| `instance.message = function($) {}` | ett meddelande anländer. `$.data` är datan, `$.send('output')` skickar vidare det till kontakterna för den utgången, `$.destroy()` avslutar det utan att skicka |
| `instance.configure = function() {}` | konfigurationen ändras, och en gång vid starten |
| `instance.trigger = function() {}` | editorns knapp eller koden ber om det |
| `instance.pause = function(is) {}` | flödet pausas eller återupptas |
| `instance.close = function() {}` | rutan tas bort eller flödet stoppas: städa dina timers här |

Och du anropar `instance.send('output', data)` för att skapa ett eget meddelande (som `timer` gör), `instance.status(object)` för att visa en status i rutan (`delay.html` skickar en tid i millisekunder som andra argument för att uppdatera den) och `instance.throw(error)` för att rapportera ett fel.

## Prova

1. Lägg `shout.html` i en katalog och skriv dess adress i inställningen `components2` (se [förrådet](/en/flow/the-components-repository/)), eller importera ett flöde som innehåller den i sina `components`.
2. Lägg till en `timer` och en `print` bredvid den i editorn, koppla ihop dem och starta flödet.
3. Öppna rutans status: räknaren växer för varje meddelande.

För att testa en komponent utan editorn har förrådet en liten testare, se [komponentförrådet](/en/flow/the-components-repository/).