# Encontrar e chamar componentes e plugins: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE e ADAPT

> Procure os componentes da página por nome ou caminho, chame um método de vários componentes de uma vez, chame funções por nome, use dois endereços de API com TAPI e PIPE, execute middleware antes de uma rota e substitua os marcadores de um texto.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: pt
Content-SHA256: f4c20edb251f9e6d7011d718f16e2701571ea173f361c524a639419373474509
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

- `FIND(selector, [all])` devolve um componente que está pronto: `'notice'` é o seu **nome**, `'.msg'` o seu **caminho** (corresponde aos caminhos que o contêm) e `'#id'` o seu id; com `all` a `true` devolve a lista. `COMPONENTS(path)` devolve a lista dos componentes prontos cujo caminho está sob `path`; as bandeiras de um caminho filtram-na (`'msg @visible'`).
- `SETTER('name/method', a, b, c, d)` chama `method` de **cada** componente pronto com esse nome (`'.path/method'` para um caminho, `'#id/method'` para um id, `'*/method'` para todos). Um nome que ainda não está carregado é carregado primeiro (um componente preguiçoso). `ASETTER(...)` não o chama: devolve uma função que o fará.
- `EXE(name, a, b, c, d)` (igual a `EXEC()`) chama o que o nome diz: `'plugin/method'` um método de um plugin, `'function'` uma função global, ou um caminho no estado que contém uma função (`'FUNC.save'`). `SEEX(name, value)` é igual, mas quando o nome não é uma função **define** o caminho como `value`.
- `TAPI(name, data, callback)` é `API(DEF.api, ...)` e `PIPE(name, data, callback)` é `API(DEF.pipe, ...)`: dois endereços de endpoints que define uma vez em `DEF.api` e `DEF.pipe`.
- `MIDDLEWARE(name, function(next) {})` regista uma função que corre antes de uma rota: tem de chamar `next()` para a deixar prosseguir. Uma rota pede uma (ou mais, separadas por vírgulas) como terceiro argumento: `ROUTE('/path/', handler, 'name')`. `MIDDLEWARE(['a', 'b'], callback)` executa os middlewares por ordem e depois o callback; um que não chame `next()` pára a cadeia.
- `NEWUIBIND(element, path, config)` cria um `ui-bind` num elemento a partir do código (o elemento não precisa dos atributos) e devolve-o.
- `ADAPT(path, id, text)` prepara o texto de um componente que vem de fora: traduz `@(...)`, substitui `~PATH~` e `CLASS` pelo caminho e `~ID~` pelo id, e põe o `path` nas etiquetas `<ui-plugin>` que não o têm. `COMPILE` é a mesma função que `NOOP` no jComponent 20: não faz nada.
- Os objetos por trás de tudo: `jComponent`, `Total`, `MAIN` e `M` são o mesmo objeto (o motor: `M.components` é a lista de componentes, `M.version` a versão), `W` é `window`, `DEF` os valores por omissão, e `REPO`, `FUNC`, `TEMP` e `PLUGINS` são objetos simples seus: `FUNC` para funções que `EXE('FUNC.name')` pode chamar, `TEMP` é esvaziado pelo jComponent quando a página recomeça.

```js definitions/math.js
NEWACTION('Math/add', {
	name: 'Add two numbers',
	input: '*a:Number, *b:Number',
	action: function($, model) {
		$.callback({ sum: model.a + model.b });
	}
});
```

```js controllers/api.js
exports.install = function() {
	ROUTE('API /api/ +math_add --> Math/add');
	ROUTE('API /pipe/ +math_add --> Math/add');
};
```

```html public/index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<ui-component name="notice" path="msg"></ui-component>
	<ui-component name="notice" path="other"></ui-component>
	<ui-plugin path="shop"></ui-plugin>
	<p id="target">x</p>
	<script>

		COMPONENT('notice', function(self) {
			self.make = function() { self.element.html('<b></b>'); };
			self.say = function(text, extra) { self.find('b').text(text + (extra || '')); };
		});

		PLUGIN('shop', function(exports) {
			exports.hello = function(a) { window.shoplog = 'hello ' + a; };
		});

		window.globalfn = function(a, b) { window.globallog = [a, b]; };
		FUNC.local = function(a) { window.funclog = a; };

		DEF.api = '/api/';
		DEF.pipe = '/pipe/';

	</script>
</body>
</html>
```