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

Make the on modifier built-in in strict-mode #997

Merged
merged 10 commits into from
Jun 12, 2024

Conversation

NullVoxPopuli
Copy link
Contributor

@NullVoxPopuli NullVoxPopuli commented Dec 22, 2023

Propose making {{on}} a built in modifier

Rendered

Summary

Today, we need

import { on } from '@ember/modifier'`;

This should be built in, and not require an import.



An FCP is required before merging this PR to advance to Accepted.

Upon merging this PR, automation will open a draft PR for this RFC to move to the Ready for Released Stage.

Exploring Stage Description

This stage is entered when the Ember team believes the concept described in the RFC should be pursued, but the RFC may still need some more work, discussion, answers to open questions, and/or a champion before it can move to the next stage.

An RFC is moved into Exploring with consensus of the relevant teams. The relevant team expects to spend time helping to refine the proposal. The RFC remains a PR and will have an Exploring label applied.

An Exploring RFC that is successfully completed can move to Accepted with an FCP is required as in the existing process. It may also be moved to Closed with an FCP.

Accepted Stage Description

To move into the "accepted stage" the RFC must have complete prose and have successfully passed through an "FCP to Accept" period in which the community has weighed in and consensus has been achieved on the direction. The relevant teams believe that the proposal is well-specified and ready for implementation. The RFC has a champion within one of the relevant teams.

If there are unanswered questions, we have outlined them and expect that they will be answered before Ready for Release.

When the RFC is accepted, the PR will be merged, and automation will open a new PR to move the RFC to the Ready for Release stage. That PR should be used to track implementation progress and gain consensus to move to the next stage.

Checklist to move to Exploring

  • The team believes the concepts described in the RFC should be pursued.
  • The label S-Proposed is removed from the PR and the label S-Exploring is added.
  • The Ember team is willing to work on the proposal to get it to Accepted

Checklist to move to Accepted

  • This PR has had the Final Comment Period label has been added to start the FCP
  • The RFC is announced in #news-and-announcements in the Ember Discord.
  • The RFC has complete prose, is well-specified and ready for implementation.
    • All sections of the RFC are filled out.
    • Any unanswered questions are outlined and expected to be answered before Ready for Release.
    • "How we teach this?" is sufficiently filled out.
  • The RFC has a champion within one of the relevant teams.
  • The RFC has consensus after the FCP period.

@github-actions github-actions bot added the S-Proposed In the Proposed Stage label Dec 22, 2023
@NullVoxPopuli NullVoxPopuli changed the title make on built in make on built-in in strict-mode Dec 22, 2023
Co-authored-by: MrChocolatine <47531779+MrChocolatine@users.noreply.github.com>

This change would affect strict-mode only. This is so that today's existing code that imports `on` from `@ember/modifier` will still work due to how values defined locally in scope override globals.

The behavior of `on` would be the same as it is today, but defined by default in the `glimmer-vm`.
Copy link
Contributor Author

Choose a reason for hiding this comment

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


## Alternatives

n/a
Copy link
Contributor Author

Choose a reason for hiding this comment

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

An alternative (or maybe working in conjunction with), is adopting svelte-like syntax

<template>
  <button on:click={{fn play #video}}>
    Play
  </button>
  <video #video src={{@url}} />
</template>

but that would probably need to be a separate RFC entirely

@kategengler kategengler changed the title make on built-in in strict-mode Make the on modifier built-in in strict-mode Dec 27, 2023
@ef4 ef4 added the S-Exploring In the Exploring RFC Stage label Jan 19, 2024
@kategengler kategengler removed the S-Proposed In the Proposed Stage label Feb 9, 2024
- Use a prelude
- preludes were mentioned during the initial exploration of strict-mode templates, and were decided against, because addons would not be able to assume a prelude exists, as apps could define their own, and this sort of re-introduces the app-tree-merging behavior that we've been trying to get away from.

- Use an alternate syntax: `on:click={{handler}}` or `on:{eventname}={{value}}`
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@Techn1x
Copy link

Techn1x commented Feb 17, 2024

I like this. Seems simple enough, there's already precedent from other modifiers. Isn't really anything new to learn. Could even add a fixable template lint rule to remove unneeded import lines.


## Summary

Today, when using gjs/gts/`<template>`, in order to bind event listeners, folks _must import_ the `{{on}}` modifier.
Copy link
Contributor

Choose a reason for hiding this comment

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

This is not true as discussed in #1007. Folks could also use the on* properties of the element.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Given the discovery of onclick's usefulness for the use case that I'm mostly thinking about with this RFC, I think I may even need convincing for this RFC to be pursued.

Related decision chart: #1007 (comment)

Choose a reason for hiding this comment

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

yes but that has nothing to do with this proposal, you can always use normal html attributes

Copy link
Contributor Author

@NullVoxPopuli NullVoxPopuli Feb 17, 2024

Choose a reason for hiding this comment

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

I just mean, that because of onclick (and similar), I'm not sure we need This (RFC #997) at all -- but instead may want to teach folks to use onclick (and related) rather than {{on}} for everything

Copy link
Contributor

Choose a reason for hiding this comment

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

you can always use normal html attributes

My main concerns with <button onclick={{foo}}> is that it looks as setting attributes while actually setting a property.

But I fear that's a little bit off topic here. 🙃


Once implemented, the guides, if they say anything about gjs/gts/`<template>` and `on` by the time this would be implemented, would only remove the import.

## Drawbacks
Copy link
Contributor

Choose a reason for hiding this comment

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

Adding {{on}} to template syntax rather than importing explicitly would complicate upgrade path to alternative patterns later. #1007 shows that even for basics such as {{on}} modifier we shouldn't take for granted that it will be still best practice in 3-5 years.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

how would it complicate upgrades?

@achambers
Copy link
Contributor

Makes sense to me.


## How we teach this

Once implemented, the guides, if they say anything about gjs/gts/`<template>` and `on` by the time this would be implemented, would only remove the import.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
Once implemented, the guides, if they say anything about gjs/gts/`<template>` and `on` by the time this would be implemented, would only remove the import.
Once implemented, the guides, if they say anything about gjs/gts/`<template>` and `on` by the time this would be implemented, would only remove the import.
The guides should also detail which functions are built in to the framework and, therefore, do not need to be imported.

@achambers
Copy link
Contributor

RFC Review (1) are in favour of this.

@kategengler
Copy link
Member

We decided to move this RFC along with #998, #999, #1000 into FCP to accepted today at the RFC meeting.

@achambers achambers enabled auto-merge June 12, 2024 14:20
@achambers achambers merged commit 31340d5 into emberjs:master Jun 12, 2024
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Final Comment Period S-Exploring In the Exploring RFC Stage
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants