tylerturdenpants / ember-attacher

Native tooltips and popovers for Ember.js
https://tylerturdenpants.github.io/ember-attacher/
MIT License
82 stars 45 forks source link

Component Templates Co-location and Typescript #978

Open BwehaaFox opened 1 month ago

BwehaaFox commented 1 month ago

Is it planned to adapt the addon to the new component structure and change the component type to ts? When using this addon in gts files, ember cannot correctly process the template, so the content is always displayed in renderInPlace mode. This can be fixed by using a wrapper component like this in the modern component structure.

import AttachPopover from 'ember-attacher/components/attach-popover';
import layout from 'some-addon/templates/components/attach-popover';
export default setComponentTemplate(layout, AttachPopover );

At the same time, when using the structure described here no component malfunction was noticed. In addition, Ember v6, if I'm not mistaken, will remove support for the old structure. The current minimum version of Ember supported by the addon implements support for the new structure, so there should be no problems with the transition.

Typescript support, in turn, will allow you to use highlighting of available fields when using the component and/or expand its functionality

tylerturdenpants commented 1 month ago

I would love to move this add-on into the future. Unfortunately, I have very little time to work on OSS (even though I still work with Ember). I need to lean on contributors to make this happen.

I think the first thing to do is take things like colocation and conversion to type script and create a quest issue. From there we can break things down into steps and what order we would like to take those steps in

Even without a quest issue, I feel that at minimum we could start with colocation, followed by TS conversion, and lastly, converting to GTS.

How does that sound?

BwehaaFox commented 1 month ago

Basically, at this stage, it seems that the addon is quite suitable for co-location and typescript, and it even seems to me that it is suitable for gts. I have some developments in typing for gts components that could be used, and I have been digging around in the addon itself for quite a long time. The problem is that I have never worked with npm addons specifically. I can independently adapt the code, change the structure, make gts, if they tell me how to make PRs on Github, but nothing more

P.S. In addition, it would be possible to consider a specific problem when interacting with a popover inside which another object is called that is in a different hierarchy. For example, if you try to call flatpickr-calendar inside a popover with hideOn to clickOut, then when interacting with the calendar, the popover closes. I made a similar solution for myself, but perhaps it would be useful as a parameter in the addon itself

const exclude_hideOn_selectors = ['.flatpickr-calendar'];

export class WRPopover extends AttachPopoverJS {
  _hideOnClickOut(event) {
    if (this.interactive)
      if (exclude_hideOn_selectors.map((s) => !!event.target.closest(s)).find((s) => s == true))
        return;

    super._hideOnClickOut(event);
  }
}