yield setHook function

[miguelcobain]

I faced a situation where I need to apply the hook modifier + some custom logic to the element.
The problem is that modifiers aren't composable in ember. So we can't create a custom modifier that applies another modifier.

For that reason, in this PR I'm yielding a setHook function, thus increasing the composability options for users.

[changeset-bot]

🦋 Changeset detected

Latest commit: 6bdf51b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
ember-velcro	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[miguelcobain]

This is just to make vscode glint extension happy and correctly detect gts files in sub packages.

[ynotdraw]

Thanks @miguelcobain! This is excellent.

[miguelcobain]

@ynotdraw I pushed a fix for the typecheck error CI was reporting. Please approve workflow. Thanks.

[nicolechung]

Suggestion: Can you update the readme as to when you'd want to use setHook? While the PR description is helpful, I can't quite see how another modifier would make use of this.

Also the test doesn't show much other than it renders.

[miguelcobain]

@nicolechung

Also the test doesn't show much other than it renders.

The test shows that it renders and that the content was correctly positioned and sized. Which means that the setHook works, just like the hook modifier.

While the PR description is helpful, I can't quite see how another modifier would make use of this.

It would be a contrived example, but I'll explain my use case: Imagine you're writing a dropdown component with ember-velcro. You want to yield a trigger modifier that does two things:

1. applies the hook from ember-velcro
2. attaches a click handler to toggle between the open/closed states

Without setHook, this would not be possible. With setHook however, we can pass that function to the modifier, and the modifier can call that function.

The dropdown component might look something like this:

let myModifier = modifier((element, [setHook, handler]) => {
  // call ember-velcro's setHook
  setHook(element);
  
  // other custom logic
  element.addEventListener('click', handler);
  
  return () => {
    element.removeEventListener('click', handler);
  };
});

<template>
  <Velcro as |velcro|>
    {{yield (hash
      trigger=(modifier myModifier velcro.setHook onClick)
    )}}
  </Velcro>
</template>

This is needed because there's no way in ember (that I know of) to combine two existing modifiers into a single one. If there was, this PR wouldn't be needed.

Being this such an edge case, I'm not sure if we should document it with this detail. It might distract users from the main usage. Maybe adding this in a <details> tag in markdown?

[NullVoxPopuli]

I wouldn't consider this an edge case -- in design systems, this sort of problem is IMMENSELY common -- it's a composibilitiy design challenge

[miguelcobain]

@nicolechung documentation was added

[nicolechung]

The test shows that it renders and that the content was correctly positioned and sized. Which means that the setHook works, just like the hook modifier.

I think (hope?) that should be enough for the tests. What I meant is that a user can't tell why they'd need to use setHook by looking at the test alone (apologize, was multi-tasking a bit and forget to edit my comment).

The documentation looks terrific, thanks for adding that!

[miguelcobain]

I like when tests self-document the usage of something. This test passes the setHook into a custom modifier like it is intended to be used.
I'll gladly accept suggestions on how to improve the test.

[nicolechung]

✅ thank you! Very clear.