saasufy-components 9.4.0 → 9.5.0

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.
 
@@ -971,7 +974,7 @@ A link to initiate an OAuth flow to authenticate a user as part of log in. Can s
 - `client-id` (required): This is the client ID from the third-party OAuth provider.
 - `state-size`: This allows you to control the size (in bytes) of the random state string which is passed to the OAuth provider as part of the OAuth flow. Defaults to 20.
 - `state-storage-key`: The state string is stored in the browser's `sessionStorage` under this key. Defaults to `oauth.state`. It must match the value provided to the `oauth-handler` component at the end of the OAuth flow.
-- `use-local-storage`: By default, the state is stored inside sessionStorage. If this property is set, then the state will be stored inside localStorage instead. This is useful for sharing the state across different tabs. If set, this attribute should also be set on the related `oauth-handler` component.
+- `use-session-storage`: By default, the state is stored inside sessionStorage. If this property is set, then the state will be stored inside localStorage instead. This is useful for sharing the state across different tabs. If set, this attribute should also be set on the related `oauth-handler` component.
 
 ### oauth-handler
 
@@ -1001,7 +1004,7 @@ When using an OAuth provider, the callback URL which you register with the provi
 - `code-param-name`: The name of the query parameter which holds the `code` as provided by the OAuth provider within the OAuth callback URL. Defaults to `code`.
 - `state-param-name`: The name of the query parameter which holds the `state` as provided by the OAuth provider within the OAuth callback URL. Defaults to `state`.
 - `auth-timeout`: The number of milliseconds to wait for authentication to complete before timing out. Defaults to 10000 (10 seconds).
-- `use-local-storage`: By default, the state is retrieved from sessionStorage. If this property is set, then the state will be retrieved from localStorage instead. This is useful for sharing the state across different tabs. If set, this attribute should also be set on the related `oauth-link` component.
+- `use-session-storage`: By default, the state is retrieved from localStorage. If this property is set, then the state will be retrieved from sessionStorage instead. If set, this attribute should also be set on the related `oauth-link` component.
 
 ### render-group
 

package/model-input.js

@@ -50,8 +50,7 @@ class ModelInput extends SocketConsumer {
       'autocorrect',
       'input-id',
       'input-props',
-      'ignore-invalid-selection',
-      'realtime-fields'
+      'ignore-invalid-selection'
     ];
   }
 

package/oauth-handler.js

@@ -33,7 +33,7 @@ class OAuthHandler extends SocketConsumer {
       throw new Error('The provider attribute of oauth-handler was not specified');
     }
 
-    let useLocalStorage = this.hasAttribute('use-local-storage');
+    let useLocalStorage = !this.hasAttribute('use-session-storage');
     let storageKey = this.getAttribute('state-storage-key') || 'oauth.state';
     let expectedOAuthState = (useLocalStorage ? localStorage : sessionStorage).getItem(storageKey);
     if (!expectedOAuthState) {

package/oauth-link.js

@@ -17,7 +17,7 @@ class OAuthLink extends HTMLElement {
       'client-id',
       'state-size',
       'state-storage-key',
-      'use-local-storage'
+      'use-session-storage'
     ];
   }
 
@@ -77,7 +77,7 @@ class OAuthLink extends HTMLElement {
     if (!provider) {
       throw new Error('The provider attribute of oauth-link was not specified');
     }
-    let useLocalStorage = this.hasAttribute('use-local-storage');
+    let useLocalStorage = !this.hasAttribute('use-session-storage');
     let stateSize = Number(this.getAttribute('state-size') || 20);
     let storageKey = this.getAttribute('state-storage-key') || 'oauth.state';
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "9.4.0",
+  "version": "9.5.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {