Merge pull request #5 from mkholt/browser-sync-support

Browser sync support

.editorconfig

@@ -0,0 +1,7 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true

.eslintrc.json

@@ -0,0 +1,30 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "ignorePatterns": ["tests/samples/*.js","samples/*.generated.ts"],
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "quotes": "off",
+        "no-tabs": "off",
+        "indent": ["error","tab"],
+        "padded-blocks": "off",
+        "space-before-function-paren": "off",
+        "no-use-before-define": "off",
+        "@typescript-eslint/no-use-before-define": ["error","nofunc"],
+        "no-debugger": "warn",
+        "comma-dangle": "off"
+    }
+}

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [14.x, 16.x, 17.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

CHANGELOG

@@ -1,10 +1,11 @@
-1.x (20??/??/??)
-- Move reload logic to own method
+1.1.1 (2022/02/09)
+- Support for Browser-Sync based communication (since pcf-start 1.11.4)
+- Major refactoring, move injected code to external library that gets imported into the class instead of embedding all the code.
 
 1.0.1 (2021/11/05)
 - Fix: Skip files that have the PcfParams type declared to avoid double-generating code. (Issue #1)
 - Improvement: Add ability to specify the listening address
 - Cleanup: Use access helper method everywhere
 
 1.0.0 (2021/11/03)
-- Initial version
+- Initial version

README.md

@@ -14,7 +14,7 @@ Typescript transformation that enabled automatic reloading of PCF Components whe
 	- [Integrating](#integrating)
 		- [Fiddler](#fiddler)
  	- [Settings](#settings)
- - [Example](#example)
+
 
 ## Motivation
 The PowerApps Component Framework includes a test-harness which automatically reloads the component whenever it changes on disk.
@@ -58,19 +58,20 @@ To run the transformer, add it to _plugins_ in your _tsconfig.json_
 ### Integrating
 The transformation injects code in any class that implements `ComponentFramework.StandardControl<IInputs, IOutputs>`.
 
-The code will set up a listener to a websocket, and when receiving a message on the socket, will unload the PCF, reload the `bundle.js`, and re-initialize the PCF.
+The code will listen for messages passed to the [PCF Test Harness](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/debugging-custom-controls#debugging-using-the-browser-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, as such, to use the transformation, after compiling, start the PCF test harness in watch-mode.
+The code expects the [PCF test harness](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/debugging-custom-controls#debugging-using-the-browser-test-harness) to be running in watch-mode.
 
 #### 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, add two AutoResponder rules on the following format:
+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
-| REGEX:(?insx).+\/WebResources\/cc_(?'namespace'[^.]+)\.([^/]+)\/bundle.js | *header:Cache-Control: must-revalidate
+
+For details on setting up Fiddler for PCF debugging, see [Microsoft Docs](https://docs.microsoft.com/en-us/powerapps/developer/component-framework/debugging-custom-controls#using-fiddler).
 
 ### Settings
 The transformer supports the following configuration settings.
@@ -81,4 +82,5 @@ The settings are specified as part of the plugin specification in _tsconfig.json
 |--------			|------		|-------------	|---------
 | printGenerated	| boolean	| 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`	| `false`
 | verbose			| boolean	| If `true`, status messages will be printed during the transformation	| `false`
-| wsAddress			| string	| The address to use when listening for update messages.				| `ws://127.0.0.1:8181/ws`
+| wsAddress			| string	| The address to use when listening for update messages.				| For websocket: `ws://127.0.0.1:8181/ws`<br> For BrowserSync: `http://localhost:8181`
+| useBrowserSync	| boolean	| If `true` use the BrowserSync.io / Socket.io based integration, otherwise use a raw websocket<br>Use BrowserSync when running against PCF Start > 1.11	| `true`

jest.config.js

@@ -1,8 +1,9 @@
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+// eslint-disable-next-line no-undef
 module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'node',
-  collectCoverage: true,
-  collectCoverageFrom: ["src/**/*.ts"],
-  coverageDirectory: 'coverage'
+	preset: 'ts-jest',
+	testEnvironment: 'node',
+	collectCoverage: true,
+	collectCoverageFrom: ["src/**/*.ts"],
+	coverageDirectory: 'coverage'
 };