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

docs: Add Template Tag format guides #1978

Merged
merged 41 commits into from
Feb 14, 2024

Conversation

IgnaceMaes
Copy link
Member

@IgnaceMaes IgnaceMaes commented Nov 20, 2023

tt-book

While eventually all guide material will have to be updated to use the <template> tag authoring format, this PR serves as a first introduction to the format. This unblocks moving forward emberjs/rfcs#871.

Notes:

  • The syntax highlighter used (Prism) doesn't support glimmer-js nor glimmer-ts. I don't think it should block introducing the concept of the format here. But it does seem like a blocker to integrate the format in other parts of the guides.

Sources:

To review

Preview: https://deploy-preview-1978--ember-guides.netlify.app/release/components/template-tag-format/

Review for:

  • Typos
  • Mistakes
  • Completeness

Copy link

netlify bot commented Nov 20, 2023

Deploy Preview for ember-guides ready!

Name Link
🔨 Latest commit 41bd12b
🔍 Latest deploy log https://app.netlify.com/sites/ember-guides/deploys/65c35d6503de010008aecab3
😎 Deploy Preview https://deploy-preview-1978--ember-guides.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@ef4
Copy link
Contributor

ef4 commented Dec 15, 2023

One of the biggest teaching points I think we need to hit here is how to locate the components/helpers/modifiers you're trying to import. There are generally-applicable, simple rules that work for essentially all addons. For example, an addon allowing you to importi a component from your-app-name/components/the-component-name is effectively mandatory.

@ef4
Copy link
Contributor

ef4 commented Dec 15, 2023

Another gotcha to document: to use an imported template, it needs to not be using the old, pre-template-colocation format where the templates is in app/templates/components with the JS in app/components. People should ideally codemod off that format before trying to use template tag.

If you must use it, you can use setComponentTemplate manually to stick the template and JS together, but probably that is not guides-level content.

@IgnaceMaes IgnaceMaes changed the title WIP: Add Template Tag format guides docs: Add Template Tag format guides Dec 21, 2023
@IgnaceMaes IgnaceMaes marked this pull request as ready for review December 21, 2023 19:57
@IgnaceMaes
Copy link
Member Author

Thanks @NullVoxPopuli @ef4 for the feedback.

I did a full rewrite from scratch instead of starting from the ember-template-imports README. It's restructured beginning at feature parity with the current format, only to introduce new capabilities afterwards. That makes most sense to me.

Marked as ready for review!

Copy link
Contributor

@evoactivity evoactivity left a comment

Choose a reason for hiding this comment

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

Just a few typos, rest looks good to me

guides/release/components/template-tag-format.md Outdated Show resolved Hide resolved
guides/release/components/template-tag-format.md Outdated Show resolved Hide resolved
guides/release/components/template-tag-format.md Outdated Show resolved Hide resolved
Copy link
Member

@mansona mansona left a comment

Choose a reason for hiding this comment

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

The learning team did a review on this PR. These are minor changes but I think they should help get this perfectly ready to merge and launch 🎉 Let me know if you have any questions about my comments 👍

guides/release/components/template-tag-format.md Outdated Show resolved Hide resolved
guides/release/components/template-tag-format.md Outdated Show resolved Hide resolved
guides/release/components/template-tag-format.md Outdated Show resolved Hide resolved
guides/release/components/template-tag-format.md Outdated Show resolved Hide resolved
@IgnaceMaes
Copy link
Member Author

IgnaceMaes commented Jan 23, 2024

All comments should be addressed now, thanks for the great input!

I've added another short section on importing conventions for helpers and modifiers. They change from kebab-case to camelCase as it now follows ES import standards. I've seen some confusion and questions on Discord about this so I believe this had to be addressed as well.

Copy link
Member

@mansona mansona left a comment

Choose a reason for hiding this comment

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

LGTM 💪 🎉 🚀

@mansona mansona merged commit fc0036b into ember-learn:master Feb 14, 2024
4 checks passed
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.

7 participants