Updated for latest version of PowerPlatform, with Platform Library support

README.md

@@ -11,26 +11,32 @@ When writing PCF controls, there is usually a great deal of boiler plate code fo
 1. In Dataset PCFs the paging works differently between Canvas and Model and has some oddities. This library attempts to homogenize the differences and provides an abstraction. See http://develop1.net/public/post/2020/05/07/pcf-dataset-paging-in-mode-vs-canvas-apps
 1. When testing control logic, it is difficult to mock the different ways in which updates can be called. This library implements a `serviceProvider` pattern with a `ControlContextService` that abstracts away from the base `StandardControl` and provides methods that can be easily mocked using jest. These methods extend to other areas such as opening records and formatting values. 
 
+This library has been updated, as of 2.0, with support for React controls within Dataverse.  Using the `-fw react` parameter when creating a PCF control allows you to share the react framework libraries with the PowerPlatform, reducing the overall size of the PCF bundle.  For more information, please see: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/react-controls-platform-libraries
+
+Controls will need to be created with the `-fw react` parameter. Where a control was created without using the `-fw react` parameter, the following changes will be required on your project:
+
+1. Update the ControlManifest.Input.xml file, change `control-type` from `standard` to `virtual`
+1. Update the ControlManifest.Input.xml file, under `resources` add the following: `<platform-library name="React" version="16.8.6" />`
+1. Update the index.ts file as per the changes defined below
+
 ## Simple Field PCF control
 This library can easily be used by replacing `ComponentFramework.StandardControl<TInputs, TOutputs>` in your index.ts that is generated by `pac pcf init` to be `StandardcontrolReact<TInputs, TOutputs>`. You then no longer need the `init`, `updateView` etc. methods:
 ```
 export class PCFTester extends StandardControlReact<IInputs, IOutputs> {
+  static createElement(serviceProvider: ServiceProvider): React.ReactElement {
+    return React.createElement(<YOUR REACT FIELD COMPONENT>, {
+      serviceProvider: serviceProvider
+    });
+  }
+
   constructor() {
-    super();
+    // Change PCFTester to the name of your TS Class
+    super(PCFTester.createElement);
+
     this.renderOnParametersChanged = false;
     this.initServiceProvider = serviceProvider => {
       serviceProvider.register("<YOUR VIEWMODEL NAME>", new <YOUR VIEWMODEL>(serviceProvider));
     };
-    this.reactCreateElement = (container, width, height, serviceProvider) => {
-      ReactDOM.render(
-        React.createElement(<YOUR REACT FIELD COMPONENT>, {
-          serviceProvider: serviceProvider,
-          controlWidth: width,
-          controlHeight: height,
-        }),
-        container,
-      );
-    };
   }
 }
 ```
@@ -52,25 +58,22 @@ This allows you to using the MVVM pattern and move your logic into a ViewModel t
 ## Simple Dataset PCF control
 ```
 export class PCFTesterDataset extends StandardControlReact<IInputs, IOutputs> {
+  static createElement(serviceProvider: ServiceProvider): React.ReactElement {
+    return React.createElement(<YOUR REACT FIELD COMPONENT>, {
+      serviceProvider: serviceProvider
+    });
+  }
+
   constructor() {
-    super();
+    // Change PCFTesterDataset to the name of your TS Class
+    super(PCFTesterDataset.createElement);
+
     this.renderOnParametersChanged = false;
     this.renderOnDatasetChanged = false; 
 
     this.initServiceProvider = (serviceProvider: ServiceProvider): void => {
       serviceProvider.register("<YOUR VIEWMODEL NAME>", new <YOUR VIEWMODEL>(serviceProvider));
     };
-
-    this.reactCreateElement = (container, width, height, serviceProvider): void => {
-      ReactDOM.render(
-        React.createElement(<YOUR REACT DATASET COMPONENT>, {
-          serviceProvider: serviceProvider,
-          controlWidth: width,
-          controlHeight: height,
-        }),
-        container,
-      );
-    };
   }
 }
 ```

jest.config.js

@@ -1,10 +1,8 @@
 module.exports = {
   preset: "ts-jest",
-  testEnvironment: "jest-environment-jsdom-fourteen",
+  testEnvironment: "jest-environment-jsdom",
   testMatch: ["**/__tests__/**/*test.ts"],
-  globals: {
-    "ts-jest": {
-      tsConfig: "tsconfig.json",
-    },
+  transform: {
+    '^.+\\.tsx?$': ["ts-jest", { tsconfig: "tsconfig.json"}]
   },
 };