react-draggable icon indicating copy to clipboard operation
react-draggable copied to clipboard

Mark prop-types and classnames as external in webpack build, fixes #298

Open betalb opened this issue 6 years ago • 3 comments

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

betalb avatar Nov 13 '17 11:11 betalb

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

betalb avatar Nov 13 '17 13:11 betalb

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.

STRML avatar Nov 13 '17 15:11 STRML

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

betalb avatar Nov 13 '17 21:11 betalb