Skip to content

Commit cad6f1a

Browse files
vursenvursen
authored
feat: warn if using legacy Template API (#2101)
* feat: add template helpers to element mixin * feat(vaadin-combo-box): warn when using legacy Template API * feat(vaadin-context-menu): warn when using legacy Template API * feat(vaadin-dialog): warn when using legacy Template API * feat(vaadin-grid): warn when using legacy Template API * feat(vaadin-notification): warn when using legacy Template API * feat(vaadin-select): warn when using legacy Template API * feat(vaadin-virtual-list): warn when using legacy Template API * test(vaadin-notification): remove no longer relevant test * test(vaadin-grid-pro): import template renderer in grid-pro test * fix(vaadin-time-picker): prevent warnings for internal templates * fix: address review's comments
1 parent 1ab3a80 commit cad6f1a

File tree

14 files changed

+113
-36
lines changed

14 files changed

+113
-36
lines changed

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { timeOut } from '@polymer/polymer/lib/utils/async.js';
77
import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
88
import { flush } from '@polymer/polymer/lib/utils/flush.js';
99
import { IronA11yAnnouncer } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
10+
import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
1011
import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
1112

1213
/**
@@ -300,9 +301,7 @@ export const ComboBoxMixin = (subclass) =>
300301
this.addEventListener('mousedown', bringToFrontListener);
301302
this.addEventListener('touchstart', bringToFrontListener);
302303

303-
if (window.Vaadin && window.Vaadin.templateRendererCallback) {
304-
window.Vaadin.templateRendererCallback(this);
305-
}
304+
processTemplates(this);
306305
}
307306

308307
/**

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { gestures, addListener, removeListener } from '@polymer/polymer/lib/util
88
import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
99
import { ItemsMixin } from './vaadin-contextmenu-items-mixin.js';
1010
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
11+
import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
1112
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
1213
import './vaadin-contextmenu-event.js';
1314
import './vaadin-device-detector.js';
@@ -354,9 +355,7 @@ class ContextMenuElement extends ElementMixin(ThemePropertyMixin(ItemsMixin(Gest
354355
ready() {
355356
super.ready();
356357

357-
if (window.Vaadin && window.Vaadin.templateRendererCallback) {
358-
window.Vaadin.templateRendererCallback(this);
359-
}
358+
processTemplates(this);
360359
}
361360

362361
/**

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-res
88
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
99
import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
1010
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
11+
import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
1112
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
1213
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
1314
import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
@@ -278,9 +279,7 @@ class DialogElement extends ThemePropertyMixin(
278279
this.$.overlay.addEventListener('vaadin-overlay-outside-click', this._handleOutsideClick.bind(this));
279280
this.$.overlay.addEventListener('vaadin-overlay-escape-press', this._handleEscPress.bind(this));
280281

281-
if (window.Vaadin && window.Vaadin.templateRendererCallback) {
282-
window.Vaadin.templateRendererCallback(this);
283-
}
282+
processTemplates(this);
284283
}
285284

286285
/**

‎packages/vaadin-element-mixin/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
},
3030
"devDependencies": {
3131
"@esm-bundle/chai": "^4.1.5",
32+
"@vaadin/testing-helpers": "0.2.1",
3233
"sinon": "^9.2.4"
3334
},
3435
"publishConfig": {

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2021 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
7+
/**
8+
* Passes the component to the template renderer callback if the template renderer is imported.
9+
* Otherwise, if there is a template, it warns that the template renderer needs to be imported.
10+
*
11+
* @param {HTMLElement} component
12+
*/
13+
export function processTemplates(component) {
14+
if (window.Vaadin && window.Vaadin.templateRendererCallback) {
15+
window.Vaadin.templateRendererCallback(component);
16+
return;
17+
}
18+
19+
if (component.querySelector('template')) {
20+
console.warn(
21+
`WARNING: <template> inside <${component.localName}> is no longer supported. Import @vaadin/vaadin-template-renderer to enable compatibility (see https://vaad.in/template-renderer)`
22+
);
23+
}
24+
}

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import sinon from 'sinon';
2+
import { fixtureSync } from '@vaadin/testing-helpers';
3+
import { expect } from '@esm-bundle/chai';
4+
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
5+
6+
import { processTemplates } from '../templates.js';
7+
8+
class ComponentElement extends PolymerElement {
9+
static get is() {
10+
return 'component-element';
11+
}
12+
13+
ready() {
14+
super.ready();
15+
16+
processTemplates(this);
17+
}
18+
}
19+
20+
customElements.define(ComponentElement.is, ComponentElement);
21+
22+
describe('process templates', () => {
23+
beforeEach(() => {
24+
sinon.stub(console, 'warn');
25+
});
26+
27+
afterEach(() => {
28+
console.warn.restore();
29+
});
30+
31+
describe('with template renderer', () => {
32+
beforeEach(() => {
33+
window.Vaadin = window.Vaadin || {};
34+
window.Vaadin.templateRendererCallback = sinon.spy();
35+
});
36+
37+
afterEach(() => {
38+
window.Vaadin.templateRendererCallback = undefined;
39+
});
40+
41+
it('should invoke the template renderer callback', () => {
42+
const component = fixtureSync(`
43+
<component-element>
44+
<template></template>
45+
</component-element>
46+
`);
47+
48+
expect(window.Vaadin.templateRendererCallback.calledOnce).to.be.true;
49+
expect(window.Vaadin.templateRendererCallback.args[0][0]).to.equal(component);
50+
});
51+
52+
it('should not show the deprecation warning', () => {
53+
expect(console.warn.called).to.be.false;
54+
});
55+
});
56+
57+
describe('without template renderer', () => {
58+
it('should show the deprecation warning', () => {
59+
fixtureSync(`
60+
<component-element>
61+
<template></template>
62+
</component-element>
63+
`);
64+
65+
expect(console.warn.calledOnce).to.be.true;
66+
expect(console.warn.args[0][0]).to.equal(
67+
`WARNING: <template> inside <component-element> is no longer supported. Import @vaadin/vaadin-template-renderer to enable compatibility (see https://vaad.in/template-renderer)`
68+
);
69+
});
70+
});
71+
});

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { expect } from '@esm-bundle/chai';
22
import sinon from 'sinon';
33
import { GridElement } from '@vaadin/vaadin-grid/src/vaadin-grid.js';
44
import { GridColumnElement } from '@vaadin/vaadin-grid/src/vaadin-grid-column.js';
5+
import '@vaadin/vaadin-template-renderer';
56
import { fixtureSync } from '@vaadin/testing-helpers';
67
import { flushGrid, infiniteDataProvider } from './helpers.js';
78
import '../vaadin-grid-pro.js';

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*/
66
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
77
import { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';
8+
import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
89
import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
910
import { animationFrame } from '@polymer/polymer/lib/utils/async.js';
1011

@@ -229,9 +230,7 @@ export const ColumnBaseMixin = (superClass) =>
229230
ready() {
230231
super.ready();
231232

232-
if (window.Vaadin && window.Vaadin.templateRendererCallback) {
233-
window.Vaadin.templateRendererCallback(this);
234-
}
233+
processTemplates(this);
235234
}
236235

237236
/**

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
77
import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
88
import { animationFrame } from '@polymer/polymer/lib/utils/async.js';
99
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
10+
import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
1011
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
1112
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
1213
import { A11yMixin } from './vaadin-grid-a11y-mixin.js';
@@ -473,9 +474,7 @@ class GridElement extends ElementMixin(
473474

474475
new ResizeObserver(() => setTimeout(() => this.__updateFooterPositioning())).observe(this.$.footer);
475476

476-
if (window.Vaadin && window.Vaadin.templateRendererCallback) {
477-
window.Vaadin.templateRendererCallback(this);
478-
}
477+
processTemplates(this);
479478
}
480479

481480
/**

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*/
66
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
77
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
8+
import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
89
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
910
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
1011

@@ -311,9 +312,7 @@ class NotificationElement extends ThemePropertyMixin(ElementMixin(PolymerElement
311312

312313
this._card = this.shadowRoot.querySelector('vaadin-notification-card');
313314

314-
if (window.Vaadin && window.Vaadin.templateRendererCallback) {
315-
window.Vaadin.templateRendererCallback(this);
316-
}
315+
processTemplates(this);
317316
}
318317

319318
/**

0 commit comments

Comments
 (0)