🚀 Big News:Socket Has Acquired Secure Annex.Learn More →
lockandload
Advanced tools
lockandload - npm Package Compare versions
+18
-21
@@ -10,3 +10,3 @@ <!DOCTYPE html> | ||
| // | ||
| // Integrate GTM support | ||
| // Integrate GTM support to get the timing right | ||
| // | ||
@@ -68,3 +68,3 @@ W.dataLayer=[{"gtm.start":Date.now(),event:"gtm.js"}]; | ||
| } | ||
| function E(d,f) { return f ? e(1,d,f) : R[d]; }; | ||
| function E(d,f) { return f ? e(1,d,f) : R[d]; } | ||
| // | ||
@@ -83,3 +83,3 @@ // Internal require only; could be externalised if so desired | ||
| // | ||
| // Create "domready" event, it also returns the factory for running | ||
| // Define "domready" dependency, it also returns the factory for running | ||
| // the $$(...) scheduled functions: run it in the SPA after page switches. | ||
@@ -117,24 +117,21 @@ // You should run it at least once if you used legacy $(...) code before | ||
| // | ||
| // css(): asynchronously load low priority CSS stylesheets | ||
| // css(url): asynchronously load low priority CSS stylesheets | ||
| // | ||
| function css(u) { n(u,"link","rel","stylesheet","href"); } | ||
| // | ||
| // scss(): asynchronously load CSS stylesheets. | ||
| // Generate id event upon application. | ||
| // scss(id, url): asynchronously load CSS stylesheets. | ||
| // Fulfills id dependency after the rules have been applied. | ||
| // | ||
| function scss(n, u, e, d) { | ||
| function p() { | ||
| try { e.sheet.cssRules; define(n, Date); } | ||
| catch(x) { T(p, d<256 ? (d*=2) : d); } | ||
| } | ||
| (e=D.createElement("style")).textContent = '@import "' + u + '"'; | ||
| T(p, d=8); | ||
| function p() { try { e.sheet.cssRules; define(n, Date); } | ||
| catch(x) { T(p, d<256 ? (d*=2) : d); } } | ||
| (e=D.createElement("style")).textContent = '@import "'+u+'"'; T(p, d=8); | ||
| } | ||
| function J(u,a,b) { n(u,"script",a,b,"src"); } | ||
| // | ||
| // js(): asynchronously load low priority Javascript files | ||
| // js(url): asynchronously load low priority Javascript files | ||
| // | ||
| function js(u) { J(u,A,A); } | ||
| // | ||
| // sjs(): asynchronously load low priority Javascript files sequentially | ||
| // sjs(url): asynchronously load low priority Javascript files sequentially | ||
| // | ||
@@ -145,3 +142,3 @@ function sjs(u) { J(u,A,0); } | ||
| ** | ||
| ** Optional headready event, if you want it, uncomment the next line: | ||
| ** Optional headready define, if you want it, uncomment the next line: | ||
| **define("headready", Date); | ||
@@ -151,8 +148,8 @@ ** | ||
| ** High priority CSS should use direct <link> entries instead if you | ||
| ** do not need a load event for those files. | ||
| ** CSS files you need a load event for, must use scss(eventname, url) | ||
| ** do not need to fulfill a custom dependency for those files. | ||
| ** CSS files you need to fulfill dependency 'id' for, must use scss(id, url) | ||
| ** instead. | ||
| ** | ||
| **t="//cdn.remixml.org/css/"; | ||
| **scss("bluecssloaded", t+"blue.css"); // CSS with load event | ||
| **scss("bluecssloaded", t+"blue.css"); // CSS fulfilling dependency | ||
| **css(t+"sample.css"); // Low prio CSS | ||
@@ -167,3 +164,3 @@ ** | ||
| ** | ||
| ** Event when the DOM has been loaded completely. | ||
| ** Executed when the DOM has been loaded completely. | ||
| ** Typically the place to add remaining low priority Javascript files. | ||
@@ -179,4 +176,4 @@ ** High priority Javascript files should use direct <script> entries instead. | ||
| **sjs(t+"sequentialload3.js"); // Legacy sequential low prio loads | ||
| **sjs("lastsjs.js"); // Event after all sjs()s have been | ||
| // processed | ||
| **sjs("lastsjs.js"); // Fullfill lastsjs dependency after | ||
| ** // all sjs()s have been processed | ||
| **js(t+"asynchronousload.js"); // Low priority interactive async | ||
@@ -183,0 +180,0 @@ */ |
+11
-13
@@ -29,3 +29,3 @@ <!DOCTYPE html> | ||
| } | ||
| function E(d,f) { return f ? e(1,d,f) : R[d]; }; | ||
| function E(d,f) { return f ? e(1,d,f) : R[d]; } | ||
| R.require=E; | ||
@@ -57,8 +57,5 @@ (W.define=e).amd={lockandload:E||"v1.1, Copyright (c) 2018 <srb@cuci.nl>"}; | ||
| function scss(n, u, e, d) { | ||
| function p() { | ||
| try { e.sheet.cssRules; define(n, Date); } | ||
| catch(x) { T(p, d<256 ? (d*=2) : d); } | ||
| } | ||
| (e=D.createElement("style")).textContent = '@import "' + u + '"'; | ||
| T(p, d=8); | ||
| function p() { try { e.sheet.cssRules; define(n, Date); } | ||
| catch(x) { T(p, d<256 ? (d*=2) : d); } } | ||
| (e=D.createElement("style")).textContent = '@import "'+u+'"'; T(p, d=8); | ||
| } | ||
@@ -71,3 +68,3 @@ function J(u,a,b) { n(u,"script",a,b,"src"); } | ||
| ** | ||
| ** Optional headready event, if you want it, uncomment the next line: | ||
| ** Optional headready define, if you want it, uncomment the next line: | ||
| **define("headready", Date); | ||
@@ -77,8 +74,8 @@ ** | ||
| ** High priority CSS should use direct <link> entries instead if you | ||
| ** do not need a load event for those files. | ||
| ** CSS files you need a load event for, must use scss(eventname, url) | ||
| ** do not need to fulfill a custom dependency for those files. | ||
| ** CSS files you need to fulfill dependency 'id' for, must use scss(id, url) | ||
| ** instead. | ||
| ** | ||
| **t="//cdn.remixml.org/css/"; | ||
| **scss("bluecssloaded", t+"blue.css"); // CSS with load event | ||
| **scss("bluecssloaded", t+"blue.css"); // CSS fulfilling dependency | ||
| **css(t+"sample.css"); // Low prio CSS | ||
@@ -93,3 +90,3 @@ ** | ||
| ** | ||
| ** Event when the DOM has been loaded completely. | ||
| ** Executed when the DOM has been loaded completely. | ||
| ** Typically the place to add remaining low priority Javascript files. | ||
@@ -105,3 +102,4 @@ ** High priority Javascript files should use direct <script> entries instead. | ||
| **sjs(t+"sequentialload3.js"); // Legacy sequential low prio loads | ||
| **sjs("lastsjs.js"); // Event after all sjs()s have been | ||
| **sjs("lastsjs.js"); // Fullfill lastsjs dependency after | ||
| ** // all sjs()s have been processed | ||
| **js(t+"asynchronousload.js"); // Low priority interactive async | ||
@@ -108,0 +106,0 @@ */ |
+1
-1
| { | ||
| "name": "lockandload", | ||
| "version": "1.1.6", | ||
| "version": "1.1.7", | ||
| "description": "Minimalist AMD-compliant Javascript and CSS loader", | ||
@@ -5,0 +5,0 @@ "main": "index.html", |
+54
-6
@@ -26,4 +26,5 @@ <h1>lockandload</h1> | ||
| - No extra diagnostic code to minimise code weight and optimise loading speed. | ||
| - Fully event driven, no polling timers. | ||
| - Standard event: domready. | ||
| - Mostly event driven, no polling timers except for the scss() helper | ||
| function. | ||
| - Standard supported dependencies: `require` and `domready`. | ||
| - Both high and low priority asynchronous loading of Javascript and CSS files. | ||
@@ -37,2 +38,5 @@ - Leverages native browser speed for high priority loading (by getting out | ||
| - No config file, means: no syntax to learn, no config file parser code. | ||
| - No module system: all needed functionality is included already because | ||
| it was/is so small, that writing a module system would take more code | ||
| than the source of all the added functionality. | ||
@@ -63,3 +67,5 @@ ## Requirements | ||
| - Inline `lockandload` 'headready' script. | ||
| - CSS scripts fullfilling a custom applied-style dependency. | ||
| - Low priority CSS scripts. | ||
| - Medium priority async Javascript scripts. | ||
| - Low priority async Javascript scripts. | ||
@@ -72,7 +78,9 @@ - Low priority synchronous Javascript scripts. | ||
| Look at `annotated.html` to understand the code and read additional | ||
| inline documentation. | ||
| inline documentation. This `index.html` file is not present in the git | ||
| source repository, it can only be found in the npm repository (or after running | ||
| `npm run prepublish`). | ||
| ## API | ||
| Globally: | ||
| ### Globally | ||
| - `define(id?, dependencies?, factory)`<br /> | ||
@@ -85,7 +93,13 @@ The standard [AMD global | ||
| Locally in the secondary `lockandload` 'headready' script; all path arguments | ||
| Running `define(1, dependencies, factory)` is a custom extension and is | ||
| the same as the traditional global `require(dependencies, factory)`. | ||
| It is used in the existing scripts to avoid defining the global | ||
| `require()`. | ||
| ### Locally | ||
| In the secondary `lockandload` 'headready' script; all path arguments | ||
| are used verbatim in `<link href="path">` or `<script src="path">` tags: | ||
| - `scss(id, path)`<br /> | ||
| Loads additional ordered css files asynchronously; after the stylesheet | ||
| has been applied, it fires the `id` event. | ||
| has been applied, it fulfills the `id` dependency. | ||
| - `css(path)`<br /> | ||
@@ -99,2 +113,36 @@ Loads additional low priority ordered css files asynchronously. | ||
| ### Dealing with jQuery | ||
| In order to support legacy code that uses inline `$(function(){...})` scattered | ||
| throughout pages, this loader allows you to use that construct even before | ||
| the jQuery library has been loaded, | ||
| and thus enables you to load jQuery in an asynchronous and non-blocking fashion. | ||
| The standard `headready` script contains a dependency on `domready` and | ||
| `jquery` which then at the end runs `domready()` which will run all the | ||
| registered delayed functions. | ||
| ### SPA (Single Page App) support | ||
| To ease SPA development, the loader defines a | ||
| `$$(function(jquery_document){...})` function which registers functions | ||
| for execution on every SPA-controlled page refresh. The registered functions | ||
| receive a convenience argument `$(document)` when executed. | ||
| To run the registered functions, one needs to make a call to the entrypoint | ||
| of the AMD-dependency on `domready`. | ||
| E.g. in your application, you could use code like this: | ||
| ```javascript | ||
| !function(){ | ||
| // Preamble | ||
| define("main", ["domready"], function (domready) { | ||
| // Your main application | ||
| function refreshpage() { | ||
| // The function that gets called on virtual page refreshes | ||
| domready(); // This will call all registered $$(...) functions | ||
| } | ||
| }); | ||
| }(); | ||
| ``` | ||
| ## References | ||
@@ -101,0 +149,0 @@ |
No alert changes
Improved metrics
- Total package byte prevSize
19678
12.61%- Number of lines in readme file
158
43.64%No dependency changes