feat: warn if using legacy Template API

packages/vaadin-combo-box/src/vaadin-combo-box-mixin.js

@@ -7,6 +7,7 @@ import { timeOut } from '@polymer/polymer/lib/utils/async.js';
 import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
 import { flush } from '@polymer/polymer/lib/utils/flush.js';
 import { IronA11yAnnouncer } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
+import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
 import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
 
 /**
@@ -300,9 +301,7 @@ export const ComboBoxMixin = (subclass) =>
       this.addEventListener('mousedown', bringToFrontListener);
       this.addEventListener('touchstart', bringToFrontListener);
 
-      if (window.Vaadin && window.Vaadin.templateRendererCallback) {
-        window.Vaadin.templateRendererCallback(this);
-      }
+      processTemplates(this);
     }
 
     /**

packages/vaadin-context-menu/src/vaadin-context-menu.js

@@ -8,6 +8,7 @@ import { gestures, addListener, removeListener } from '@polymer/polymer/lib/util
 import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
 import { ItemsMixin } from './vaadin-contextmenu-items-mixin.js';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import './vaadin-contextmenu-event.js';
 import './vaadin-device-detector.js';
@@ -354,9 +355,7 @@ class ContextMenuElement extends ElementMixin(ThemePropertyMixin(ItemsMixin(Gest
   ready() {
     super.ready();
 
-    if (window.Vaadin && window.Vaadin.templateRendererCallback) {
-      window.Vaadin.templateRendererCallback(this);
-    }
+    processTemplates(this);
   }
 
   /**

packages/vaadin-dialog/src/vaadin-dialog.js

@@ -8,6 +8,7 @@ import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-res
 import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
@@ -278,9 +279,7 @@ class DialogElement extends ThemePropertyMixin(
     this.$.overlay.addEventListener('vaadin-overlay-outside-click', this._handleOutsideClick.bind(this));
     this.$.overlay.addEventListener('vaadin-overlay-escape-press', this._handleEscPress.bind(this));
 
-    if (window.Vaadin && window.Vaadin.templateRendererCallback) {
-      window.Vaadin.templateRendererCallback(this);
-    }
+    processTemplates(this);
   }
 
   /**

packages/vaadin-element-mixin/package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.1.5",
+    "@vaadin/testing-helpers": "0.2.1",
     "sinon": "^9.2.4"
   },
   "publishConfig": {

packages/vaadin-element-mixin/templates.js

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Passes the component to the template renderer callback if the template renderer is imported.
+ * Otherwise, if there is a template, it warns that the template renderer needs to be imported.
+ *
+ * @param {HTMLElement} component
+ */
+export function processTemplates(component) {
+  if (window.Vaadin && window.Vaadin.templateRendererCallback) {
+    window.Vaadin.templateRendererCallback(component);
+    return;
+  }
+
+  if (component.querySelector('template')) {
+    console.warn(
+      `WARNING: <template> inside <${component.localName}> is no longer supported. Import @vaadin/vaadin-template-renderer to enable compatibility (see https://vaad.in/template-renderer)`
+    );
+  }
+}

packages/vaadin-element-mixin/test/templates.test.js

@@ -0,0 +1,71 @@
+import sinon from 'sinon';
+import { fixtureSync } from '@vaadin/testing-helpers';
+import { expect } from '@esm-bundle/chai';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import { processTemplates } from '../templates.js';
+
+class ComponentElement extends PolymerElement {
+  static get is() {
+    return 'component-element';
+  }
+
+  ready() {
+    super.ready();
+
+    processTemplates(this);
+  }
+}
+
+customElements.define(ComponentElement.is, ComponentElement);
+
+describe('process templates', () => {
+  beforeEach(() => {
+    sinon.stub(console, 'warn');
+  });
+
+  afterEach(() => {
+    console.warn.restore();
+  });
+
+  describe('with template renderer', () => {
+    beforeEach(() => {
+      window.Vaadin = window.Vaadin || {};
+      window.Vaadin.templateRendererCallback = sinon.spy();
+    });
+
+    afterEach(() => {
+      window.Vaadin.templateRendererCallback = undefined;
+    });
+
+    it('should invoke the template renderer callback', () => {
+      const component = fixtureSync(`
+        <component-element>
+          <template></template>
+        </component-element>
+      `);
+
+      expect(window.Vaadin.templateRendererCallback.calledOnce).to.be.true;
+      expect(window.Vaadin.templateRendererCallback.args[0][0]).to.equal(component);
+    });
+
+    it('should not show the deprecation warning', () => {
+      expect(console.warn.called).to.be.false;
+    });
+  });
+
+  describe('without template renderer', () => {
+    it('should show the deprecation warning', () => {
+      fixtureSync(`
+        <component-element>
+          <template></template>
+        </component-element>
+      `);
+
+      expect(console.warn.calledOnce).to.be.true;
+      expect(console.warn.args[0][0]).to.equal(
+        `WARNING: <template> inside <component-element> is no longer supported. Import @vaadin/vaadin-template-renderer to enable compatibility (see https://vaad.in/template-renderer)`
+      );
+    });
+  });
+});

