Skip to content

Latest commit

 

History

History
90 lines (70 loc) · 4.3 KB

1.4.0.md

File metadata and controls

90 lines (70 loc) · 4.3 KB

1.4.0

  • React 16.6 & 16.7 support

    • Added React.Suspense. For technical reasons (types, power, constraints) React.lazy is not added nor needed in Scala; use the new AsyncCallback instead.
    • The new getDerivedStateFromError has not been implemented, and cannot be until facebook/react#13986 is merged.
    • Add React.memo to add reusability to "functional" components

  • VDOM modernisation

    React's VDOM capabilities increased drastically over a year ago in the upgrade from React 15 to 16. Although all new features were supported in scalajs-react, there remained some impedance mismatch in the core VDOM types. This release subtly modernises scalajs-react's VDOM with as little API disruption as possible.

    Additionally, seizing the opportunity, some other fundamental VDOM improvements with regards to API clarity have been made.

    Changes:

    • To compose two TagMods, use TagMod(a, b) instead of a(b)
    • To compose VdomNodes, either use React.Fragment(a, b) to result in something immediately renderable, or TagMod(a, b) if you plan to apply it to a tag.
    • VDOM tags now extends VdomElement directly - no need to coerce or call .render when caching
    • Tag building now 30% faster (but we're talking microseconds so it's negligible so why am I writing this in to the changelog?... life's a mystery)
    • Fix subtle bug/puzzler where you could think you're modifying a tag but weren't -- the confusing behaviour responsible will now no longer compile. (#508)
    • Collections get new implicit methods mkReactFragment and toReactFragment (similar to existing mkTagMod and toTagMod)
    • Components now resolve to VdomElements without the need for explicit imports. Typically, this means no more errors when creating router config without importing vdom. (#509)
    • Add formId HTML attribute for associating an input element with a non-ancestoral form.

  • Add AsyncCallback which is like a pure version of Scala's Future and JS's Promise. Asynchronous code can be composed using for-comprehensions as if it's synchronous, it can even be composed to run sequentially or concurrently. In fact you can see an example of running a bunch of AJAX calls in parallel here in this new demo.

  • Callback changes

    • .attemptTry now catches all types of exception
    • Add .memo which memoises the result
    • Change the following to return a AsyncCallback[A] instead of CallbackTo[Future[A]]:
      • .async
      • .delay
      • .delayMs
    • Deprecate .toFuture in favour of .asAsyncCallback.unsafeToFuture()

  • Add to Ajax:

    • def asAsyncCallback: AsyncCallback[XMLHttpRequest]
    • def validateResponse (XMLHttpRequest => Boolean)(AjaxException => Callback): Ajax
    • def validateStatus (Int => Boolean) (AjaxException => Callback): Ajax
    • def validateStatusIs (Int) (AjaxException => Callback): Ajax
    • def validateStatusIsSuccessful (AjaxException => Callback): Ajax

  • Reusability & Reusable have been moved from the extra module, into core.

    1. It was required to implement the new React.memo
    2. It's necessary for using core React feature shouldComponentUpdate reasonably

  • Add ReactDOM.hydrate

  • Add to components: .mapRaw(Raw => Raw)

  • Removed methods deprecated < 1.2.0

  • Dependency upgrades:

    • Cats 1.5.0
    • Scala 2.12.8
    • Scalaz 7.2.27
    • Sourcecode 0.1.5

Migration

  • If you added import japgolly.scalajs.react.vdom.Implicits._ or similar to use components in certain contexts (eg. router config) you can delete now. No replacement needed.
  • Reusability & Reusable have been moved from package japgolly.scalajs.react.extra to japgolly.scalajs.react
find . -type f -name '*.scala' -exec perl -pi -e '

  # Replace .(async|delay|delayMs) on Callback
  s/([. ])((?:async|delay|delayMs) *\([^()]+\))/$1$2$1asCallbackToFuture/;
  s/asCallbackToFuture[. ]void/toCallback/;

  # Reusability move to core
  s/Reusability.shouldComponentUpdateWithOverlay/ReusabilityOverlay.install/;
  s/\bextra\.Reusability\b/Reusability/g;
  s/\bextra\.Reusable\b/Reusable/g;

' {} +