defer-css - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

index.js

@@ -6,12 +6,10 @@ // @ts-check
 /**
- * @param {object[]} links
- * @param {string|object} config
+ * @param {*[]} links
+ * @param {string|object} [mountOn]
  */
-const deferCss = function (links, config) {
+const deferCss = function (links, mountOn) {
     // Setup Config default Values.
-    if (config === undefined) config = 'link';
-    if (typeof config !== "object") config = {mountOn: config};
-    if (typeof config.name === "undefined") config.name = "default";
+    if (mountOn === undefined) mountOn = 'defer-css';
 
-    deferCssData[config.name] = {
+    deferCssData[mountOn] = {
         total: links.length,
@@ -21,6 +19,9 @@ loaded: 0
 
-    links.reverse();
-
     for (let i = 0; i < links.length; i++) {
         let linkData = links[i];
+
+        // if link change to object
+        if (typeof linkData === 'string')
+            linkData = {href: linkData};
+
         let linkDataKeys = Object.keys(linkData);
@@ -40,3 +41,3 @@ let newLink = document.createElement('link');
             newLink.onload = function () {
-                deferCssData[config.name].loaded++;
+                deferCssData[mountOn].loaded++;
                 linkData.onload(linkData)
@@ -47,3 +48,3 @@ }
             newLink.onload = function () {
-                deferCssData[config.name].loaded++;
+                deferCssData[mountOn].loaded++;
             }
@@ -53,14 +54,14 @@ }
         // Check if mountOn Element Exists
-        let firstLink = document.getElementsByTagName(config.mountOn);
+        let firstLink = document.getElementById(mountOn);
 
-        if (!firstLink.length) {
+        if (firstLink === null) {
             // Log Error if not exists.
-            return console.error('DEFER-CSS: no element <' + config.mountOn + '> found in DOM');
+            return console.error('DEFER-CSS: no link element with id: <' + mountOn + '> found in DOM');
         }
-
-        firstLink = firstLink[0];
-
         // @ts-ignore
         firstLink.parentNode.insertBefore(newLink, firstLink);
     }
+
+    const mountOnElement = document.getElementById(mountOn);
+    if (mountOnElement !== null) mountOnElement.remove();
 };
@@ -67,0 +68,0 @@

index.min.js

@@ -1,1 +0,1 @@
-let deferCssData={};const deferCss=function(a,b){if(b===undefined){b="link"}if(typeof b!=="object"){b={mountOn:b}}if(typeof b.name==="undefined"){b.name="default"}deferCssData[b.name]={total:a.length,loaded:0};a.reverse();for(let i=0;i<a.length;i++){let linkData=a[i];let linkDataKeys=Object.keys(linkData);let newLink=document.createElement("link");newLink.rel="stylesheet";for(let j=0;j<linkDataKeys.length;j++){let scriptKey=linkDataKeys[j];newLink[scriptKey]=linkData[scriptKey]}if(typeof linkData.onload==="function"){newLink.onload=function(){deferCssData[b.name].loaded++;linkData.onload(linkData)}}else{newLink.onload=function(){deferCssData[b.name].loaded++}}let firstLink=document.getElementsByTagName(b.mountOn);if(!firstLink.length){return console.error("DEFER-CSS: no element <"+b.mountOn+"> found in DOM")}firstLink=firstLink[0];firstLink.parentNode.insertBefore(newLink,firstLink)}};window.deferCss=deferCss;window.deferCssData=deferCssData;
+let deferCssData={};const deferCss=function(b,a){if(a===undefined){a="defer-css"}deferCssData[a]={total:b.length,loaded:0};for(let i=0;i<b.length;i++){let linkData=b[i];if(typeof linkData==="string"){linkData={href:linkData}}let linkDataKeys=Object.keys(linkData);let newLink=document.createElement("link");newLink.rel="stylesheet";for(let j=0;j<linkDataKeys.length;j++){let scriptKey=linkDataKeys[j];newLink[scriptKey]=linkData[scriptKey]}if(typeof linkData.onload==="function"){newLink.onload=function(){deferCssData[a].loaded++;linkData.onload(linkData)}}else{newLink.onload=function(){deferCssData[a].loaded++}}let firstLink=document.getElementById(a);if(firstLink===null){return console.error("DEFER-CSS: no link element with id: <"+a+"> found in DOM")}firstLink.parentNode.insertBefore(newLink,firstLink)}const c=document.getElementById(a);if(c!==null){c.remove()}};window.deferCss=deferCss;window.deferCssData=deferCssData;

package.json

 {
   "name": "defer-css",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Load css in your page without affecting load speed.",
@@ -5,0 +5,0 @@ "main": "index.min.js",

readme.md

@@ -5,5 +5,140 @@ ### Defer Css
 
-Usage
+##### Direct Browser Installation
 ```html
+<!--Using JsDeliver CDN-->
 <script src="https://cdn.jsdelivr.net/npm/defer-css"></script>
-```
+
+<!-- Or Using UnPkg CDN-->
+<script src="https://unpkg.com/defer-css"></script>
+
+<!-- Or Using Bundle.run-->
+<script src="https://bundle.run/defer-css"></script>
+```
+##### From Package Managers
+You can include using `require` or `import` but defer-css does not export anything.
+
+It sets `window.deferCss` && `window.deferCssData`
+
+
+##### Usage
+By default defined styles are loaded before the first `<link>` element in your page
+```html
+<html>
+    <head>
+        <!-- Styles will be placed before this link element-->
+        <link id="defer-css"/>
+    </head>
+</html>
+```
+
+You can change this to your custom id
+```html
+<head>
+    <link href="....">
+    <link href="....">
+    <link href="....">
+    
+    <!-- Styles will be placed before this add-css-here element-->
+    <link id="add-css-here"/>
+</head>
+```
+
+Load Css
+```javascript
+deferCss([
+    {href: 'style-1.min.css', crossorign: 'anonymous'},
+    {href: 'style-2.min.css', crossorign: 'anonymous'}
+], 'add-css-here')
+```
+
+Adds the following styles
+```html
+    <link rel="stylesheet" href="style-1.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="style-2.min.css" crossorigin="anonymous">
+```
+
+If css object includes an `onload` function, it is executed when the css file is loaded.
+```javascript
+deferCss([
+    {
+        href: 'style-1.min.css', 
+        onload: function() {
+            // do something
+        }
+    },
+])
+```
+
+#### Multiple deferCss
+Lets say you want to mount css in multiple places.
+```html
+<head>
+    <link id="main-css"></main-css>
+    <link id="other-css"></other-css>
+</head>
+```
+
+```javascript
+deferCss(['main-css-1.css', 'main-css-2.css'], 'main-css');
+deferCss(['other-css-1.css', 'other-css-2.css'], 'other-css');
+```
+The `deferCssData` includes details you may need.
+```javascript
+ deferCssData = {
+    // Element mounted on, default = 'link'
+    link: {
+        total: 1, // total number of css loaded
+        loaded: 3
+    }
+}
+```
+##### Example
+```html
+<!doctype html>
+<html lang="en">
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Defer Css Test</title>
+    <script src="https://cdn.jsdelivr.net/npm/defer-css"></script>
+    <!-- Links are placed before this element -->
+    <add-css-here/>
+</head>
+<body>
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-6 offset-md-3">
+            <div class="card shadow" style="margin-top: 20vh">
+                <div class="card-body text-center">
+                    <h1>Hello, world!</h1>
+                    <h5 class="text-primary">
+                        Bootstrap Loaded with defer-css
+                    </h5>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    let scripts = [
+        {href: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'},
+        // Style with onload
+        {
+            href: './app.css',
+            onload: function () {
+                console.log(this.href + ' Style Loaded!');
+                // value of deferCssData
+                console.log(deferCssData);
+            }
+        },
+    ];
+
+    // Defer scripts
+    deferCss(scripts, 'add-css-here');
+</script>
+</body>
+</html>
+```

No alert changes

Improved metrics

Total package byte prevSize

7917

increased by80.51%

Lines of code

53

increased by1.92%

Number of lines in readme file

144

increased by1700%

No dependency changes