PCF Reloader Transformation

Typescript transformation that enabled automatic reloading of PCF Components when embedded on Model-Driven forms in Dynamics 365.

Table of Contents

• PCF Reloader Transformation
• Motivation
• Installation
• Usage
  • Running the transformer
  • Integrating
    • Fiddler
• Settings

Motivation

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

1. It does not have access to the environment
2. 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.

Installation

$ npm install -D pcf-reloader-transformer
$ npx ts-patch i

Usage

The generated code can be found in ./samples/patched.ts and the corresponding compiled javascript can be found in ./tests/samples

Running the transformer

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

Integrating

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.

Fiddler

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.

Settings

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:

• Debug
• Print Generated
• Show Force Reload
• Use Browser Sync
• Verbose
• WS Address

Debug

Setting: debug Type: boolean Default: false Description: If true, inject calls to the debugger to allow stepping into the dynamically loaded code.

Print Generated

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

Show Force Reload

Setting: showForceReload Type: boolean Default: true Description: If true show a reload button in the corner of the component

Use Browser Sync

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

Verbose

Setting: verbose Type: boolean Default: false Description: If true, status messages will be printed during the transformation

WS Address

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.