https://github.com/spantaleev/comploader

Web component loader for sane/practical people.
https://github.com/spantaleev/comploader

Last synced: about 1 month ago
JSON representation

Web component loader for sane/practical people.

• Host: GitHub
• URL: https://github.com/spantaleev/comploader
• Owner: spantaleev
• License: bsd-3-clause
• Created: 2013-04-01T17:13:01.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2018-02-21T11:00:14.000Z (almost 7 years ago)
• Last Synced: 2024-10-15T09:31:00.901Z (3 months ago)
• Language: JavaScript
• Size: 9.77 KB
• Stars: 2
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
comploader

==========

**comploader** is a *web component* loader for sane/practical people.

A *web component* is anything that consists of one or more JavaScript/CSS files.

comploader lets you:

 * register/define components (name and configuration)

 * load components on demand

A component can:

 * include many CSS files

 * include many JavaScript files

 * depend (and be loaded after) other components

What problem does this solve?

-----------------------------

On-demand loading of web resources (JavaScript/CSS libraries).

Usage

-----

	

	

	

		comploader.register("jquery", {

			"scripts": ["/path/to/jquery.js"]

		});

	

	

	

		comploader.load("jquery", function () {

			//jQuery is now loaded - use it.

			$(document.body).css('backgroundColor', 'red');

		});

	

See the examples directory for more.

What if a component depends on other components?

------------------------------------------------

No problem.

Tell comploader about the dependency and it will load components in the correct order.

	

	

		comploader.register("jquery", {

			"scripts": ["/path/to/jquery.js"]

		});

		comploader.register("jqueryui", {

			"requires": ["jquery"],

			"stylesheets": ["/path/to/jquery-ui.css"],

			"scripts": ["/path/to/jquery-ui.js"]

		});

	

	

	

		comploader.load("jqueryui", function () {

			//Both components are now loaded (jQuery 1st and then jQuery UI)

		});

	

What about Subresource Integrity?

---------------------------------

comploader supports [Subresource Integrity](http://www.w3.org/TR/SRI/) to guarantee

that loaded resources haven't been tampered with

in [browsers that support it](http://caniuse.com/#search=SRI)).

To use, just define your components like this:

	

		comploader.register("jquery", {

			"scripts": [

				{

					"url": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js",

					"integrity": "sha384-6ePHh72Rl3hKio4HiJ841psfsRJveeS+aLoaEf3BWfS+gTF0XdAqku2ka8VddikM"

				}

			]

		});

	

This works for both scripts and stylesheets.

Generating the integrity digest hashes can be done like this:

	cat some-file.js | openssl dgst -sha384 -binary | openssl base64 -A

How is this different than RequireJS?

-------------------------------------

[RequireJS](http://www.requirejs.org/) is focused on JavaScript files (modules) written in a certain special way ([AMD](https://github.com/amdjs/amdjs-api/wiki/AMD)).

Most web libraries **ARE NOT** written like that and thus **DO NOT** support RequireJS.

Using such libraries in RequireJS projects is a pain.

jQuery plugins also do not fit well into the "modules" paradigm.

Additionally, some libraries (Twitter Bootstrap, jQuery UI) often include CSS stylesheets (not just JavaScript files).

RequireJS does not handle CSS loading.

To summarize:

 * RequireJS is a pain to use (in general) - just [read about it](http://www.requirejs.org/)

 * RequireJS is a pain to use (for loading libraries lacking AMD support)

 * RequireJS does not handle loading of CSS files

 * RequireJS is huge and complex compared to comploader (81KB vs 4KB)

How do I later minify/combine some of my components?

----------------------------------------------------

comploader cannot optimize and combine your resources like RequireJS claims to do.

It's your job to decide what should be combined and how that's done.

Suppose that at first you had a "jqueryui" component registered and loaded on demand with comploader.

You later decide that:

 * it should be loaded via regular standalone `` and `` tags

 * it should be combined/minified into your combined.css/combined.js files (how you do that is up to you)

To keep all your existing code (and components that depend on "jqueryui") working, you only need to make minor changes.

Before:

	<script type="text/javascript">

		comploader.register("jqueryui", {

			"stylesheets": ["/path/to/jquery-ui.css"],

			"scripts": ["/path/to/jquery-ui.js"]

		});

	

After:

	

	

	

	

	

		comploader.register("jqueryui", {});