@pie-api/pie-api-live-components - npm Package Compare versions

Comparing version 1.16.8 to 1.17.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [1.17.0](https://github.com/key-data-systems/pie-api-live-components/compare/v1.16.8...v1.17.0) (2020-09-28)
+
+
+### Features
+
+* add lazy load option (enabled by default) ([62b675d](https://github.com/key-data-systems/pie-api-live-components/commit/62b675dcad82387de7254b96949ca1823b0404f7))
+
 ## [1.16.8](https://github.com/key-data-systems/pie-api-live-components/compare/v1.16.7...v1.16.8) (2020-09-17)
@@ -2,0 +9,0 @@

dist/cjs/item-metadata.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-891f9e46.js');
+const index = require('./index-27b55761.js');
 
@@ -8,0 +8,0 @@ class ItemMetadata {

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-891f9e46.js');
+const index = require('./index-27b55761.js');
 
@@ -11,3 +11,3 @@ const defineCustomElements = (win, options) => {
   return index.patchEsm().then(() => {
-  return index.bootstrapLazy([["item-metadata.cjs",[[0,"item-metadata",{"_key":[1,"key"],"attribute":[1]}]]],["pie-api-live.cjs",[[0,"pie-api-live",{"metadata":[16],"token":[1],"host":[1],"apiUrl":[1,"api-url"],"liveUrl":[1,"live-url"],"hostUrl":[1,"host-url"]},[[0,"attachSession","handleLiveSessionAdded"]]]]],["pie-live-session.cjs",[[1,"pie-live-session",{"sessionId":[513,"session-id"],"token":[1],"client":[16],"apiUrl":[1,"api-url"],"metadata":[16],"sessionData":[32]}]]],["pie-response.cjs",[[1,"pie-response",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]],["pie-response-cell.cjs",[[1,"pie-response-cell",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]]], options);
+  return index.bootstrapLazy([["item-metadata.cjs",[[0,"item-metadata",{"_key":[1,"key"],"attribute":[1]}]]],["pie-api-live.cjs",[[0,"pie-api-live",{"metadata":[16],"token":[1],"host":[1],"apiUrl":[1,"api-url"],"liveUrl":[1,"live-url"],"hostUrl":[1,"host-url"],"lazyLoad":[4,"lazy-load"]},[[0,"attachSession","handleLiveSessionAdded"]]]]],["pie-live-session.cjs",[[1,"pie-live-session",{"sessionId":[513,"session-id"],"token":[1],"client":[16],"apiUrl":[1,"api-url"],"metadata":[16],"lazyLoad":[4,"lazy-load"],"sessionData":[32],"lazyItemsCanBeLoaded":[32]}]]],["pie-response.cjs",[[1,"pie-response",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]],["pie-response-cell.cjs",[[1,"pie-response-cell",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]]], options);
   });
@@ -14,0 +14,0 @@ };

dist/cjs/pie-api-live.cjs.js

 'use strict';
 
-const index = require('./index-891f9e46.js');
+const index = require('./index-27b55761.js');
 
 index.patchBrowser().then(options => {
-  return index.bootstrapLazy([["item-metadata.cjs",[[0,"item-metadata",{"_key":[1,"key"],"attribute":[1]}]]],["pie-api-live.cjs",[[0,"pie-api-live",{"metadata":[16],"token":[1],"host":[1],"apiUrl":[1,"api-url"],"liveUrl":[1,"live-url"],"hostUrl":[1,"host-url"]},[[0,"attachSession","handleLiveSessionAdded"]]]]],["pie-live-session.cjs",[[1,"pie-live-session",{"sessionId":[513,"session-id"],"token":[1],"client":[16],"apiUrl":[1,"api-url"],"metadata":[16],"sessionData":[32]}]]],["pie-response.cjs",[[1,"pie-response",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]],["pie-response-cell.cjs",[[1,"pie-response-cell",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]]], options);
+  return index.bootstrapLazy([["item-metadata.cjs",[[0,"item-metadata",{"_key":[1,"key"],"attribute":[1]}]]],["pie-api-live.cjs",[[0,"pie-api-live",{"metadata":[16],"token":[1],"host":[1],"apiUrl":[1,"api-url"],"liveUrl":[1,"live-url"],"hostUrl":[1,"host-url"],"lazyLoad":[4,"lazy-load"]},[[0,"attachSession","handleLiveSessionAdded"]]]]],["pie-live-session.cjs",[[1,"pie-live-session",{"sessionId":[513,"session-id"],"token":[1],"client":[16],"apiUrl":[1,"api-url"],"metadata":[16],"lazyLoad":[4,"lazy-load"],"sessionData":[32],"lazyItemsCanBeLoaded":[32]}]]],["pie-response.cjs",[[1,"pie-response",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]],["pie-response-cell.cjs",[[1,"pie-response-cell",{"sessionData":[8,"session-data"],"multiPart":[4,"multi-part"]}]]]], options);
 });

dist/cjs/pie-response-cell.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-891f9e46.js');
+const index = require('./index-27b55761.js');
 const responseLoader = require('./response-loader-45227f57.js');
@@ -8,0 +8,0 @@

dist/cjs/pie-response.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-891f9e46.js');
+const index = require('./index-27b55761.js');
 const responseLoader = require('./response-loader-45227f57.js');
@@ -8,0 +8,0 @@

dist/collection/components/pie-api-live/pie-api-live.js

@@ -19,2 +19,8 @@ import { Component, Prop, h, Watch, Host, Listen, Event, } from "@stencil/core";
 export class PieApiLive {
+    constructor() {
+        /**
+         * If pie-live-session items should be lazy loaded
+         */
+        this.lazyLoad = true;
+    }
     getLiveHost() {
@@ -101,2 +107,3 @@ // host for live server
         ev.target.metadata = this.metadata;
+        ev.target.lazyLoad = this.lazyLoad;
     }
@@ -227,2 +234,20 @@ render() {
             "reflect": false
+        },
+        "lazyLoad": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "If pie-live-session items should be lazy loaded"
+            },
+            "attribute": "lazy-load",
+            "reflect": false,
+            "defaultValue": "true"
         }
@@ -229,0 +254,0 @@ }; }

dist/collection/components/pie-live-session/pie-live-session.js

@@ -19,4 +19,15 @@ import { Component, Prop, h, Watch, Event, State, Host, Element } from '@stencil/core';
         };
+        this.onIntersection = async (entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    if (this.observer) {
+                        this.observer.disconnect();
+                    }
+                    this.lazyItemsCanBeLoaded = this.lazyLoad;
+                    this.updateItemInfo();
+                }
+            }
+        };
     }
-    watchsessionId(newVal, oldVal) {
+    watchSessionId(newVal, oldVal) {
         if (newVal && (newVal !== oldVal)) {
@@ -29,16 +40,23 @@ this.itemConfig = null;
     async updateItemInfo() {
-        if (this.token && this.sessionId && this.apiUrl && !this.updateItemInfoInProgress) {
-            this.updateItemInfoInProgress = true;
-            const result = await loadSessionContentItem(this.token, this.sessionId, this.apiUrl, this.metadata);
-            this.itemConfig = result.config;
-            this.metadataValues = result.metadata;
-            this.sessionData.data = result.data;
-            this.sessionData.timestamp = result.timestamp;
-            this.sessionData = Object.assign(Object.assign({}, this.sessionData), { itemConfig: this.itemConfig });
-            if (this.sessionData.data && this.sessionData.data.length > 0) {
-                this.sessionData.score = result.score;
+        if (this.token && this.sessionId && this.apiUrl && !this.updateItemInfoInProgress && this.lazyLoad !== undefined) {
+            if (!this.lazyLoad || (this.lazyLoad && this.lazyItemsCanBeLoaded)) {
+                this.loadItemContent();
             }
-            this.updateItemInfoInProgress = false;
         }
     }
+    async watchLazyLoad() {
+    }
+    async loadItemContent() {
+        this.updateItemInfoInProgress = true;
+        const result = await loadSessionContentItem(this.token, this.sessionId, this.apiUrl, this.metadata);
+        this.itemConfig = result.config;
+        this.metadataValues = result.metadata;
+        this.sessionData.data = result.data;
+        this.sessionData.timestamp = result.timestamp;
+        this.sessionData = Object.assign(Object.assign({}, this.sessionData), { itemConfig: this.itemConfig });
+        if (this.sessionData.data && this.sessionData.data.length > 0) {
+            this.sessionData.score = result.score;
+        }
+        this.updateItemInfoInProgress = false;
+    }
     onPropsChange() {
@@ -89,2 +107,9 @@ this.stopSubscription();
     }
+    componentDidLoad() {
+        const element = this.el;
+        if (element) {
+            this.observer = new window.IntersectionObserver(this.onIntersection);
+            this.observer.observe(element);
+        }
+    }
     getCorrectness(points, maxPoints) {
@@ -232,6 +257,24 @@ if (!maxPoints) {
             }
+        },
+        "lazyLoad": {
+            "type": "boolean",
+            "mutable": false,
+            "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [],
+                "text": "If items should be lazy loaded (load only after they're visible)"
+            },
+            "attribute": "lazy-load",
+            "reflect": false
         }
     }; }
     static get states() { return {
-        "sessionData": {}
+        "sessionData": {},
+        "lazyItemsCanBeLoaded": {}
     }; }
@@ -272,3 +315,3 @@ static get events() { return [{
             "propName": "sessionId",
-            "methodName": "watchsessionId"
+            "methodName": "watchSessionId"
         }, {
@@ -281,2 +324,5 @@ "propName": "metadata",
         }, {
+            "propName": "lazyLoad",
+            "methodName": "watchLazyLoad"
+        }, {
             "propName": "client",
@@ -283,0 +329,0 @@ "methodName": "onPropsChange"

dist/collection/demo/end-to-end/index.js

@@ -12,2 +12,3 @@ import { Api } from './gql.js';
     const hostUrl = params.get('hostUrl');
+    const lazyLoad = params.get('lazyLoad');
 
@@ -19,2 +20,3 @@ this.env = env;
     this.hostUrl = hostUrl;
+    this.lazyLoad = lazyLoad;
 
@@ -55,2 +57,6 @@ // to test:
 
+      if (this.lazyLoad) {
+        pieApiLive.lazyLoad = this.lazyLoad;
+      }
+
       return pieApiLive;
@@ -57,0 +63,0 @@ } else {

dist/collection/demo/end-to-end/students-view.js

@@ -19,2 +19,3 @@ import PieApiService from './index.js';
     const questionTitle = document.createElement('div');
+    questionTitle.classList.add('question-title');
 
@@ -21,0 +22,0 @@ questionColumn.id = `question-${question.element}-${question.id}`;

dist/collection/demo/end-to-end/utils.js

@@ -6,38 +6,38 @@ export const students = [
   },
-  // {
-  //   id: 'stud2',
-  //   name: 'Student 2'
-  // },
-  // {
-  //   id: 'stud3',
-  //   name: 'Student 3'
-  // },
-  // {
-  //   id: 'stud4',
-  //   name: 'Student 4'
-  // },
-  // {
-  //   id: 'stud5',
-  //   name: 'Student 5'
-  // },
-  // {
-  //   id: 'stud6',
-  //   name: 'Student 6'
-  // },
-  // {
-  //   id: 'stud7',
-  //   name: 'Student 7'
-  // },
-  // {
-  //   id: 'stud8',
-  //   name: 'Student 8'
-  // },
-  // {
-  //   id: 'stud9',
-  //   name: 'Student 9'
-  // },
-  // {
-  //   id: 'stud10',
-  //   name: 'Student 10'
-  // }
+  {
+    id: 'stud2',
+    name: 'Student 2'
+  },
+  {
+    id: 'stud3',
+    name: 'Student 3'
+  },
+  {
+    id: 'stud4',
+    name: 'Student 4'
+  },
+  {
+    id: 'stud5',
+    name: 'Student 5'
+  },
+  {
+    id: 'stud6',
+    name: 'Student 6'
+  },
+  {
+    id: 'stud7',
+    name: 'Student 7'
+  },
+  {
+    id: 'stud8',
+    name: 'Student 8'
+  },
+  {
+    id: 'stud9',
+    name: 'Student 9'
+  },
+  {
+    id: 'stud10',
+    name: 'Student 10'
+  }
 ];
@@ -57,7 +57,7 @@ export const questions = [
   },
-  // {
-  //   id: 'question-2',
-  //   element: 'constructed'
-  // },
   {
+    id: 'question-2',
+    element: 'constructed'
+  },
+  {
     id: 'question-1',
@@ -102,16 +102,16 @@ element: 'drag-in-the-blank'
   },
-  // {
-  //   id: 'question-2',
-  //   element: 'multiple-choice'
-  // }, {
-  //   id: 'question-3',
-  //   element: 'multiple-choice'
-  // }, {
-  //   id: 'question-4',
-  //   element: 'multiple-choice'
-  // }, {
-  //   id: 'question-5',
-  //   element: 'multiple-choice'
-  // },
   {
+    id: 'question-2',
+    element: 'multiple-choice'
+  }, {
+    id: 'question-3',
+    element: 'multiple-choice'
+  }, {
+    id: 'question-4',
+    element: 'multiple-choice'
+  }, {
+    id: 'question-5',
+    element: 'multiple-choice'
+  },
+  {
     id: 'question-1',
@@ -118,0 +118,0 @@ element: 'number-line'

dist/esm/item-metadata.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, g as getElement } from './index-fb214d28.js';
+import { r as registerInstance, g as getElement } from './index-2b42758a.js';
 
@@ -3,0 +3,0 @@ class ItemMetadata {

dist/esm/pie-response-cell.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, d as getContext, h, g as getElement } from './index-fb214d28.js';
+import { r as registerInstance, d as getContext, h, g as getElement } from './index-2b42758a.js';
 import { l as loadResponseElement } from './response-loader-dd97f7c1.js';
@@ -3,0 +3,0 @@

dist/esm/pie-response.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, d as getContext, h, g as getElement } from './index-fb214d28.js';
+import { r as registerInstance, d as getContext, h, g as getElement } from './index-2b42758a.js';
 import { l as loadResponseElement } from './response-loader-dd97f7c1.js';
@@ -3,0 +3,0 @@

dist/pie-api-live/pie-api-live.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as s}from"./p-41e07f8c.js";e().then(e=>s([["p-000be550",[[0,"item-metadata",{_key:[1,"key"],attribute:[1]}]]],["p-7835da61",[[0,"pie-api-live",{metadata:[16],token:[1],host:[1],apiUrl:[1,"api-url"],liveUrl:[1,"live-url"],hostUrl:[1,"host-url"]},[[0,"attachSession","handleLiveSessionAdded"]]]]],["p-c3923a88",[[1,"pie-live-session",{sessionId:[513,"session-id"],token:[1],client:[16],apiUrl:[1,"api-url"],metadata:[16],sessionData:[32]}]]],["p-134a5238",[[1,"pie-response",{sessionData:[8,"session-data"],multiPart:[4,"multi-part"]}]]],["p-d5e6140b",[[1,"pie-response-cell",{sessionData:[8,"session-data"],multiPart:[4,"multi-part"]}]]]],e));
+import{p as a,b as e}from"./p-c882172c.js";a().then(a=>e([["p-42580642",[[0,"item-metadata",{_key:[1,"key"],attribute:[1]}]]],["p-a1b9237d",[[0,"pie-api-live",{metadata:[16],token:[1],host:[1],apiUrl:[1,"api-url"],liveUrl:[1,"live-url"],hostUrl:[1,"host-url"],lazyLoad:[4,"lazy-load"]},[[0,"attachSession","handleLiveSessionAdded"]]]]],["p-5f286c0a",[[1,"pie-live-session",{sessionId:[513,"session-id"],token:[1],client:[16],apiUrl:[1,"api-url"],metadata:[16],lazyLoad:[4,"lazy-load"],sessionData:[32],lazyItemsCanBeLoaded:[32]}]]],["p-476209b2",[[1,"pie-response",{sessionData:[8,"session-data"],multiPart:[4,"multi-part"]}]]],["p-41e11102",[[1,"pie-response-cell",{sessionData:[8,"session-data"],multiPart:[4,"multi-part"]}]]]],a));

dist/types/components.d.ts

@@ -35,2 +35,6 @@ /* eslint-disable */
         /**
+          * If pie-live-session items should be lazy loaded
+         */
+        "lazyLoad": boolean;
+        /**
           * The live server CUSTOM host. If present, overrides the live server host. e.g.: `wss://qa-live.pie-api.com/`
@@ -58,2 +62,6 @@ */
         /**
+          * If items should be lazy loaded (load only after they're visible)
+         */
+        "lazyLoad": boolean;
+        /**
           * An array of MetadataProperties to be extracted from Item and added to `pie-live-session` elements as attributes.  If no value is found for the provided key on an item, the attribute will not be set.  This property should be set before adding any `pie-live-session` children  ``` [    {      key:"metadata_key",      attribute: "attribute-name"    } ] ```
@@ -148,2 +156,6 @@ */
         /**
+          * If pie-live-session items should be lazy loaded
+         */
+        "lazyLoad"?: boolean;
+        /**
           * An array of MetadataProperties to be extracted from Item and added to `pie-live-session` elements as attributes.  If no value is found for the provided key on an item, the attribute will not be set.  This property must be set before adding any child `<pie-live-session>` elements.  ``` [    {      key:"metadata_key",      attribute: "attribute-name"    } ] ```  This property can alternatively be set declaritively in html using `<item-metadata key="foo" attribute-name="foo-value">` as a child element of `<pie-api-live>` before any `<pie-live-session>` elements.
@@ -160,2 +172,6 @@ */
         /**
+          * If items should be lazy loaded (load only after they're visible)
+         */
+        "lazyLoad"?: boolean;
+        /**
           * Emitted when the element is first connected to the DOM.
@@ -162,0 +178,0 @@ */

dist/types/components/pie-api-live/pie-api-live.d.ts

@@ -65,4 +65,8 @@ import { EventEmitter } from "../../stencil-public-runtime";
     watchHostUrl(): void;
+    /**
+     * If pie-live-session items should be lazy loaded
+     */
+    lazyLoad: boolean;
     handleLiveSessionAdded(ev: Event): void;
     render(): any;
 }

dist/types/components/pie-live-session/pie-live-session.d.ts

@@ -19,2 +19,3 @@ /// <reference types="zen-observable" />
     _subscription: ZenObservable.Subscription;
+    private observer;
     el: HTMLElement;
@@ -35,3 +36,3 @@ subscriptionQuery: import("graphql").DocumentNode;
     sessionId: string;
-    watchsessionId(newVal: any, oldVal: any): void;
+    watchSessionId(newVal: any, oldVal: any): void;
     /**
@@ -76,2 +77,12 @@ * Api token - set by outer pie-api-live element.
     updateItemInfo(): Promise<void>;
+    /**
+     * If items should be lazy loaded (load only after they're visible)
+     */
+    lazyLoad: boolean;
+    watchLazyLoad(): Promise<void>;
+    /**
+     * If lazy items can be loaded
+     */
+    lazyItemsCanBeLoaded: boolean;
+    loadItemContent(): Promise<void>;
     onPropsChange(): void;
@@ -81,2 +92,4 @@ startSubscription(): void;
     componentWillLoad(): Promise<void>;
+    componentDidLoad(): void;
+    private onIntersection;
     getCorrectness(points: any, maxPoints: any): "correct" | "incorrect" | "partial";
@@ -83,0 +96,0 @@ render(): any;

package.json

 {
   "name": "@pie-api/pie-api-live-components",
-  "version": "1.16.8",
+  "version": "1.17.0",
   "description": "Custom Elements that work with PIE Api Live services",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

1755941

increased by0.45%

Lines of code

39188

increased by0.55%

No dependency changes