diff --git a/packages/ember-template-compiler/lib/system/compile-options.ts b/packages/ember-template-compiler/lib/system/compile-options.ts index 1e9e2129cfc..36059842997 100644 --- 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 = {} ): 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 index 1ee2968adf8..d093f9d84da 100644 --- 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 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);