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

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsapi Executada com jComponent 20

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.

definitions/math.js

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

controllers/api.js

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

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>

Experimente no seu navegador

Edite o exemplo e execute-o. Corre numa moldura isolada do seu navegador; nada é enviado para o nosso servidor.

Código

Pré-visualização