Some components with numbers in the name don't work with Angle Brackets

[jenweber]

As reported by @gmartell, if you have a number in a component name, it fails to be found if used with Angle Bracket invocation. It seems like a component number1-problem is ok as <Number1-Problem /> but fails as <Number1Problem />.

Minimal reproduction

[maxwondercorn]

Issue is specifically converting ember-c3 to angle bracket invocation. Working invocation

{{c3-chart
  data=this.computedData
  size=@size
  axis=this.axis
  color=this.color
  point=this.point
  zoom=this.zoom
}}

converted to angle brackets

<C3Chart
  @data={{this.computedData}}
  @size={{@size}}
  @axis={{this.axis}}
  @color={{this.color}}
  @point={{this.point}}
  @zoom={{this.zoom}}
/>

This generates Error: Compile Error: Cannot find component c3chart from the opcode compiler.

I've tried some camelcase variations and either get the same error message or TypeError: func is not a function. (In 'func(exp, builder)', 'func' is undefined)

[rwjblue]

The issue is in https://github.com/emberjs/ember.js/blob/master/packages/ember-template-compiler/lib/system/dasherize-component-name.ts

There are unit tests setup in

https://github.com/emberjs/ember.js/blob/master/packages/ember-template-compiler/tests/system/dasherize-component-name-test.js

I think a few tweaks to those regexps should do the trick.

[jenweber]

I'm having a look at this issue.

[jenweber]

PR #17552