ember-react-components icon indicating copy to clipboard operation
ember-react-components copied to clipboard

feat: modernize addon, add optional Ember mixin props to decorator, testing helper

Open shamrt opened this issue 3 years ago • 5 comments

REVIEWER NOTE: Not nearly as big as it seems. The yarn.lock file consists of 8,041 additions and 5,810 deletions.

Description

This PR does two major things:

  • Modernizes the addon; i.e. updates Ember to 3.18 and nearly all dependencies, enables Octane support, and drops support for Ember <3.13 (BREAKING CHANGE)

  • Adds an option to provide mixin props to the decorator/higher-order function

    This allows an addon user to, say, define their own tagName for component wrapper nodes, which is very helpful for wrapping a simple React <button/> component with a span (rather than the default div). For this case, the need to compose complicated CSS around such components is mitigated, which ensures that simple components rendered as expected.

  • Adds a global hooks testing helper, which restores expected behaviour of https://github.com/emberjs/ember-test-helpers when changing React component form field values.

    For more on this issue, see:

    • https://github.com/facebook/react/issues/11488#issuecomment-347775628
    • https://github.com/emberjs/ember-test-helpers/pull/1185

Other changes

  • Fixes and refactors the horribly busted tests.
    • Added a test for React hooks.
  • Replaces testdouble with sinon due to some issues related to ember-auto-import that I couldn't resolve. (I'm aware of your involvement with the testdouble community, so tried to avoid this, but wasn't able to.)
  • Removes ember-metric due to some odd recursion errors. (Again, I fought this for a while, but was unsuccessful in finding a way around it.)
  • Tidied up various configs and updated some JS/Ember syntax.

Background

I had originally planned to migrate the addon to use Glimmer components (resolving #41), but it turns out that is infeasible due to (1) Glimmer's drastically simplified API and (2) a combination of limitations within the React DOM API and the nature of the DOM itself. The next best thing was to provide the means for modifying aspects of the wrapper node.

shamrt avatar Jun 10 '21 14:06 shamrt