search

taye / interact.js

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
http://interactjs.io/
MIT License
12.31k stars 783 forks source link

Provide an ES6 module build #769

Closed jdittrich closed 4 years ago

jdittrich commented 4 years ago

Wished-for behavior

Having an ES6-modules compatible build so that interact.js can be cleanly used without a toolchain, too.

Actual behavior

There seem to be builds for AMD, common.js and usage of a global, but no module for ES5 modules.

taye commented 4 years ago

You can now use

<script type="module">
import interact from 'https://cdn.jsdelivr.net/npm/@interactjs/interactjs/index.js'
</script>

Unfortunately, specifying the version with @[version spec] in the jsdelivr url will only get the target file at that version. The imports in the files are all relative and will request dependencies without any version.

taye commented 4 years ago

with version 1.9.0 you can now do:

<script type="module">
import 'https://cdn.jsdelivr.net/npm/@interactjs/actions/use/drag.js'
import 'https://cdn.jsdelivr.net/npm/@interactjs/modifiers/use/index.js'
import 'https://cdn.jsdelivr.net/npm/@interactjs/inertia/use/index.js'
import 'https://cdn.jsdelivr.net/npm/@interactjs/auto-start/use/index.js'
import interact from 'https://cdn.jsdelivr.net/npm/@interactjs/interact/index.js'

interact('.draggable').draggable({})
</script>

Please give it a try and let me know how it works for you. Those “use/*” files are auto-genated by this script.

SamyCookie commented 4 years ago

with version 1.9.0 you can now do:

<script type="module">
import 'https://cdn.jsdelivr.net/npm/@interactjs/actions/use/drag.js'
import 'https://cdn.jsdelivr.net/npm/@interactjs/modifiers/use/index.js'
import 'https://cdn.jsdelivr.net/npm/@interactjs/inertia/use/index.js'
import 'https://cdn.jsdelivr.net/npm/@interactjs/auto-start/use/index.js'
import interact from 'https://cdn.jsdelivr.net/npm/@interactjs/interact/index.js'

interact('.draggable').draggable({})
</script>

Please give it a try and let me know how it works for you. Those “use/*” files are auto-genated by this script.

Thanks for this, ES6 module import from source is working well. However, I would prefer to use a all-in-one dist Javascript file deployed with ES6 compatibility (and without UMD loader and stuff). Is it possible to propose also this kind of build in the dist directory like wretch ?