Typescript transformation that enabled automatic reloading of PCF Components when embedded on Model-Driven forms in Dynamics 365.
Table of Contents
The PowerApps Component Framework includes a test-harness which automatically reloads the component whenever it changes on disk.
However, the test harness has a couple of downsides
- It does not have access to the environment
- It does not show you the actual interaction with the surrounding system
In order to test fully, it is neccessary to include the actual component on a form.
However, having to fully reload the form on each change quickly gets annoying. Thus the transformer was born.
$ npm install -D pcf-reloader-transformer
$ npx ts-patch i
The generated code can be found in ./samples/patched.ts and the corresponding compiled javascript can be found in ./tests/samples
The easiest way of running the transformer is through ts-patch.
TS Patch is automatically installed and enabled when installing this package.
To run the transformer, add it to plugins in your tsconfig.json
{
"compilerOptions": {
"plugins": [
{
"transform": "pcf-reloader-transformer",
"type": "config",
}
]
}
}For a list of available settings see Settings
The transformation injects code in any class that implements ComponentFramework.StandardControl<IInputs, IOutputs>.
The code will listen for messages passed to the PCF Test Harness, unload the PCF, reload the bundle.js, and re-initialize the PCF with the current context.
The code expects the PCF test harness to be running in watch-mode. Start in watch mode by calling npm start watch.
The easiest way to get the updated bundle on the form is to inject it using Fiddler.
After publishing the component for the first time, an AutoResponder rule on the following format:
| If request matches... | then respond with... |
|---|---|
| REGEX:(?insx).+/WebResources/cc_(?'namespace'[^.]+).([^/]+)/bundle.js | sourcedir${namespace}\out\controls${namespace}\bundle.js |
For details on setting up Fiddler for PCF debugging, see Microsoft Docs.
The transformer supports the following configuration settings.
The settings are specified as part of the plugin specification in tsconfig.json
The following settings are available:
Setting: debug
Type: boolean
Default: false
Description:
If true, inject calls to the debugger to allow stepping into the dynamically loaded code.
Setting: printGenerated
Type: boolean
Default: false
Description:
If true, the generated typescript code will be output to a file alongside the detected file. If the file is named index.ts, the generated file will be index.generated.ts
Setting: showForceReload
Type: boolean
Default: true
Description:
If true show a reload button in the corner of the component
Setting: useBrowserSync
Type: boolean
Default: true when PCF Start version >= 1.11.3, false otherwise
Description:
If true force use of the BrowserSync.io / Socket.io based integration,
If false, force use of the WebSocket,
If not specified, detect the protocol based on the PCF Start version
Setting: verbose
Type: boolean
Default: false
Description:
If true, status messages will be printed during the transformation
Setting: wsAddress
Type: string
Default: For websocket: ws://127.0.0.1:8181/ws
For BrowserSync: http://localhost:8181
Description:
The address to use when listening for update messages.