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();

Author: adumesny

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']);
 };

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',

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",

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 {

src/index.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'));
   }
 

src/jq/gridstack-dd-jqueryui.ts

@@ -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"

tsconfig.json

@@ -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',

webpack.config.js

@@ -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" "*"