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

Comparing version 1.2.2 to 1.3.0

dist/cjs/loader.cjs.js

@@ -5,8 +5,8 @@ 'use strict';
 
-const index = require('./index-69423a8c.js');
+const index = require('./index-364a9e2a.js');
 
 const defineCustomElements = (win, options) => index.patchEsm().then(() => {
-  return index.bootstrapLazy([["pie-api-live_3.cjs",[[0,"pie-api-live",{"token":[1],"host":[1]},[[0,"attachSession","handleLiveSessionAdded"]]],[1,"pie-live-session",{"sessionId":[513,"session-id"],"client":[16],"sessionData":[32]}],[0,"pie-response-cell",{"sessionData":[8,"session-data"]}]]],["pie-response.cjs",[[1,"pie-response",{"response":[16]}]]]], options);
+  return index.bootstrapLazy([["pie-api-live_4.cjs",[[0,"pie-api-live",{"token":[1],"host":[1]},[[0,"attachSession","handleLiveSessionAdded"]]],[1,"pie-live-session",{"sessionId":[513,"session-id"],"token":[1],"client":[16],"apiUrl":[1,"api-url"],"sessionData":[32]}],[0,"pie-response",{"sessionData":[8,"session-data"]}],[0,"pie-response-cell",{"sessionData":[8,"session-data"]}]]]], options);
 });
 
 exports.defineCustomElements = defineCustomElements;

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

 'use strict';
 
-const index = require('./index-69423a8c.js');
+const index = require('./index-364a9e2a.js');
 
 index.patchBrowser().then(options => {
-  return index.bootstrapLazy([["pie-api-live_3.cjs",[[0,"pie-api-live",{"token":[1],"host":[1]},[[0,"attachSession","handleLiveSessionAdded"]]],[1,"pie-live-session",{"sessionId":[513,"session-id"],"client":[16],"sessionData":[32]}],[0,"pie-response-cell",{"sessionData":[8,"session-data"]}]]],["pie-response.cjs",[[1,"pie-response",{"response":[16]}]]]], options);
+  return index.bootstrapLazy([["pie-api-live_4.cjs",[[0,"pie-api-live",{"token":[1],"host":[1]},[[0,"attachSession","handleLiveSessionAdded"]]],[1,"pie-live-session",{"sessionId":[513,"session-id"],"token":[1],"client":[16],"apiUrl":[1,"api-url"],"sessionData":[32]}],[0,"pie-response",{"sessionData":[8,"session-data"]}],[0,"pie-response-cell",{"sessionData":[8,"session-data"]}]]]], options);
 });

