addWidget() & load() fix for existing element

* we now support calling addWidget() when there is an existing HTML element not yet initialized, but with creation options
* load() also now supports the same
* make sure grid and items have the correct GS styles (don't assume callee does when they init()/addWidget()

these are required by new Angular wrapper to optimizes updates.

Author: adumesny

doc/CHANGES.md

@@ -80,7 +80,8 @@ Change log
 ## 7.1.1-dev (TBD)
 * fix [#939](https://github.com/gridstack/gridstack.js/issues/2039) 'prototype' undefined error for dd-gridstack.js
 * add [#939](https://github.com/gridstack/gridstack.js/issues/2105) disable/enable are methods now recursive by default
-* add better GridStackEventHandlerCallback spelled out types
+* add better `GridStackEventHandlerCallback` spelled out types
+* add We now have support for [Angular Component wrappers](https://github.com/gridstack/gridstack.js/tree/master/demo/angular/src/app) out of the box included in the build, with docs and demo! Need help to do that for React and Vue.
 
 ## 7.1.1 (2022-11-13)
 * fix [#939](https://github.com/gridstack/gridstack.js/issues/939) editable elements focus (regression in v6). Thank you [@Gezdy](https://github.com/Gezdy)

src/gridstack.ts

@@ -237,6 +237,10 @@ export class GridStack {
     this.el = el; // exposed HTML element to the user
     opts = opts || {}; // handles null/undefined/0
 
+    if (!el.classList.contains('grid-stack')) {
+      this.el.classList.add('grid-stack');
+    }
+
     // if row property exists, replace minRow and maxRow instead
     if (opts.row) {
       opts.minRow = opts.maxRow = opts.row;
@@ -408,27 +412,32 @@ export class GridStack {
     }
 
     let el: HTMLElement;
+    let node: GridStackNode;
     if (typeof els === 'string') {
       let doc = document.implementation.createHTMLDocument(''); // IE needs a param
       doc.body.innerHTML = els;
       el = doc.body.children[0] as HTMLElement;
     } else if (arguments.length === 0 || arguments.length === 1 && isGridStackWidget(els)) {
-      let content = els ? (els as GridStackWidget).content || '' : '';
-      options = els;
-      let doc = document.implementation.createHTMLDocument(''); // IE needs a param
-      doc.body.innerHTML = `<div class="grid-stack-item ${this.opts.itemClass || ''}"><div class="grid-stack-item-content">${content}</div></div>`;
-      el = doc.body.children[0] as HTMLElement;
+      node = options = els;
+      if (node?.el) {
+        el = node.el; // re-use element stored in the node
+      } else {
+        let content = options?.content || '';
+        let doc = document.implementation.createHTMLDocument(''); // IE needs a param
+        doc.body.innerHTML = `<div class="grid-stack-item ${this.opts.itemClass || ''}"><div class="grid-stack-item-content">${content}</div></div>`;
+        el = doc.body.children[0] as HTMLElement;
+      }
     } else {
       el = els as HTMLElement;
     }
 
     // Tempting to initialize the passed in opt with default and valid values, but this break knockout demos
-    // as the actual value are filled in when _prepareElement() calls el.getAttribute('gs-xyz) before adding the node.
+    // as the actual value are filled in when _prepareElement() calls el.getAttribute('gs-xyz') before adding the node.
     // So make sure we load any DOM attributes that are not specified in passed in options (which override)
     let domAttr = this._readAttr(el);
     options = Utils.cloneDeep(options) || {};  // make a copy before we modify in case caller re-uses it
     Utils.defaults(options, domAttr);
-    let node = this.engine.prepareNode(options);
+    node = this.engine.prepareNode(options);
     this._writeAttr(el, options);
 
     if (this._insertNotAppend) {
@@ -680,7 +689,7 @@ export class GridStack {
         if (typeof(addAndRemove) === 'function') {
           w = addAndRemove(this, w, true).gridstackNode;
         } else {
-          w = this.addWidget(w).gridstackNode;
+          w = (w.el ? this.addWidget(w.el, w) : this.addWidget(w)).gridstackNode;
         }
       }
     });
@@ -1375,10 +1384,8 @@ export class GridStack {
 
   /** @internal */
   protected _prepareElement(el: GridItemHTMLElement, triggerAddEvent = false, node?: GridStackNode): GridStack {
-    if (!node) {
-      el.classList.add(this.opts.itemClass);
-      node = this._readAttr(el);
-    }
+    el.classList.add(this.opts.itemClass);
+    node = node || this._readAttr(el);
     el.gridstackNode = node;
     node.el = el;
     node.grid = this;

src/types.ts

@@ -69,7 +69,7 @@ export type GridStackElement = string | HTMLElement | GridItemHTMLElement;
 /** specific and general event handlers for the .on() method */
 export type GridStackEventHandler = (event: Event) => void;
 export type GridStackElementHandler = (event: Event, el: GridItemHTMLElement) => void;
-export type GridStackNodesHandler = (event: Event, node: GridStackNode[]) => void;
+export type GridStackNodesHandler = (event: Event, nodes: GridStackNode[]) => void;
 export type GridStackDroppedHandler = (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => void;
 export type GridStackEventHandlerCallback = GridStackEventHandler | GridStackElementHandler | GridStackNodesHandler | GridStackDroppedHandler;