Apply LegacyDataMixin to TemplatizeInstanceBase. Fixes #5422

Polymer · Nov 2, 2018 · 6dd3456 · 6dd3456
1 parent 1ad496f
commit 6dd3456
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 3 deletions.
diff --git a/lib/legacy/legacy-data-mixin.js b/lib/legacy/legacy-data-mixin.js
@@ -11,6 +11,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 import { Class } from './class.js';
 import { Polymer } from '../../polymer-legacy.js';
 import { dedupingMixin } from '../utils/mixin.js';
+import { templatize } from '../utils/templatize.js';
 
 const UndefinedArgumentError = class extends Error {
   constructor(message, arg) {
@@ -149,5 +150,14 @@ Polymer.Class = (info, mixin) => Class(info,
     LegacyDataMixin(superClass)
 );
 
+// Apply LegacyDataMixin to Templatizer instances as well, and defer
+// runtime switch to the root's host (_methodHost)
+templatize.mixin = 
+  dedupingMixin(superClass => class extends LegacyDataMixin(superClass) {
+    get _legacyUndefinedCheck() {
+      return this._methodHost && this._methodHost._legacyUndefinedCheck;
+    }
+  });
+
 console.info('LegacyDataMixin will be applied to all legacy elements.\n' +
               'Set `_legacyUndefinedCheck: true` on element class to enable.');
diff --git a/lib/utils/templatize.js b/lib/utils/templatize.js
@@ -334,6 +334,10 @@ function createTemplatizerClass(template, templateInfo, options) {
   // Anonymous class created by the templatize
   let base = options.mutableData ?
     MutableTemplateInstanceBase : TemplateInstanceBase;
+    // Affordance for global mixins onto TemplatizeInstance
+    if (templatize.mixin) {
+      base = templatize.mixin(base);
+    }
   /**
    * @constructor
    * @extends {base}

diff --git a/test/unit/legacy-data.html b/test/unit/legacy-data.html
@@ -24,6 +24,9 @@
       <div id="child"
         computed-single="[[computeSingle(inlineSingleDep)]]"
         computed-multi="[[computeMulti(inlineMultiDep1, inlineMultiDep2)]]">
+        <dom-if if>
+          <template><div id="ifChild" computed-multi="[[computeMulti(inlineMultiIfDep1, inlineMultiIfDep2)]]"></div></template>
+        </dom-if>
       </div>
     </template>
     <script type="module">
@@ -41,6 +44,8 @@
           inlineSingleDep: String,
           inlineMultiDep1: String,
           inlineMultiDep2: String,
+          inlineMultiIfDep1: String,
+          inlineMultiIfDep2: String,
           computedSingle: {
             computed: 'computeSingle(computedSingleDep)'
           },
@@ -128,8 +133,20 @@
     </template>
   </test-fixture>
 
-  <script>
-  (function() {
+  <test-fixture id="declarative-multi-if-one-computed-inline">
+    <template>
+      <x-data inline-multi-if-dep1="b"></x-data>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="declarative-multi-if-all-computed-inline">
+    <template>
+      <x-data inline-multi-if-dep1="b" inline-multi-if-dep2="c"></x-data>
+    </template>
+  </test-fixture>
+
+  <script type="module">
+    import {flush} from '../../lib/utils/flush.js';
 
     let el;
 
@@ -156,6 +173,7 @@
         el._legacyUndefinedCheck = check;
         Object.assign(el, props);
         document.body.appendChild(el);
+        flush();
       }
 
       teardown(() => {
@@ -172,6 +190,8 @@
       const inlineSingleDep = 'inlineSingleDep';
       const inlineMultiDep1 = 'inlineMultiDep1';
       const inlineMultiDep2 = 'inlineMultiDep2';
+      const inlineMultiIfDep1 = 'inlineMultiIfDep1';
+      const inlineMultiIfDep2 = 'inlineMultiIfDep2';
 
       suite('check disabled', () => {
         test('no arguments defined', () => {
@@ -240,6 +260,16 @@
           assertEffects({computeMulti: 1});
           assert.equal(el.$.child.computedMulti, '[inlineMultiDep1,inlineMultiDep2]');
         });
+        test('one inline computeMulti argument defined in dom-if', () => {
+          setupElement(false, {inlineMultiIfDep1});
+          assertEffects({computeMulti: 1});
+          assert.equal(el.$$('#ifChild').computedMulti, '[inlineMultiIfDep1,undefined]');
+        });
+        test('all inline computeMulti argument defined in dom-if', () => {
+          setupElement(false, {inlineMultiIfDep1, inlineMultiIfDep2});
+          assertEffects({computeMulti: 1});
+          assert.equal(el.$$('#ifChild').computedMulti, '[inlineMultiIfDep1,inlineMultiIfDep2]');
+        });
       });
 
       suite('warn', () => {
@@ -309,6 +339,16 @@
           assertEffects({computeMulti: 1});
           assert.equal(el.$.child.computedMulti, '[inlineMultiDep1,inlineMultiDep2]');
         });
+        test('one inline computeMulti argument defined in dom-if', () => {
+          setupElement(true, {inlineMultiIfDep1});
+          assertEffects({warn: 1});
+          assert.equal(el.$$('#ifChild').computedMulti, undefined);
+        });
+        test('all inline computeMulti argument defined in dom-if', () => {
+          setupElement(true, {inlineMultiIfDep1, inlineMultiIfDep2});
+          assertEffects({computeMulti: 1});
+          assert.equal(el.$$('#ifChild').computedMulti, '[inlineMultiIfDep1,inlineMultiIfDep2]');
+        });
       });
     });
 
@@ -361,8 +401,21 @@
         });
         test('inline all computeMulti defined', () => {
           el = fixture('declarative-multi-all-computed-inline');
+          assertEffects({computeMulti: 1});
           assert.equal(el.$.child.computedMulti, '[b,c]');
         });
+        test('one inline computeMulti argument defined in dom-if', () => {
+          el = fixture('declarative-multi-if-one-computed-inline');
+          flush();
+          assertEffects({computeMulti: 0, warn: 1});
+          assert.equal(el.$$('#ifChild').computedMulti, undefined);
+        });
+        test('all inline computeMulti argument defined in dom-if', () => {
+          el = fixture('declarative-multi-if-all-computed-inline');
+          flush();
+          assertEffects({computeMulti: 1});
+          assert.equal(el.$$('#ifChild').computedMulti, '[b,c]');
+        });
       });
     });
 
@@ -377,7 +430,6 @@
       });
     });
 
-  })();
   </script>
 </body>
 </html>