Migration to the Floating UI #743

pzubar · 2023-04-06T10:39:26Z

This PR migrates the ember-attacher from Popper to Floating UI.
It also removes the ember-raf-test-waiter in favour of a more modern way to wait for the floating element positioning in the tests (see https://github.com/emberjs/ember-test-waiters).

Motivation

The floating-ui already has its motivation described on the official website:

Floating UI is the evolution of Popper v2, and aims to be a lower-level solution similar to CSS in which you progressively add properties to achieve desired positioning behaviour.

The Floating UI is actively supported by the organization that created the Popper library.

Migration

From the official migrate guide :

Floating UI forked Popper 2 and shares a lot of similarities. While the main external positioning function changed, many other parts of the API are similar.

I could provide the addon's own migration guide if the contributors' team agree to migrate/upgrade to the Floating UI.

What do you think about this proposal? I'll be happy to hear your thoughts.

pzubar · 2023-04-06T10:52:22Z

addon/components/attach-popover.js

+ @computed('_parentFinder.parentNode', '_renderInPlace', 'floatingElementContainer')
+ get _floatingElementContainer() {
+ const maybeContainer = this.floatingElementContainer;
+ const renderInPlace = this._renderInPlace;
+ let floatingElementContainer;
+
+ if (renderInPlace) {
+ floatingElementContainer = this._parentFinder.parentNode;
+ } else if (maybeContainer instanceof Element) {
+ floatingElementContainer = maybeContainer;
+ } else if (typeof maybeContainer === 'string') {
+ const selector = maybeContainer;
+ const possibleContainers = self.document.querySelectorAll(selector);
+
+ assert(`floatingElementContainer selector "${selector}" found `
+ + `${possibleContainers.length} possible containers when there should be exactly 1`, possibleContainers.length === 1);
+
+ floatingElementContainer = possibleContainers[0];
+ }
+
+ return floatingElementContainer;
+ }


This is the only part taken from the ember-popper to process the floating element's container logic

pzubar · 2023-04-06T10:53:26Z

tests/integration/components/ember-attacher/hide-on-blur-test.js

+ const targetInsideAttachment = find('#attachment-focus-me')
+ await focus(targetInsideAttachment)
+ await waitUntil(() => {
+ if (document.activeElement === targetInsideAttachment) return true
+
+ focus(targetInsideAttachment)
+ });


Sometimes the "focus" event didn't work for the firs time that caused the flaky tests here

pzubar · 2023-04-06T10:56:06Z

package.json

 "@html-next/flexi-default-styles": "^2.2.0",
 "babel-eslint": "^10.1.0",
 "broccoli-asset-rev": "^3.0.0",
+ "ember-cli": "~3.26.1",


no changes in the ember-cli version, just sorting the devDependencies alphabetically

pzubar · 2023-04-06T11:01:51Z

tests/integration/components/ember-attacher/register-api-test.js

registerApi is redundant because of autoUpdate middleware Introduction

krasnoukhov · 2023-04-06T11:41:17Z

@tylerturdenpants Hey, let me know if this looks good to you, we're wiling to get this addon up-to-date, let me know if you're open to sharing merge/release rights

pzubar · 2023-04-06T12:00:54Z

package.json

 "babel-plugin-filter-imports": "^4.0.0",
 "babel6-plugin-strip-class-callcheck": "^6.0.0",
 "broccoli-funnel": "^3.0.5",
+ "ember-auto-import": "^2.6.1",


Added this (and the webpack dependency) to avoid the error caused by the library import in the component

…ated tests

…th older ember-source

pzubar · 2023-04-11T10:10:29Z

@tylerturdenpants could you please take a look when you have time? Thank you!

pzubar · 2023-04-18T09:11:10Z

Hey @tylerturdenpants I've noticed the CI failed because of the outdated Node version on CI. I've changed the NODE_VERSION in the ci.yml. Is that enough to fix the fail? Thank you!

… not supported by ember-auto-import)

tylerturdenpants · 2023-04-18T12:30:13Z

