react-draggable
react-draggable copied to clipboard
Mark prop-types and classnames as external in webpack build, fixes #298
Webpack build updated to use externally provided classnames
and prop-types
packages
Also module
field added that points to ES module index file, which has the same export structure as index.js from perspective of ES modules.
Additional step added to build process that will transpile code using babel, leaving only modules.
Webpack build was not switched from index.js
to index.module.js
because every existing consumer, that uses commonjs modules, will have to explicitly reference default export require('react-draggable').default
Fixes #298
I know why Travis build failed, but I'm not familiar with Typescipt, and why typings for react-dom are of version 16, but for react package -- 15, corresponding yarn.lock entries, that look really odd
even though ^16 is specified, 15.5.4 is resolved
Commit: https://github.com/mzabriskie/react-draggable/commit/db093e60fdbae3bf0c29195587d69f303e0eb1c8
"@types/react-dom@^16.0.0":
version "15.5.4"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-15.5.4.tgz#3f75ba86a2ce9a7d1d9e7d1ee3f186f3a9652d8f"
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@^16.0.0":
version "16.0.3"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.3.tgz#494d5aa71fc071be6eb2a8d3d489da529b25294a"
I've fixed this locally by explicitly installing version 16 of both packages
Thanks. The main
can also be replaced if we just make a commonJS entrypoint using module.exports
. It should be simple enough to fashion one that mimics the existing behavior.
As for the TS definitions, I agree they're weird. We may have to switch up the yarn-specific "resolutions"
attribute to get around it.
Not sure what you meant by "It should be simple enough to fashion one that mimics the existing behavior", for me, it looks like index.js is already doing this.
After some digging I think it might be better to ship 2 bundles: ES module (for bundlers) and UMD (for node & browser).
I can't imagine a lot of profit in keeping existing file structure and transpile every file separately to different directories to have es modules in dist/esm
and common js in dist/cjs
. I hope nobody will try to do something crazy like this in their code: require('react-draggable/dist/cjs/DraggableCore')
or import * from 'react-draggable/dist/esm/DraggableCore'
.
Though there is one pros for this approach: it is easier to implement with existing project dependencies
Creating ES Module bundle may requrie switching to Rollup