FEATURE in-element] Add EMBER_GLIMMER_IN_ELEMENT feature flag

emberjs · Apr 11, 2020 · 457b5a1 · 457b5a1
1 parent 48112f9
commit 457b5a1
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 33 deletions.
diff --git a/packages/@ember/-internals/glimmer/tests/integration/syntax/deprecated-in-element-test.js b/packages/@ember/-internals/glimmer/tests/integration/syntax/deprecated-in-element-test.js
@@ -1,15 +1,27 @@
 import { moduleFor, RenderingTestCase, strip, equalTokens, runTask } from 'internal-test-helpers';
-
 import { Component } from '@ember/-internals/glimmer';
 import { set } from '@ember/-internals/metal';
+import { EMBER_GLIMMER_IN_ELEMENT } from '@ember/canary-features';
 
 const deprecationMessage = /The use of the private `{{-in-element}}` is deprecated, please refactor to the public `{{in-element}}`/;
 
 moduleFor(
   '{{-in-element}}',
   class extends RenderingTestCase {
+    ['@feature(!EMBER_GLIMMER_IN_ELEMENT) using {{#in-element whatever}} asserts']() {
+      // the in-element keyword is not yet public API this test should be removed
+      // once https://github.com/emberjs/rfcs/pull/287 lands and is enabled
+
+      let el = document.createElement('div');
+      expectAssertion(() => {
+        this.render(strip`{{#in-element el}}{{/in-element}}`, { el });
+      }, /The {{in-element}} helper cannot be used. \('-top-level' @ L1:C0\)/);
+    }
+
     ['@test allows rendering into an external element']() {
-      expectDeprecation(deprecationMessage);
+      if (EMBER_GLIMMER_IN_ELEMENT) {
+        expectDeprecation(deprecationMessage);
+      }
 
       let someElement = document.createElement('div');
 
@@ -42,7 +54,9 @@ moduleFor(
     }
 
     ['@test it appends to the external element by default']() {
-      expectDeprecation(deprecationMessage);
+      if (EMBER_GLIMMER_IN_ELEMENT) {
+        expectDeprecation(deprecationMessage);
+      }
 
       let someElement = document.createElement('div');
       someElement.appendChild(document.createTextNode('foo '));
@@ -76,7 +90,9 @@ moduleFor(
     }
 
     ['@test allows appending to the external element with insertBefore=null']() {
-      expectDeprecation(deprecationMessage);
+      if (EMBER_GLIMMER_IN_ELEMENT) {
+        expectDeprecation(deprecationMessage);
+      }
 
       let someElement = document.createElement('div');
       someElement.appendChild(document.createTextNode('foo '));
@@ -110,7 +126,9 @@ moduleFor(
     }
 
     ['@test allows clearing the external element with insertBefore=undefined']() {
-      expectDeprecation(deprecationMessage);
+      if (EMBER_GLIMMER_IN_ELEMENT) {
+        expectDeprecation(deprecationMessage);
+      }
 
       let someElement = document.createElement('div');
       someElement.appendChild(document.createTextNode('foo '));
@@ -144,7 +162,9 @@ moduleFor(
     }
 
     ['@test does not allow insertBefore=non-null-value']() {
-      expectDeprecation(deprecationMessage);
+      if (EMBER_GLIMMER_IN_ELEMENT) {
+        expectDeprecation(deprecationMessage);
+      }
 
       let someElement = document.createElement('div');
 
@@ -164,7 +184,9 @@ moduleFor(
     }
 
     ['@test components are cleaned up properly'](assert) {
-      expectDeprecation(deprecationMessage);
+      if (EMBER_GLIMMER_IN_ELEMENT) {
+        expectDeprecation(deprecationMessage);
+      }
 
       let hooks = [];
 
@@ -234,7 +256,9 @@ moduleFor(
     }
 
     ['@test appending to the root element should not cause double clearing']() {
-      expectDeprecation(deprecationMessage);
+      if (EMBER_GLIMMER_IN_ELEMENT) {
+        expectDeprecation(deprecationMessage);
+      }
 
       this.render(
         strip`

diff --git a/packages/@ember/-internals/glimmer/tests/integration/syntax/public-in-element-test.js b/packages/@ember/-internals/glimmer/tests/integration/syntax/public-in-element-test.js
@@ -6,7 +6,7 @@ import { set } from '@ember/-internals/metal';
 moduleFor(
   '{{in-element}}',
   class extends RenderingTestCase {
-    ['@test allows rendering into an external element']() {
+    ['@feature(EMBER_GLIMMER_IN_ELEMENT) allows rendering into an external element']() {
       let someElement = document.createElement('div');
 
       this.render(
@@ -37,7 +37,7 @@ moduleFor(
       equalTokens(someElement, 'Whoop!');
     }
 
-    ["@test it replaces the external element's content by default"]() {
+    ["@feature(EMBER_GLIMMER_IN_ELEMENT) it replaces the external element's content by default"]() {
       let someElement = document.createElement('div');
       someElement.appendChild(document.createTextNode('foo '));
 
@@ -69,7 +69,7 @@ moduleFor(
       equalTokens(someElement, 'bar');
     }
 
-    ['@test allows appending to the external element with insertBefore=null']() {
+    ['@feature(EMBER_GLIMMER_IN_ELEMENT) allows appending to the external element with insertBefore=null']() {
       let someElement = document.createElement('div');
       someElement.appendChild(document.createTextNode('foo '));
 
@@ -101,7 +101,7 @@ moduleFor(
       equalTokens(someElement, 'foo bar');
     }
 
-    ['@test does not allow insertBefore=non-null-value']() {
+    ['@feature(EMBER_GLIMMER_IN_ELEMENT) does not allow insertBefore=non-null-value']() {
       let someElement = document.createElement('div');
 
       expectAssertion(() => {
@@ -119,7 +119,7 @@ moduleFor(
       }, /Can only pass null to insertBefore in in-element, received:/);
     }
 
-    ['@test components are cleaned up properly'](assert) {
+    ['@feature(EMBER_GLIMMER_IN_ELEMENT) components are cleaned up properly'](assert) {
       let hooks = [];
 
       let someElement = document.createElement('div');
@@ -187,7 +187,7 @@ moduleFor(
       assert.deepEqual(hooks, ['didInsertElement', 'willDestroyElement']);
     }
 
-    ['@test appending to the root element should not cause double clearing']() {
+    ['@feature(EMBER_GLIMMER_IN_ELEMENT) appending to the root element should not cause double clearing']() {
       this.render(
         strip`
           Before

diff --git a/packages/@ember/canary-features/index.ts b/packages/@ember/canary-features/index.ts
@@ -20,6 +20,7 @@ export const DEFAULT_FEATURES = {
   EMBER_CUSTOM_COMPONENT_ARG_PROXY: true,
   EMBER_GLIMMER_SET_COMPONENT_TEMPLATE: true,
   EMBER_ROUTING_MODEL_ARG: true,
+  EMBER_GLIMMER_IN_ELEMENT: null,
 };
 
 /**
@@ -79,3 +80,4 @@ export const EMBER_GLIMMER_SET_COMPONENT_TEMPLATE = featureValue(
   FEATURES.EMBER_GLIMMER_SET_COMPONENT_TEMPLATE
 );
 export const EMBER_ROUTING_MODEL_ARG = featureValue(FEATURES.EMBER_ROUTING_MODEL_ARG);
+export const EMBER_GLIMMER_IN_ELEMENT = featureValue(FEATURES.EMBER_GLIMMER_IN_ELEMENT);
diff --git a/packages/ember-template-compiler/lib/plugins/transform-in-element.ts b/packages/ember-template-compiler/lib/plugins/transform-in-element.ts
@@ -1,4 +1,5 @@
 import { StaticTemplateMeta } from '@ember/-internals/views';
+import { EMBER_GLIMMER_IN_ELEMENT } from '@ember/canary-features';
 import { assert, deprecate } from '@ember/debug';
 import { AST, ASTPlugin, ASTPluginEnvironment } from '@glimmer/syntax';
 import calculateLocationDisplay from '../system/calculate-location-display';
@@ -54,26 +55,32 @@ export default function transformInElement(env: ASTPluginEnvironment): ASTPlugin
         if (!isPath(node.path)) return;
 
         if (node.path.original === 'in-element') {
-          node.hash.pairs.forEach(pair => {
-            if (pair.key === 'insertBefore') {
-              assert(
-                `Can only pass null to insertBefore in in-element, received: ${JSON.stringify(
-                  pair.value
-                )}`,
-                pair.value.type === 'NullLiteral' || pair.value.type === 'UndefinedLiteral'
-              );
-            }
-          });
+          if (EMBER_GLIMMER_IN_ELEMENT) {
+            node.hash.pairs.forEach(pair => {
+              if (pair.key === 'insertBefore') {
+                assert(
+                  `Can only pass null to insertBefore in in-element, received: ${JSON.stringify(
+                    pair.value
+                  )}`,
+                  pair.value.type === 'NullLiteral' || pair.value.type === 'UndefinedLiteral'
+                );
+              }
+            });
+          } else {
+            assert(assertMessage(moduleName, node));
+          }
         } else if (node.path.original === '-in-element') {
-          let sourceInformation = calculateLocationDisplay(moduleName, node.loc);
-          deprecate(
-            `The use of the private \`{{-in-element}}\` is deprecated, please refactor to the public \`{{in-element}}\`. ${sourceInformation}`,
-            false,
-            {
-              id: 'glimmer.private-in-element',
-              until: '4.0.0',
-            }
-          );
+          if (EMBER_GLIMMER_IN_ELEMENT) {
+            let sourceInformation = calculateLocationDisplay(moduleName, node.loc);
+            deprecate(
+              `The use of the private \`{{-in-element}}\` is deprecated, please refactor to the public \`{{in-element}}\`. ${sourceInformation}`,
+              false,
+              {
+                id: 'glimmer.private-in-element',
+                until: '4.0.0',
+              }
+            );
+          }
 
           node.path.original = 'in-element';
           node.path.parts = ['in-element'];
@@ -110,3 +117,9 @@ export default function transformInElement(env: ASTPluginEnvironment): ASTPlugin
     },
   };
 }
+
+function assertMessage(moduleName: string, node: AST.BlockStatement) {
+  let sourceInformation = calculateLocationDisplay(moduleName, node.loc);
+
+  return `The {{in-element}} helper cannot be used. ${sourceInformation}`;
+}