Merge pull request #2282 from adumesny/master

adumesny · web-flow · commit be8652066fb2 · 2023-04-29T08:47:06.000-07:00
v8.0.0 release
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -43,9 +43,9 @@ module.exports = function(grunt) {
           'dist/es5/gridstack-poly.js': ['src/gridstack-poly.js'],
           'dist/src/gridstack.scss': ['src/gridstack.scss'],
           'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'],
-          'dist/angular/README.md': ['demo/angular/src/app/README.md'],
-          'dist/angular/gridstack.component.ts': ['demo/angular/src/app/gridstack.component.ts'],
-          'dist/angular/gridstack-item.component.ts': ['demo/angular/src/app/gridstack-item.component.ts'],
+          'dist/ng/README.md': ['demo/angular/src/app/README.md'],
+          // 'dist/ng/gridstack.component.ts': ['demo/angular/src/app/gridstack.component.ts'],
+          // 'dist/ng/gridstack-item.component.ts': ['demo/angular/src/app/gridstack-item.component.ts'],
         }
       }
     },
diff --git a/README.md b/README.md
@@ -44,6 +44,7 @@ Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/grids
   - [Migrating to v5](#migrating-to-v5)
   - [Migrating to v6](#migrating-to-v6)
   - [Migrating to v7](#migrating-to-v7)
+  - [Migrating to v8](#migrating-to-v8)
 - [jQuery Application](#jquery-application)
 - [Changes](#changes)
 - [The Team](#the-team)
@@ -444,6 +445,13 @@ The main difference is you only need to include gridstack.js and get D&D (deskto
 
 New addition, no API breakage per say. See release notes about creating sub-grids on the fly.
 
+## Migrating to v8
+
+Possible breaking change if you use nested grid JSON format, or original Angular wrapper. Also target is now ES2020 (see release notes).
+* `GridStackOptions.subGrid` -> `GridStackOptions.subGridOpts` rename
+* We now have `GridStackWidget.subGridOpts` vs `GridStackNode.subGrid` (was `subGrid` with both types which is error prone)
+* `GridStackOptions.addRemoveCB` -> `GridStack.addRemoveCB` is now global instead of grid option
+
 # jQuery Application
 
 This is **old and no longer apply to v6+**. You'll need to use v5.1.1 and before
diff --git a/demo/angular/src/app/README.md b/demo/angular/src/app/README.md
@@ -15,7 +15,7 @@ HTML
 Code
 ```ts
 import { GridStack, GridStackOptions } from 'gridstack';
-import { gsCreateNgComponents } from './gridstack.component';
+import { gsCreateNgComponents } from 'gridstack/dist/ng/gridstack.component';
 
 constructor() {
   // use the built in component creation code
@@ -48,7 +48,7 @@ Code
 ```ts
 import { Component } from '@angular/core';
 import { GridStack, GridStackOptions } from 'gridstack';
-import { GridstackComponent, gsCreateNgComponents, NgGridStackWidget, nodesCB } from './gridstack.component';
+import { GridstackComponent, gsCreateNgComponents, NgGridStackWidget, nodesCB } from 'gridstack/dist/ng/gridstack.component';
 
 // some custom components
 @Component({
@@ -107,7 +107,7 @@ HTML
 Code
 ```javascript
 import { GridStackOptions, GridStackWidget } from 'gridstack';
-import { nodesCB } from './gridstack.component';
+import { nodesCB } from 'gridstack/dist/ng/gridstack.component';
 
 /** sample grid options and items to load... */
 public gridOptions: GridStackOptions = {
@@ -138,8 +138,10 @@ to build the demo, go to demo/angular and run `yarn` + `yarn start` and Navigate
 
 ## Caveats 
 
- - This wrapper needs v8.0+ to run as it needs the latest changes
- - Code isn't compiled into a lib YET. You'll need to copy those files. Let me know (slack) if you are using it...
+ - This wrapper needs: 
+    - gridstack v8.0+ to run as it needs the latest changes (use older version to match gs versions)
+    - Angular 13+ for dynamic createComponent() API
+ - Code in now shipped starting with v8.0+ in dist/ng for people to use directly!
 
  ## *ngFor Caveats
  - This wrapper handles well ngFor loops, but if you're using a trackBy function (as I would recommend) and no element id change after an update,
diff --git a/demo/angular/src/app/dummy.component.ts b/demo/angular/src/app/dummy.component.ts
@@ -1,5 +1,5 @@
 /**
- * gridstack.component.ts 7.3.0-dev
+ * gridstack.component.ts 8.0.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
  */
 
diff --git a/demo/angular/src/app/gridstack-item.component.ts b/demo/angular/src/app/gridstack-item.component.ts
@@ -1,5 +1,5 @@
 /**
- * gridstack-item.component.ts 7.3.0-dev
+ * gridstack-item.component.ts 8.0.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
  */
 
diff --git a/demo/angular/src/app/gridstack.component.ts b/demo/angular/src/app/gridstack.component.ts
@@ -1,5 +1,5 @@
 /**
- * gridstack.component.ts 7.3.0-dev
+ * gridstack.component.ts 8.0.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
  */
 
diff --git a/demo/angular/tsconfig.lib.json b/demo/angular/tsconfig.lib.json
@@ -0,0 +1,12 @@
+/* config to publish the angular wrapper classes */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": ".../../../../dist/ng",
+    "declaration": true,
+  },
+  "include": [
+    "./src/app/gridstack.component.ts",
+    "./src/app/gridstack-item.component.ts",
+  ],
+}
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -5,7 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
-- [7.3.0-dev (TBD)](#730-dev-tbd)
+- [8.0.0 (2023-04-29)](#800-2023-04-29)
 - [7.3.0 (2023-04-01)](#730-2023-04-01)
 - [7.2.3 (2023-02-02)](#723-2023-02-02)
 - [7.2.2 (2023-01-16)](#722-2023-01-16)
@@ -83,15 +83,16 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-## 7.3.0-dev (TBD)
-* package is now ES2020 (TS exported files), webpack all.js still umd (could be commonjs), still have es5/ files unchanged (for now)
+## 8.0.0 (2023-04-29)
+* package is now ES2020 (TS exported files), webpack all.js still umd (better than commonjs for browsers), still have es5/ files unchanged (for now)
 * optimize [#2243](https://github.com/gridstack/gridstack.js/issues/2243) removed `gs-min|max_w|h` attribute generated in CSS or written out as they are never used for rendering, only for initial load. This reduce our column/row CSS in half!
 * optimize: removed `gs-w='1'` and `gs-h='1'` dom attribute writing since we already have min-width/min-height set, no need to set more attributes.
 * optimize: remove `'ui-draggable'` and `'ui-resizable'` since wasn't used in CSS and we have the `-disabled` version when off (so we can use `not(xyz-disabled)`).
 * add: `GridStack.saveCB` global callback for each item during save so app can insert any custom data before serializing it. `save()` can now be passed optional callback
 * move: `GridStack.addRemoveCB` is now global instead of grid option. `load()` can still be passed different optional callback
 * fix: addGrid() to handle passing an existing initialized grid already
 * break: `GridStackOptions.subGrid` -> `GridStackOptions.subGridOpts`. We now have `GridStackWidget.subGridOpts` vs `GridStackNode.subGrid` (subclass) rather than try to merge the two at runtime since very different types...
+* tons of improvements for Angular wrapper.
 
 ## 7.3.0 (2023-04-01)
 * feat [#2229](https://github.com/gridstack/gridstack.js/pull/2229) support nonce for CSP. Thank you [@jedwards1211](https://github.com/jedwards1211)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "7.3.0-dev",
+  "version": "8.0.0",
   "license": "MIT",
   "author": "Alain Dumesny <alaind831+github@gmail.com> (https://github.com/adumesny)",
   "contributors": [
@@ -25,9 +25,10 @@
     }
   ],
   "scripts": {
-    "build": "yarn --no-progress && rm -rf dist/* && grunt && yarn build:es6 && yarn build:es5 && yarn doc",
+    "build": "yarn --no-progress && rm -rf dist/* && grunt && yarn build:es6 && yarn build:ng && yarn build:es5 && yarn doc",
     "build:es6": "webpack && tsc --stripInternal",
     "build:es5": "webpack --config es5/webpack.config.js && tsc --stripInternal --project es5/tsconfig.json",
+    "build:ng": "tsc --stripInternal --project ./demo/angular/tsconfig.lib.json",
     "w": "webpack",
     "t": "rm -rf dist/* && grunt && tsc --stripInternal",
     "doc": "doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
diff --git a/src/dd-base-impl.ts b/src/dd-base-impl.ts
@@ -1,5 +1,5 @@
 /**
- * dd-base-impl.ts 7.3.0-dev
+ * dd-base-impl.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts
@@ -1,5 +1,5 @@
 /**
- * dd-draggable.ts 7.3.0-dev
+ * dd-draggable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/dd-droppable.ts b/src/dd-droppable.ts
@@ -1,5 +1,5 @@
 /**
- * dd-droppable.ts 7.3.0-dev
+ * dd-droppable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/dd-element.ts b/src/dd-element.ts
@@ -1,5 +1,5 @@
 /**
- * dd-elements.ts 7.3.0-dev
+ * dd-elements.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/dd-gridstack.ts b/src/dd-gridstack.ts
@@ -1,5 +1,5 @@
 /**
- * dd-gridstack.ts 7.3.0-dev
+ * dd-gridstack.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/dd-manager.ts b/src/dd-manager.ts
@@ -1,5 +1,5 @@
 /**
- * dd-manager.ts 7.3.0-dev
+ * dd-manager.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/dd-resizable-handle.ts b/src/dd-resizable-handle.ts
@@ -1,5 +1,5 @@
 /**
- * dd-resizable-handle.ts 7.3.0-dev
+ * dd-resizable-handle.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/dd-resizable.ts b/src/dd-resizable.ts
@@ -1,5 +1,5 @@
 /**
- * dd-resizable.ts 7.3.0-dev
+ * dd-resizable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/dd-touch.ts b/src/dd-touch.ts
@@ -1,5 +1,5 @@
 /**
- * touch.ts 7.3.0-dev
+ * touch.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts
@@ -1,5 +1,5 @@
 /**
- * gridstack-engine.ts 7.3.0-dev
+ * gridstack-engine.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/gridstack-poly.js b/src/gridstack-poly.js
@@ -1,5 +1,5 @@
 /**
- * gridstack-poly.ts 7.3.0-dev used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4)
+ * gridstack-poly.ts 8.0.0 used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4)
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/gridstack.scss b/src/gridstack.scss
@@ -1,5 +1,5 @@
 /**
- * gridstack SASS styles 7.3.0-dev
+ * gridstack SASS styles 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -1,5 +1,5 @@
 /*!
- * GridStack 7.3.0-dev
+ * GridStack 8.0.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -1649,7 +1649,7 @@ export class GridStack {
     return this;
   }
 
-  static GDRev = '7.3.0-dev';
+  static GDRev = '8.0.0';
 
   /* ===========================================================================================
    * drag&drop methods that used to be stubbed out and implemented in dd-gridstack.ts
diff --git a/src/types.ts b/src/types.ts
@@ -1,5 +1,5 @@
 /**
- * types.ts 7.3.0-dev
+ * types.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/src/utils.ts b/src/utils.ts
@@ -1,5 +1,5 @@
 /**
- * utils.ts 7.3.0-dev
+ * utils.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,10 +1,8 @@
 {
   "compilerOptions": {
-    /*
-    "allowJs": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true
-   */
+    // "allowJs": true,
+    // "esModuleInterop": true,
+    // "allowSyntheticDefaultImports": true
     "declaration": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,

Original file line number	Diff line number	Diff line change
`@@ -43,9 +43,9 @@ module.exports = function(grunt) {`
`43`	`43`	`'dist/es5/gridstack-poly.js': ['src/gridstack-poly.js'],`
`44`	`44`	`'dist/src/gridstack.scss': ['src/gridstack.scss'],`
`45`	`45`	`'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'],`
`46`		`- 'dist/angular/README.md': ['demo/angular/src/app/README.md'],`
`47`		`- 'dist/angular/gridstack.component.ts': ['demo/angular/src/app/gridstack.component.ts'],`
`48`		`- 'dist/angular/gridstack-item.component.ts': ['demo/angular/src/app/gridstack-item.component.ts'],`
	`46`	`+ 'dist/ng/README.md': ['demo/angular/src/app/README.md'],`
	`47`	`+ // 'dist/ng/gridstack.component.ts': ['demo/angular/src/app/gridstack.component.ts'],`
	`48`	`+ // 'dist/ng/gridstack-item.component.ts': ['demo/angular/src/app/gridstack-item.component.ts'],`
`49`	`49`	`}`
`50`	`50`	`}`
`51`	`51`	`},`