Find and call components and plugins: FIND, COMPONENTS, SETTER, EXE, TAPI, MIDDLEWARE and ADAPT

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsapi Executed with jComponent 20

FIND(selector, [all]) returns a component that is ready: 'notice' is its name, '.msg' its path (it matches the paths that contain it) and '#id' its id; with all set to true it returns the list. COMPONENTS(path) returns the list of the ready components whose path is under path; the flags of a path filter it ('msg @visible').
SETTER('name/method', a, b, c, d) calls method of every ready component with that name ('.path/method' for a path, '#id/method' for an id, '*/method' for all of them). A name that is not loaded yet is loaded first (a lazy component). ASETTER(...) does not call it: it returns a function that will.
EXE(name, a, b, c, d) (the same as EXEC()) calls what the name says: 'plugin/method' a method of a plugin, 'function' a global function, or a path in the state that holds a function ('FUNC.save'). SEEX(name, value) is the same, but when the name is not a function it sets the path to value.
TAPI(name, data, callback) is API(DEF.api, ...) and PIPE(name, data, callback) is API(DEF.pipe, ...): two addresses of endpoints that you set once in DEF.api and DEF.pipe.
MIDDLEWARE(name, function(next) {}) registers a function that runs before a route: it has to call next() to let it go on. A route asks for one (or more, separated by commas) as its third argument: ROUTE('/path/', handler, 'name'). MIDDLEWARE(['a', 'b'], callback) runs the middleware in order and then the callback; one that does not call next() stops the chain.
NEWUIBIND(element, path, config) makes a ui-bind on an element from the code (the element does not need the attributes), and returns it.
ADAPT(path, id, text) prepares the text of a component that comes from outside: it translates @(...), replaces ~PATH~ and CLASS with the path and ~ID~ with the id, and puts the path in the <ui-plugin> tags that do not have one. COMPILE is the same function as NOOP in jComponent 20: it does nothing.
The objects behind everything: jComponent, Total, MAIN and M are the same object (the engine: M.components is the list of the components, M.version the version), W is window, DEF the defaults, and REPO, FUNC, TEMP and PLUGINS are plain objects of yours: FUNC for functions that EXE('FUNC.name') can call, TEMP is emptied by jComponent when the page starts again.

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>

Try it in your browser

Edit the example and run it. It runs in an isolated frame in your browser; nothing is sent to our server.

Code

Preview