Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V7 #289

Merged
merged 23 commits into from
Apr 27, 2022
Merged

V7 #289

merged 23 commits into from
Apr 27, 2022

Conversation

hartzis
Copy link
Collaborator

@hartzis hartzis commented Feb 21, 2022

New Features:

  • add new swipeDuration prop - "allowable duration of a swipe"
    • A swipe lasting more than swipeDuration, in milliseconds, will not be considered a swipe.
    • Defaults to Infinity for backwards compatibility
  • add new touchEventOptions prop that can set the options for the touch event listeners
    • this provides users full control of if/when they want to set passive
    • Defaults to { passive: true }
  • add new onTouchStartOrOnMouseDown prop that is called for touchstart and mousedown. Before a swipe even starts.
    • combined with touchEventOptions allows users the ability to now call preventDefault on touchstart
  • add new onTouchEndOrOnMouseUp prop that is called for touchend and mouseup.
  • add react 18 to peerDependencies

Breaking Changes:

  • we have dropped support for es5 transpiled output
    • we target es2015 for our transpilation now
      • swipeable utilizes object/array spread & const/let natively
  • preventScrollOnSwipe - "new" prop. Replaces preventDefaultTouchmoveEvent
    • same functionality but renamed to be more explicit on its intended use
    • fixed bug - where toggling this prop did not re-attach event listeners
    • update - we now only change the passive event listener option for touchmove depending on this prop
    • Thank you @stefvhuynh

Bug fixes:

  • fix bug where directional swiped check allowed undefined/falsy values to set cancelablePageSwipe
  • fix bug when both trackTouch and trackMouse were present that triggered an erroneous swipe when the user clicked outside and above the swipeable area

Infrastructure:

  • post size-limit report to PRs with bundle diff sizes
  • utilize rollup for build & output
    • remove dependency on microbundle
    • remove interop injected code - pull/260
    • Thank you @binoy14
  • upgrade lots of dev dependencies
    • 🎉 upgrade to typescript v4.6.3
  • export/outputs housekeeping and cleaning (mimicked from react-redux)
    • removed/renamed exports from package.json:
      • browser, umd:main(renamed dist), jsnext:main(use module), typings(use types)
    • moved exports - old => new
      • "main": "./dist/react-swipeable.js" => "main": "./lib/index.js"
      • "module": "./dist/react-swipeable.module.js" => "module": "es/index.js"
      • "types": "./dist/index.d.ts" => "types": "./es/index.d.ts"

TODOs

  • figure out way to preserve types.d.ts comments!!!!
  • update migration doc
  • validate examples
  • double check readme is up to date with all these changes
  • validate contributing doc is up to date with all these changes
  • validate works with react 18
    • add v18 to peer deps! 🎉
  • update as many dev deps as possible!
    • testing deps - jest
    • example deps?

@github-actions
Copy link
Contributor

github-actions bot commented Feb 21, 2022

size-limit report 📦

Path Size
dist/react-swipeable.js 1.72 KB (+34.69% 🔺)
lib/index.js 1.62 KB (+100% 🔺)
es/index.js 1.72 KB (+100% 🔺)

@hartzis hartzis linked an issue Mar 24, 2022 that may be closed by this pull request
@hartzis hartzis merged commit 2528bb2 into main Apr 27, 2022
@robinmetral
Copy link

Breaking Changes:

  • we have dropped support for es5 transpiled output
    • we target es2015 for our transpilation now
      • swipeable utilizes object/array spread & const/let natively

FYI: it looks like object spreads still get transpiled, since they're es2018 (I think).

So if anyone still wants to support Safari 10 (doesn't support the object spread syntax), the new transpile target should still be fine.

e.g.:

return {
...state,
...initialState,
initial: xy.slice() as Vector2,
xy,
start: event.timeStamp || 0,
};
});
};

...becomes (checking my node_modules):

return Object.assign(Object.assign(Object.assign({}, state), initialState), { initial: xy.slice(), xy, start: event.timeStamp || 0 });

@hartzis
Copy link
Collaborator Author

hartzis commented Jun 30, 2022

Great callout @robinmetral , I wrote that breaking change note while we were iterating on which compiler/bundler to use. I'll get a PR to clarify this a bit like you noted. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Allow calling e.preventDefault() myself
3 participants