@github/include-fragment-element - npm Package Compare versions

Comparing version 5.2.0 to 5.3.0

dist/index.d.ts

 export default class IncludeFragmentElement extends HTMLElement {
-    _attached: boolean;
-    constructor();
     static get observedAttributes(): string[];
     get src(): string;
     set src(val: string);
+    get loading(): 'eager' | 'lazy';
+    set loading(value: 'eager' | 'lazy');
     get accept(): string;
     set accept(val: string);
     get data(): Promise<string>;
-    attributeChangedCallback(attribute: string): void;
+    attributeChangedCallback(attribute: string, oldVal: string | null): void;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     request(): Request;
@@ -14,0 +13,0 @@ load(): Promise<string>;

dist/index.js

 const privateData = new WeakMap();
+const observer = new IntersectionObserver(entries => {
+    for (const entry of entries) {
+        if (entry.isIntersecting) {
+            const { target } = entry;
+            observer.unobserve(target);
+            if (!(target instanceof IncludeFragmentElement))
+                return;
+            if (target.loading === 'lazy') {
+                handleData(target);
+            }
+        }
+    }
+}, {
+    rootMargin: '0px 0px 256px 0px',
+    threshold: 0.01
+});
 function fire(name, target) {
@@ -8,2 +24,3 @@ setTimeout(function () {
 async function handleData(el) {
+    observer.unobserve(el);
     return getData(el).then(function (html) {
@@ -43,8 +60,4 @@ const template = document.createElement('template');
 export default class IncludeFragmentElement extends HTMLElement {
-    constructor() {
-        super();
-        this._attached = false;
-    }
     static get observedAttributes() {
-        return ['src'];
+        return ['src', 'loading'];
     }
@@ -65,2 +78,10 @@ get src() {
     }
+    get loading() {
+        if (this.getAttribute('loading') === 'lazy')
+            return 'lazy';
+        return 'eager';
+    }
+    set loading(value) {
+        this.setAttribute('loading', value);
+    }
     get accept() {
@@ -75,18 +96,22 @@ return this.getAttribute('accept') || '';
     }
-    attributeChangedCallback(attribute) {
+    attributeChangedCallback(attribute, oldVal) {
         if (attribute === 'src') {
-            if (this._attached) {
+            if (this.isConnected && this.loading === 'eager') {
                 handleData(this);
             }
         }
+        else if (attribute === 'loading') {
+            if (this.isConnected && oldVal !== 'eager' && this.loading === 'eager') {
+                handleData(this);
+            }
+        }
     }
     connectedCallback() {
-        this._attached = true;
-        if (this.src) {
+        if (this.src && this.loading === 'eager') {
             handleData(this);
         }
+        if (this.loading === 'lazy') {
+            observer.observe(this);
+        }
     }
-    disconnectedCallback() {
-        this._attached = false;
-    }
     request() {
@@ -106,2 +131,3 @@ const src = this.src;
     load() {
+        observer.unobserve(this);
         return Promise.resolve()
@@ -108,0 +134,0 @@ .then(() => {

package.json

 {
   "name": "@github/include-fragment-element",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.js",

README.md

@@ -43,2 +43,17 @@ # <include-fragment> element
 
+### Other Attributes
+
+#### accept
+
+This attribute tells `<include-fragment/>` what to send as the `Accept` header, as part of the fetch request. If omitted, or if set to an empty value, the default behaviour will be `text/html`. It is important that the server responds with HTML, but you may wish to change the accept header to help negotiate the right content with the server.
+
+#### loading
+
+This indicates _when_ the contents should be fetched:
+
+ - `eager`: Fetches and load the content immediately, regardless of whether or not the `<include-fragment/>` is currently within the visible viewport (this is the default value).
+ - `lazy`: Defers fetching and loading the content until the `<include-fragment/>` tag reaches a calculated distance from the viewport. The intent is to avoid the network and storage bandwidth needed to handle the content until it's reasonably certain that it will be needed.
+
+The 
+
 ### Errors
@@ -45,0 +60,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13721

increased by15.55%

Lines of code

188

increased by15.34%

Number of lines in readme file

142

increased by11.81%

No dependency changes