JQ version and ES6

* fix gridstack#1709
also fix gridstack#1306 I believe.
* correct info in Readme for using JQ version and ES6 (tested in Angular app)
* changed .ts to include jquery by name instead of location.

README.md

@@ -80,15 +80,27 @@ import 'gridstack/dist/h5/gridstack-dd-native';
 import 'gridstack/dist/jq/gridstack-dd-jqueryui';
 // OR nothing to get static grids (API driven, no user drag&drop)
 ```
+
+**Note**: `jquery` & `jquery-ui` are imported by name, so you will have to specify their location in your webpack (or equivalent) config file, 
+which means you can possibly bring your own version
+```js
+  alias: {
+    'jquery': 'gridstack/dist/jq/jquery.js',
+    'jquery-ui': 'gridstack/dist/jq/jquery-ui.js',
+    'jquery.ui': 'gridstack/dist/jq/jquery-ui.js',
+    'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js',
+  },
+```
+
 Alternatively in html
 
 ```html
 <link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
-<!-- HTML5 drag&drop (64k) -->
+<!-- HTML5 drag&drop (68k) -->
 <script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
-<!-- OR jquery-ui drag&drop (189k) -->
+<!-- OR jquery-ui drag&drop (193k) -->
 <script src="node_modules/gridstack/dist/gridstack-jq.js"></script>
-<!-- OR static grid (36k) -->
+<!-- OR static grid (38k) -->
 <script src="node_modules/gridstack/dist/gridstack-static.js"></script>
 ```
 
@@ -417,9 +429,11 @@ v4 is a complete re-write of the collision and drag in/out heuristics to fix som
 
 # jQuery Application
 
-We now have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`. IFF you want to use gridstack-jq instead and your app needs to bring your own JQ version (only possible in 1.x), you should **instead** use v1.x and include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)).
+We now have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`. 
+
+**NOTE: in v1.x** IFF you want to use gridstack-jq instead and your app needs to bring your own JQ version, you should **instead** include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)).
 
-**NOTE**: v2.x / v3.x does not currently support importing GridStack Drag&Drop without also including our jquery + jquery-ui. Still trying to figure how to make that bundle possible. You will have to use 1.x for now, or use the HTML5 version (no jq).
+**NOTE 2: in v4.0.4+**: (not tested in v2.x / v3.x) for [1709](https://github.com/gridstack/gridstack.js/issues/1709) we now import jquery & jquery-ui by name, so ES6 module import need to specify location of those .js files, which means you might be able to bring your own version as well. See the include instructions.
 
 As for events, you can still use `$(".grid-stack").on(...)` for the version that uses jquery-ui for things we don't support.
 

doc/CHANGES.md

@@ -58,6 +58,7 @@ Change log
 when dragging an item at the bottom below others to make it easier to insert below.
 - fix [#1687](https://github.com/gridstack/gridstack.js/issues/1687) more fix for drag between 2 grids with `row / maxRow` broken in 4.x
 - fix export symbols .d.ts for `gridstack-h5.js | gridstack-jq.js | gridstack-static.js`
+- fix [#1709](https://github.com/gridstack/gridstack.js/issues/1709) correct info for using JQ version and ES6 (tested in Angular app)
 
 ## 4.0.3 (2021-3-28)
 

src/jq/gridstack-dd-jqueryui.ts

@@ -7,11 +7,18 @@ import { GridItemHTMLElement, DDDragInOpt } from '../types';
 // export jq symbols see
 // https://stackoverflow.com/questions/35345760/importing-jqueryui-with-typescript-and-requirejs
 // https://stackoverflow.com/questions/33998262/jquery-ui-and-webpack-how-to-manage-it-into-module
-// TODO: let user bring their own jq or jq-ui version
-import * as $ from './jquery'; // compile this in... having issues TS/ES6 app would include instead
+//
+// Note: user should be able to bring their own by changing their webpack aliases like
+// alias: {
+//   'jquery': 'gridstack/dist/jq/jquery.js',
+//   'jquery-ui': 'gridstack/dist/jq/jquery-ui.js',
+//   'jquery.ui': 'gridstack/dist/jq/jquery-ui.js',
+//   'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js',
+// },
+import * as $ from 'jquery'; // compile this in... having issues TS/ES6 app would include instead
 export { $ };
-import './jquery-ui';
-import './jquery.ui.touch-punch'; // include for touch mobile devices
+import 'jquery-ui';
+import 'jquery.ui.touch-punch'; // include for touch mobile devices
 
 // export our base class (what user should use) and all associated types
 export * from '../gridstack-dd';

webpack.config.js

@@ -24,6 +24,7 @@ module.exports = {
       'jquery': '/src/jq/jquery.js',
       'jquery-ui': '/src/jq/jquery-ui.js',
       'jquery.ui': '/src/jq/jquery-ui.js',
+      'jquery.ui.touch-punch' : '/src/jq/jquery.ui.touch-punch',
     }
   },
   output: {