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

Comparing version 21.0.0-alpha5 to 21.0.0-alpha6

package.json

 {
   "name": "@vaadin/vaadin-template-renderer",
-  "version": "21.0.0-alpha5",
+  "version": "21.0.0-alpha6",
   "description": "vaadin-template-renderer",
@@ -28,3 +28,6 @@ "main": "vaadin-template-renderer.js",
     "@esm-bundle/chai": "^4.1.5",
-    "@vaadin/testing-helpers": "^0.2.1"
+    "@vaadin/testing-helpers": "^0.2.1",
+    "@vaadin/vaadin-checkbox": "^21.0.0-alpha6",
+    "@vaadin/vaadin-grid": "^21.0.0-alpha6",
+    "@vaadin/vaadin-grid-pro": "^21.0.0-alpha6"
   },
@@ -34,3 +37,3 @@ "publishConfig": {
   },
-  "gitHead": "95df960d783024687399b0225f52b0c23d146877"
+  "gitHead": "70e820ca6ad22d0a85a4b50bfad65276ed36f344"
 }

src/vaadin-template-renderer-templatizer.js

@@ -5,5 +5,6 @@ import { PolymerElement } from '@polymer/polymer';
 export class Templatizer extends PolymerElement {
-  static create(template) {
-    const templatizer = new Templatizer();
+  static create(component, template) {
+    const templatizer = new this();
     templatizer.__template = template;
+    templatizer.__component = component;
     return templatizer;
@@ -20,2 +21,3 @@ }
     this.__template = null;
+    this.__component = null;
     this.__TemplateClass = null;
@@ -25,18 +27,27 @@ this.__templateInstances = new Set();
 
+  /**
+   * If the template instance was created by this templatizer's instance and is still attached to DOM,
+   * it only re-renders the instance with the new properties.
+   * Otherwise, it disposes of the old template instance (if it exists),
+   * creates a new template instance with the given properties and renders the instance's root to the element.
+   */
   render(element, properties = {}) {
-    // If the template instance exists and has been instantiated by this templatizer,
-    // it only re-renders the instance with the new properties.
-    if (this.__templateInstances.has(element.__templateInstance)) {
-      this.__updateProperties(element.__templateInstance, properties);
+    let instance = element.__templateInstance;
+
+    if (this.__hasTemplateInstance(instance) && this.__isTemplateInstanceAttachedToDOM(instance)) {
+      this.__updateProperties(instance, properties);
       return;
     }
 
-    // Otherwise, it instantiates a new template instance
-    // with the given properties and then renders the result to the element
-    const templateInstance = this.__createTemplateInstance(properties);
+    if (this.__hasTemplateInstance(instance)) {
+      this.__disposeOfTemplateInstance(instance);
+    }
+
+    instance = this.__createTemplateInstance(properties);
+    element.__templateInstance = instance;
     element.innerHTML = '';
-    element.__templateInstance = templateInstance;
-    element.appendChild(templateInstance.root);
+    element.appendChild(instance.root);
   }
 
+  /** @private */
   __updateProperties(instance, properties) {
@@ -51,5 +62,7 @@ // The Polymer uses `===` to check whether a property is changed and should be re-rendered.
 
+    instance.__properties = properties;
     instance.setProperties(properties);
   }
 
+  /** @private */
   __createTemplateInstance(properties) {
@@ -59,6 +72,30 @@ this.__createTemplateClass(properties);
     const instance = new this.__TemplateClass(properties);
+    instance.__properties = properties;
+
     this.__templateInstances.add(instance);
+
     return instance;
   }
 
+  /** @private */
+  __disposeOfTemplateInstance(instance) {
+    this.__templateInstances.delete(instance);
+  }
+
+  /** @private */
+  __hasTemplateInstance(instance) {
+    return this.__templateInstances.has(instance);
+  }
+
+  /** @private */
+  __isTemplateInstanceAttachedToDOM(instance) {
+    // The edge-case case when the template is empty
+    if (instance.children.length === 0) {
+      return false;
+    }
+
+    return !!instance.children[0].parentElement;
+  }
+
+  /** @private */
   __createTemplateClass(properties) {
@@ -82,2 +119,17 @@ if (this.__TemplateClass) return;
         });
+      },
+
+      notifyInstanceProp(instance, path, value) {
+        let rootProperty;
+
+        // Extracts the root property name from the path
+        rootProperty = path.split('.')[0];
+        // Capitalizes the property name
+        rootProperty = rootProperty[0].toUpperCase() + rootProperty.slice(1);
+
+        const callback = `_on${rootProperty}PropertyChanged`;
+
+        if (this[callback]) {
+          this[callback](instance, path, value);
+        }
       }
@@ -84,0 +136,0 @@ });

src/vaadin-template-renderer.js

 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 
 import './vaadin-template-renderer-templatizer.js';
+import './vaadin-template-renderer-grid-templatizer.js';
+
 import { Templatizer } from './vaadin-template-renderer-templatizer.js';
+import { GridTemplatizer } from './vaadin-template-renderer-grid-templatizer.js';
 
-function createRenderer(template) {
-  const templatizer = Templatizer.create(template);
+function createRenderer(component, template, TemplatizerClass = Templatizer) {
+  const templatizer = TemplatizerClass.create(component, template);
 
-  return (root, _owner, model) => {
-    template.__templatizer = templatizer;
-    template.__templatizer.render(root, model);
+  const renderer = (root, _owner, model) => {
+    templatizer.render(root, model);
   };
+
+  template.__templatizer = templatizer;
+
+  return renderer;
 }
 
+function processGridTemplate(grid, template) {
+  if (template.matches('.row-details')) {
+    grid.rowDetailsRenderer = createRenderer(grid, template, GridTemplatizer);
+    return;
+  }
+}
+
+function processGridColumnTemplate(column, template) {
+  if (template.matches('.header')) {
+    column.headerRenderer = createRenderer(column, template);
+    return;
+  }
+
+  if (template.matches('.footer')) {
+    column.footerRenderer = createRenderer(column, template);
+    return;
+  }
+
+  if (template.matches('.editor')) {
+    column.editModeRenderer = createRenderer(column, template, GridTemplatizer);
+    return;
+  }
+
+  column.renderer = createRenderer(column, template, GridTemplatizer);
+}
+
 function processTemplate(component, template) {
-  component.renderer = createRenderer(template);
+  if (component.__gridElement) {
+    processGridTemplate(component, template);
+    return;
+  }
+
+  if (component.__gridColumnElement) {
+    processGridColumnTemplate(component, template);
+    return;
+  }
+
+  component.renderer = createRenderer(component, template);
 }
@@ -29,3 +71,2 @@
       }
-
       processTemplate(component, template);
@@ -32,0 +73,0 @@ });

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

Improved metrics

Total package byte prevSize

10881

increased by101.24%

Number of package files

6

increased by20%

Lines of code

273

increased by160%

Worsened metrics

Dev dependency count

5

increased by150%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes