Merge pull request #19336 from emberjs/throw-on-invalid-lookup-syntax

[BUGFIX lts] Ensure Component Lookup Is Well Formed
emberjs · Jan 14, 2021 · 8f26b61 · 8f26b61
2 parents b18f67e + c874f15
commit 8f26b61
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/packages/ember-template-compiler/lib/system/compile-options.ts b/packages/ember-template-compiler/lib/system/compile-options.ts
@@ -1,4 +1,5 @@
 import { EMBER_STRICT_MODE } from '@ember/canary-features';
+import { assert } from '@ember/debug';
 import { assign } from '@ember/polyfills';
 import { PrecompileOptions } from '@glimmer/compiler';
 import { AST, ASTPlugin, ASTPluginEnvironment, Syntax } from '@glimmer/syntax';
@@ -8,6 +9,10 @@ import COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE from './dasherize-component-name';
 
 let USER_PLUGINS: PluginFunc[] = [];
 
+function malformedComponentLookup(string: string) {
+  return string.indexOf('::') === -1 && string.indexOf(':') > -1;
+}
+
 export default function compileOptions(
   _options: Partial<EmberPrecompileOptions> = {}
 ): PrecompileOptions {
@@ -16,6 +21,11 @@ export default function compileOptions(
     _options,
     {
       customizeComponentName(tagname: string): string {
+        assert(
+          `You tried to invoke a component named <${tagname} /> in "${_options.moduleName}", but that is not a valid name for a component. Did you mean to use the "::" syntax for nested components?`,
+          !malformedComponentLookup(tagname)
+        );
+
         return COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get(tagname);
       },
     }

diff --git a/packages/ember-template-compiler/tests/system/compile_options_test.js b/packages/ember-template-compiler/tests/system/compile_options_test.js
@@ -15,6 +15,16 @@ moduleFor(
       assert.notEqual(compileOptions(), compileOptions());
     }
 
+    ['@test customizeComponentName asserts name is well formed'](assert) {
+      let options = compileOptions({ moduleName: 'test.js' });
+
+      expectAssertion(() => {
+        options.customizeComponentName('Foo:Bar');
+      }, /You tried to invoke a component named <Foo:Bar \/> in "test.js", but that is not a valid name for a component. Did you mean to use the "::" syntax for nested components\?/);
+
+      assert.ok(options.customizeComponentName('Foo::Bar'));
+    }
+
     ['@test has default AST plugins in resolution mode'](assert) {
       assert.expect(RESOLUTION_MODE_TRANSFORMS.length);