Added cloud interop to vnext and updated diagrams

README.md

@@ -34,7 +34,7 @@ Want to learn how to use our Channel API, Interop API or FDC3 API inside of a de
 
 | Web Interop                                                            | Description                                                                                                                                                                                                     | Live Launch                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [Web Interop Basic](./how-to/web-interop-basic) | This basic how-to provides a way of configuring a a webpage with a number of framed applications that share contextual information.                                                                |          [Example](https://built-on-openfin.github.io/web-starter/main/web-interop-basic/platform/provider.html)                                                                                                                                                                                                                                                                             |
+| [Web Interop Basic](./how-to/web-interop-basic) | This basic how-to provides a way of configuring a a webpage with a number of framed applications that share contextual information.                                                                |          [Example](https://built-on-openfin.github.io/web-starter/web/vnext/web-interop-basic/platform/provider.html)                                                                                                                                                                                                                                                                             |
 
 ### Cloud Interop
 

how-to/cloud-interop-basic/README.md

@@ -4,7 +4,7 @@
 
 # OpenFin Cloud Interop Basic
 
-This is a very basic example that extends the [Web Interop Basic Example](../web-interop-basic/README.md). This is a simple provider web page that acts as the main/index page. This page wires up the interop broker using the [@openfin/web-interop](https://www.npmjs.com/package/@openfin/web-interop) library and creates a cloud compatible [interop override](https://developer.openfin.co/docs/javascript/stable/classes/OpenFin.InteropBroker.html) using our [@openfin/cloud-interop](https://www.npmjs.com/package/@openfin/cloud-interop) npm package.
+This is a very basic example that extends the [Web Interop Basic Example](../web-interop-basic/README.md). This is a simple provider web page that acts as the main/index page. This page wires up the interop broker using the [@openfin/core-web](https://www.npmjs.com/package/@openfin/core-web) library and creates a cloud compatible [interop override](https://developer.openfin.co/docs/javascript/stable/classes/OpenFin.InteropBroker.html) using our [@openfin/cloud-interop](https://www.npmjs.com/package/@openfin/cloud-interop) npm package.
 
 This page has a very simple layout which is made up of two iframes:
 
@@ -41,11 +41,11 @@ npm run client
 
 ## Setup Notes
 
-There are a few things to note before trying to use @openfin/web-interop:
+There are a few things to note before trying to use @openfin/core-web:
 
 - This current release requires Buffer support and this is added through the [buffer](https://www.npmjs.com/package/buffer) npm package. We have added this to the npm package and we have made it available through a [buffer util TypeScript file](./client/src/util/buffer.ts). _This is a requirement that will be removed in the future_.
-- If your [tsconfig](./client/tsconfig.json) file is using **node** for moduleResolution it will need to use **Node16** instead as export/imports are defined in the package.json of the @openfin/web-interop npm package. This is required for when you try to import @openfin/web-interop/iframe-broker.
-- You will need to copy the shared-worker.js file from the [@openfin/web-interop](https://www.npmjs.com/package/@openfin/web-interop) npm package to your public folder. We have created a [copy-shared-worker.js](./scripts/copy-shared-worker.js) script to do this and it is referenced in the build-client npm command.
+- If your [tsconfig](./client/tsconfig.json) file is using **node** for moduleResolution it will need to use **Node16** instead as export/imports are defined in the package.json of the @openfin/core-web npm package. This is required for when you try to import @openfin/core-web/iframe-broker.
+- You will need to copy the shared-worker.js file from the [@openfin/core-web](https://www.npmjs.com/package/@openfin/core-web) npm package to your public folder. We have created a [copy-shared-worker.js](./scripts/copy-shared-worker.js) script to do this and it is referenced in the build-client npm command.
 - You will need to **contact OpenFin** to get the configuration information required to setup a cloud connection.
 
 ## How things are structured
@@ -61,7 +61,7 @@ It will also create a cloud interop override and pass it when initializing the p
 In the sample we use a [settings](./client/src/platform/settings.ts) file but this has been removed from the snippet to simplify the code snippet.
 
 ```javascript
-import { connect } from "@openfin/web-interop";
+import { connect } from "@openfin/core-web";
 import "./util/buffer";
 
 /**
@@ -99,19 +99,19 @@ The host html page [provider.html](./public/platform/provider.html) then:
 
 This is the iframe that is referenced by the Host and Content Providers and it is how they communicate with each other. The iframe broker html page and the shared-webworker.js file have to reside on the same domain as the **host**.
 
-The [iframe broker html page](./public/platform/iframe-broker.html) uses the shared-webworker.js file that comes as part of the [@openfin/web-interop](https://www.npmjs.com/package/@openfin/web-interop) npm package.
+The [iframe broker html page](./public/platform/iframe-broker.html) uses the shared-webworker.js file that comes as part of the [@openfin/core-web](https://www.npmjs.com/package/@openfin/core-web) npm package.
 
 The iframe broker needs some initialization logic as well.
 
 ```javascript
-import { init as initBrokerConnection } from "@openfin/web-interop/iframe-broker";
+import { init as initBrokerConnection } from "@openfin/core-web/iframe-broker";
 
 /**
  * Initializes the OpenFin Web Broker connection.
  * @returns A promise that resolves when the connection is established.
  */
 async function init(): Promise<void> {
- // The shared worker is copied and renamed to the public/js directory from the @openfin/web-interop package
+ // The shared worker is copied and renamed to the public/js directory from the @openfin/core-web package
  // using the scripts/copy-shared-worker.js file that is called when npm run build is called.
  return initBrokerConnection({
   sharedWorkerUrl: "http://localhost:6060/js/shared-worker.bundle.js"
@@ -132,7 +132,7 @@ Some things to note about the content provider setup:
 - the **finReady** event shown below is an example and doesn't exist in the OpenFin container as the API is injected into the document. We added **finReady** to have similar behavior to the **fdc3Ready** event that we also raise.
 
 ```javascript
-import { connect } from "@openfin/web-interop";
+import { connect } from "@openfin/core-web";
 import "../util/buffer";
 
 /**

how-to/cloud-interop-basic/client/src/platform/api.ts

@@ -1,4 +1,4 @@
-import { connect } from "@openfin/web-interop";
+import { connect } from "@openfin/core-web";
 import "../util/buffer";
 import { getSettings } from "./settings";
 

how-to/cloud-interop-basic/client/src/platform/iframe-broker.ts

@@ -1,4 +1,4 @@
-import { init as initBrokerConnection } from "@openfin/web-interop/iframe-broker";
+import { init as initBrokerConnection } from "@openfin/core-web/iframe-broker";
 import { getSettings } from "./settings";
 
 /**

how-to/cloud-interop-basic/client/src/provider.ts

@@ -1,5 +1,6 @@
 import { cloudInteropOverride } from "@openfin/cloud-interop";
-import { connect } from "@openfin/web-interop";
+import type OpenFin from "@openfin/core";
+import { connect } from "@openfin/core-web";
 import "./util/buffer";
 import { getSettings } from "./platform/settings";
 
@@ -24,7 +25,9 @@ async function init(): Promise<void> {
 		await fin.Interop.init(settings.platform.providerId);
 	} else {
 		// You may now use the `fin` object and initialize the Broker with support for cloud interop.
-		const cloudOverride = await cloudInteropOverride(settings.cloud?.connectParams);
+		const cloudOverride = (await cloudInteropOverride(
+			settings.cloud?.connectParams
+		)) as unknown as OpenFin.ConstructorOverride<OpenFin.InteropBroker>;
 		await fin.Interop.init(settings.platform.providerId, [cloudOverride]);
 	}
 }

how-to/cloud-interop-basic/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "openfin-web--cloud-interop-basic",
-	"version": "17.2.0",
+	"version": "18.0.0",
 	"description": "OpenFin Web Starter -- Cloud Interop - Basic",
 	"main": "public/platform/provider.bundle.js",
 	"scripts": {
@@ -21,11 +21,11 @@
 	"dependencies": {
 		"@finos/fdc3": "^2.1.0-beta.8",
 		"@openfin/cloud-interop": "^0.4.0",
-		"@openfin/web-interop": "^0.37.17",
+		"@openfin/core-web": "^0.38.30",
 		"buffer": "^6.0.3"
 	},
 	"devDependencies": {
-		"@openfin/core": "37.81.17",
+		"@openfin/core": "38.81.34",
 		"@openfin/node-adapter": "34.78.80",
 		"copy-webpack-plugin": "^12.0.2",
 		"eslint": "8.57.0",

how-to/cloud-interop-basic/scripts/copy-shared-worker.js

@@ -1,7 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 
-const sharedWorkerPath = `${path.dirname(require.resolve('@openfin/web-interop'))}/shared-worker.js`;
+const sharedWorkerPath = `${path.dirname(require.resolve('@openfin/core-web'))}/shared-worker.js`;
 
 const targetJSdirectory = path.resolve(__dirname, '..', 'public', 'js');
 const targetSharedWorkerPath = path.join(targetJSdirectory, 'shared-worker.bundle.js');