Adds nested lookup in angle bracket invocation syntax

See emberjs/rfcs#457 for RFC. This feature is added beind the EMBER_GIMMER_ANGLE_BRACKET_NESTED_LOOKUP feature flag.
emberjs · Mar 8, 2019 · b48a101 · b48a101
1 parent 4cad151
commit b48a101
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 4 deletions.
diff --git a/...s/@ember/-internals/glimmer/tests/integration/components/angle-bracket-invocation-test.js b/...s/@ember/-internals/glimmer/tests/integration/components/angle-bracket-invocation-test.js
@@ -1,6 +1,9 @@
 import { moduleFor, RenderingTestCase, strip, classes, runTask } from 'internal-test-helpers';
 
-import { EMBER_GLIMMER_ANGLE_BRACKET_INVOCATION } from '@ember/canary-features';
+import {
+  EMBER_GLIMMER_ANGLE_BRACKET_INVOCATION,
+  EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP,
+} from '@ember/canary-features';
 import { set } from '@ember/-internals/metal';
 
 import { Component } from '../../utils/helpers';
@@ -1021,3 +1024,22 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_INVOCATION) {
     }
   );
 }
+
+if (EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP) {
+  moduleFor(
+    'AngleBracket Invocation Nested Lookup',
+    class extends RenderingTestCase {
+      '@test it can resolve <Foo::Bar::BazBing /> to foo/bar/baz-bing'() {
+        this.registerComponent('foo/bar/baz-bing', { template: 'hello' });
+
+        this.render('<Foo::Bar::BazBing />');
+
+        this.assertComponentElement(this.firstChild, { content: 'hello' });
+
+        runTask(() => this.rerender());
+
+        this.assertComponentElement(this.firstChild, { content: 'hello' });
+      }
+    }
+  );
+}
diff --git a/packages/@ember/canary-features/index.ts b/packages/@ember/canary-features/index.ts
@@ -23,6 +23,7 @@ export const DEFAULT_FEATURES = {
   GLIMMER_MODIFIER_MANAGER: true,
   EMBER_METAL_TRACKED_PROPERTIES: null,
   EMBER_GLIMMER_ANGLE_BRACKET_INVOCATION: true,
+  EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP: null,
   EMBER_GLIMMER_ARRAY_HELPER: true,
   EMBER_ROUTING_BUILD_ROUTEINFO_METADATA: true,
   EMBER_NATIVE_DECORATOR_SUPPORT: null,
@@ -87,6 +88,9 @@ export const GLIMMER_CUSTOM_COMPONENT_MANAGER = featureValue(
 export const EMBER_GLIMMER_ANGLE_BRACKET_INVOCATION = featureValue(
   FEATURES.EMBER_GLIMMER_ANGLE_BRACKET_INVOCATION
 );
+export const EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP = featureValue(
+  FEATURES.EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP
+);
 export const GLIMMER_MODIFIER_MANAGER = featureValue(FEATURES.GLIMMER_MODIFIER_MANAGER);
 export const EMBER_GLIMMER_ARRAY_HELPER = featureValue(FEATURES.EMBER_GLIMMER_ARRAY_HELPER);
 

diff --git a/packages/ember-template-compiler/lib/system/dasherize-component-name.ts b/packages/ember-template-compiler/lib/system/dasherize-component-name.ts
@@ -1,13 +1,23 @@
 import { Cache } from '@ember/-internals/utils';
+import { EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP } from '@ember/canary-features';
 
 /*
   This diverges from `Ember.String.dasherize` so that`<XFoo />` can resolve to `x-foo`.
   `Ember.String.dasherize` would resolve it to `xfoo`..
 */
-const SIMPLE_DASHERIZE_REGEXP = /[A-Z]/g;
+const SIMPLE_DASHERIZE_REGEXP = /[A-Z]|::/g;
 const ALPHA = /[A-Za-z0-9]/;
+
 export default new Cache<string, string>(1000, key =>
   key.replace(SIMPLE_DASHERIZE_REGEXP, (char, index) => {
+    if (char === '::') {
+      if (EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP) {
+        return '/';
+      } else {
+        return char;
+      }
+    }
+
     if (index === 0 || !ALPHA.test(key[index - 1])) {
       return char.toLowerCase();
     }

diff --git a/packages/ember-template-compiler/tests/system/dasherize-component-name-test.js b/packages/ember-template-compiler/tests/system/dasherize-component-name-test.js
@@ -1,5 +1,6 @@
 import COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE from '../../lib/system/dasherize-component-name';
 import { moduleFor, AbstractTestCase } from 'internal-test-helpers';
+import { EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP } from '@ember/canary-features';
 
 moduleFor(
   'dasherize-component-name',
@@ -14,10 +15,19 @@ moduleFor(
       assert.equal(COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get('FooB3ar'), 'foo-b3ar');
       assert.equal(COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get('XBlah'), 'x-blah');
       assert.equal(COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get('X-Blah'), 'x-blah');
-      assert.equal(COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get('Foo::BarBaz'), 'foo::bar-baz');
-      assert.equal(COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get('Foo::Bar-Baz'), 'foo::bar-baz');
       assert.equal(COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get('Foo@BarBaz'), 'foo@bar-baz');
       assert.equal(COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get('Foo@Bar-Baz'), 'foo@bar-baz');
+      if (EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP) {
+        assert.equal(COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get('Foo::BarBaz'), 'foo/bar-baz');
+        assert.equal(COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get('Foo::Bar-Baz'), 'foo/bar-baz');
+        assert.equal(
+          COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get('Foo::BarBaz::Bang'),
+          'foo/bar-baz/bang'
+        );
+      } else {
+        assert.equal(COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get('Foo::BarBaz'), 'foo::bar-baz');
+        assert.equal(COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get('Foo::Bar-Baz'), 'foo::bar-baz');
+      }
     }
   }
 );