dist/collection/collection-manifest.json

 {
   "entries": [
-    "./components/pie-response/pie-response.js",
     "./components/pie-api-live/pie-api-live.js",
     "./components/pie-live-session/pie-live-session.js",
+    "./components/pie-response/pie-response.js",
     "./components/pie-response-cell/pie-response-cell.js"
@@ -7,0 +7,0 @@ ],

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

@@ -42,3 +42,5 @@ import { Component, Prop, h, Watch, Host, Listen, Event } from '@stencil/core';
     handleLiveSessionAdded(ev) {
+        ev.target.token = this.token;
         ev.target.client = this.gqlClient;
+        ev.target.apiUrl = 'http://' + this.host + '/graphql';
     }
@@ -45,0 +47,0 @@ render() {

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

 import { Component, Prop, h, Watch, Event, State, Host, Element } from '@stencil/core';
 import gql from 'graphql-tag';
+import { loadSessionContentItem } from '../../load-config';
 export class PieLiveSession {
@@ -12,3 +13,2 @@ constructor() {
       data
-      itemConfig
     }               
@@ -46,2 +46,7 @@ }`;
                 this.sessionData.loaded = true;
+                if (!this.sessionData.itemConfig) {
+                    loadSessionContentItem(this.token, this.sessionId, this.apiUrl).then(r => {
+                        this.sessionData = Object.assign(Object.assign({}, this.sessionData), { itemConfig: r });
+                    });
+                }
                 this.sessionData = Object.assign(Object.assign({}, this.sessionData), this.lastSessionEvent);
@@ -75,3 +80,10 @@ this.sessionEvents.push(this.lastSessionEvent);
         const cell = cells[0];
-        cell && (cell.sessionData = this.lastSessionEvent);
+        cell && (cell.sessionData = this.sessionData);
+        const responses = this.el.querySelectorAll('pie-response');
+        if ((cells === null || cells === void 0 ? void 0 : cells.length) > 1) {
+            // TODO this is temporary, until multi-part is figured out
+            throw (new Error('only one pie-response-cell may be included within a pie-live-session element'));
+        }
+        const response = responses[0];
+        response && (response.sessionData = this.sessionData);
         return (h(Host, { loaded: this.sessionData.loaded ? 'true' : 'false', "session-id": this.sessionId, points: (_b = (_a = this.sessionData) === null || _a === void 0 ? void 0 : _a.score) === null || _b === void 0 ? void 0 : _b.points, "max-points": (_d = (_c = this.sessionData) === null || _c === void 0 ? void 0 : _c.score) === null || _d === void 0 ? void 0 : _d.max, correct: (((_f = (_e = this.sessionData) === null || _e === void 0 ? void 0 : _e.score) === null || _f === void 0 ? void 0 : _f.points) && (((_h = (_g = this.sessionData) === null || _g === void 0 ? void 0 : _g.score) === null || _h === void 0 ? void 0 : _h.points) === ((_k = (_j = this.sessionData) === null || _j === void 0 ? void 0 : _j.score) === null || _k === void 0 ? void 0 : _k.max))) ? 'true' : 'false' },
@@ -100,2 +112,22 @@ h("slot", null)));
         },
+        "token": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [{
+                        "text": undefined,
+                        "name": "internal"
+                    }],
+                "text": "Api token - set by outer pie-api-live element."
+            },
+            "attribute": "token",
+            "reflect": false
+        },
         "client": {
@@ -121,4 +153,24 @@ "type": "unknown",
                     }],
-                "text": "The network client instance for connecting to the api.\nDeveloper to not need to set this property, it is automatically set when this element \nis nested in a `pie-api-live` element."
+                "text": "The network client instance for connecting to the subscription api.\nDeveloper to not need to set this property, it is automatically set when this element \nis nested in a `pie-api-live` element."
             }
+        },
+        "apiUrl": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string",
+                "references": {}
+            },
+            "required": false,
+            "optional": false,
+            "docs": {
+                "tags": [{
+                        "text": undefined,
+                        "name": "internal"
+                    }],
+                "text": "The graphql url for non-subscripton requests - to get content item.\nThese are handled not with subscription apollo client, but directly with fetch api."
+            },
+            "attribute": "api-url",
+            "reflect": false
         }
@@ -125,0 +177,0 @@ }; }

dist/collection/components/pie-response-cell/pie-response-cell.js

@@ -1,3 +0,3 @@
-import { Component, Prop, h, Host, Watch } from '@stencil/core';
-import { getResponseSummary } from '../../response-resolver';
+import { Component, Element, Prop, h, Host } from '@stencil/core';
+import { loadResponseElement } from '../../response-loader/response-loader';
 /**
@@ -11,16 +11,5 @@ * Renders a user's response to a question in summary text form - not more than 32 characters.
 export class PieResponseCell {
-    constructor() {
-        this.responses = [];
-    }
-    updateResponse(newVal) {
-        if (newVal === null || newVal === void 0 ? void 0 : newVal.data) {
-            this.responses = getResponseSummary(newVal);
-        }
-    }
     render() {
-        var _a;
-        if (((_a = this.responses) === null || _a === void 0 ? void 0 : _a.length) > 1) {
-            console.warn(`found ${this.responses.length}, multi part is not yet supported`);
-        }
-        return (h(Host, { available: this.responses[0] ? 'true' : 'false' }, this.responses[0]));
+        loadResponseElement('responseCell', this.sessionData, this.el, this.doc);
+        return (h(Host, null));
     }
@@ -50,6 +39,7 @@ static get is() { return "pie-response-cell"; }
     }; }
-    static get watchers() { return [{
-            "propName": "sessionData",
-            "methodName": "updateResponse"
+    static get contextProps() { return [{
+            "name": "doc",
+            "context": "document"
         }]; }
+    static get elementRef() { return "el"; }
 }

dist/collection/components/pie-response/pie-response.js

@@ -1,2 +0,3 @@
-import { Component, Prop, h, Watch, Host } from '@stencil/core';
+import { Component, Prop, h, Element, Host } from '@stencil/core';
+import { loadResponseElement } from '../../response-loader/response-loader';
 /**
@@ -7,21 +8,15 @@ * Renders a user's response to a question, without rendering the UI for the whole question.
 export class PieResponse {
-    updateResponse() {
-    }
     render() {
-        return (h(Host, null, JSON.stringify(this.response)));
+        loadResponseElement('response', this.sessionData, this.el, this.doc);
+        return (h(Host, null));
     }
     static get is() { return "pie-response"; }
-    static get encapsulation() { return "shadow"; }
     static get properties() { return {
-        "response": {
-            "type": "unknown",
+        "sessionData": {
+            "type": "any",
             "mutable": false,
             "complexType": {
-                "original": "ResponseModel",
-                "resolved": "ResponseModel",
-                "references": {
-                    "ResponseModel": {
-                        "location": "local"
-                    }
-                }
+                "original": "any",
+                "resolved": "any",
+                "references": {}
             },
@@ -35,10 +30,13 @@ "required": false,
                     }],
-                "text": "The model of the response(s) to render.\nThis will be automaticaly sef it the component is nested within a `pie-live-session` component."
-            }
+                "text": "The model of the response(s) to render.\nThis will be automaticaly set it the component is nested within a `pie-live-session` component.\nTODO - fix typing"
+            },
+            "attribute": "session-data",
+            "reflect": false
         }
     }; }
-    static get watchers() { return [{
-            "propName": "response",
-            "methodName": "updateResponse"
+    static get contextProps() { return [{
+            "name": "doc",
+            "context": "document"
         }]; }
+    static get elementRef() { return "el"; }
 }

dist/collection/mock-server/start-mock-server.js

@@ -1,115 +0,2 @@
-const { ApolloServer, gql, PubSub, withFilter } = require('apollo-server');
-const { GraphQLJSON } = require('graphql-type-json');
-const { makeExecutableSchema } = require('graphql-tools');
-const { mockItemConfig, mockSaveEventData } = require('../test/mock-session-data');
-const shortId = require('shortid');
-const pubsub = new PubSub();
-const SESSION_EVENT = 'SESSION_EVENT';
-const typeDefs = gql `
-    scalar JSON
-    type Query {
-        sessionEvent(id: Int!): String!
-    }
-    type ItemSession {
-        id: ID
-    }
-
-    enum SessionEventType {
-        load
-        save
-        score
-    }
-    """ one event on a session """
-    type SessionEvent {
-        id: ID!
-        sessionId:ID!
-        contentItemId: ID!
-        eventType: SessionEventType
-        data: JSON
-        score: JSON
-        itemConfig: JSON
-    }
-    """ Provide a Mock Session Event to Publish """
-    input SessionEventInput {
-        sessionId: ID!
-        eventType: SessionEventType!
-        score: JSON
-        data: JSON
-        itemConfig: JSON
-        "If provided, logic to determine the response view be skipped and this string will be rendered instead"
-        response: String
-    }
-
-
-    type Subscription {
-        sessionEvents(sessions: [ID]!): SessionEvent
-    }
-
-    type Mutation {
-        startSession(sessionId: ID): ID!
-        """ Adds a mock SessionEvent for the given session id """
-        addSessionEvent(sessionId: ID!, event: SessionEventInput!): ID!
-        mockSaveEvent(sessionId: ID!, response: String!): ID!
-        mockScoreEvent(sessionId: ID!, score: JSON!): ID!
-
-
-    }
-`;
-const resolvers = {
-    JSON: GraphQLJSON,
-    Query: {
-        sessionEvent: () => 'Resolved',
-    },
-    Subscription: {
-        sessionEvents: {
-            subscribe: withFilter(() => pubsub.asyncIterator(SESSION_EVENT), (payload, variables) => {
-                var _a, _b;
-                if ((_a = variables === null || variables === void 0 ? void 0 : variables.sessions) === null || _a === void 0 ? void 0 : _a.includes((_b = payload === null || payload === void 0 ? void 0 : payload.sessionEvents) === null || _b === void 0 ? void 0 : _b.sessionId)) {
-                    return true;
-                }
-            }),
-        },
-    },
-    Mutation: {
-        startSession: (_parent, args) => {
-            return args.sessionId ? args.sessionId : shortId.generate();
-        },
-        addSessionEvent: (_parent, args) => {
-            const id = shortId.generate();
-            const { sessionId, event } = args;
-            const pubEvent = Object.assign(Object.assign(Object.assign({}, event), { sessionId }), { id });
-            pubsub.publish(SESSION_EVENT, { sessionEvents: pubEvent });
-            console.log(`addSessionEventArgs ${JSON.stringify(args)}`);
-            return "addSessionEvent";
-        },
-        mockSaveEvent: (_parent, args) => {
-            const id = shortId.generate();
-            const { sessionId, response } = args;
-            mockSaveEventData.data[0].value = response;
-            const pubEvent = Object.assign(Object.assign(Object.assign({}, mockSaveEventData), { sessionId }), { id });
-            pubsub.publish(SESSION_EVENT, { sessionEvents: pubEvent });
-            console.log(`mockSaveEvent ${JSON.stringify(args)}`);
-            return "mockSaveEvent";
-        },
-        mockScoreEvent: (_parent, args) => {
-            const id = shortId.generate();
-            const event = { type: 'score' };
-            const { sessionId, score } = args;
-            const pubEvent = Object.assign(Object.assign(Object.assign(Object.assign({}, event), { score }), { sessionId }), { id });
-            pubsub.publish(SESSION_EVENT, { sessionEvents: pubEvent });
-            console.log(`scoreSessionEvent ${JSON.stringify(args)}`);
-            return "scoreSessionEvent";
-        }
-    }
-};
-const schema = makeExecutableSchema({
-    typeDefs,
-    resolvers
-});
-const server = new ApolloServer({
-    schema,
-    introspection: true,
-    // https://github.com/prisma-labs/graphql-playground/issues/320
-    playground: { settings: { "schema.polling.enable": false } }
-});
+const server = require('./server');
 server.listen({
@@ -116,0 +3,0 @@ port: process.env.PORT || 4000,

dist/collection/test/mock-session-data.js

@@ -1,21 +0,6 @@
-// import { SaveSessionEvent, SessionEventType, PieContent } from '../types';
+var fs = require('fs');
 exports.mockSaveEventData = {
     timestamp: new Date('10/4/19, 11:45 PM'),
     type: "save",
-    data: [{
-            id: 'model-id',
-            element: "mock-element",
-            value: "mock response value"
-        }],
-    itemConfig: {
-        id: "itemId",
-        elements: {
-            'mock-element': 'mock-package'
-        },
-        models: [{
-                element: 'mock-element',
-                id: 'model-id',
-                foo: 'a model prop'
-            }]
-    }
+    data: JSON.parse(fs.readFileSync(`${__dirname}/../mock-server/fixtures/multiple-choice-response.json`, 'utf-8'))
 };

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

@@ -1,1 +0,1 @@
-import{p as s,b as e}from"./p-dae29130.js";s().then(s=>e([["p-720d39e5",[[0,"pie-api-live",{token:[1],host:[1]},[[0,"attachSession","handleLiveSessionAdded"]]],[1,"pie-live-session",{sessionId:[513,"session-id"],client:[16],sessionData:[32]}],[0,"pie-response-cell",{sessionData:[8,"session-data"]}]]],["p-59748cf8",[[1,"pie-response",{response:[16]}]]]],s));
+import{p as s,b as e}from"./p-4f32c2da.js";s().then(s=>e([["p-964ca099",[[0,"pie-api-live",{token:[1],host:[1]},[[0,"attachSession","handleLiveSessionAdded"]]],[1,"pie-live-session",{sessionId:[513,"session-id"],token:[1],client:[16],apiUrl:[1,"api-url"],sessionData:[32]}],[0,"pie-response",{sessionData:[8,"session-data"]}],[0,"pie-response-cell",{sessionData:[8,"session-data"]}]]]],s));

dist/types/components.d.ts

@@ -9,3 +9,2 @@ /* eslint-disable */
 import { ApolloClient, } from "apollo-client";
-import { ResponseModel, } from "./components/pie-response/pie-response";
 export namespace Components {
@@ -24,4 +23,8 @@ interface PieApiLive {
         /**
-          * The network client instance for connecting to the api. Developer to not need to set this property, it is automatically set when this element  is nested in a `pie-api-live` element.
+          * The graphql url for non-subscripton requests - to get content item. These are handled not with subscription apollo client, but directly with fetch api.
          */
+        "apiUrl": string;
+        /**
+          * The network client instance for connecting to the subscription api. Developer to not need to set this property, it is automatically set when this element  is nested in a `pie-api-live` element.
+         */
         "client": ApolloClient<any>;
@@ -32,8 +35,12 @@ /**
         "sessionId": string;
+        /**
+          * Api token - set by outer pie-api-live element.
+         */
+        "token": string;
     }
     interface PieResponse {
         /**
-          * The model of the response(s) to render. This will be automaticaly sef it the component is nested within a `pie-live-session` component.
+          * The model of the response(s) to render. This will be automaticaly set it the component is nested within a `pie-live-session` component. TODO - fix typing
          */
-        "response": ResponseModel;
+        "sessionData": any;
     }
@@ -40,0 +47,0 @@ interface PieResponseCell {

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

@@ -17,2 +17,3 @@ /// <reference types="zen-observable" />
     lastSessionEvent: Object;
+    itemConfig: Object;
     _subscription: ZenObservable.Subscription;
@@ -36,3 +37,8 @@ el: HTMLElement;
     /**
-     * The network client instance for connecting to the api.
+     * Api token - set by outer pie-api-live element.
+     * @internal
+     */
+    token: string;
+    /**
+     * The network client instance for connecting to the subscription api.
      * Developer to not need to set this property, it is automatically set when this element
@@ -43,2 +49,8 @@ * is nested in a `pie-api-live` element.
     client: ApolloClient<any>;
+    /**
+     * The graphql url for non-subscripton requests - to get content item.
+     * These are handled not with subscription apollo client, but directly with fetch api.
+     * @internal
+     */
+    apiUrl: string;
     watchClient(): void;
@@ -45,0 +57,0 @@ subscribe(): void;

dist/types/components/pie-response-cell/pie-response-cell.d.ts

@@ -9,3 +9,4 @@ /**
 export declare class PieResponseCell {
-    responses: string[];
+    doc: Document;
+    el: HTMLElement;
     /**
@@ -18,4 +19,3 @@ * The model of the response(s) to render.
     sessionData: any;
-    updateResponse(newVal: any): void;
     render(): any;
 }

dist/types/components/pie-response/pie-response.d.ts

@@ -10,10 +10,12 @@ export interface ResponseModel {
 export declare class PieResponse {
+    doc: Document;
+    el: HTMLElement;
     /**
      * The model of the response(s) to render.
-     * This will be automaticaly sef it the component is nested within a `pie-live-session` component.
+     * This will be automaticaly set it the component is nested within a `pie-live-session` component.
+     * TODO - fix typing
      * @internal
      */
-    response: ResponseModel;
-    updateResponse(): void;
+    sessionData: any;
     render(): any;
 }

dist/types/mock-server/start-mock-server.d.ts

@@ -1,27 +0,1 @@
-declare const ApolloServer: any, gql: any, PubSub: any, withFilter: any;
-declare const GraphQLJSON: any;
-declare const makeExecutableSchema: any;
-declare const mockItemConfig: any, mockSaveEventData: any;
-declare const shortId: any;
-declare const pubsub: any;
-declare const SESSION_EVENT = "SESSION_EVENT";
-declare const typeDefs: any;
-declare const resolvers: {
-    JSON: any;
-    Query: {
-        sessionEvent: () => string;
-    };
-    Subscription: {
-        sessionEvents: {
-            subscribe: any;
-        };
-    };
-    Mutation: {
-        startSession: (_parent: any, args: any) => any;
-        addSessionEvent: (_parent: any, args: any) => string;
-        mockSaveEvent: (_parent: any, args: any) => string;
-        mockScoreEvent: (_parent: any, args: any) => string;
-    };
-};
-declare const schema: any;
 declare const server: any;

dist/types/types.d.ts

@@ -85,4 +85,4 @@ export interface SessionEvent {
 export declare type PieDef = {
-    controllerUrl?: any;
     modules?: PieModulesDef;
+    elements?: PieElementsDef;
     name?: string;
@@ -93,5 +93,9 @@ package?: string;
 export declare type PieModulesDef = {
+    controller?: string;
+    [x: string]: string;
+};
+export declare type PieElementsDef = {
     config?: string;
-    controller?: string;
     render: string;
+    [x: string]: string;
 };
@@ -98,0 +102,0 @@ export declare type BundleInfo = {

package.json

 {
   "name": "@pie-api/pie-api-live-components",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Custom Elements that work with PIE Api Live services",
@@ -23,3 +23,5 @@ "main": "dist/index.js",
     "generate": "stencil generate",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "demo": "npm run start & npx http-server www",
+    "start-mock-server": "node --inspect -r ts-node/register src/mock-server/start-mock-server.ts"
   },
@@ -60,4 +62,4 @@ "devDependencies": {
     "subscriptions-transport-ws": "^0.9.16",
-    "ws": "^7.2.5",
-    "ts-node": "^8.10.1"
+    "ts-node": "^8.10.1",
+    "ws": "^7.2.5"
   },
@@ -64,0 +66,0 @@ "husky": {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1397166

increased by2.5%

Number of package files

60

increased by1.69%

Lines of code

27007

increased by2.06%

Worsened metrics

Number of low supply chain risk alerts

4

increased by100%

Number of medium supply chain risk alerts

14

increased by75%

No dependency changes