@vaadin/vaadin-template-renderer - npm Package Compare versions

Comparing version 21.0.0-alpha2 to 21.0.0-alpha3

package.json

 {
   "name": "@vaadin/vaadin-template-renderer",
-  "version": "21.0.0-alpha2",
+  "version": "21.0.0-alpha3",
   "description": "vaadin-template-renderer",
@@ -33,3 +33,3 @@ "main": "vaadin-template-renderer.js",
   },
-  "gitHead": "d2ac6991581b0fa243f3dd61c31c70810fc403ef"
+  "gitHead": "a0bad259b7eaebd60baee4275f7cbe8dcc76ee1e"
 }

src/vaadin-template-renderer-templatizer.js

@@ -27,3 +27,3 @@ import { PolymerElement } from '@polymer/polymer';
     if (this.__templateInstances.has(element.__templateInstance)) {
-      element.__templateInstance.setProperties(properties);
+      this.__updateProperties(element.__templateInstance, properties);
       return;
@@ -40,2 +40,14 @@ }
 
+  __updateProperties(instance, properties) {
+    // The Polymer uses `===` to check whether a property is changed and should be re-rendered.
+    // This means, object properties won't be re-rendered when mutated inside.
+    // This workaround forces the `item` property to re-render even
+    // the new item is stricly equal to the old item.
+    if (instance.item === properties.item) {
+      instance._setPendingProperty('item');
+    }
+
+    instance.setProperties(properties);
+  }
+
   __createTemplateInstance(properties) {
@@ -42,0 +54,0 @@ this.__createTemplateClass(properties);

src/vaadin-template-renderer.js

@@ -0,1 +1,3 @@
+import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
+
 import './vaadin-template-renderer-templatizer.js';
@@ -18,3 +20,3 @@ import { Templatizer } from './vaadin-template-renderer-templatizer.js';
 function processTemplates(component) {
-  [...component.children]
+  FlattenedNodesObserver.getFlattenedNodes(component)
     .filter((child) => {
@@ -33,7 +35,9 @@ return child instanceof HTMLTemplateElement;
 
-const observer = new MutationObserver((mutations) => {
-  mutations.forEach(({ target }) => {
-    processTemplates(target);
+function observeTemplates(component) {
+  if (component.__templateObserver) return;
+
+  component.__templateObserver = new FlattenedNodesObserver(component, () => {
+    processTemplates(component);
   });
-});
+}
 
@@ -43,5 +47,3 @@ window.Vaadin = window.Vaadin || {};
   processTemplates(component);
-
-  // The observer stops observing automatically as the component node is removed
-  observer.observe(component, { childList: true });
+  observeTemplates(component);
 };

No alert changes

Improved metrics

Total package byte prevSize

5407

increased by12.2%

Lines of code

105

increased by11.7%

No dependency changes