From 716c2d6b14868a838f8ef72577fea79a5a3a674d Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Sun, 9 Aug 2020 20:34:32 -0700
Subject: [PATCH 1/2] TS: support for ES6 modules

* use webpack to bundle gridstack.all.js (all inclusive, works in browsers)
* use tsc to compile each .TS into ES6 modules
verified that you can now do this in a sample app

import { GridStack } from 'gridstack';
import 'gridstack/dist/gridstack.css';

var grid = GridStack.init();
---
 Gruntfile.js                    | 12 +++++-------
 demo/two.html                   |  7 +------
 package.json                    | 10 ++++++----
 src/gridstack.ts                | 11 +++++++++++
 src/index.ts                    | 15 ---------------
 src/jq/gridstack-dd-jqueryui.ts |  9 +++++----
 tsconfig.json                   |  8 +++++---
 webpack.config.js               | 10 +---------
 yarn.lock                       | 17 ++++++++++++-----
 9 files changed, 46 insertions(+), 53 deletions(-)
 delete mode 100644 src/index.ts

diff --git a/Gruntfile.js b/Gruntfile.js
index 27ea7f1c9..b1e6813cb 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,6 +1,6 @@
 module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-sass');
-  // grunt.loadNpmTasks('grunt-contrib-cssmin');
+  grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-eslint');
@@ -24,7 +24,6 @@ module.exports = function(grunt) {
         }
       }
     },
