Ember.js: Nested component notation in docs

[PieterJanVdb]

I upgraded from to Ember 2.10 and this notation for nested components does not work anymore:

{{parent-folder.child-component}}

while the following notation now does work:

{{parent-folder/child-component}}

This is not reflected in the 2.10.0 docs and I didn't see this popping up anywhere in the changelogs.

Is this possibly because of a mistake that I made on my end, or is it just an undocumented change?

[sohara]

The docs you linked to do not have an example of dot notation for a nested component. In fact, they don't have any example of invocation of a nested component, regardless of notation. Are you mixing it up with the example of the use of the component helper:

{{component post.componentName post=post}}

[PieterJanVdb]

@sohara Ah, my bad. It's fairly confusing regardless. Having the dot notation there, and then not having any example of invocations of nested components at all.

After reading up a bit apparently the dot notation was never properly supported and the slash should be used at all times. Did I miss parts of the documentation where it was specified that you should use the dash when dealing with nested components?

[sohara]

@PieterJanVdb I'm actually not sure how much the guides go in to the use of nested components, if at all. You could search the guides source, and possibly file an issue if you find it's not documented but should be. https://github.com/emberjs/guides

I believe most of the examples of nested components are 'in the wild' (e.g. blog posts, books, etc.) as opposed to official documentation. That said, I've been using Ember since the beginning and I can't remember seeing any dot notation invocation of nested components. Where you _do_ see dot notation is in the invocation of contextual components (http://emberjs.com/blog/2016/01/15/ember-2-3-released.html#toc_contextual-components). That is still supported.

[locks]

{{parent-folder.child-component}} is sort of undefined behaviour, it used to work but was never the intended API, which is indeed {{parent-folder/child-component}}, with the . reserved for contextual components as mentioned by @sohara.
There was a similar issue recently but I couldn't find it on a quick search. We don't really document nested components as it gets messy fast, and I'm personally waiting for the module unification RFC work to get into Ember ;)

[PieterJanVdb]

@sohara Ah, my fault! I came into the project I'm currently working on and thought having subdirectories with components in it was a default thing :)

[DHedgecock]

Hello,

Even though the dot notation may have never been officially supported, I think it would be very helpful to the community to add a note to the 2.10 release notes about this change.

A coworker and I just spent 45 mins figuring out why our application was not throwing any errors, but also not rendering anything after updating to 2.10 (because we use dot notation).

Also, most of the ember tutorials I've read through use dot notation with nested components.

Also, one of the best syntax highlighters I've found for Ember HTMLBars language-ember-htmlbars doesn't even support syntax highlighting for nested components using the slash notation (probably because most people use dot notation).

Even if it was never officially supported, I think it's fair to say a lot of the community uses the dot syntax and a heads up that they should switch to the officially supported slash syntax is easy and will probably save quite a few people some debugging.

[mixonic]

most of the ember tutorials I've read through use dot notation with nested components.

@DHedgecock can you round up a list of links to articles or tutorials you've seen do this? I would not expect it is most, but regardless a list would help get a scope of the issue and allow us to contact authors to update their content.

[DHedgecock]

Well, I couldn't find a single tutorial with an example of nested components. I guess I was projecting.

I apologize for being sassy.

[Kilowhisky]

Crap!

My app relies heavily on this! I have hundreds of templates defined in this syntax. So is the correct acceptable syntax the {{folder/component}}? I agree that i saw the dot style in some tutorials but that was probably back in the pre 1.13 days.

I think people logically thought about the '.' syntax because that's how routes are defined. I don't understand why upcoming(?) routable components would require a different definition syntax. I'd argue that the '.' syntax should be valid on consistency sake alone.

[knownasilya]

For anyone else upgrading an old app and has lots of nested components with the "." as the separator, the following script might be handy https://github.com/cybertoothca/emberjs-component-dot-to-slash-paths

Note that the '/' syntax will also become obsolete once module unification has landed, but that should also have a codemod I think.

[dgaus]

I just stumbled upon this while upgrading to 2.12 and I agree some warning in the release notes or deprecation warnings would have been nice. We use nested components extensively in our app for organisation.