Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dlueth/qoopido.demand
Promise like module loader with automatic resolution of nested dependencies using XHR requests and localStorage caching to dynamically load modules, legacy JavaScript, CSS, text and bundles. Supports custom handler and plugins as well.
https://github.com/dlueth/qoopido.demand
javascript javascript-modules loaders localstorage module-loader performance-tuning web web-performance
Last synced: 27 days ago
JSON representation
Promise like module loader with automatic resolution of nested dependencies using XHR requests and localStorage caching to dynamically load modules, legacy JavaScript, CSS, text and bundles. Supports custom handler and plugins as well.
- Host: GitHub
- URL: https://github.com/dlueth/qoopido.demand
- Owner: dlueth
- License: mit
- Created: 2015-09-02T15:34:58.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T02:33:01.000Z (almost 2 years ago)
- Last Synced: 2024-10-26T21:56:24.298Z (about 2 months ago)
- Topics: javascript, javascript-modules, loaders, localstorage, module-loader, performance-tuning, web, web-performance
- Language: JavaScript
- Homepage: http://demand.qoopido.com
- Size: 3.33 MB
- Stars: 38
- Watchers: 6
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Qoopido.demand
[](https://github.com/dlueth/qoopido.demand)
[](https://www.npmjs.com/package/qoopido.demand)
[](https://github.com/dlueth/qoopido.demand)
[](https://www.npmjs.org/package/qoopido.demand)
[](https://www.jsdelivr.com/package/npm/qoopido.demand)
Qoopido.demand is a modular, flexible and 100% async JavaScript module loader with a promise like interface that utilizes localStorage as a caching layer. It comes in a rather tiny package of **~7kB minified and gzipped**.
Qoopido.demand originated from my daily use of require.js for the initial development of my Qoopido.nucleus library which is strictly atomic by nature, unbundled.
## Key features in detail
- promise like interface (no native promise support required)
- localStorage caching for blazingly fast performance
- dependency resolution for modules
- automatic cache invalidation by version or lifetime
- per module/path/subpath setting of cache parameters
- relative and absolute module path resolution
- fallback URLs for any dependency
- support for handling modules, legacy scripts, bundles (concatenated scripts like from [jsdelivr](https://github.com/jsdelivr/jsdelivr#load-multiple-files-with-single-http-request)), text, CSS and JSON included
- plugins for cookie support, lzstring compression and SRI included
- support for custom handlers & plugins built in
- optional support for auto-bundles via ```genie``` included
## Compatibility
Qoopido.demand is developed for Chrome, Firefox, Safari, Edge, Opera and IE11+.
Active Support for IE9 and IE10 has been removed in Qoopido.demand 6.0.0 due to upcoming refactorings/cleanups and the lack of market share of these browsers today.
Support for IE8 has been actively removed in Qoopido.demand 4.0.0 due to the lack of justifiable polyfills for parts of some underlying pattern.
I do test on MacOS Sierra where Qoopido.demand is fully working on Chrome, Firefox, Safari and Opera. IE9, 10, 11 as well as Edge are testet on the official Microsoft VMs via VirtualBox.
## Requirements
Due to modules getting loaded via XHR a remote server has to have CORS enabled. Be assured that most of the usual CDNs have CORS enabled by default.
## External dependencies
None!
## Availability
Qoopido.demand is available on GitHub as well as jsdelivr, npm and bower at the moment.
## Loading demand
Use the following minified code snippet in a standalone script tag before the closing body tag to include demand:
```javascript
(function(url, main, settings) {
!function(e,n,t,r,s){r=n.getElementsByTagName(t)[0],s=n.createElement(t),e.demand={url:url,main:main,settings:settings},s.async=1,s.src=url,r.parentNode.insertBefore(s,r)}(window,document,"script");
}('../dist/demand.js', './app/main', { base: './', version: '1.0.0', cache: true }));
```
The snippet is very similar to Google Analytics. The outer function allows you to specify an URL from which to load demand itself as well as a path to the main module and configuration object for demand. The script tag that actually loads Qoopido.demand will be injected with its async attribute set.
As an alternative to the above snippet Qoopido.demand can now also be loaded with an alternative snippet that uses an iframe. The async method above, while not blocking rendering, seems to delay the onload event at least on some browsers. The iframe method solves this minor annoyance.
```javascript
(function(url, main, settings) {
!function(e,t,n,o,i,d,a){e.demand={url:url,main:main,settings:settings},o=t.getElementsByTagName(n)[0],i=t.createElement("iframe"),i.src="javascript:void(0)",i.name="demand-loader",i.title="",i.role="presentation",(i.frameElement||i).style.cssText="display:none;width:0;height:0;border:0;",o.parentNode.insertBefore(i,o);try{i=i.contentWindow.document}catch(e){d=t.domain,i.src='javascript:var d=document.open();d.domain="'+d+'";void(0);',i=i.contentWindow.document}i.open()._=function(){d&&(this.domain=d),a=this.createElement(n),a.src=url,this.body.appendChild(a)},i.write('