# Trovare e chiamare componenti e plugin: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE e ADAPT

> Cerca i componenti della pagina per nome o percorso, chiama un metodo di più componenti insieme, chiama funzioni per nome, usa due indirizzi API con TAPI e PIPE, esegui middleware prima di una route e sostituisci i segnaposto di un testo.

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

- `FIND(selector, [all])` restituisce un componente pronto: `'notice'` è il suo **nome**, `'.msg'` il suo **percorso** (corrisponde ai percorsi che lo contengono) e `'#id'` il suo id; con `all` a `true` restituisce la lista. `COMPONENTS(path)` restituisce la lista dei componenti pronti il cui percorso è sotto `path`; i flag di un percorso la filtrano (`'msg @visible'`).
- `SETTER('name/method', a, b, c, d)` chiama `method` di **ogni** componente pronto con quel nome (`'.path/method'` per un percorso, `'#id/method'` per un id, `'*/method'` per tutti). Un nome non ancora caricato viene caricato prima (un componente lazy). `ASETTER(...)` non lo chiama: restituisce una funzione che lo farà.
- `EXE(name, a, b, c, d)` (come `EXEC()`) chiama ciò che dice il nome: `'plugin/method'` un metodo di un plugin, `'function'` una funzione globale, o un percorso nello stato che contiene una funzione (`'FUNC.save'`). `SEEX(name, value)` è uguale, ma quando il nome non è una funzione **imposta** il percorso a `value`.
- `TAPI(name, data, callback)` è `API(DEF.api, ...)` e `PIPE(name, data, callback)` è `API(DEF.pipe, ...)`: due indirizzi di endpoint che imposti una volta in `DEF.api` e `DEF.pipe`.
- `MIDDLEWARE(name, function(next) {})` registra una funzione che viene eseguita prima di una route: deve chiamare `next()` per lasciarla proseguire. Una route ne richiede una (o più, separate da virgole) come terzo argomento: `ROUTE('/path/', handler, 'name')`. `MIDDLEWARE(['a', 'b'], callback)` esegue i middleware in ordine e poi il callback; uno che non chiama `next()` ferma la catena.
- `NEWUIBIND(element, path, config)` crea un `ui-bind` su un elemento dal codice (l'elemento non ha bisogno degli attributi) e lo restituisce.
- `ADAPT(path, id, text)` prepara il testo di un componente che viene da fuori: traduce `@(...)`, sostituisce `~PATH~` e `CLASS` con il percorso e `~ID~` con l'id, e mette il `path` nei tag `<ui-plugin>` che non ce l'hanno. `COMPILE` è la stessa funzione di `NOOP` in jComponent 20: non fa nulla.
- Gli oggetti dietro a tutto: `jComponent`, `Total`, `MAIN` e `M` sono lo stesso oggetto (il motore: `M.components` è la lista dei componenti, `M.version` la versione), `W` è `window`, `DEF` i valori predefiniti, e `REPO`, `FUNC`, `TEMP` e `PLUGINS` sono oggetti semplici tuoi: `FUNC` per funzioni che `EXE('FUNC.name')` può chiamare, `TEMP` viene svuotato da jComponent quando la pagina riparte.

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