saasufy-components 2.16.0 → 3.0.0

package/README.md

@@ -348,11 +348,8 @@ Used for displaying and editing a single field of a model instance in real time.
 - `model-id` (required): The id of the model instance/record to bind to.
 - `model-field` (required): The field of the model instance/record to bind to for reading and updating.
 - `debounce-delay`: The delay in milliseconds to wait before sending an update to the server. This is useful to batch multiple updates together (as is common when user is typing). Default is 300ms.
-- `enable-rebound`: By default, real-time updates performed via `model-input` components are not sent back to the publishing client as it is assumed that state changes are either localized to a single `model-input` component or shared with other components on the same page via the use of `consumers`, `bind-to-collection` or `bind-to-model` attributes. There may be situations where you have a specific value displayed in multiple places on the same page/screen and want them to be updated in real-time to reflect the latest value of the model field. For convenience, you can add the `enable-rebound` attribute to the `model-input` component to force real-time updates to rebound back to the publisher and this will ensure that all components on the page will receive real-time updates (will sync with each other) without having to explicitly bind them together via the front end. Note that enabling rebound comes with additional performance overheads.
 - `input-id`: Can be used to set an `id` attribute on the inner `input` element.
 - `list`: If specified, this sets the list attribute of the inner `input` element to provide input suggestions (only works with standard input elements).
-- `bind-to-model`: If this attribute exists, the `model-input` component will attempt to host its model data within the nearest compatible `model-viewer` parent component instead of creating its own model internally. This can improve efficiency/reuse of model data and provide a better user experience. For example, if the `model-input` element is re-rendered, it will not have to re-fetch its data as it will be kept inside its parent `model-viewer` component.
-- `bind-to-collection`: If this attribute exists, the `model-input` component will attempt to host its model data within the nearest compatible `collection-browser` or `collection-reducer` parent component instead of creating its own model internally. This can improve efficiency/reuse of model data and provide a better user experience. For example, if the `model-input` element is re-rendered, it will not have to re-fetch its data as it will be kept inside its parent `collection-browser` or `collection-reducer` component. Note that the parent component will take over the responsibility for cleaning up the model; this includes scenarios where the user loads a different page of the collection/view where the specified model instance is no longer present.
 - `type`: The type of the input component; can be `text`, `number`, `select`, `textarea` or `checkbox`.
 - `placeholder`: Can be used to set the placeholder text on the inner input element.
 - `consumers`: This allows you to connect this `model-input` to other elements on your page which share the same parent element. It takes a list of selectors with optional attributes to target. For example `.my-input:value` will find all elements with a `my-input` class and update their `value` attributes with the value of the `model-input` component in real-time. You can specify multiple selectors separated by commas such as `.my-input,my-div` - In this case, because attribute names are not specified, values will be injected into the `value` attribute (for input elements) or into the `innerHTML` property (for other kinds of elements). The default attribute/property depends on the element type.
@@ -365,6 +362,7 @@ Used for displaying and editing a single field of a model instance in real time.
 - `hide-error-logs`: By default, this component will log errors to the console. If set, this attribute will suppress such errors from showing up on the console.
 - `autocapitalize`: Can be `on` or `off` - It will set the auto-capitalize attribute on the inner input element. This is useful for mobile devices to enable or disable auto-capitalization of the first character which is typed into the input element.
 - `autocorrect`: Can be `on` or `off` - It will set the auto-correct attribute on the inner input element. This is useful for mobile devices to enable or disable auto-correct.
+- `enable-rebound`: By default, for efficiency reasons, real-time updates performed via `model-input` components are not sent back to the publishing client; it is usually unnecessary because state changes are shared locally between all components which are bound to the same `socket-provider`. You can add the `enable-rebound` attribute to the `model-input` component to force real-time updates to rebound back to the publisher to support more advanced scenarios. Note that enabling rebound comes with additional performance overheads.
 
 ### model-text
 
@@ -386,8 +384,6 @@ Used to displaying a field of a model instance in real time.
 - `model-type` (required): Specifies the type of model to bind to. This should match a `Model` available in your Saasufy service.
 - `model-id` (required): The id of the model instance/record to bind to.
 - `model-field` (required): The field of the model instance/record to bind to for reading.
-- `bind-to-model`: If this attribute exists, the `model-text` component will attempt to fetch its model data from the nearest compatible `model-viewer` parent component instead of creating its own model internally. This can improve efficiency/reuse of model data and provide a better user experience. For example, if the `model-text` element is re-rendered, it will not have to re-fetch its data as it will be kept inside its parent `model-viewer` component.
-- `bind-to-collection`: If this attribute exists, the `model-text` component will attempt to fetch its model data from the nearest compatible `collection-browser` or `collection-reducer` parent component instead of creating its own model internally. This can improve efficiency/reuse of model data and provide a better user experience. For example, if the `model-text` element is re-rendered, it will not have to re-fetch its data as it will be kept inside its parent `collection-browser` or `collection-reducer` component. Note that the parent component will take over the responsibility for cleaning up the model; this includes scenarios where the user loads a different page of the collection/view where the specified model instance is no longer present.
 - `hide-error-logs`: By default, this component will log errors to the console. If set, this attribute will suppress such errors from showing up on the console.
 
 ### model-viewer

package/model-input.js

@@ -8,6 +8,7 @@ class ModelInput extends SocketConsumer {
     this.isReady = false;
     this.inputElement = null;
   }
+
   connectedCallback() {
     this.isReady = true;
     this.destroy = () => {};
@@ -22,10 +23,7 @@ class ModelInput extends SocketConsumer {
     return [
       'input-id',
       'list',
-      'model-instance-property',
-      'collection-instance-property',
-      'bind-to-model',
-      'bind-to-collection',
+      'socket-instance-property',
       'type',
       'placeholder',
       'consumers',
@@ -89,10 +87,7 @@ class ModelInput extends SocketConsumer {
 
   render() {
     this.innerHTML = '';
-    let bindToModel = this.hasAttribute('bind-to-model');
-    let modelInstanceProperty = this.getAttribute('model-instance-property');
-    let bindToCollection = this.hasAttribute('bind-to-collection');
-    let collectionInstanceProperty = this.getAttribute('collection-instance-property');
+    let socketInstanceProperty = this.getAttribute('socket-instance-property');
     let showErrorMessage = this.hasAttribute('show-error-message');
     let inputId = this.getAttribute('input-id');
     let autocapitalize = this.getAttribute('autocapitalize');
@@ -107,76 +102,43 @@ class ModelInput extends SocketConsumer {
     let height = this.getAttribute('height');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
     let enableRebound = this.hasAttribute('enable-rebound');
-    let currentNode = this.parentNode;
-    let model;
-    let isModelLocal = false;
-    if (bindToCollection) {
-      collectionInstanceProperty = 'collection';
-    }
-    if (collectionInstanceProperty) {
-      let collection;
+
+    let socket;
+    if (socketInstanceProperty) {
+      let currentNode = this.parentNode;
       while (currentNode) {
-        collection = currentNode[collectionInstanceProperty];
-        if (collection && collection.type !== modelType) {
-          collection = null;
-        }
-        if (collection && (!collection.agModels || !collection.agModels[modelId])) {
-          collection = null;
-        }
-        if (collection) break;
+        socket = currentNode[socketInstanceProperty];
+        if (socket) break;
         currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }
-      if (collection) {
-        model = collection.agModels[modelId];
-        if (!model.agFields[modelField]) {
-          model.addField(modelField);
-        }
-      }
+      if (!socket) {
+        throw new Error(
+          `The ${
+            this.nodeName.toLowerCase()
+          } element failed to bind to a socket via the ${
+            socketInstanceProperty
+          } socket-instance-property`
+        );
+      };
+    } else {
+      socket = this.getSocket();
     }
-    if (!model) {
-      if (bindToModel) {
-        modelInstanceProperty = 'model';
-      }
-      currentNode = this.parentNode;
-      if (modelInstanceProperty) {
-        while (currentNode) {
-          model = currentNode[modelInstanceProperty];
-          if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
-            model = null;
-          }
-          if (model && !model.agFields) {
-            model = null;
-          }
-          if (model) break;
-          currentNode = currentNode.getRootNode().host || currentNode.parentNode;
-        }
-        if (!model) {
-          throw new Error(
-            `The ${
-              this.nodeName.toLowerCase()
-            } element failed to bind to a model - Ensure that the element is nested inside a parent element which exposes a model instance of the same type with a ${modelField} field`
+    this.socket = socket;
+    let model = new AGModel({
+      socket: this.socket,
+      type: modelType,
+      id: modelId,
+      fields: [ modelField ],
+      enableRebound
+    });
+    if (!hideErrorLogs) {
+      (async () => {
+        for await (let { error } of model.listener('error')) {
+          console.error(
+            `Model input encountered an error: ${error.message}`
           );
-        };
-      } else {
-        this.socket = this.getSocket();
-        model = new AGModel({
-          socket: this.socket,
-          type: modelType,
-          id: modelId,
-          fields: [ modelField ],
-          enableRebound
-        });
-        if (!hideErrorLogs) {
-          (async () => {
-            for await (let { error } of model.listener('error')) {
-              console.error(
-                `Model input encountered an error: ${error.message}`
-              );
-            }
-          })();
         }
-        isModelLocal = true;
-      }
+      })();
     }
     if (model.isLoaded) {
       this.setAttribute('is-loaded', '');
@@ -240,9 +202,7 @@ class ModelInput extends SocketConsumer {
     this.destroy = () => {
       destroyInputSync();
       this.isLoadedConsumer && this.isLoadedConsumer.kill();
-      if (isModelLocal) {
-        model.destroy();
-      }
+      model.destroy();
     };
   }
 
@@ -304,8 +264,9 @@ class ModelInput extends SocketConsumer {
     let debounce = debouncer();
 
     let onInputChange = (event) => {
-      if (event.target.value === String(model.value[fieldName])) return;
       debounce(async () => {
+        if (event.target.value === String(model.value[fieldName] || '')) return;
+
         let providerTemplate = this.getAttribute('provider-template');
         try {
           if (inputElement.type === 'checkbox') {
@@ -342,6 +303,8 @@ class ModelInput extends SocketConsumer {
     if (inputElement.type !== 'checkbox' && inputElement.type !== 'select') {
       onInputKeyUp = async (event) => {
         debounce(async () => {
+          if (event.target.value === String(model.value[fieldName] || '')) return;
+
           let providerTemplate = this.getAttribute('provider-template');
           try {
             if (event.target.value === '') {

package/model-text.js

@@ -20,10 +20,7 @@ class ModelText extends SocketConsumer {
 
   static get observedAttributes() {
     return [
-      'model-instance-property',
-      'collection-instance-property',
-      'bind-to-collection',
-      'bind-to-model',
+      'socket-instance-property',
       'model-type',
       'model-id',
       'model-field',
@@ -39,84 +36,49 @@ class ModelText extends SocketConsumer {
 
   render() {
     this.innerHTML = '';
-    let bindToModel = this.hasAttribute('bind-to-model');
-    let modelInstanceProperty = this.getAttribute('model-instance-property');
-    let bindToCollection = this.hasAttribute('bind-to-collection');
-    let collectionInstanceProperty = this.getAttribute('collection-instance-property');
+    let socketInstanceProperty = this.getAttribute('socket-instance-property');
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelField = this.getAttribute('model-field');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
-    let currentNode = this.parentNode;
-    let model;
-    let isModelLocal = false;
-    if (bindToCollection) {
-      collectionInstanceProperty = 'collection';
-    }
-    if (collectionInstanceProperty) {
-      let collection;
+
+    let socket;
+    if (socketInstanceProperty) {
+      let currentNode = this.parentNode;
       while (currentNode) {
-        collection = currentNode[collectionInstanceProperty];
-        if (collection && collection.type !== modelType) {
-          collection = null;
-        }
-        if (collection && (!collection.agModels || !collection.agModels[modelId])) {
-          collection = null;
-        }
-        if (collection) break;
+        socket = currentNode[socketInstanceProperty];
+        if (socket) break;
         currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }
-      if (collection) {
-        model = collection.agModels[modelId];
-        if (!model.agFields[modelField]) {
-          model.addField(modelField);
-        }
-      }
+      if (!socket) {
+        throw new Error(
+          `The ${
+            this.nodeName.toLowerCase()
+          } element failed to bind to a socket via the ${
+            socketInstanceProperty
+          } socket-instance-property`
+        );
+      };
+    } else {
+      socket = this.getSocket();
     }
-    if (!model) {
-      if (bindToModel) {
-        modelInstanceProperty = 'model';
-      }
-      currentNode = this.parentNode;
-      if (modelInstanceProperty) {
-        while (currentNode) {
-          model = currentNode[modelInstanceProperty];
-          if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
-            model = null;
-          }
-          if (model && !model.agFields) {
-            model = null;
-          }
-          if (model) break;
-          currentNode = currentNode.getRootNode().host || currentNode.parentNode;
-        }
-        if (!model) {
-          throw new Error(
-            `The ${
-              this.nodeName.toLowerCase()
-            } element failed to bind to a model - Ensure that the element is nested inside a parent element which exposes a model instance of the same type with a ${modelField} field`
+    this.socket = socket;
+    let model = new AGModel({
+      socket: this.socket,
+      type: modelType,
+      id: modelId,
+      fields: [ modelField ]
+    });
+    if (!hideErrorLogs) {
+      (async () => {
+        for await (let { error } of model.listener('error')) {
+          console.error(
+            `Model text encountered an error: ${error.message}`
           );
-        };
-      } else {
-        this.socket = this.getSocket();
-        model = new AGModel({
-          socket: this.socket,
-          type: modelType,
-          id: modelId,
-          fields: [ modelField ]
-        });
-        if (!hideErrorLogs) {
-          (async () => {
-            for await (let { error } of model.listener('error')) {
-              console.error(
-                `Model text encountered an error: ${error.message}`
-              );
-            }
-          })();
         }
-        isModelLocal = true;
-      }
+      })();
     }
+
     if (model.isLoaded) {
       this.setAttribute('is-loaded', '');
       this.dispatchEvent(new CustomEvent('load', { bubbles: true }));
@@ -142,9 +104,7 @@ class ModelText extends SocketConsumer {
     this.destroy = () => {
       changeConsumer.kill();
       this.isLoadedConsumer && this.isLoadedConsumer.kill();
-      if (isModelLocal) {
-        model.destroy();
-      }
+      model.destroy();
     };
   }
 }

package/model-viewer.js

@@ -16,19 +16,14 @@ class ModelViewer extends SocketConsumer {
 
   connectedCallback() {
     this.isReady = true;
-    this.socket = this.getSocket();
     this.activeLoader = null;
     this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
     this.render();
   }
 
   disconnectedCallback() {
-    if (this.model && this.isModelLocal) {
+    if (this.model) {
       this.model.destroy();
-    } else {
-      if (this.modelLoadConsumer) this.modelLoadConsumer.kill();
-      if (this.modelChangeConsumer) this.modelChangeConsumer.kill();
-      if (this.modelErrorConsumer) this.modelErrorConsumer.kill();
     }
     this.shadowRoot.removeEventListener('slotchange', this.handleSlotChangeEvent);
   }
@@ -93,43 +88,38 @@ class ModelViewer extends SocketConsumer {
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelFields = this.getAttribute('model-fields') || '';
-    let modelInstanceProperty = this.getAttribute('model-instance-property');
+    let socketInstanceProperty = this.getAttribute('socket-instance-property');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
 
-    if (this.model && this.isModelLocal) this.model.destroy();
+    if (this.model) this.model.destroy();
 
-    let currentNode = this.parentNode;
-    let model;
-    if (modelInstanceProperty) {
+    let socket;
+    if (socketInstanceProperty) {
+      let currentNode = this.parentNode;
       while (currentNode) {
-        model = currentNode[modelInstanceProperty];
-        if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
-          model = null;
-        }
-        if (model && !model.agFields) {
-          model = null;
-        }
-        if (model) break;
+        socket = currentNode[socketInstanceProperty];
+        if (socket) break;
         currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }
-      if (!model) {
+      if (!socket) {
         throw new Error(
           `The ${
             this.nodeName.toLowerCase()
-          } element failed to obtain a model via the specified model-instance-property - Ensure that the element is nested inside a parent element which exposes a model instance of the same type which has the relevant fields`
+          } element failed to bind to a socket via the ${
+            socketInstanceProperty
+          } socket-instance-property`
         );
       };
-      this.model = model;
-      this.isModelLocal = false;
     } else {
-      this.model = new AGModel({
-        socket: this.socket,
-        type: modelType,
-        id: modelId,
-        fields: modelFields.split(',').map(field => field.trim()).filter(field => field)
-      });
-      this.isModelLocal = true;
+      socket = this.getSocket();
     }
+    this.socket = socket;
+    this.model = new AGModel({
+      socket: this.socket,
+      type: modelType,
+      id: modelId,
+      fields: modelFields.split(',').map(field => field.trim()).filter(field => field)
+    });
 
     this.shadowRoot.innerHTML = `
       <slot name="loader"></slot>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "2.16.0",
+  "version": "3.0.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -17,8 +17,8 @@
   "author": "Jonathan Gros-Dubois",
   "license": "MIT",
   "dependencies": {
-    "ag-collection": "^4.1.0",
-    "ag-model": "^2.1.0",
+    "ag-collection": "^5.0.0",
+    "ag-model": "^3.0.0",
     "capitalisk-auth-client": "^1.5.1",
     "socketcluster-client": "^19.1.0"
   },

package/utils.js

@@ -89,6 +89,10 @@ export function createReactiveCollection(collectionOptions, callback) {
     }
   })();
 
+  if (collection.isLoaded) {
+    collection.safeValue = collection.value.map(toSafeModelValue);
+  }
+
   return collection;
 }
 
@@ -120,6 +124,10 @@ export function createReactiveModel(modelOptions, callback) {
     }
   })();
 
+  if (model.isLoaded) {
+    model.safeValue = toSafeModelValue(model.value);
+  }
+
   return model;
 }
 
@@ -142,6 +150,10 @@ export function createCollection(collectionOptions) {
     }
   })();
 
+  if (collection.isLoaded) {
+    collection.safeValue = collection.value.map(toSafeModelValue);
+  }
+
   return collection;
 }
 
@@ -162,6 +174,10 @@ export function createModel(modelOptions) {
     }
   })();
 
+  if (model.isLoaded) {
+    model.safeValue = toSafeModelValue(model.value);
+  }
+
   return model;
 }