Skip to content

8.0.0
Compare
Choose a tag to compare
@alexreardon alexreardon released this 03 Jul 07:31
· 541 commits to master since this release
v8.0.0
33ef973

Improvements

23% faster 🏃

We have shipped dragging performance improvements of 23% from cold start and 6% during subsequent drags

Measured on a list with 500 Draggables

We did this by:

  • Less DOM reads #609
  • Less state shape checking due to moving closer to an internal state machine #493
  • No more double rendering of Draggable components for each mouse / touch movement #566. This involved working around a react-motion issue.
  • Audit and removal of redundant memoization layers. As a part of this work we ended up dropping reselect

18% smaller 🥗 #525

Our production builds have gone from 38 kb to 31 kb (gzip), a 18% reduction ↓. The cost can be as low as 23 kb if you can deduplicate our dependencies (redux, react-redux and react-motion are the main ones)

We did this by:

  • Moving closer to an internal state machine #493. This resulted in less boilerplate code
  • Refactoring 🤓
  • Dropping reselect and redux-thunk as dependencies. Not that they were very big to start with, but they were no longer needed.
  • Stripping out invariant messages in production builds #597. Thanks @TrySound!!!
  • More aggressive use of production checks (process.env.NODE_ENV === 'production') to strip out developer messaging in production builds
  • Moving to babel 7 #590. @TrySound did a great job getting this in!
  • Removing timing debug code in production builds #603 Thanks @TrySound !!

Development messaging 🔊❤️

Taking inspiration from React, we have introduced a number of development only warnings to assist you with correctly using react-beautiful-dnd:

  • provided.innerRef: will now throw an exception if not provided with a HTMLElement. A common error is to incorrectly provide an instance of a component rather than a DOM reference. We also created a guide to assist users to correctly use the provided.innerRef callbacks: Using innerRef.
  • DroppableProvided > placeholder: if not included as a child of a Droppable a warning will be printed. Not including the placeholder can lead to space not being created in a list when being dragged over
  • Nested scroll containers: we currently do not support Droppables that are in multiple scroll containers. Only single-level scroll containers are currently supported. We hope to add support for nested scroll containers soon: #131. In the meantime, we now warn users that nested scroll containers are not supported if we detect a nested scroll container.

These messages will be stripped in production builds

Improved recovery from any internal errors 🏋️

Errors can happen (I know right!?). If react-beautiful-dnd encounters an error in its code then it will attempt to recover as best as it can: clearing any existing drags and firing the appropriate DragDropContext > hook functions. It will also log some helpful debug information in the console in development builds (process.env.ENV !== 'production')

Engineering health 👩‍⚕️

  • Moving closer to an internal state machine #493
  • Fixing flakey browser test timeout issue #575. Thanks @RajaBellebon and @TrySound
  • Moved from flow 0.73 to 0.75 #584
  • Moving to prettier for style consistency enforcement rather than eslint. Still using eslint for non-style linting #552
  • Upgrading dev dependencies to latest versions #584
  • Continued investment in test improvement and refactoring #493
  • Adding stylelint for internal examples #527. Thanks @xxhomey19

Other

Features

Drop information in the DraggableStateSnapshot #559

We expose information to allow you to style a Draggable while it is being dragged. This is done using the DraggableStateSnapshot. We are adding an additional property isDropAnimating which will be set to true when the Draggable is drop animating. Not all drops have a drop animation. We do not animate a drop if the Draggable is already in the correct spot when the drop occurs. This is commonly the case when dragging with a keyboard. isDragging will continue to be set to true even when a drop is occurring. The drop animation is still apart of the 'drag' interaction and is not important when it comes to our public api. However, you can use the new isDropAnimating property to apply some styles specifically when dropping if you would like to.

type DraggableStateSnapshot = {|
  isDragging: boolean,
+  isDropAnimating: boolean,
  draggingOver: ?DroppableId,
|};

This resulted in a minor version change

Changes

DraggableProvided > DraggableProps > DraggableStyle

Previously we were clearing the margin off a dragging item. We realised this was not needed. Rather than keeping the margin property around, we have decided to keep things as clean as possible and remove it.

type DraggingStyle = {|
  position: 'fixed',
  width: number,
  height: number,
  boxSizing: 'border-box',
  pointerEvents: 'none',
  top: number,
  left: number,
-  margin: 0,
  transition: 'none',
  transform: ?string,
  zIndex: ZIndex,
|}

This is a breaking change 💥 as it is the removal of a property. Risk of breakage: low. This will only cause an issue if you were monkey patching the margin property.

Assets 2