hook=(hook 'a' b='c') works, not documented

[jamesarosen]

The README talks about two ways of adding hooks:

{{!-- for elements, use the `hook` helper --}}
<div data-test={{hook 'a' b='c'}}>

{{!-- for components, use the `hook` and `hookQualifiers` attributes --}}
{{my-component
  hook='a'
  hookQualifiers=(hash b='c')
}}

This also works, but is not documented:

{{my-component hook=(hook 'a' b='c')}}

It adds an additional &^%^& to the end:

<div class='my-component data-test='a&^%^&b=c&^%^&&^%^&'>

but the hook and $hook test helpers don't seem to care about that.

If this is something we should expect to work, let's document and test it. If it's not supposed to work, perhaps we should assert that the hook attribute's value doesn't itself contain &^%^&.

[briarsweetbriar]

I see no reason not to support it. In fact, it makes me want to deprecate the use of hook and hookQualifiers.

I'm not sure who exactly is maintaining this addon at this point. I left Ticketfly a long time ago, and then it got acquired. @bl4ckm0r3 or @zhujy8833 maybe?

If nobody else responds in the next couple of days, I'd be happy to review a PR, @jamesarosen.

[jamesarosen]

If we're going to consider changes to the public API, I'd like to suggest

<div class='some-div' data-test=(hook 'a' b='c')>
and
{{my-component data-test=(hook 'a' b='c')}}

so they're exactly the same. That could be implemented with

// addon/mixins/hook.js
export default Mixin.create({
  init() {
    this._super(...arguments);
  
    if (this.tagName || this.elementId) {
      let newAttributeBindings = [];
      let bindings = get(this, 'attributeBindings');
  
      if (Array.isArray(bindings)) {
        newAttributeBindings = newAttributeBindings.concat(bindings);
      }

      newAttributeBindings.push('data-test');
      set(this, 'attributeBindings', newAttributeBindings);
    }
  },

  'data-test': computed(hookName, hookQualifierName, {
    get() {
      const hook = get(this, hookName);
      const qualifiers = get(this, hookQualifierName);

      if (hook) {
        warn('hook and hookQualifiers have been deprecated in favor of data-test', { id: 'ember-hook.hookAttribute' })
        return returnWhenTesting(config, decorateHook(delimit(hook), qualifiers));
      }
    },
    set(_, newValue) {
      return newValue
    }
  })
})

I can also add deprecations and upgrades for existing properties