packages/vaadin-grid-pro/test/grid-pro.test.js

@@ -2,6 +2,7 @@ import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
 import { GridElement } from '@vaadin/vaadin-grid/src/vaadin-grid.js';
 import { GridColumnElement } from '@vaadin/vaadin-grid/src/vaadin-grid-column.js';
+import '@vaadin/vaadin-template-renderer';
 import { fixtureSync } from '@vaadin/testing-helpers';
 import { flushGrid, infiniteDataProvider } from './helpers.js';
 import '../vaadin-grid-pro.js';

packages/vaadin-grid/src/vaadin-grid-column.js

@@ -5,6 +5,7 @@
  */
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';
+import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
 import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
 import { animationFrame } from '@polymer/polymer/lib/utils/async.js';
 
@@ -229,9 +230,7 @@ export const ColumnBaseMixin = (superClass) =>
     ready() {
       super.ready();
 
-      if (window.Vaadin && window.Vaadin.templateRendererCallback) {
-        window.Vaadin.templateRendererCallback(this);
-      }
+      processTemplates(this);
     }
 
     /**

packages/vaadin-grid/src/vaadin-grid.js

@@ -7,6 +7,7 @@ import { beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
 import { animationFrame } from '@polymer/polymer/lib/utils/async.js';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import { A11yMixin } from './vaadin-grid-a11y-mixin.js';
@@ -473,9 +474,7 @@ class GridElement extends ElementMixin(
 
     new ResizeObserver(() => setTimeout(() => this.__updateFooterPositioning())).observe(this.$.footer);
 
-    if (window.Vaadin && window.Vaadin.templateRendererCallback) {
-      window.Vaadin.templateRendererCallback(this);
-    }
+    processTemplates(this);
   }
 
   /**

packages/vaadin-notification/src/vaadin-notification.js

@@ -5,6 +5,7 @@
  */
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 
@@ -311,9 +312,7 @@ class NotificationElement extends ThemePropertyMixin(ElementMixin(PolymerElement
 
     this._card = this.shadowRoot.querySelector('vaadin-notification-card');
 
-    if (window.Vaadin && window.Vaadin.templateRendererCallback) {
-      window.Vaadin.templateRendererCallback(this);
-    }
+    processTemplates(this);
   }
 
   /**

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

@@ -47,16 +47,6 @@ describe('renderer', () => {
       };
     });
 
-    it('should remove template when added after renderer', () => {
-      notification.renderer = () => {};
-      const template = document.createElement('template');
-      expect(() => {
-        notification.appendChild(template);
-        notification._observer.flush();
-      }).to.throw(Error);
-      expect(notification._notificationTemplate).to.be.not.ok;
-    });
-
     it('should be possible to manually invoke renderer', () => {
       notification.renderer = sinon.spy();
       notification.opened = true;

packages/vaadin-select/src/vaadin-select.js

@@ -10,6 +10,7 @@ import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-con
 import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import '@polymer/iron-media-query/iron-media-query.js';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
 import './vaadin-select-overlay.js';
 import './vaadin-select-text-field.js';
 const $_documentContainer = document.createElement('template');
@@ -360,9 +361,7 @@ class SelectElement extends ElementMixin(
     this.focusElement.addEventListener('click', () => (this.opened = !this.readonly));
     this.focusElement.addEventListener('keydown', (e) => this._onKeyDown(e));
 
-    if (window.Vaadin && window.Vaadin.templateRendererCallback) {
-      window.Vaadin.templateRendererCallback(this);
-    }
+    processTemplates(this);
   }
 
   /**

packages/vaadin-time-picker/src/vaadin-time-picker.js

@@ -85,15 +85,13 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
       </style>
       <vaadin-combo-box-light
         allow-custom-value=""
-        item-label-path="value"
         filtered-items="[[__dropdownItems]]"
         disabled="[[disabled]]"
         readonly="[[readonly]]"
         auto-open-disabled="[[autoOpenDisabled]]"
         dir="ltr"
         theme$="[[theme]]"
       >
-        <template> [[item.label]] </template>
         <vaadin-time-picker-text-field
           class="input"
           name="[[name]]"

packages/vaadin-virtual-list/src/vaadin-virtual-list.js

@@ -6,6 +6,7 @@
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
 import { Virtualizer } from './virtualizer.js';
 
 /**
@@ -107,9 +108,7 @@ class VirtualListElement extends ElementMixin(ThemableMixin(PolymerElement)) {
       scrollContainer: this.shadowRoot.querySelector('#items')
     });
 
-    if (window.Vaadin && window.Vaadin.templateRendererCallback) {
-      window.Vaadin.templateRendererCallback(this);
-    }
+    processTemplates(this);
   }
 
   /**