feat: throw when using both a template and a renderer

Author: vursen

packages/vaadin-template-renderer/src/vaadin-template-renderer.js

@@ -14,34 +14,52 @@ function createRenderer(component, template, TemplatizerClass = Templatizer) {
   };
 
   template.__templatizer = templatizer;
+  renderer.__templatized = true;
 
   return renderer;
 }
 
+function assignRenderer(component, rendererName, renderer) {
+  const oldRenderer = component[rendererName];
+
+  if (oldRenderer && !oldRenderer.__templatized) {
+    const tag = component.localName;
+
+    throw new Error(`Cannot use both a template and a renderer for <${tag} />.`);
+  }
+
+  component[rendererName] = renderer;
+}
+
 function processGridTemplate(grid, template) {
   if (template.matches('.row-details')) {
-    grid.rowDetailsRenderer = createRenderer(grid, template, GridTemplatizer);
+    const renderer = createRenderer(grid, template, GridTemplatizer);
+    assignRenderer(grid, 'rowDetailsRenderer', renderer);
     return;
   }
 }
 
 function processGridColumnTemplate(column, template) {
   if (template.matches('.header')) {
-    column.headerRenderer = createRenderer(column, template);
+    const renderer = createRenderer(column, template);
+    assignRenderer(column, 'headerRenderer', renderer);
     return;
   }
 
   if (template.matches('.footer')) {
-    column.footerRenderer = createRenderer(column, template);
+    const renderer = createRenderer(column, template);
+    assignRenderer(column, 'footerRenderer', renderer);
     return;
   }
 
   if (template.matches('.editor')) {
-    column.editModeRenderer = createRenderer(column, template, GridTemplatizer);
+    const renderer = createRenderer(column, template, GridTemplatizer);
+    assignRenderer(column, 'editModeRenderer', renderer);
     return;
   }
 
-  column.renderer = createRenderer(column, template, GridTemplatizer);
+  const renderer = createRenderer(column, template, GridTemplatizer);
+  assignRenderer(column, 'renderer', renderer);
 }
 
 function processTemplate(component, template) {
@@ -55,7 +73,8 @@ function processTemplate(component, template) {
     return;
   }
 
-  component.renderer = createRenderer(component, template);
+  const renderer = createRenderer(component, template);
+  assignRenderer(component, 'renderer', renderer);
 }
 
 function processTemplates(component) {

packages/vaadin-template-renderer/test/fixtures/mock-component.js

@@ -6,7 +6,9 @@ export class MockComponent extends HTMLElement {
   }
 
   connectedCallback() {
-    window.Vaadin.templateRendererCallback?.(this);
+    if (this.getAttribute('disable-template-renderer-callback') === null) {
+      window.Vaadin.templateRendererCallback(this);
+    }
   }
 
   get $() {
@@ -20,6 +22,10 @@ export class MockComponent extends HTMLElement {
     this.render();
   }
 
+  get renderer() {
+    return this.__renderer;
+  }
+
   render() {
     this.__renderer?.(this.$.content);
   }

packages/vaadin-template-renderer/test/vaadin-template-renderer.test.js

@@ -71,6 +71,20 @@ describe('vaadin-template-renderer', () => {
     });
   });
 
+  it('should throw when using both a template and a renderer', () => {
+    const component = fixtureSync(`
+      <mock-component disable-template-renderer-callback>
+        <template>foo</template>
+      </mock-component>
+    `);
+
+    component.renderer = () => {};
+
+    expect(() => window.Vaadin.templateRendererCallback(component)).to.throw(
+      /^Cannot use both a template and a renderer for <mock-component \/>\.$/
+    );
+  });
+
   it('should not process non-child templates', () => {
     const component = fixtureSync(`
       <mock-component>