saasufy-components 9.3.1 → 9.4.1

package/README.md

@@ -413,6 +413,7 @@ In addition to the slots shown above, the `collection-viewer` also supports the
 - `collection-page-offset`: Indicates the current page offset in the collection's data. It’s like telling the viewer which page of data you want to display initially.
 - `collection-get-count`: If this attribute is present, the component will get the record count of the target view. The count can be rendered into the template by prefixing the model name with a dollar sign and accessing the `count` property like this: `{{$MyModelName.count}}`.
 - `collection-disable-realtime`: If this attribute is present, the underlying collection will not listen for changes nor update in realtime. Fields of records that are in view may still update in realtime.
+- `realtime-fields`: An optional comma-separated list of field names that should update in realtime. If not specified, all fields update in realtime. This can be used to limit realtime updates to only the fields that need it, improving performance.
 - `auto-reset-page-offset`: If this attribute is present, the `collection-page-offset` will be reset to zero whenever the view params change.
 - `type-alias`: Allows you to provide an alternative name for your `Model` to use when injecting values inside the template. This is useful for situations where you may have multiple `collection-viewer` elements and/or `model-viewer` elements of the same type nested inside each other and want to avoid `Model` name clashes in the nested template definitions. For example, if the `type-alias` in the snippet above was set to `SubChat`, then `{{Chat.message}}` would become `{{SubChat.message}}`.
 - `hide-error-logs`: A flag which, when present, suppresses error logs from being printed to the console.
@@ -626,6 +627,7 @@ In the example above, the name of the first element can be accessed with `{{Cate
 - `collection-page-offset`: Indicates the current page offset in the collection's data. It’s like telling the viewer which page of data you want to display initially.
 - `collection-get-count`: If this attribute is present, the component will get the record count of the target view. The count can be rendered into the template by prefixing the model name with a dollar sign and accessing the `count` property like this: `{{$MyModelName.count}}`.
 - `type-alias`: Allows you to provide an alternative name for your `Model` to use when injecting values inside the template. This is useful for situations where you may have multiple `collection-viewer` elements and/or `model-viewer` elements of the same type nested inside each other and want to avoid `Model` name clashes in the nested template definitions. For example, if the `type-alias` in the snippet above was set to `SubChat`, then `{{Chat.message}}` would become `{{SubChat.message}}`.
+- `realtime-fields`: An optional comma-separated list of field names that should update in realtime. If not specified, all fields update in realtime. This can be used to limit realtime updates to only the fields that need it, improving performance.
 - `hide-error-logs`: A flag which, when present, suppresses error logs from being printed to the console.
 - `greedy-refresh`: If this attribute exists, the component will refresh itself whenever an attribute is set, even if that attribute's value did not change.
 
@@ -748,6 +750,7 @@ Used for rendering a single model resource using a template. This is the single-
 - `model-fields` (required): A comma-separated list of fields to bind to. Note that unlike with `model-input` and `model-text`, the attribute name is plural and can bind to multiple fields.
 - `type-alias`: Allows you to provide an alternative name for your `Model` to use when injecting values inside the template. This is useful for situations where you may have multiple `model-viewer` elements and/or `model-viewer` elements of the same type nested inside each other and want to avoid `Model` name clashes in the nested template definitions. For example, if the `type-alias` in the snippet above was set to `MyProduct`, then `{{Product.name}}` would become `{{MyProduct.name}}`.
 - `fields-slice-to`: Optional attribute which can be used to trim strings down to a maximum number of characters when reading. The format is `fieldName1=number1,fieldName2=number2`. This is useful when dealing with potentially very long field values. Note that it may affect caching if the same field is being referenced in multiple parts of the application at the same time within the same `socket-provider`.
+- `realtime-fields`: An optional comma-separated list of field names that should update in realtime. If not specified, all fields update in realtime. This can be used to limit realtime updates to only the fields that need it, improving performance.
 - `hide-error-logs`: A flag which, when present, suppresses error logs from being printed to the console.
 - `greedy-refresh`: If this attribute exists, the component will refresh itself whenever an attribute is set, even if that attribute's value did not change.
 

package/collection-reducer.js

@@ -75,6 +75,7 @@ class CollectionReducer extends SocketConsumer {
       'collection-page-size',
       'collection-page-offset',
       'collection-get-count',
+      'realtime-fields',
       'max-show-loader',
       'type-alias'
     ];
@@ -217,6 +218,8 @@ class CollectionReducer extends SocketConsumer {
     let collectionPageOffset = this.getAttribute('collection-page-offset');
     let collectionGetCount = this.hasAttribute('collection-get-count');
 
+    let realtimeFields = this.hasAttribute('realtime-fields') ?
+      this.getAttribute('realtime-fields').split(',').map(field => field.trim()).filter(field => field) : null;
     let collectionReloadDelay = Number(
       this.getAttribute('collection-reload-delay') || DEFAULT_RELOAD_DELAY
     );
@@ -234,7 +237,8 @@ class CollectionReducer extends SocketConsumer {
       pageSize: Number(collectionPageSize || 10),
       pageOffset: Number(collectionPageOffset || 0),
       changeReloadDelay: collectionReloadDelay,
-      getCount: collectionGetCount
+      getCount: collectionGetCount,
+      realtimeFields
     });
 
     this.shadowRoot.innerHTML = `

