Buscar y llamar componentes y plugins: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE y ADAPT

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsapi Ejecutada con jComponent 20

FIND(selector, [all]) devuelve un componente que está listo: 'notice' es su nombre, '.msg' su ruta (coincide con las rutas que lo contienen) y '#id' su id; con all en true devuelve la lista. COMPONENTS(path) devuelve la lista de componentes listos cuya ruta está bajo path; las banderas de una ruta la filtran ('msg @visible').
SETTER('name/method', a, b, c, d) llama a method de cada componente listo con ese nombre ('.path/method' para una ruta, '#id/method' para un id, '*/method' para todos). Un nombre que aún no está cargado se carga primero (un componente perezoso). ASETTER(...) no lo llama: devuelve una función que lo hará.
EXE(name, a, b, c, d) (igual que EXEC()) llama a lo que dice el nombre: 'plugin/method' un método de un plugin, 'function' una función global, o una ruta del estado que contiene una función ('FUNC.save'). SEEX(name, value) es igual, pero cuando el nombre no es una función pone la ruta a value.
TAPI(name, data, callback) es API(DEF.api, ...) y PIPE(name, data, callback) es API(DEF.pipe, ...): dos direcciones de endpoints que se establecen una vez en DEF.api y DEF.pipe.
MIDDLEWARE(name, function(next) {}) registra una función que se ejecuta antes de una ruta: tiene que llamar a next() para dejarla seguir. Una ruta pide una (o más, separadas por comas) como tercer argumento: ROUTE('/path/', handler, 'name'). MIDDLEWARE(['a', 'b'], callback) ejecuta los middleware en orden y luego el callback; uno que no llame a next() detiene la cadena.
NEWUIBIND(element, path, config) crea un ui-bind en un elemento desde el código (el elemento no necesita los atributos) y lo devuelve.
ADAPT(path, id, text) prepara el texto de un componente que viene de fuera: traduce @(...), reemplaza ~PATH~ y CLASS por la ruta y ~ID~ por el id, y pone el path en las etiquetas <ui-plugin> que no lo tienen. COMPILE es la misma función que NOOP en jComponent 20: no hace nada.
Los objetos detrás de todo: jComponent, Total, MAIN y M son el mismo objeto (el motor: M.components es la lista de componentes, M.version la versión), W es window, DEF los valores por defecto, y REPO, FUNC, TEMP y PLUGINS son objetos simples tuyos: FUNC para funciones que EXE('FUNC.name') puede llamar, TEMP lo vacía jComponent cuando la página vuelve a empezar.

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>

Pruébalo en tu navegador

Edita el ejemplo y ejecútalo. Se ejecuta en un marco aislado de tu navegador; no se envía nada a nuestro servidor.

Código

Vista previa