Merge pull request #280 from purecloudlabs/example-dev-server-improve…

…ments

Support building web-workers in the example app

apps/ifc-example-client/README.md

@@ -16,3 +16,10 @@ commands from the iframe-coordinator project root (the parent directory of this
 `npm run start-client-example`
 
 You can then see the apps embedded in a host at http://localhost:3000/#/app1 and http://localhost:3000/#/app2
+
+### Notes
+
+There's no hot-reloading in development mode, so you'll need to refresh the page
+after making changes. The dev mode uses a rollup watcher rather than a server like
+Vite because building stand-alone web-worker modules is particularly challenging
+with Vite.

apps/ifc-example-client/main.js → apps/ifc-example-client/client-app.js

@@ -1,7 +1,3 @@
-// Load polyfills required for IE11
-import "@babel/polyfill";
-import "custom-event-polyfill";
-import "url-polyfill";
 import { registerCustomElements, Client } from "iframe-coordinator";
 
 registerCustomElements();

apps/ifc-example-client/client-worker.js

@@ -0,0 +1,7 @@
+// This module is a POC placeholder for a future IFC-integrated web-worker example
+
+// This doesn't work because Client references HTMLElement, which doesn't exist
+// in the worker context, but will work for a new worker client.
+// import { Client } from "iframe-coordinator/dist/client.js";
+
+console.log("Worker Started!");

apps/ifc-example-client/ifc-proxy.config.json

@@ -1,3 +1,5 @@
 {
-  "/clients/": "http://localhost:8080/"
+  "static": {
+    "/clients": "."
+  }
 }

apps/ifc-example-client/package.json

@@ -13,19 +13,17 @@
   "type": "module",
   "scripts": {
     "start": "concurrently \"npm:dev\" \"npm:start-host-shim\"",
-    "dev": "vite --port 8080",
-    "build": "vite build",
+    "dev": "rollup -c --watch",
+    "build": "rollup -c",
     "start-host-shim": "ifc-cli"
   },
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "concurrently": "^8.2.2",
     "iframe-coordinator-cli": "file:../../packages/iframe-coordinator-cli",
-    "vite": "^5.4.2"
+    "rollup": "^4.30.1"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.12.1",
-    "custom-event-polyfill": "^1.0.7",
-    "iframe-coordinator": "file:../../packages/iframe-coordinator",
-    "url-polyfill": "^1.1.12"
+    "iframe-coordinator": "file:../../packages/iframe-coordinator"
   }
 }

apps/ifc-example-client/rollup.config.js

@@ -0,0 +1,18 @@
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+
+import { dirname, resolve } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default {
+  input: [
+    resolve(__dirname, "client-app.js"),
+    resolve(__dirname, "client-worker.js"),
+  ],
+  output: {
+    preserveModules: false,
+    dir: "dist",
+  },
+  plugins: [nodeResolve()],
+};