makeWidget() now take optional GridStackWidget for sizing

doc/CHANGES.md

@@ -5,6 +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/)*
 
+- [8.1.2-dev TBD](#812-dev-tbd)
 - [8.1.2 (2023-5-22)](#812-2023-5-22)
 - [8.1.1 (2023-05-13)](#811-2023-05-13)
 - [8.1.0 (2023-05-06)](#810-2023-05-06)
@@ -86,6 +87,10 @@ Change log
 - [v0.1.0 (2014-11-18)](#v010-2014-11-18)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## 8.1.2-dev TBD
+* feat: `makeWidget()` now take optional `GridStackWidget` for sizing
+
 ## 8.1.2 (2023-5-22)
 * [#2323](https://github.com/gridstack/gridstack.js/issues/2323) module for Angular wrapper 
 

src/gridstack.ts

@@ -965,19 +965,22 @@ export class GridStack {
   }
 
   /**
-   * If you add elements to your grid by hand, you have to tell gridstack afterwards to make them widgets.
+   * If you add elements to your grid by hand (or have some framework creating DOM), you have to tell gridstack afterwards to make them widgets.
    * If you want gridstack to add the elements for you, use `addWidget()` instead.
    * Makes the given element a widget and returns it.
    * @param els widget or single selector to convert.
+   * @param options widget definition to use instead of reading attributes or using default sizing values
    *
    * @example
    * let grid = GridStack.init();
-   * grid.el.appendChild('<div id="gsi-1" gs-w="3"></div>');
-   * grid.makeWidget('#gsi-1');
+   * grid.el.appendChild('<div id="1" gs-w="3"></div>');
+   * grid.el.appendChild('<div id="2"></div>');
+   * grid.makeWidget('1');
+   * grid.makeWidget('2', {w:2, content: 'hello'});
    */
-  public makeWidget(els: GridStackElement): GridItemHTMLElement {
+  public makeWidget(els: GridStackElement, options?: GridStackWidget): GridItemHTMLElement {
     let el = GridStack.getElement(els);
-    this._prepareElement(el, true);
+    this._prepareElement(el, true, options);
     this._updateContainerHeight();
     this._triggerAddEvent();
     this._triggerChangeEvent();
@@ -1072,6 +1075,10 @@ export class GridStack {
       }
       if (!node) return;
 
+      if (GridStack.addRemoveCB) {
+        GridStack.addRemoveCB(this.el, node, false, false);
+      }
+
       // remove our DOM data (circular link) and drag&drop permanently
       delete el.gridstackNode;
       this._removeDD(el);