cx 24.6.4 → 24.7.2

package/src/ui/app/startAppLoop.js

@@ -1,58 +1,58 @@
-import { Widget, VDOM } from '../Widget';
-import { Store } from '../../data/Store';
-import { Cx } from '../Cx';
+import { Widget, VDOM } from "../Widget";
+import { Store } from "../../data/Store";
+import { Cx } from "../Cx";
 
 export function startAppLoop(parentDOMElement, storeOrInstance, widget, options = {}) {
-
    if (!parentDOMElement || parentDOMElement.nodeType !== 1)
-      throw new Error('First argument to startAppLoop should be a valid DOM element.');
+      throw new Error("First argument to startAppLoop should be a valid DOM element.");
 
    let store, instance, parentInstance;
 
-   if (!storeOrInstance)
-      storeOrInstance = new Store();
+   if (!storeOrInstance) storeOrInstance = new Store();
 
-   if (storeOrInstance.notify)
-      store = storeOrInstance;
+   if (storeOrInstance.notify) store = storeOrInstance;
    else if (storeOrInstance.getChild) {
-      if (storeOrInstance.widget === widget)
-         instance = storeOrInstance;
-      else
-         parentInstance = storeOrInstance;
-   }
-   else
-      throw new Error('Second argument to startAppLoop should be either of type Store or Instance');
-
-   let root = <Cx
-      store={store}
-      widget={widget}
-      instance={instance}
-      parentInstance={parentInstance}
-      options={options}
-      subscribe
-   />;
-
-   VDOM.DOM.render(root, parentDOMElement);
+      if (storeOrInstance.widget === widget) instance = storeOrInstance;
+      else parentInstance = storeOrInstance;
+   } else throw new Error("Second argument to startAppLoop should be either of type Store or Instance");
+
+   let content = (
+      <Cx
+         store={store}
+         widget={widget}
+         instance={instance}
+         parentInstance={parentInstance}
+         options={options}
+         subscribe
+      />
+   );
+
+   let root = null;
+   if (VDOM.DOM.createRoot) {
+      root = VDOM.DOM.createRoot(parentDOMElement);
+      root.render(content);
+   } else VDOM.DOM.render(content, parentDOMElement);
+
    let stopped = false;
 
    return function () {
-      if (stopped)
-         return;
+      if (stopped) return;
 
       stopped = true;
 
-      if (!options.destroyDelay)
-         destroy(parentDOMElement, options);
+      if (!options.destroyDelay) destroy(parentDOMElement, options, root);
       else {
          setTimeout(() => {
-            destroy(parentDOMElement, options);
-         }, options.destroyDelay)
+            destroy(parentDOMElement, options, root);
+         }, options.destroyDelay);
       }
-   }
+   };
 }
 
-function destroy(parentDOMElement, options) {
-   VDOM.DOM.unmountComponentAtNode(parentDOMElement);
+function destroy(parentDOMElement, options, root) {
+   if (root) root.unmount();
+   else VDOM.DOM.unmountComponentAtNode(parentDOMElement);
+
    if (options.removeParentDOMElement && parentDOMElement.parentNode)
       parentDOMElement.parentNode.removeChild(parentDOMElement);
-}
+}