package/collection-viewer.js

@@ -163,6 +163,7 @@ class CollectionViewer extends SocketConsumer {
       'collection-page-offset',
       'collection-get-count',
       'collection-disable-realtime',
+      'realtime-fields',
       'auto-reset-page-offset',
       'max-show-loader',
       'type-alias'
@@ -379,6 +380,8 @@ class CollectionViewer extends SocketConsumer {
     let collectionPageOffset = this.getAttribute('collection-page-offset');
     let collectionGetCount = this.hasAttribute('collection-get-count');
     let collectionDisableRealtime = this.hasAttribute('collection-disable-realtime');
+    let realtimeFields = this.hasAttribute('realtime-fields') ?
+      this.getAttribute('realtime-fields').split(',').map(field => field.trim()).filter(field => field) : null;
     let collectionReloadDelay = Number(
       this.getAttribute('collection-reload-delay') || DEFAULT_RELOAD_DELAY
     );
@@ -402,7 +405,8 @@ class CollectionViewer extends SocketConsumer {
       pageOffset: Number(collectionPageOffset || 0),
       changeReloadDelay: collectionReloadDelay,
       getCount: collectionGetCount,
-      realtimeCollection: !collectionDisableRealtime
+      realtimeCollection: !collectionDisableRealtime,
+      realtimeFields
     });
 
     this.shadowRoot.innerHTML = `

package/model-viewer.js

@@ -35,7 +35,8 @@ class ModelViewer extends SocketConsumer {
       'model-id',
       'model-fields',
       'fields-slice-to',
-      'type-alias'
+      'type-alias',
+      'realtime-fields'
     ];
   }
 
@@ -160,12 +161,16 @@ class ModelViewer extends SocketConsumer {
     }
     this.socket = socket;
 
+    let realtimeFields = this.hasAttribute('realtime-fields') ?
+      this.getAttribute('realtime-fields').split(',').map(field => field.trim()).filter(field => field) : null;
+
     this.model = new AGModel({
       socket: this.socket,
       type: modelType,
       id: modelId,
       fields: modelFields.split(',').map(field => field.trim()).filter(field => field),
-      fieldTransformations
+      fieldTransformations,
+      realtimeFields
     });
 
     this.shadowRoot.innerHTML = `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "9.3.1",
+  "version": "9.4.1",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -17,8 +17,8 @@
   "author": "Jonathan Gros-Dubois",
   "license": "MIT",
   "dependencies": {
-    "ag-collection": "^5.4.1",
-    "ag-model": "^3.2.1",
+    "ag-collection": "^6.0.0",
+    "ag-model": "^4.0.0",
     "capitalisk-auth-client": "^2.0.0",
     "socketcluster-client": "^20.0.1",
     "uuid": "^8.3.2"