Load a library before a component starts

jComponent 20 · jcomponent@20 jcomponentfrontendcomponentsdependencies Executed with jComponent 20

The fourth argument of COMPONENT() is a list of dependencies: URLs of scripts (.js) or styles (.css) that the component needs. jComponent downloads each one only once, in order, and creates the component after they are loaded, so make() can rely on the library being there. This is the way to wrap a third-party library into a component without loading it on pages that do not use it.

public/js/starslib.js

window.starslib = {
	render: function(count) {
		var html = '';
		for (var i = 0; i < count; i++)
			html += '<span class="star">*</span>';
		return 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="stars" config="count:3"></ui-component>

	<script>

		COMPONENT('stars', 'count:5', function(self, config) {

			self.make = function() {
				// starslib.js was loaded before make()
				self.html(window.starslib.render(config.count));
			};

		}, ['/js/starslib.js']);

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