TS: packaging fix

* gridstack.all.js is now min again and back to 185k (from 550k with sourcemap)
* added @internal to prevent exporting private methods/vars to .d.ts
* fixed test cases again
* move jquery files to sub folder (what remains to convert)

more #1084

Author: adumesny

.eslintignore

@@ -1,5 +1,5 @@
 dist/*.js
 demo/*
 spec/*
-src/jquery.js
-src/jquery-ui.js
+src/jq/jquery.js
+src/jq/jquery-ui.js

Gruntfile.js

@@ -1,7 +1,7 @@
 /*eslint-disable camelcase */
 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');
@@ -16,7 +16,7 @@ module.exports = function(grunt) {
     sass: {
       options: {
         implementation: sass,
-			  sourceMap: true
+			  sourceMap: false
       },
       dist: {
         files: {
@@ -25,6 +25,7 @@ module.exports = function(grunt) {
         }
       }
     },
+    /* very little gain
     cssmin: {
       dist: {
         options: {
@@ -37,21 +38,18 @@ module.exports = function(grunt) {
         }
       }
     },
+    */
     copy: {
       dist: {
         files: {
-/*
           'dist/gridstack-poly.js': ['src/gridstack-poly.js'],
-          'dist/jquery.js': ['src/jquery.js'],
-          'dist/jquery-ui.js': ['src/jquery-ui.js'],
-*/
+          'dist/jq/jquery.js': ['src/jq/jquery.js'],
+          'dist/jq/jquery-ui.js': ['src/jq/jquery-ui.js'],
           'dist/src/gridstack.scss': ['src/gridstack.scss'],
           'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'],
         }
       }
     },
-
-    /*
     uglify: {
       options: {
         sourceMap: true,
@@ -62,14 +60,18 @@ module.exports = function(grunt) {
       },
       dist: {
         files: {
-          //'dist/gridstack-poly.min.js': 'src/gridstack-poly.js',
-          //'dist/jquery.min.js': 'src/jquery.js',
-          //'dist/jquery-ui.min.js': 'src/jquery-ui.js'
+          'dist/jq/jqueryui-gridstack-dragdrop-plugin.min.js': 'dist/jq/jqueryui-gridstack-dragdrop-plugin.js',
+          'dist/jq/jquery.min.js': 'src/jq/jquery.js',
+          'dist/jq/jquery-ui.min.js': 'src/jq/jquery-ui.js',
+
+          'dist/gridstack-dragdrop-plugin.min.js': 'dist/gridstack-dragdrop-plugin.js',
+          'dist/gridstack-engine.min.js': 'dist/gridstack-engine.js',
+          'dist/gridstack-poly.min.js': 'src/gridstack-poly.js',
+          'dist/types.min.js': 'dist/types.js',
+          'dist/utils.min.js': 'dist/utils.js',
         }
       }
     },
-    */
-
     eslint: {
       target: ['*.js', 'src/*.js']
     },
@@ -116,7 +118,7 @@ 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']);
 };
 /*eslint-enable camelcase */

demo/float.html

@@ -8,13 +8,13 @@
 
   <link rel="stylesheet" href="demo.css"/>
   <script src="../dist/gridstack.all.js"></script>
-  <!--
+  <!-- need umd vs commonjs ? but then GridStack not found...
   <script src="../dist/utils.js"></script>
   <script src="../dist/gridstack-engine.js"></script>
-  <script src="../src/jquery.js"></script>
   <script src="../dist/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../dist/jqueryui-gridstack-dragdrop-plugin.js"></script>
+  <script src="../src/jq/jquery.js"></script>
+  <script src="../src/jq/jquery-ui.js"></script>
+  <script src="../dist/jq/jqueryui-gridstack-dragdrop-plugin.js"></script>
   -->
 
 </head>

demo/two.html

@@ -80,17 +80,12 @@ <h1>Two grids demo</h1>
       <div class="col-md-6">
         <a onClick="toggleFloat(this, 0)" class="btn btn-primary" href="#">float: false</a>
         <a onClick="compact(0)" class="btn btn-primary" href="#">Compact</a>