I need to see if @kybishop will give me either more account actions like adding maintainers or transfer the repo to me.

@kybishop If you're keeping track with this thread could you please increase my access?

kybishop · 2023-04-18T13:24:41Z

I need to see if @kybishop will give me either more account actions like adding maintainers or transfer the repo to me.

@kybishop If you're keeping track with this thread could you please increase my access?

@tylerturdenpants I think because it's not under an organization, I can't increase your access. If you delete tylerturdenpants/ember-attacher I can transfer ownership

tylerturdenpants · 2023-04-18T13:37:48Z

@kybishop I have deleted the fork so try again! Hope this works 🤞

pzubar · 2023-04-18T20:04:40Z

@tylerturdenpants seems like the only failing CI step now will be the Scenario: ember-release with an error

The Ember Classic edition has been removed. Specifying "classic" in your package.json, or not specifying a value at all, is no longer supported. You must explicitly set the "ember.edition" property to "octane". You can also run npx @ember/octanify to do this.
(the same will happen to ember-beta and ember-canary scenarios)

I think the "octanification" is out of this PR's scope and should be implemented separately. Maybe it makes sense to mark the ember-release as "allowedToFail" as well. Please correct me if I am wrong. Thank you!

tylerturdenpants · 2023-04-19T14:23:50Z

@kybishop one last thing. I would appreciate if you could also transfer NPM admin to me? Tbh, if you want to do all the previous requests with ember-popper, I can take that off your plate. Thank you 😊

tylerturdenpants · 2023-04-19T14:39:04Z

package.json

Can we octanify?

Updated to octane edition 🙌

tylerturdenpants · 2023-04-19T14:49:19Z

.github/workflows/ci.yml

Let's drop 3.12 support and 3.26 in its place if it all works out. Update the Readme of course 😄

Sure! Does it make sense to use 3.28 as an LTS one?

Update the Readme of course

Btw, could you please update the "About" section to fix the demo app URL?

krasnoukhov · 2023-04-20T07:55:10Z

@pzubar Should we also have a little guide in README perhaps on how to upgrade to 2.0? Like list out breaking API changes

pzubar · 2023-04-20T15:12:24Z

Should we also have a little guide in README perhaps on how to upgrade to 2.0? Like list out breaking API changes

@krasnoukhov great idea! I've added a little guide with a link in README.

pzubar force-pushed the upgrade-to-floating-ui branch from 6fa63a3 to 66a2983 Compare April 6, 2023 10:45

pzubar commented Apr 6, 2023

View reviewed changes

pzubar force-pushed the upgrade-to-floating-ui branch from 66a2983 to 60dd29f Compare April 6, 2023 10:56

pzubar marked this pull request as ready for review April 6, 2023 11:00

pzubar commented Apr 6, 2023

View reviewed changes

pzubar changed the title ~~Upgrades the ember-attacher to the floating-ui instead of popper.js~~ Upgrades to the floating-ui Apr 6, 2023

pzubar commented Apr 6, 2023

View reviewed changes

Upgrades ember-attacher to the floating-ui

d01f569

pzubar force-pushed the upgrade-to-floating-ui branch from 60dd29f to d01f569 Compare April 6, 2023 15:48

pzubar added 3 commits April 7, 2023 14:54

Fixes the orphan testWaiter.endAsync issues; Improves the "focus"-rel…

6ea5bb0

…ated tests

Adds the "ember-in-element-polyfill" dependency to make addon work wi…

c7e56a8

…th older ember-source

bumps the @floating-ui/dom package

36296d4

Sets NODE_VERSION in CI config to 16

4e1a78a

pzubar added 3 commits April 18, 2023 12:57

Removes the "10" from the allowed node version in package.json (it is…

e5161d3

… not supported by ember-auto-import)

Bumps the webpack version

03e8796

Bumps the ember-classic-decorator version

4868d30

pzubar mentioned this pull request Apr 18, 2023

Upgrade to floating UI simplepractice/ember-attacher#1

Closed

pzubar added 2 commits April 18, 2023 13:50

Bumps @ember/test-helpers

