create-powerapps-project 0.17.2 → 0.18.0

package/lib/packageManager.js

@@ -25,9 +25,9 @@ const install = (cwd, type) => {
         }
     }
     else {
-        (0, child_process_1.spawnSync)(getNpm(), ['add', ...packages.devDependencies], { stdio: 'inherit', cwd });
+        (0, child_process_1.spawnSync)(getNpm(), ['install', ...packages.devDependencies], { stdio: 'inherit', cwd });
         if (packages.dependencies) {
-            (0, child_process_1.spawnSync)(getNpm(), ['add', ...packages.dependencies], { stdio: 'inherit', cwd });
+            (0, child_process_1.spawnSync)(getNpm(), ['install', ...packages.dependencies], { stdio: 'inherit', cwd });
         }
     }
 };
@@ -45,7 +45,8 @@ function getPackages(type) {
                 //`powerapps-project-${type}`,
                 '@types/react',
                 '@types/react-dom',
-                '@types/xrm'
+                '@types/xrm',
+                '-D'
             ]
         };
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-powerapps-project",
   "description": "💧 plop generator for Dataverse development",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "license": "MIT",
   "type": "commonjs",
   "main": "lib/index.js",

package/plop-templates/pcf/index.ts.hbs

@@ -1,12 +1,13 @@
 import { IInputs, IOutputs } from "./generated/ManifestTypes";
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
 
 import { App, AppProps } from './App';
 
 export class {{name}} implements ComponentFramework.StandardControl<IInputs, IOutputs> {
   container: HTMLDivElement;
+  root: Root;
   context: ComponentFramework.Context<IInputs>;
   isTestHarness: boolean;
   props: AppProps;
@@ -32,6 +33,7 @@ export class {{name}} implements ComponentFramework.StandardControl<IInputs, IOu
     this.container = container;
     this.context = context;
     this.isTestHarness = document.getElementById('control-dimensions') !== null;
+    this.root = createRoot(this.container);
   }
 
 
@@ -44,9 +46,8 @@ export class {{name}} implements ComponentFramework.StandardControl<IInputs, IOu
       isTestHarness: this.isTestHarness
     };
 
-    ReactDOM.render(
-      React.createElement(App, this.props),
-      this.container
+    this.root.render(
+      React.createElement(App, this.props)
     );
   }
 
@@ -63,7 +64,7 @@ export class {{name}} implements ComponentFramework.StandardControl<IInputs, IOu
    * i.e. cancelling any pending remote calls, removing listeners, etc.
    */
   public destroy(): void {
-    ReactDOM.unmountComponentAtNode(this.container);
+    this.root.unmount();
   }
 
 }