{"action":"created","issue":{"url":"https://api.github.com/repos/emberjs/ember.js/issues/17158","repository_url":"https://api.github.com/repos/emberjs/ember.js","labels_url":"https://api.github.com/repos/emberjs/ember.js/issues/17158/labels{/name}","comments_url":"https://api.github.com/repos/emberjs/ember.js/issues/17158/comments","events_url":"https://api.github.com/repos/emberjs/ember.js/issues/17158/events","html_url":"https://github.com/emberjs/ember.js/issues/17158","id":374791839,"node_id":"MDU6SXNzdWUzNzQ3OTE4Mzk=","number":17158,"title":"Nested components with <AngleBrackets />","user":{"login":"izelnakri","id":1190931,"node_id":"MDQ6VXNlcjExOTA5MzE=","avatar_url":"https://avatars3.githubusercontent.com/u/1190931?v=4","gravatar_id":"","url":"https://api.github.com/users/izelnakri","html_url":"https://github.com/izelnakri","followers_url":"https://api.github.com/users/izelnakri/followers","following_url":"https://api.github.com/users/izelnakri/following{/other_user}","gists_url":"https://api.github.com/users/izelnakri/gists{/gist_id}","starred_url":"https://api.github.com/users/izelnakri/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/izelnakri/subscriptions","organizations_url":"https://api.github.com/users/izelnakri/orgs","repos_url":"https://api.github.com/users/izelnakri/repos","events_url":"https://api.github.com/users/izelnakri/events{/privacy}","received_events_url":"https://api.github.com/users/izelnakri/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-10-28T19:56:03Z","updated_at":"2018-10-29T21:08:05Z","closed_at":null,"author_association":"NONE","body":"Hi there, \r\n\r\nI started using `<AngleBrackets />` for the first time this weekend and found some important issues I would like to raise.\r\n\r\nPreviously I've been using nested components to group my `form` and `modal` window components. Example: \r\n\r\n```hbs\r\n{{ab-modal/confirmation-window}}\r\n\r\n<!-- or: -->\r\n\r\n{{ab-form/input}}\r\n\r\n<!-- which could be used after yielded on: -->\r\n\r\n{{#ab-form model=model.blogPost as |form|}}\r\n  {{form.input attribute=\"title\"}}\r\n\r\n  {{form.date attribute=\"publishedAt\"}}\r\n\r\n  {{#form.button \"success\"}}Save{{/form.button}}\r\n{{/ab-form}}\r\n```\r\n\r\nFor larger applications grouping `form` and `modal` related components under a folder make a lot of sense and encourages greater level of usability when it comes to functionality and naming. \r\n\r\nNew <AngleBracket /> syntax works for block-level forms:\r\n\r\n```hbs\r\n<Form model=model.blogPost as |form|>\r\n  {{form.input attribute=\"title\"}}\r\n\r\n  {{form.date attribute=\"publishedAt\"}}\r\n\r\n  {{#form.button \"success\"}}Save{{/form.button}}\r\n{{/ab-form}}\r\n```\r\n\r\nHowever we also need to support nested level components, which is not supported currently. I think this is a major requirement for angle-brackets components in order it to be a true replacement for curly-braced components. I suggest the following syntax:\r\n\r\n```hbs\r\n<Modal.ConfirmationModal />\r\n\r\n<!-- or -->\r\n\r\n<Form.input @attribute=\"publishedAt\" />\r\n```\r\n\r\nI can explain further why this is necessary if needed.\r\n"},"comment":{"url":"https://api.github.com/repos/emberjs/ember.js/issues/comments/434080690","html_url":"https://github.com/emberjs/ember.js/issues/17158#issuecomment-434080690","issue_url":"https://api.github.com/repos/emberjs/ember.js/issues/17158","id":434080690,"node_id":"MDEyOklzc3VlQ29tbWVudDQzNDA4MDY5MA==","user":{"login":"rwjblue","id":12637,"node_id":"MDQ6VXNlcjEyNjM3","avatar_url":"https://avatars0.githubusercontent.com/u/12637?v=4","gravatar_id":"","url":"https://api.github.com/users/rwjblue","html_url":"https://github.com/rwjblue","followers_url":"https://api.github.com/users/rwjblue/followers","following_url":"https://api.github.com/users/rwjblue/following{/other_user}","gists_url":"https://api.github.com/users/rwjblue/gists{/gist_id}","starred_url":"https://api.github.com/users/rwjblue/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rwjblue/subscriptions","organizations_url":"https://api.github.com/users/rwjblue/orgs","repos_url":"https://api.github.com/users/rwjblue/repos","events_url":"https://api.github.com/users/rwjblue/events{/privacy}","received_events_url":"https://api.github.com/users/rwjblue/received_events","type":"User","site_admin":false},"created_at":"2018-10-29T21:08:05Z","updated_at":"2018-10-29T21:08:05Z","author_association":"MEMBER","body":"As I read through this issue, it's not immediately clear to me specifically being requested. It _seems_ like you are talking about yielded contextual components based on the first template snippet (which works perfectly fine with angle bracket invocation), but then you mention the desire to invoke components nested inside directories.\r\n\r\nMore information about angle bracket invocation is being worked on by the learning team, but you can read more about them over in [the RFC](https://github.com/emberjs/rfcs/pull/311).  Specifically, [this section](https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md#dynamic-invocations) explains how dynamic invocations work (this would be things like a yielded contextual component e.g. `<form.date attribute=\"publishedAt\" />`) then later in that section (near the end) you can see where nested invocation is specifically discussed (and ruled out)."}}
{"actor":{"display_login":"rwjblue"}}