-    /* very little gain
     cssmin: {
       dist: {
         options: {
@@ -37,7 +36,6 @@ module.exports = function(grunt) {
         }
       }
     },
-    */
     copy: {
       dist: {
         files: {
@@ -58,8 +56,8 @@ module.exports = function(grunt) {
       },
       dist: {
         files: {
-          'dist/jq/jquery.min.js': 'src/jq/jquery.js',
-          'dist/jq/jquery-ui.min.js': 'src/jq/jquery-ui.js',
+          'dist/jq/jquery.js': 'src/jq/jquery.js',
+          'dist/jq/jquery-ui.js': 'src/jq/jquery-ui.js',
           /*
           'dist/jq/gridstack-dd-jqueryui.min.js': 'dist/jq/gridstack-dd-jqueryui.js',
           'dist/gridstack-dd.min.js': 'dist/gridstack-dd.js',
@@ -84,7 +82,7 @@ module.exports = function(grunt) {
       },
       styles: {
         files: ['src/*.scss'],
-        tasks: ['sass'/*, 'cssmin'*/],
+        tasks: ['sass', 'cssmin'],
         options: {
         },
       }
@@ -118,6 +116,6 @@ module.exports = function(grunt) {
   });
 
   grunt.registerTask('lint', ['eslint']);
-  grunt.registerTask('default', ['sass', /*'cssmin', 'eslint',*/ 'copy', 'uglify']);
+  grunt.registerTask('default', ['sass', 'cssmin', /*'eslint',*/ 'copy', 'uglify']);
   grunt.registerTask('e2e-test', ['connect', 'protractor_webdriver', 'protractor']);
 };
diff --git a/demo/two.html b/demo/two.html
index e646cd4dc..2cb819f11 100644
--- a/demo/two.html
+++ b/demo/two.html
@@ -11,12 +11,6 @@
   <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
 
   <script src="../dist/gridstack.all.js"></script>
-  <!--
-  <script src="../dist/jq/jquery.min.js"></script>
-  <script src="../dist/jq/jquery-ui.min.js"></script>
-  <script src="../dist/gridstack.js"></script>
-  <script src="../dist/jq/gridstack-dd-jqueryui.js"></script>
-  -->
 
   <style type="text/css">
     .grid-stack {
@@ -100,6 +94,7 @@ <h1>Two grids demo</h1>
   <script type="text/javascript">
     let options = {
       column: 6,
+      cellHeight: 70,
       disableOneColumnMode: true,
       float: false,
       removable: '.trash',
diff --git a/package.json b/package.json
index a03d7eb58..c4b741268 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,9 @@
     "url": "git+https://github.com/gridstack/gridstack.js.git"
   },
   "scripts": {
-    "build": "yarn --no-progress && rm -rf dist/* && grunt && webpack && doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
+    "build": "yarn --no-progress && rm -rf dist/* && grunt && webpack && tsc --stripInternal && doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
     "w": "rm -rf dist/* && grunt && webpack",
-    "t": "rm -rf dist/* && tsc --stripInternal",
+    "t": "rm -rf dist/* && grunt && tsc --stripInternal",
     "test": "yarn lint && karma start karma.conf.js",
     "lint": "tsc --noEmit && eslint src/*.ts",
     "reset": "rm -rf dist node_modules",
@@ -43,9 +43,11 @@
   },
   "homepage": "http://gridstack.github.io/gridstack.js/",
   "dependencies": {
+  },
+  "devDependencies": {
     "@types/jasmine": "^3.5.9",
-    "@types/jquery": "^3.3.33",
-    "@types/jqueryui": "^1.12.10",
+    "@types/jquery": "^3.5.1",
+    "@types/jqueryui": "^1.12.13",
     "@typescript-eslint/eslint-plugin": "^2.23.0",
     "@typescript-eslint/parser": "^2.23.0",
     "connect": "^3.7.0",
diff --git a/src/gridstack.ts b/src/gridstack.ts
index 268ebc294..9ecb5e5e3 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -5,12 +5,23 @@
  * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
  * gridstack.js may be freely distributed under the MIT license.
 */
+import './gridstack-poly.js';
 
 import { GridStackEngine } from './gridstack-engine';
 import { obsoleteOpts, obsoleteOptsDel, obsoleteAttr, obsolete, Utils } from './utils';
 import { GridItemHTMLElement, GridStackWidget, GridStackNode, GridstackOptions, numberOrString } from './types';
 import { GridStackDD } from './gridstack-dd';
 
+// export all dependent file as well to make it easier for users to just import the main file
+export * from './types';
+export * from './utils';
+export * from './gridstack-engine';
+export * from './gridstack-dd';
+
+// TEMPORARY import the jquery-ui drag&drop since we don't have alternative yet and don't expect users to create their own yet
+import './jq/gridstack-dd-jqueryui';
+export * from './jq/gridstack-dd-jqueryui';
+
 export type GridStackElement = string | HTMLElement | GridItemHTMLElement;
 
 export interface GridHTMLElement extends HTMLElement {
diff --git a/src/index.ts b/src/index.ts
deleted file mode 100644
index 50aeaf6a8..000000000
--- a/src/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// index.ts 2.0.0-rc @preserve
-
-/**
- * The package's root file.  Exports all exported classes.
- */
-import './gridstack-poly.js';
-
-export * from './types';
-export * from './utils';
-export * from './gridstack-engine';
-export * from './gridstack-dd';
-export * from './gridstack';
-export * from './jq/gridstack-dd-jqueryui';
-
-// declare module 'gridstack'; for umd ?
diff --git a/src/jq/gridstack-dd-jqueryui.ts b/src/jq/gridstack-dd-jqueryui.ts
index 4b57cb884..99c8c3609 100644
--- a/src/jq/gridstack-dd-jqueryui.ts
+++ b/src/jq/gridstack-dd-jqueryui.ts
@@ -12,8 +12,9 @@ import { GridItemHTMLElement, DDDragInOpt } from '../types';
 
 // TODO: TEMPORARY until can remove jquery-ui drag&drop and this class and use HTML5 instead !
 // see https://stackoverflow.com/questions/35345760/importing-jqueryui-with-typescript-and-requirejs
-import * as $ from './jquery.js';
-import './jquery-ui.js';
+import * as $ from './jquery';
+export { $ };
+export * from './jquery-ui';
 
 /**
  * Jquery-ui based drag'n'drop plugin.
@@ -67,7 +68,7 @@ export class GridStackDDJQueryUI extends GridStackDD {
   }
 
   public dragIn(el: GridStackElement, opts: DDDragInOpt): GridStackDD {
-    let $el: JQuery = $(el);
+    let $el: JQuery = $(el as any); // workaround Type 'string' is not assignable to type 'PlainObject<any>' - see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/29312
     $el.draggable(opts);
     return this;
   }
@@ -89,7 +90,7 @@ export class GridStackDDJQueryUI extends GridStackDD {
   }
 
   public isDraggable(el: GridStackElement): boolean {
-    let $el: JQuery = $(el);
+    let $el: JQuery = $(el as any); // workaround Type 'string' is not assignable to type 'PlainObject<any>' - see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/29312
     return Boolean($el.data('ui-draggable'));
   }
 
diff --git a/tsconfig.json b/tsconfig.json
index af6514e14..ab9851056 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,15 +10,17 @@
     "experimentalDecorators": true,
     "inlineSources": true,
     "lib": [ "es6", "es2015", "dom" ],
-    "module": "commonjs",
+    "module": "CommonJS",
     "noImplicitAny": false,
     "outDir": "./dist",
     "sourceMap": true,
     "strict": false,
-    "target": "es5"
+    "target": "ES6"
   }, 
   "exclude": [
-    "./src/**/*.spec.ts"
+    "./src/**/*.spec.ts",
+    "./src/index.ts" // used for webpack all.js
+
   ],
   "include": [
     "./src/**/*.ts"
diff --git a/webpack.config.js b/webpack.config.js
index 35f94bc74..88cad811d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,15 +2,7 @@ const path = require('path');
 
 module.exports = {
   entry: {
-    'gridstack.all': './src/index.ts',
-    'gridstack': './src/gridstack.ts',
-    /*
-    'types': './src/types.ts',
-    'utils': './src/utils.ts',
-    'gridstack-engine': './src/gridstack-engine.ts',
-    'gridstack-dd': './src/gridstack-dd.ts',
-    'jq/gridstack-dd-jqueryui': './src/jq/gridstack-dd-jqueryui.ts',
-    */
+    'gridstack.all': './src/gridstack.ts',
   },
   mode: 'production', // production vs development
   devtool: 'source-map',
diff --git a/yarn.lock b/yarn.lock
index ee5a3dc21..a70e2cdc6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -46,17 +46,24 @@
   resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-3.5.9.tgz#43ca4566f0d9de23df1211ecf32a9b9f8c3a5923"
   integrity sha512-KNL2Fq6GRmty2j6+ZmueT/Z/dkctLNH+5DFoGHNDtcgt7yME9NZd8x2p81Yuea1Xux/qAryDd3zVLUoKpDz1TA==
 
-"@types/jquery@*", "@types/jquery@^3.3.33":
+"@types/jquery@*":
   version "3.3.33"
   resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.3.33.tgz#61d9cbd4004ffcdf6cf7e34720a87a5625a7d8e9"
   integrity sha512-U6IdXYGkfUI42SR79vB2Spj+h1Ly3J3UZjpd8mi943lh126TK7CB+HZOxGh2nM3IySor7wqVQdemD/xtydsBKA==
   dependencies:
     "@types/sizzle" "*"
 
-"@types/jqueryui@^1.12.10":
-  version "1.12.10"
-  resolved "https://registry.yarnpkg.com/@types/jqueryui/-/jqueryui-1.12.10.tgz#39ebe4c391fb3b9f623521b4d803d9d4804883fa"
-  integrity sha512-T8sctslWIiLl/2EHEQQfKCB92S9bMKBaeE3+iBRbSERMK/1gzyfqjaIEksduB4eUEsKq+Ji0Y+qVbiXQwI2Mwg==
+"@types/jquery@^3.5.1":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.1.tgz#cebb057acf5071c40e439f30e840c57a30d406c3"
+  integrity sha512-Tyctjh56U7eX2b9udu3wG853ASYP0uagChJcQJXLUXEU6C/JiW5qt5dl8ao01VRj1i5pgXPAf8f1mq4+FDLRQg==
+  dependencies:
+    "@types/sizzle" "*"
+
+"@types/jqueryui@^1.12.13":
+  version "1.12.13"
+  resolved "https://registry.yarnpkg.com/@types/jqueryui/-/jqueryui-1.12.13.tgz#1aa0507b4d1a75b03592d2126fbd6d2ea8e8c284"
+  integrity sha512-IIOytTkwN6mBcJqi5SP8T8zqDGKy9hIpifQ0aGj1/ZjqshOoMo0yZdLp2uLIg7mQDJOwMCSC3EY1QZC/qZzvLQ==
   dependencies:
     "@types/jquery" "*"
 

From ab9c283dfc8d0a9a6ef01c497900f335451798d2 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Tue, 11 Aug 2020 10:06:12 -0700
Subject: [PATCH 2/2] TS: v2.0.0-rc release candidate

---
 README.md      | 94 +++++++++++++++++++++++++++++++-------------------
 doc/CHANGES.md |  2 +-
 2 files changed, 59 insertions(+), 37 deletions(-)

diff --git a/README.md b/README.md
index 493b808c6..9b5b7c9d3 100644
--- a/README.md
+++ b/README.md
@@ -37,10 +37,10 @@ Join us on Slack: https://gridstackjs.troolee.com
   - [Custom columns CSS](#custom-columns-css)
   - [Override resizable/draggable options](#override-resizabledraggable-options)
   - [Touch devices support](#touch-devices-support)
-  - [Migrating to v0.6.x](#migrating-to-v06x)
-  - [Migrating to v1.0.0](#migrating-to-v100)
+  - [Migrating to v0.6](#migrating-to-v06)
+  - [Migrating to v1](#migrating-to-v1)
     - [jQuery Application](#jquery-application)
-  - [Migrating to v2.0.0](#migrating-to-v200)
+  - [Migrating to v2](#migrating-to-v2)
 - [Changes](#changes)
 - [The Team](#the-team)
 
@@ -70,44 +70,66 @@ npm install --save gridstack
 
 ## Include
 
-after you install:
+ES6 or Typescript
+
+```js
+import { GridStack } from 'gridstack';
+import 'gridstack/dist/gridstack.css';
+```
+
+legacy javascript
 
 ```js
 import 'gridstack/dist/gridstack.all.js';
 import 'gridstack/dist/gridstack.css';
 ```
-* alternatively in html
+
+alternatively in html
 
 ```html
 <link rel="stylesheet" href="node_modules/gridstack/dist/gridstack.min.css" />
 <script src="node_modules/gridstack/dist/gridstack.all.js"></script>
 ```
 
-* or using CDN (minimized):
+or using CDN (minimized):
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@1.2.0/dist/gridstack.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/gridstack@1.2.0/dist/gridstack.all.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@2.0.0-rc/dist/gridstack.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/gridstack@2.0.0-rc/dist/gridstack.all.js"></script>
 ```
 
-if you need to debug, look at the git demo/ examples for non min includes.
+.map files are included for debugging purposes.
 
 ## Basic usage
 
 creating items dynamically...
 
-```html
+```js
+// ...in your HTML
 <div class="grid-stack"></div>
 
-<script type="text/javascript">
-  let grid = GridStack.init();
-  grid.addWidget('<div><div class="grid-stack-item-content">Item 1</div></div>', {width: 2});
-</script>
+// ...in your script
+var grid = GridStack.init();
+grid.addWidget('<div><div class="grid-stack-item-content">Item 1</div></div>', {width: 2});
+```
+
+... or creating from list
+
+```js
+// using serialize data instead of .addWidget()
+const serializedData = [
+  {x: 0, y: 0, width: 2, height: 2},
+  {x: 2, y: 3, width: 3, height: 1},
+  {x: 1, y: 3, width: 1, height: 1}
+];
+
+grid.load(serializedData);
 ```
 
 ... or DOM created items
 
-```html
+```js
+// ...in your HTML
 <div class="grid-stack">
   <div class="grid-stack-item">
     <div class="grid-stack-item-content">Item 1</div>
@@ -117,9 +139,8 @@ creating items dynamically...
   </div>
 </div>
 
-<script type="text/javascript">
-  GridStack.init();
-</script>
+// ...in your script
+GridStack.init();
 ```
 
 see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example too.
@@ -276,24 +297,24 @@ GridStack.init(options);
 If you're still experiencing issues on touch devices please check [#444](https://github.com/gridstack/gridstack.js/issues/444)
 
 
-## Migrating to v0.6.x
+## Migrating to v0.6
 
 starting in 0.6.x `change` event are no longer sent (for pretty much most nodes!) when an item is just added/deleted unless it also changes other nodes (was incorrect and causing inefficiencies). You may need to track `added|removed` [events](https://github.com/gridstack/gridstack.js/tree/develop/doc#events) if you didn't and relied on the old broken behavior.
 
-## Migrating to v1.0.0
+## Migrating to v1
 
 v1.0.0 removed Jquery from the API and external dependencies, which will require some code changes. Here is a list of the changes:
 
-1. see [Migrating to v0.6.x](#migrating-to-v06x) if you didn't already
+1. see [Migrating to v0.6](#migrating-to-v06) if you didn't already
 
-2. your code only needs to include `gridstack.all.js` and `gristack.css` (don't include other JS) and is recommended you do that as internal dependencies will change over time. If you are jquery based, also see note below.
+2. your code only needs to include `gridstack.all.js` and `gristack.css` (don't include other JS) and is recommended you do that as internal dependencies will change over time. If you are jquery based, see [jquery app](#jquery-application) below.
 
 3. code change:
 
 **OLD** initializing code + adding a widget + adding an event:
 ```js
 // initialization returned Jquery element, requiring second call to get GridStack var
-let grid = $('.grid-stack').gridstack(opts?).data('gridstack');
+var grid = $('.grid-stack').gridstack(opts?).data('gridstack');
 
 // returned Jquery element
 grid.addWidget($('<div><div class="grid-stack-item-content"> test </div></div>'), undefined, undefined, 2, undefined, true);
@@ -302,13 +323,13 @@ grid.addWidget($('<div><div class="grid-stack-item-content"> test </div></div>')
 $('.grid-stack').on('added', function(e, items) {/* items contains info */});
 
 // grid access after init
-let grid = $('.grid-stack').data('gridstack');
+var grid = $('.grid-stack').data('gridstack');
 ```
 **NEW**
 ```js
 // element identifier defaults to '.grid-stack', returns the grid
-// Note: for Typescript use window.GridStack.init() until next native TS version
-let grid = GridStack.init(opts?, element?);
+// Note: for Typescript use window.GridStack.init() until next native 2.x TS version
+var grid = GridStack.init(opts?, element?);
 
 // returns DOM element
 grid.addWidget('<div><div class="grid-stack-item-content"> test </div></div>', {width: 2});
@@ -317,9 +338,9 @@ grid.addWidget('<div><div class="grid-stack-item-content"> test </div></div>', {
 grid.on('added', function(e, items) {/* items contains info */});
 
 // grid access after init
-let grid = el.gridstack; // where el = document.querySelector('.grid-stack') or other ways...
+var grid = el.gridstack; // where el = document.querySelector('.grid-stack') or other ways...
 ```
-Other vars/global changes
+Other changes
 ```
 `GridStackUI` --> `GridStack`
 `GridStackUI.GridStackEngine` --> `GridStack.Engine`
@@ -332,22 +353,23 @@ Recommend looking at the [many samples](./demo) for more code examples.
 
 ### jQuery Application
 
-We're working on implementing HTML5 drag'n'drop through the plugin system. Right now it is still jquery-ui based. Because of that we are still bundling `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) internally in `gridstack.all.js`. IFF your app needs to bring your own version instead, 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))
+We're working on implementing HTML5 drag'n'drop through the plugin system. Right now it is still jquery-ui based. Because of that we are still bundling `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) internally in `gridstack.all.js`. IFF your app needs to bring your own version instead, 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.0.-rc does not currently support importing GridStack Drag&Drop without also including our jquery + jqueryui. Still trying to figure how to make that bundle possible.
 
-## Migrating to v2.0.0
+## Migrating to v2
 
-make sure to read v1.0.0 migration first!
+make sure to read v1 migration first!
 
-v2.x is a Typescript rewrite of 1.x, removing all jquery events, using classes and overall code cleanup. Your code might need to change from 1.x
+v2.x is a Typescript rewrite of 1.x, removing all jquery events, using classes and overall code cleanup to support ES6 modules. Your code might need to change from 1.x
 
-1. In general methods that used no args (getter) vs setter are not used in Typescript when the arguments differ.
-Also legacy methods that used to take many parameters will now take a single object (typically `GridstackOptions` or `GridStackWidget`).
+1. In general methods that used no args (getter) vs setter can't be used in TS when the arguments differ (set/get are also not function calls so API would have changed). Instead we decided to have <b>all set methods return</b> `GridStack` to they can be chain-able (ex: `grid.float(true).cellHeight(10).column(6)`). Also legacy methods that used to take many parameters will now take a single object (typically `GridstackOptions` or `GridStackWidget`).
 
 ```
-removed `addWidget(el, x, y, width, ...)` --> use the widget options version instead `addWidget(el, {with, ...})`
+`addWidget(el, x, y, width, height)` --> `addWidget(el, {with: 2})`
 `float()` to get value --> `getFloat()`
 'cellHeight()` to get value --> `getCellHeight()`
-'verticalMargin' is now 'margin' grid options and applies to all 4 sides.
+'verticalMargin' is now 'margin' grid options and API that applies to all 4 sides.
 'verticalMargin()` to get value --> `getMargin()`
 ```
 
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index db2aa7d32..130950986 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -37,7 +37,7 @@ Change log
 
 ## 2.0.0-dev (upcoming)
 
-- re-write to native Typescript, removing all JQuery from main code and API (drag&drop plugin still using for now which use latest v3.5.1)
+- re-write to native Typescript, removing all JQuery from main code and API (drag&drop plugin still using jqueryui for now)
 - add `getGridItems()` to return list of HTML grid items
 - add `{dragIn | dragInOptions}` grid attributes to handle external drag&drop items
 - add `save()` and `load()` to serialize grids from JSON, saving all attributes (not just w,h,x,y) [1286](https://github.com/gridstack/gridstack.js/issues/1286)