-        <div class="grid-stack grid-stack-6">
-          <div class="grid-stack-item">
-            <div class="grid-stack-item-content"><button onClick="alert('clicked')">click</button></div>
-          </div>
-        </div>
+        <div class="grid-stack grid-stack-6"></div>
       </div>
       <div class="col-md-6">
         <a onClick="toggleFloat(this, 1)" class="btn btn-primary" href="#">float: true</a>
         <a onClick="compact(1)" class="btn btn-primary" href="#">Compact</a>
-        <div class="grid-stack grid-stack-6">
-          </div>
+        <div class="grid-stack grid-stack-6"></div>
       </div>
     </div>
   </div>
@@ -108,7 +103,7 @@ <h1>Two grids demo</h1>
     grids[1].float(true);
 
     let items = [
-      {x: 1, y: 0, width: 2, height: 2},
+      {x: 0, y: 0, width: 2, height: 2},
       {x: 3, y: 1, width: 1, height: 2},
       {x: 4, y: 1, width: 1, height: 1},
       {x: 2, y: 3, width: 3, height: 1, maxWidth: 3, id: 'special', text: 'has maxWidth=3'},

doc/README.md

@@ -147,7 +147,7 @@ The Typescript `GridStackEvent` list all possible values, and nothing else is su
 Called when widgets are being added to a grid
 
 ```js
-grid.on('added', function(event: GridEvent, items: GridStackNode[]) {
+grid.on('added', function(event: Event, items: GridStackNode[]) {
   items.forEach(function(item) {...});
 });
 ```
@@ -157,15 +157,15 @@ grid.on('added', function(event: GridEvent, items: GridStackNode[]) {
 Occurs when widgets change their position/size due to constrain or direct changes
 
 ```js
-grid.on('change', function(event: GridEvent, items: GridStackNode[]) {
+grid.on('change', function(event: Event, items: GridStackNode[]) {
   items.forEach(function(item) {...});
 });
 ```
 
 ### disable(event)
 
 ```js
-grid.on('disable', function(event: GridEvent) {
+grid.on('disable', function(event: Event) {
   let grid: GridStack = event.target.gridstack;
 });
 ```
@@ -175,15 +175,15 @@ grid.on('disable', function(event: GridEvent) {
 called when grid item is starting to be dragged
 
 ```js
-grid.on('dragstart', function(event: GridEvent, el: GridItemHTMLElement) {
+grid.on('dragstart', function(event: Event, el: GridItemHTMLElement) {
 });
 ```
 
 ### dragstop(event, el)
 called after the user is done moving the item, with updated DOM attributes.
 
 ```js
-grid.on('dragstop', function(event: GridEvent, el: GridItemHTMLElement) {
+grid.on('dragstop', function(event: Event, el: GridItemHTMLElement) {
   let x = parseInt(el.getAttribute('data-gs-x')) || 0;
   // or all values...
   let node: GridStackNode = el.gridstackNode; // {x, y, width, height, id, ....}
@@ -195,7 +195,7 @@ grid.on('dragstop', function(event: GridEvent, el: GridItemHTMLElement) {
 called when an item has been dropped and accepted over a grid. If the item came from another grid, the previous widget node info will also be sent (but dom item long gone).
 
 ```js
-grid.on('dropped', function(event: GridEvent, previousWidget: GridStackNode, newWidget: GridStackNode) {
+grid.on('dropped', function(event: Event, previousWidget: GridStackNode, newWidget: GridStackNode) {
   console.log('Removed widget that was dragged out of grid:', previousWidget);
   console.log('Added widget in dropped grid:', newWidget);
 });
@@ -204,7 +204,7 @@ grid.on('dropped', function(event: GridEvent, previousWidget: GridStackNode, new
 ### enable(event)
 
 ```js
-grid.on('enable', function(event: GridEvent) {
+grid.on('enable', function(event: Event) {
   let grid: GridStack = event.target.gridstack;
 });
 ```
@@ -214,7 +214,7 @@ grid.on('enable', function(event: GridEvent) {
 Called when items are being removed from the grid
 
 ```js
-grid.on('removed', function(event: GridEvent, items: GridStackNode[]) {
+grid.on('removed', function(event: Event, items: GridStackNode[]) {
   items.forEach(function(item) {...});
 });
 ```
@@ -224,7 +224,7 @@ grid.on('removed', function(event: GridEvent, items: GridStackNode[]) {
 called before the user starts resizing an item
 
 ```js
-grid.on('resizestart', function(event: GridEvent, el: GridItemHTMLElement) {
+grid.on('resizestart', function(event: Event, el: GridItemHTMLElement) {
 });
 ```
 
@@ -233,7 +233,7 @@ grid.on('resizestart', function(event: GridEvent, el: GridItemHTMLElement) {
 called after the user is done resizing the item, with updated DOM attributes.
 
 ```js
-grid.on('resizestop', function(event: GridEvent, el: GridItemHTMLElement) {
+grid.on('resizestop', function(event: Event, el: GridItemHTMLElement) {
   let width = parseInt(el.getAttribute('data-gs-width')) || 0;
   // or all values...
   let node: GridStackNode = el.gridstackNode; // {x, y, width, height, id, ....}

karma.conf.js

@@ -17,7 +17,7 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
-      'src/*.ts',
+      'src/**/*.ts',
       'spec/*-spec.ts',
       // 'spec/e2e/*-spec.js' issues with ReferenceError: `browser` & `element` is not defined
     ],

package.json

@@ -9,7 +9,8 @@
     "url": "git+https://github.com/gridstack/gridstack.js.git"
   },
   "scripts": {
-    "build": "yarn --no-progress && rm -rf dist/* && webpack && grunt && doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
+    "build": "yarn --no-progress && rm -rf dist/* && webpack && tsc --stripInternal && grunt && doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
+    "t": "tsc --stripInternal",
     "web": "rm -rf dist/* && webpack",
     "test": "yarn lint && karma start karma.conf.js",
     "lint": "tsc --noEmit && eslint src/*.ts",

spec/gridstack-spec.ts

@@ -1414,7 +1414,7 @@ describe('gridstack', function() {
     });
     it('add 3 single events', function() {
       let grid = GridStack.init();
-      let fcn = (event: CustomEvent) => {};
+      let fcn = (event: Event) => {};
       grid.on('added', fcn).on('enable', fcn).on('dragstart', fcn);
       expect((grid as any)._gsEventHandler.enable).not.toBe(undefined);
       grid.off('added').off('enable').off('dragstart');

src/gridstack-dragdrop-plugin.ts

@@ -8,7 +8,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
 import { GridStack } from './gridstack';
-import { GridItemHTMLElement, GridStackNode, GridEvent } from './types';
+import { GridItemHTMLElement } from './types';
 
 /** Drag&Drop drop options */
 export type DDDropOpt = {
@@ -22,7 +22,7 @@ export type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | {} |
 export type DDKey = 'minWidth' | 'minHeight' | string;
 
 /** drag&drop events callbacks */
-export type DDCallback = (event: GridEvent, arg2: GridItemHTMLElement) => void;
+export type DDCallback = (event: Event, arg2: GridItemHTMLElement) => void;
 
 /**
  * Base class for drag'n'drop plugin.

src/gridstack-engine.ts

@@ -62,6 +62,7 @@ export class GridStackEngine {
     return this;
   }
 
+  /** @internal */
   private _fixCollisions(node: GridStackNode): GridStackEngine {
     this._sortNodes(-1);
 
@@ -125,11 +126,13 @@ export class GridStackEngine {
   /** float getter method */
   public get float(): boolean { return this._float || false; }
 
+  /** @internal */
   private _sortNodes(dir?: -1 | 1): GridStackEngine {
     this.nodes = Utils.sort(this.nodes, dir, this.column);
     return this;
   }
 
+  /** @internal */
   private _packNodes(): GridStackEngine {
     this._sortNodes();
 
@@ -264,6 +267,7 @@ export class GridStackEngine {
     return this.nodes.filter(n => n._dirty);
   }
 
+  /** @internal */
   private _notify(nodes?: GridStackNode | GridStackNode[], detachNode?: boolean): GridStackEngine {
     if (this.batchMode) { return this }
     detachNode = (detachNode === undefined ? true : detachNode);
@@ -605,7 +609,7 @@ export class GridStackEngine {
     }
   }
 
-  // legacy method renames
+  /** @internal legacy method renames */
   private getGridHeight = obsolete(this, GridStackEngine.prototype.getRow, 'getGridHeight', 'getRow', 'v1.0.0');
 }