Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for single-file components #299

Merged
merged 5 commits into from
Sep 19, 2023

Conversation

jeffdaley
Copy link
Contributor

@jeffdaley jeffdaley commented Aug 18, 2023

Adds support for template imports, i.e., single-file components, and converts action.hbs/ts to action.gts.

Single-file components are are expected to be the recommended authoring format for Ember 5x; might as well get good seats on that train (source: Ember Blog).

Guided by ▶ EmberConf 2023 - Getting Started with 'template' Tag Components by Ignace Maes which also does a good job showing the benefits of this new format, such as locally defined components (shown below). It should boost DX, reduce file count, and make code review easier.

const MyListItem =
  <template>
    <div>{{yield}}</div>
  </template>;

const MyList =
  <template>
    <div>List of things</div>
      {{#each @items as |item|}}
        <MyListItem>
          {{item.number}}-{{item.value}}
        </MyListItem>
      {{/each}}
  </template>;

export default MyList;

Comment on lines +10 to +16
export default class ActionComponent extends Component<ActionComponentSignature> {
<template>
<button type="button" class="action" ...attributes>
{{yield}}
</button>
</template>
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The short-term downside of .gts is that GitHub doesn't have syntax highlighting yet.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like we should be able to configure this using an override in a .gitattributes file 🙌

@jeffdaley jeffdaley marked this pull request as ready for review August 21, 2023 21:27
@jeffdaley jeffdaley requested a review from a team as a code owner August 21, 2023 21:27
Copy link
Contributor

@jfreda jfreda left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, let's give it a try! 🚀

Comment on lines +10 to +16
export default class ActionComponent extends Component<ActionComponentSignature> {
<template>
<button type="button" class="action" ...attributes>
{{yield}}
</button>
</template>
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like we should be able to configure this using an override in a .gitattributes file 🙌

@jeffdaley jeffdaley merged commit 3833392 into main Sep 19, 2023
2 checks passed
@jeffdaley jeffdaley deleted the jeffdaley/single-file-components branch September 19, 2023 14:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants