@openfin/core-web 0.39.17 → 0.39.19

package/README.md

@@ -1,45 +1,49 @@
 # @openfin/core-web
 
-`@openfin/core-web` enables interopability within a web browser. It is intended to be used by both content and platform developers to create integrated experiences which leverage OpenFin's existing interopability APIs.
+`@openfin/core-web` enables interoperability and layouts within a web browser. It is intended to be used by both content and platform developers to create integrated experiences which leverage OpenFin's existing interoperability APIs.
 
 This package relies on the type definitions found in [@openfin/core](https://www.npmjs.com/package/@openfin/core) which is a required peer dependency.
 
+## Built on OpenFin Web-Starter
+
+To see more examples of `@openfin/core-web` see the [Built on OpenFin Web-Starter Repository](https://github.com/built-on-openfin/web-starter/).
+
 ## Developer Guides
 
 (Please note, these links work in your IDE and not on npm.org, we will update this soon.)
 
--   [Content Developer Guide](docs/web-application-developer-guide.md) - For developers who need access to the `fin` api to build web applications.
--   [Platform Developer Guide](docs/platform-developer-guide.md) - For developers building platform-like web experiences who wish to enable and host a Web Interop setup.
+- [Content Developer Guide](docs/web-application-developer-guide.md) - For developers who need access to the `fin` api to build web applications.
+- [Platform Developer Guide](docs/platform-developer-guide.md) - For developers building platform-like web experiences who wish to enable and host a Web Interop setup.
 
 ## Supported APIs
 
 `@openfin/core-web` currently supports the following APIs:
 
--   `fin.me.identity` - The identity of the `fin` instance provided by the Web Broker.
--   `fin.InterApplicationBus.Channel.connect` - Currently, the only supported channel strategy is `classic`.
--   `fin.InterApplicationBus.Channel.create`
--   `InteropBroker`
-    -   `fin.Interop.init`
--   `InteropClient`
-    -   `fin.Interop.connectSync`
-    -   `fin.me.interop`
-    -   `InteropClient.getFDC3()` - (FDC3 support is currently limited to context sharing on User Channels)
--   `Layout`
-    -   `fin.Platform.Layout.init`
-    -   `fin.Platform.Layout.create`
-    -   `fin.Platform.Layout.destroy`
-    -   `fin.Platform.Layout.getCurrentLayoutManagerSync`
+- `fin.me.identity` - The identity of the `fin` instance provided by the Web Broker.
+- `fin.InterApplicationBus.Channel.connect` - Currently, the only supported channel strategy is `classic`.
+- `fin.InterApplicationBus.Channel.create`
+- `InteropBroker`
+  - `fin.Interop.init`
+- `InteropClient`
+  - `fin.Interop.connectSync`
+  - `fin.me.interop`
+  - `InteropClient.getFDC3()` - (FDC3 support is currently limited to context sharing on User Channels)
+- `Layout`
+  - `fin.Platform.Layout.init`
+  - `fin.Platform.Layout.create`
+  - `fin.Platform.Layout.destroy`
+  - `fin.Platform.Layout.getCurrentLayoutManagerSync`
 
 ## API Reference
 
 (Please note, these links work in your IDE and not on npmjs.com, we will update this soon.)
 
--   [index](out/docs/README.md)
--   [@openfin/core-web](out/docs/@openfin/core-web/README.md)
--   [@openfin/core-web/iframe-broker](out/docs/@openfin/core-web/iframe-broker/README.md)
--   [@openfin/core-web/shared-worker](out/docs/@openfin/core-web/shared-worker/README.md)
+- [index](out/docs/README.md)
+- [@openfin/core-web](out/docs/@openfin/core-web/README.md)
+- [@openfin/core-web/iframe-broker](out/docs/@openfin/core-web/iframe-broker/README.md)
+- [@openfin/core-web/shared-worker](out/docs/@openfin/core-web/shared-worker/README.md)
 
 ## See Also
 
--   [OpenFin Container Developer guide](https://developers.openfin.co/of-docs/docs/container-overview)
--   [Fin API reference](https://developer.openfin.co/docs/javascript/stable)
+- [OpenFin Container Developer guide](https://developers.openfin.co/of-docs/docs/container-overview)
+- [Fin API reference](https://developer.openfin.co/docs/javascript/stable)

package/docs/platform-developer-guide.md

@@ -115,6 +115,14 @@ const layoutSnapshot = {
 
 The JSON structure of the underlying layout options is interchangeable, though not identical, between Desktop and Web. Web Layout Snapshots have an optional `web` property within the view `componentState` options which stores web specific properties. This `web` property is ignored on desktop.
 
+### Layout Settings
+
+Layouts in the web support the following [`LayoutOptions.settings`](https://cdn.openfin.co/docs/javascript/stable/interfaces/OpenFin.LayoutOptions.html#settings):
+
+-   `reorderEnabled` (Default value **true**): If true, users can re-arrange the layout by dragging items by their tabs to the desired location. Note, unlike in an OpenFin environment the dragging of items is limited to the current window.
+-   `hasHeaders` (Default value **true**): Turns tab headers on or off. If false, the layout will be displayed with splitters only.
+-   `preventSplitterResize` (Default value **false**): When true the splitters will not be draggable and the layout will not resize.
+
 ### Example: Retrieve a layoutSnapshot from both desktop and web environments
 
 From within your OpenFin v34+ Desktop environment, retrieve the current layoutSnapshot:
@@ -219,11 +227,11 @@ Note that cross-tab support is experimental, browser-dependent and respects each
 
 (Please note, these links work in your IDE and not on npmjs.com, we will update this soon.)
 
-- [@openfin/core-web](../out/docs/@openfin/core-web/README.md)
-- [@openfin/core-web/iframe-broker](../out/docs/@openfin/core-web/iframe-broker/README.md)
-- [@openfin/core-web/shared-worker](../out/docs/@openfin/core-web/shared-worker/README.md)
+-   [@openfin/core-web](../out/docs/@openfin/core-web/README.md)
+-   [@openfin/core-web/iframe-broker](../out/docs/@openfin/core-web/iframe-broker/README.md)
+-   [@openfin/core-web/shared-worker](../out/docs/@openfin/core-web/shared-worker/README.md)
 
 ## See Also
 
-- [OpenFin Container Developer guide](https://developers.openfin.co/of-docs/docs/container-overview)
-- [Fin API reference](https://developer.openfin.co/docs/javascript/stable)
+-   [OpenFin Container Developer guide](https://developers.openfin.co/of-docs/docs/container-overview)
+-   [Fin API reference](https://developer.openfin.co/docs/javascript/stable)

package/out/api-client.d.ts

@@ -1,4 +1,4 @@
-import type OpenFin from '@openfin/core';
+import OpenFin from '@openfin/core';
 
 export declare type BaseConfig = {
     /**
@@ -49,6 +49,8 @@ export declare const connect: (connectConfig: ConnectConfig) => Promise<OpenFin.
 
 export declare type ConnectConfig = StandAloneConnectConfig | InheritModeConnectConfig;
 
+declare type GL2Types = OpenFin.LayoutEntityTypes | 'component' | 'root' | 'ground';
+
 export declare type InheritModeConnectConfig = BaseConfig & {
     /**
      * @defaultValue 'disabled'
@@ -91,6 +93,8 @@ export declare type StandAloneConnectConfig = BaseConfig & {
     options: BaseConnectionOptions;
 };
 
+export declare type ViewComponentConfig = WebLayoutComponent['componentState'];
+
 export declare type WebCreateLayoutOptions = Omit<OpenFin.CreateLayoutOptions, 'layout'> & {
     layout: WebLayoutOptions;
 };
@@ -100,7 +104,7 @@ declare type WebLayoutColumn = OpenFin.LayoutColumn & WebLayoutItemConfig;
 /**
  * Web-only component supplied to IframeViewComponent as it's config
  */
-export declare type WebLayoutComponent = OpenFin.LayoutComponent & {
+export declare type WebLayoutComponent = Omit<OpenFin.LayoutComponent, 'componentState'> & {
     componentState?: OpenFin.LayoutComponent['componentState'] & {
         web?: WebState;
     };
@@ -112,10 +116,13 @@ export declare type WebLayoutInitOptions = Omit<OpenFin.InitLayoutOptions, 'layo
     layoutManagerOverride?: OpenFin.LayoutManagerOverride<WebLayoutSnapshot>;
 };
 
-declare type WebLayoutItemConfig = Omit<OpenFin.LayoutItemConfig, 'content'> & {
+declare type WebLayoutItemConfig = Omit<OpenFin.LayoutItemConfig, 'content' | 'type'> & {
     content?: WebLayoutContent;
+    type: GL2Types;
 };
 
+export declare type WebLayoutManager = OpenFin.LayoutManager<WebLayoutSnapshot>;
+
 export declare type WebLayoutOptions = Omit<OpenFin.LayoutOptions, 'content'> & {
     content?: WebLayoutContent;
 };

package/out/api-client.js

@@ -1 +1 @@
-"use strict";var e=require("./main-b06f22cd.js");require("buffer/"),require("uuid"),require("events"),require("lodash"),exports.connect=e.connect;
+"use strict";var e=require("./main-5ddd684d.js");require("buffer/"),require("uuid"),require("events"),require("lodash/cloneDeep"),require("lodash/isEqual"),exports.connect=e.connect;

package/out/docs/@openfin/core-web/README.md

@@ -37,9 +37,11 @@ const fin = await connect({
 - [ConnectConfig](type-aliases/ConnectConfig.md)
 - [InheritModeConnectConfig](type-aliases/InheritModeConnectConfig.md)
 - [StandAloneConnectConfig](type-aliases/StandAloneConnectConfig.md)
+- [ViewComponentConfig](type-aliases/ViewComponentConfig.md)
 - [WebCreateLayoutOptions](type-aliases/WebCreateLayoutOptions.md)
 - [WebLayoutComponent](type-aliases/WebLayoutComponent.md)
 - [WebLayoutInitOptions](type-aliases/WebLayoutInitOptions.md)
+- [WebLayoutManager](type-aliases/WebLayoutManager.md)
 - [WebLayoutOptions](type-aliases/WebLayoutOptions.md)
 - [WebLayoutPlatformOptions](type-aliases/WebLayoutPlatformOptions.md)
 - [WebLayoutSnapshot](type-aliases/WebLayoutSnapshot.md)

package/out/docs/@openfin/core-web/type-aliases/ViewComponentConfig.md

@@ -0,0 +1,9 @@
+**@openfin/core-web** • [API](../../../README.md)
+
+***
+
+[@openfin/core-web](../../../README.md) / [@openfin/core-web](../README.md) / ViewComponentConfig
+
+# Type alias: ViewComponentConfig
+
+> **ViewComponentConfig**: [`WebLayoutComponent`](WebLayoutComponent.md)\[`"componentState"`\]

package/out/docs/@openfin/core-web/type-aliases/WebLayoutComponent.md

@@ -6,7 +6,7 @@
 
 # Type alias: WebLayoutComponent
 
-> **WebLayoutComponent**: `OpenFin.LayoutComponent` & `object`
+> **WebLayoutComponent**: `Omit`\<`OpenFin.LayoutComponent`, `"componentState"`\> & `object`
 
 Web-only component supplied to IframeViewComponent as it's config
 

package/out/docs/@openfin/core-web/type-aliases/WebLayoutManager.md

@@ -0,0 +1,9 @@
+**@openfin/core-web** • [API](../../../README.md)
+
+***
+
+[@openfin/core-web](../../../README.md) / [@openfin/core-web](../README.md) / WebLayoutManager
+
+# Type alias: WebLayoutManager
+
+> **WebLayoutManager**: `OpenFin.LayoutManager`\<[`WebLayoutSnapshot`](WebLayoutSnapshot.md)\>

package/out/iframe-broker.js

@@ -1 +1 @@
-"use strict";const e="web-broker-ports-ready",t="worker-initialize-connection",r="create-fallback-connection",i="request-fallback-connection",o=e=>`ack-${e}`,n=(...e)=>({log:(...t)=>console.log(`[${(new Date).toISOString()}]`,...(e=>e.map((e=>`[${e}]`)))(e),...t),getLogger:(...t)=>n(...e,...t)});class s{static get lockApi(){return navigator.locks}constructor(e){this.name=e,this.releaseCallback=null,s.pending.add(this),this.lockAcquiredPromise=new Promise(((e,t)=>{this.lockReleasedPromise=s.lockApi.request(this.name,(()=>(s.pending.delete(this),e(),new Promise((e=>{s.held.add(this),this.releaseCallback=e}))))).catch((e=>{throw t(e),e}))}))}async acquired(){await this.lockAcquiredPromise}async release(){if(!this.releaseCallback)throw new Error(`Lock ${this.name} not acquired.`);this.releaseCallback(),this.releaseCallback=null,await this.lockReleasedPromise,s.held.delete(this)}async onReleased(e){if(!this.lockReleasedPromise)throw new Error(`Lock ${this.name} not queued.`);return this.lockReleasedPromise.then(e)}autoRelease(){this.acquired().then((()=>this.release()))}static async releaseAll(){const e=Promise.all([...this.pending].map((async e=>{await e.acquired(),await e.release()})));await Promise.all([...this.held].map((async e=>{await e.release()}))),await e}}s.pending=new Set,s.held=new Set;const a=e=>window.top===e,c=(e,t)=>{try{return e.origin===t.origin}catch(e){return!1}},d="openfin/web-shared-worker";class h{constructor(e,t,n){this.workerUrl=e,this.iframeWindow=t,this.forceWorker=n,this.isSharedWorkerSupported=()=>!this.forceWorker&&!!window.SharedWorker,this.state="ready",this.establishWorkerConnectionViaWindow=async e=>{if(c(this.iframeWindow,e)){const t=new MessageChannel;return new Promise(((n,s)=>{t.port1.addEventListener("message",(e=>{e.data.topic===o(r)&&(e.data.success?n(t.port1):s(e.data.reason))})),t.port1.start();const a={topic:i};e.postMessage(a,location.origin,[t.port2])}))}throw new Error("Could not connect via top level browsing context as its origin does not much the web interop broker.")},this.listenForNestedConnections=e=>{"top-window"===this.state&&c(this.iframeWindow,this.iframeWindow.parent)&&this.iframeWindow.parent.addEventListener("message",(t=>{if(t.origin===location.origin&&t.data.topic===i){const[i]=t.ports,o={topic:r};e.postMessage(o,[i])}}))},this.initialize=async()=>{if("ready"!==this.state)throw new Error("Worker connection already initialized");if((e=>{const t=r=>!(!(e=>{try{return!e.origin}catch(e){return!0}})(r)&&r.origin===e.origin)||!a(r)&&t(r.parent);return!a(e)&&t(e.parent)})(this.iframeWindow)&&c(this.iframeWindow,this.iframeWindow.top))return this.state="partitioned-frame",this.establishWorkerConnectionViaWindow(this.iframeWindow.top);if(a(this.iframeWindow.parent)){let e;return this.state="top-window",e=this.isSharedWorkerSupported()?new SharedWorker(this.workerUrl,d).port:new Worker(this.workerUrl),this.listenForNestedConnections(e),e}{if(this.state="frame",!this.isSharedWorkerSupported())try{return await this.establishWorkerConnectionViaWindow(this.iframeWindow.top)}catch(e){throw new Error(`SharedWorker is not supported and an unexpected error occured when trying to connect via fallback mechanism: ${e.message}`)}const{port:e}=new SharedWorker(this.workerUrl,d);return e}}}}const l=n("@openfin/core-web/iframe-broker"),w=()=>{const e=((e,t)=>{const r=new RegExp(`^${t}<(?<meta>.*)>$`).exec(e)?.groups?.meta;if(r)try{return JSON.parse(atob(r))}catch(e){throw new Error(`Failed to decode JSON from ${r}.`)}})(window.name,"of-broker");if(!e)throw new Error("Invalid or missing identity string in iframe context. Ensure that this iframe is being renderered via the @openfin/core-web library.");return e};function p(t){const r={topic:o(e),success:!1,reason:t?.reason??"Connection Rejected"};window.parent.postMessage(r,"*")}exports.init=async r=>{try{const{sharedWorkerUrl:i}=r;await("loading"===document.readyState?new Promise((e=>{const t=()=>{e(),window.removeEventListener("DOMContentLoaded",t)};window.addEventListener("DOMContentLoaded",t)})):Promise.resolve());const n=w(),a=new h(i,window,"same-site"!==r.experimental?.crossTab),c=await a.initialize();l.log(`Loading ${i} in ${a.state} mode...`);const d=await(async(r,i,n)=>{const a=new MessageChannel,c=new MessageChannel,d={topic:t,payload:{identity:n}},h=new s((e=>`__OPENFIN__${e.uuid}_${e.name}`)(n));await h.acquired(),await new Promise(((e,r)=>{i.addEventListener("message",(i=>{i.data.topic===o(t)&&(i.data.success?e():r(new Error(i.data.reason)))})),i.start?.(),i.postMessage(d,[c.port2])}));const l={topic:o(e),success:!0,payload:{identity:n}};return r.postMessage(l,"*",[a.port2,c.port1]),a.port1})(window.parent,c,n);d.start(),c.start?.(),l.log(`Port transfer complete in ${a.state} mode. Connection established with identity ${JSON.stringify(n)}. SharedWorker support=${a.isSharedWorkerSupported()}`)}catch(e){const t=new Error(`An unexpected error occured during initialization. ${e.message}`);p({reason:t.message}),console.error(t)}},exports.rejectConnections=p;
+"use strict";const e="web-broker-ports-ready",t="worker-initialize-connection",i="create-fallback-connection",r="request-fallback-connection",n=e=>`ack-${e}`,o=(...e)=>({log:(...t)=>console.debug(`[${(new Date).toISOString()}]`,...(e=>e.map((e=>`[${e}]`)))(e),...t),getLogger:(...t)=>o(...e,...t)}),s=e=>window.top===e,a=(e,t)=>{try{return e.origin===t.origin}catch(e){return!1}},c="openfin/web-shared-worker";class d{static get lockApi(){return navigator.locks}constructor(e){this.name=e,this.releaseCallback=null,d.pending.add(this),this.lockAcquiredPromise=new Promise(((e,t)=>{this.lockReleasedPromise=d.lockApi.request(this.name,(()=>(d.pending.delete(this),e(),new Promise((e=>{d.held.add(this),this.releaseCallback=e}))))).catch((e=>{throw t(e),e}))}))}async acquired(){await this.lockAcquiredPromise}async release(){if(!this.releaseCallback)throw new Error(`Lock ${this.name} not acquired.`);this.releaseCallback(),this.releaseCallback=null,await this.lockReleasedPromise,d.held.delete(this)}async onReleased(e){if(!this.lockReleasedPromise)throw new Error(`Lock ${this.name} not queued.`);return this.lockReleasedPromise.then(e)}autoRelease(){this.acquired().then((()=>this.release()))}static async releaseAll(){const e=Promise.all([...this.pending].map((async e=>{await e.acquired(),await e.release()})));await Promise.all([...this.held].map((async e=>{await e.release()}))),await e}}d.pending=new Set,d.held=new Set;class l{constructor(e=100,t=2){this.pingIntervalMs=e,this.allowedMissedPings=t,this.lockSelf=async e=>{const t=new d((e=>`__OPENFIN__${e.uuid}_${e.name}`)(e));return await t.acquired(),t}}async lockProxiedConnection(e,t){let i=0;t.addEventListener("message",(e=>{"pong"===e.data.topic&&i--}));const r=await this.lockSelf(e);let n=setInterval((()=>{i>=this.allowedMissedPings?(r.release(),clearInterval(n)):(i++,t.postMessage({topic:"ping"}))}),this.pingIntervalMs);t.start()}registerProxiedConnection(e){e.addEventListener("message",(t=>{"ping"===t.data.topic&&e.postMessage({topic:"pong"})})),e.start()}}class h{constructor(e,t,o){this.workerUrl=e,this.iframeWindow=t,this.forceWorker=o,this.identityDisconnectionController=new l,this.isSharedWorkerSupported=()=>!this.forceWorker&&!!window.SharedWorker,this.state="ready",this.establishWorkerConnectionViaWindow=async(e,t)=>{if(a(this.iframeWindow,e)){const o=new MessageChannel,s=new MessageChannel;return this.identityDisconnectionController.registerProxiedConnection(s.port1),new Promise(((a,c)=>{o.port1.addEventListener("message",(e=>{e.data.topic===n(i)&&(e.data.success?a(o.port1):c(e.data.reason))})),o.port1.start();const d={topic:r,payload:{identity:t}};e.postMessage(d,location.origin,[o.port2,s.port2])}))}throw new Error("Could not connect via top level browsing context as its origin does not much the web interop broker.")},this.listenForNestedConnections=e=>{"top-window"===this.state&&a(this.iframeWindow,this.iframeWindow.parent)&&this.iframeWindow.parent.addEventListener("message",(async t=>{const{data:n}=t;if(t.origin===location.origin&&n.topic===r){const[r,...o]=t.ports;if(o.length>0&&n.payload?.identity){const[e]=o;await this.identityDisconnectionController.lockProxiedConnection(n.payload.identity,e)}const s={topic:i};e.postMessage(s,[r])}}))},this.initialize=async e=>{if("ready"!==this.state)throw new Error("Worker connection already initialized");return(e=>{const t=i=>!(!(e=>{try{return!e.origin}catch(e){return!0}})(i)&&i.origin===e.origin)||!s(i)&&t(i.parent);return!s(e)&&t(e.parent)})(this.iframeWindow)&&a(this.iframeWindow,this.iframeWindow.top)?this.state="partitioned-frame":s(this.iframeWindow.parent)?this.state="top-window":this.state="frame",this.connect(e)}}async connect(e){if("ready"===this.state)throw new Error("Must call initialize before connect");switch(this.state){case"partitioned-frame":return this.establishWorkerConnectionViaWindow(this.iframeWindow.top,e);case"top-window":{let t;return t=this.isSharedWorkerSupported()?new SharedWorker(this.workerUrl,c).port:new Worker(this.workerUrl),await this.identityDisconnectionController.lockSelf(e),this.listenForNestedConnections(t),t}case"frame":{if(!this.isSharedWorkerSupported())try{return await this.establishWorkerConnectionViaWindow(this.iframeWindow.top,e)}catch(e){throw new Error(`SharedWorker is not supported and an unexpected error occured when trying to connect via fallback mechanism: ${e.message}`,{cause:e})}await this.identityDisconnectionController.lockSelf(e);const{port:t}=new SharedWorker(this.workerUrl,c);return t}default:throw this.state,new Error(`Invalid state: ${this.state}`)}}}const w=o("@openfin/core-web/iframe-broker"),p=()=>{const e=((e,t)=>{const i=new RegExp(`^${t}<(?<meta>.*)>$`).exec(e)?.groups?.meta;if(i)try{return JSON.parse(atob(i))}catch(e){throw new Error(`Failed to decode JSON from ${i}.`)}})(window.name,"of-broker");if(!e)throw new Error("Invalid or missing identity string in iframe context. Ensure that this iframe is being renderered via the @openfin/core-web library.");return e};function g(t){const i={topic:n(e),success:!1,reason:t?.reason??"Connection Rejected"};window.parent.postMessage(i,"*")}exports.init=async i=>{try{const{sharedWorkerUrl:r}=i;await("loading"===document.readyState?new Promise((e=>{const t=()=>{e(),window.removeEventListener("DOMContentLoaded",t)};window.addEventListener("DOMContentLoaded",t)})):Promise.resolve());const o=p(),s=new h(r,window,"same-site"!==i.experimental?.crossTab),a=await s.initialize(o);w.log(`Loading ${r} in ${s.state} mode...`);const c=await(async(i,r,o)=>{const s=new MessageChannel,a=new MessageChannel,c={topic:t,payload:{identity:o}};await new Promise(((e,i)=>{r.addEventListener("message",(r=>{r.data.topic===n(t)&&(r.data.success?e():i(new Error(r.data.reason)))})),r.start?.(),r.postMessage(c,[a.port2])}));const d={topic:n(e),success:!0,payload:{identity:o}};return i.postMessage(d,"*",[s.port2,a.port1]),s.port1})(window.parent,a,o);c.start(),a.start?.(),w.log(`Port transfer complete in ${s.state} mode. Connection established with identity ${JSON.stringify(o)}. SharedWorker support=${s.isSharedWorkerSupported()}`)}catch(e){const t=new Error(`An unexpected error occured during initialization. ${e.message}`);g({reason:t.message}),console.error(t)}},exports.rejectConnections=g;