Escribir un componente de Flow: un archivo HTML

Un componente es un archivo .html. Flow lee el archivo, ejecuta su parte Node.js dentro del flujo y muestra su diseño en el editor. Todos los componentes oficiales de el repositorio usan este formato, así que puedes leer cualquiera de ellos como ejemplo.

Un ejemplo: shout.html

Recibe un mensaje, convierte el texto a mayúsculas, añade un sufijo y lo envía.

<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>

Las partes del archivo

Parte	Para qué sirve
<script total>	el código Node.js del componente, ejecutado en el proceso del flujo
<settings>	el formulario de configuración, con los componentes de la interfaz de usuario (ui-component, las rutas que empiezan por ?. apuntan al config del componente)
<readme>	la ayuda que se muestra en el editor
<body>	la caja en el diagrama: un <header> con los marcadores ICON y NAME, y opcionalmente un <footer> o un cuerpo, donde <ui-bind path="STATUS.x"> muestra el estado y CONFIG.x la configuración
<style>	el CSS de la caja; .CLASS se sustituye por una clase única del componente
<script> (segundo)	JavaScript opcional del editor, para botones de la caja (puede enviar { TYPE: 'trigger', id: ... } al flujo)

Los exports de la parte Node.js

Export	Significado
id, name, group, version, icon, author	la identidad del componente y dónde aparece en la lista
config	la configuración por defecto; el formulario de <settings> la edita
inputs, outputs	la lista de conectores { id, name }. Un componente sin inputs es una fuente
kind	opcional: el papel del componente en el catálogo (trigger, action u output)
make(instance, config)	se llama una vez por cada caja que colocas en el diagrama

La instance

Dentro de make defines el comportamiento asignando funciones a la instancia:

Función	Se llama cuando
instance.message = function($) {}	llega un mensaje. $.data son los datos, $.send('output') los reenvía a los conectores de esa salida, $.destroy() lo termina sin enviarlo
instance.configure = function() {}	cambia la configuración, y una vez al inicio
instance.trigger = function() {}	el botón del editor o el código lo pide
instance.pause = function(is) {}	el flujo se pausa o se reanuda
instance.close = function() {}	se elimina la caja o se detiene el flujo: limpia aquí tus temporizadores

Y llamas a instance.send('output', data) para crear un mensaje propio (como hace timer), a instance.status(object) para mostrar un estado en la caja (delay.html pasa un tiempo en milisegundos como segundo argumento para refrescarlo) y a instance.throw(error) para informar de un error.

Pruébalo

1. Pon shout.html en un catálogo y escribe su dirección en el ajuste components2 (consulta el repositorio), o importa un flujo que lo contenga en sus components.
2. Añade un timer y un print a su lado en el editor, conéctalos e inicia el flujo.
3. Abre el estado de la caja: el contador crece con cada mensaje.

Para probar un componente sin el editor, el repositorio tiene un pequeño tester, consulta el repositorio de componentes.