8e736f9

Bumps ember-power-select to avoid warnings in the tests

32cf670

Adds ember-maybe-in-element resolution; Fixes the ember-try failures

a15298c

krasnoukhov approved these changes Apr 19, 2023

View reviewed changes

Changes the version in the package.json

8a11c8b

tylerturdenpants reviewed Apr 19, 2023

View reviewed changes

Octanifies the Ember edition; Updates the README.md

e029fb3

pzubar force-pushed the upgrade-to-floating-ui branch from 01b1bb4 to e029fb3 Compare April 19, 2023 21:25

pzubar requested a review from tylerturdenpants April 20, 2023 13:18

Removes the redundant "popper" mentions; Adds the upgrade guide.

30b7e10

pzubar changed the title ~~Upgrades to the floating-ui~~ Migration to the Floating UI Apr 20, 2023

tylerturdenpants merged commit 49a9487 into tylerturdenpants:master Apr 21, 2023

This was referenced Apr 22, 2023

Error in ember 3.28.x wrong import of htmlSafe, isHTMLSafe #661

Closed

Bump ember-classic-decorator #624

Closed

Lifecycle hooks #557

Closed

Updating imports for htmlSafe, isHTMLSafe #570

Closed

pzubar mentioned this pull request May 8, 2023

[Quest]: Future Roadmap #774

Open

10 tasks

pzubar added breaking enhancement labels May 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migration to the Floating UI #743

Migration to the Floating UI #743

pzubar commented Apr 6, 2023 •

edited

Loading

pzubar Apr 6, 2023 •

edited

Loading

pzubar Apr 6, 2023

pzubar Apr 6, 2023

pzubar Apr 6, 2023

krasnoukhov commented Apr 6, 2023

pzubar Apr 6, 2023

pzubar commented Apr 11, 2023

pzubar commented Apr 18, 2023

tylerturdenpants commented Apr 18, 2023

kybishop commented Apr 18, 2023

tylerturdenpants commented Apr 18, 2023

pzubar commented Apr 18, 2023

tylerturdenpants commented Apr 19, 2023

tylerturdenpants Apr 19, 2023

pzubar Apr 19, 2023 •

edited

Loading

tylerturdenpants Apr 19, 2023

pzubar Apr 19, 2023

pzubar Apr 19, 2023 •

edited

Loading

krasnoukhov commented Apr 20, 2023

pzubar commented Apr 20, 2023

Migration to the Floating UI #743

Migration to the Floating UI #743

Conversation

pzubar commented Apr 6, 2023 • edited Loading

Motivation

Migration

pzubar Apr 6, 2023 • edited Loading

Choose a reason for hiding this comment

pzubar Apr 6, 2023

Choose a reason for hiding this comment

pzubar Apr 6, 2023

Choose a reason for hiding this comment

pzubar Apr 6, 2023

Choose a reason for hiding this comment

krasnoukhov commented Apr 6, 2023

pzubar Apr 6, 2023

Choose a reason for hiding this comment

pzubar commented Apr 11, 2023

pzubar commented Apr 18, 2023

tylerturdenpants commented Apr 18, 2023

kybishop commented Apr 18, 2023

tylerturdenpants commented Apr 18, 2023

pzubar commented Apr 18, 2023

tylerturdenpants commented Apr 19, 2023

tylerturdenpants Apr 19, 2023

Choose a reason for hiding this comment

pzubar Apr 19, 2023 • edited Loading

Choose a reason for hiding this comment

tylerturdenpants Apr 19, 2023

Choose a reason for hiding this comment

pzubar Apr 19, 2023

Choose a reason for hiding this comment

pzubar Apr 19, 2023 • edited Loading

Choose a reason for hiding this comment

krasnoukhov commented Apr 20, 2023

pzubar commented Apr 20, 2023

pzubar commented Apr 6, 2023 •

edited

Loading

pzubar Apr 6, 2023 •

edited

Loading

pzubar Apr 19, 2023 •

edited

Loading

pzubar Apr 19, 2023 •

edited

Loading