# io.Connect Browser 3.3 Source: https://docs.interop.io/browser/getting-started/changelog/3-3/index.html ## io.Connect Browser 3.3 *Release date: 17.06.2024* Versions of all main and additional libraries of **io.Connect Browser** for the current release: | Library | Version | |---------|---------| | [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) | 3.3 | | [`@interopio/browser-platform`](https://www.npmjs.com/package/@interopio/browser-platform) | 3.3 | | [`@interopio/browser-worker`](https://www.npmjs.com/package/@interopio/browser-worker) | 3.3 | | [`@interopio/cli`](https://www.npmjs.com/package/@interopio/cli) | 1.3 | | [`@interopio/fdc3`](https://www.npmjs.com/package/@interopio/fdc3) | 2.3 | | [`@interopio/home-ui-react`](https://www.npmjs.com/package/@interopio/home-ui-react) | 1.3 | | [`@interopio/intents-resolver-api`](https://www.npmjs.com/package/@interopio/intents-resolver-api) | 2.3 | | [`@interopio/ng`](https://www.npmjs.com/package/@interopio/ng) | 4.3 | | [`@interopio/react-hooks`](https://www.npmjs.com/package/@interopio/react-hooks) | 3.3 | | [`@interopio/search-api`](https://www.npmjs.com/package/@interopio/search-api) | 2.3 | | [`@interopio/widget`](https://www.npmjs.com/package/@interopio/widget) | 1.0 | | [`@interopio/workspaces-api`](https://www.npmjs.com/package/@interopio/workspaces-api) | 3.3 | | [`@interopio/workspaces-ui-react`](https://www.npmjs.com/package/@interopio/workspaces-ui-react) | 3.3 | ## New Features > ⚠️ *Note that each new feature is listed under all libraries it affects.* > ### @interopio/browser > > - Added new methods to the Layouts API for renaming a Layout and for updating the metadata of a Layout: [`rename()`](https://docs.interop.io/browser/reference/javascript/layouts/api/index.md#API-rename), [`onRenamed()`](https://docs.interop.io/browser/reference/javascript/layouts/api/index.md#API-onRenamed), and [`updateMetadata()`](https://docs.interop.io/browser/reference/javascript/layouts/api/index.md#API-updateMetadata). > > To rename a Layout, use the `rename()` method and provide the Layout and the new name for it: > > ```javascript > const myLayout = await io.layouts.get("My Layout", "Global"); > > await io.layouts.rename(myLayout, "My New Layout"); > ``` > > To get notified when a Layout is renamed, use the `onRenamed()` method and provide a callback for handling the event: > > ```javascript > const handler = layout => console.log(`Layout renamed to: "${layout.name}".`); > > await io.layouts.onRenamed(handler); > ``` > > To persist any changes made to the metadata of a [`Layout`](https://docs.interop.io/browser/reference/javascript/layouts/layout/index.md) object, use the `updateMetadata()` method and provide the Layout as an argument: > > ```javascript > const myLayout = await io.layouts.get("My Layout", "Global"); > > // Changing the metadata of a Layout. > myLayout.metadata = { io: 42 }; > > // Updating the metadata of a Layout so that it will be persisted. > await io.layouts.updateMetadata(myLayout); > ``` > > - Added new methods to the Channels API for [adding and removing](https://docs.interop.io/browser/capabilities/data-sharing/channels/index.md#add__remove_channels) Channels: [`add()`](https://docs.interop.io/browser/reference/javascript/channels/api/index.md#API-add) and [`remove()`](https://docs.interop.io/browser/reference/javascript/channels/api/index.md#API-remove). > > ```javascript > // Basic definition of a new Channel. > const newChannel = { > name: "Black", > meta: { color: "black" }, > data: { io: 42 } > }; > > // Adding a new Channel. > await io.channels.add(newChannel); > > // Removing a Channel by name. > await io.channels.remove("Black"); > ``` > > - Added new methods to the Channels API for applying read and write [restrictions](https://docs.interop.io/browser/capabilities/data-sharing/channels/index.md#channel_restrictions) to Channels: [`restrict()`](https://docs.interop.io/browser/reference/javascript/channels/api/index.md#API-restrict), [`restrictAll()`](https://docs.interop.io/browser/reference/javascript/channels/api/index.md#API-restrictAll), and [`getRestrictions()`](https://docs.interop.io/browser/reference/javascript/channels/api/index.md#API-getRestrictions). > > ```javascript > // Restricting a specific window from publishing to a Channel. > const restrictions = { > name: "Red", > read: true, > write: false, > // ID of the window you want to restrict. > windowId: win.id > }; > > await io.channels.restrict(restrictions); > > // Retrieving the Channel restrictions for the current window. > const restrictions = await io.channels.getRestrictions(); > ``` > ### @interopio/browser-platform > > - Added new methods to the Layouts API for renaming a Layout and for updating the metadata of a Layout: `rename()`, `onRenamed()`, and `updateMetadata()`. > - Added new methods to the Channels API for adding and removing Channels: `add()` and `remove()`. > - Added new methods to the Channels API for applying read and write restrictions to Channels: `restrict()`, `restrictAll()`, and `getRestrictions()`. > - Started using the [`@interopio/gateway`](https://www.npmjs.com/package/@interopio/gateway) library. > ### @interopio/fdc3 > > - Added support for the `"ioConnect"` property of the `"hostManifests"` object in the [FDC3 app definition](https://fdc3.finos.org/schemas/2.0/app-directory#tag/Application). You can use the `"ioConnect"` property to provide an io.Connect [app definition](https://docs.interop.io/browser/capabilities/app-management/index.md#app_definitions) for your FDC3 app. > > ```json > { > "appId": "my-app", > "title": "My App", > "type": "web", > "details": { > "url": "https://example.com/my-app" > }, > "hostManifests": { > "ioConnect": { > "name": "my-app", > "type": "window", > "details": { > "url": "https://example.com/my-app" > } > } > } > } > ``` > > > ⚠️ *Note that if you provide a `"details"` object under the `"ioConnect"` key, the `"url"` property is required.* > ### @interopio/home-ui-react > > - Added support for browsers that don't have a Window Management API (Firefox, Safari). If the Home App runs in such browsers, Global Layouts won't be available. Workspaces that are part of a default Global Layout will be restored within the Home App, but any standalone windows that are part of the Layout will be ignored. > - Deprecated the `useIsBrowserSupported()` hook. > - Deprecated the `` component. > ### @interopio/react-hooks > > - Added an `onInitError` prop to the `` component. It accepts a callback that will be invoked if the io.Connect library initialization fails. > > ```javascript > import { createRoot } from "react-dom/client"; > import IOBrowser from "@interopio/browser"; > import { IOConnectProvider } from "@interopio/react-hooks"; > import App from "./App"; > > const domNode = document.getElementById("root"); > const root = createRoot(domNode); > > root.render( > > > > ); > ``` > > - Added a second optional callback argument to the `useIOConnectInit()` hook that will be invoked if the io.Connect library initialization fails. > > ```javascript > import IOBrowser from "@interopio/browser"; > import { useIOConnectInit } from "@interopio/react-hooks"; > import Main from "./Main"; > import Loader from "./Loader"; > > const App = () => { > const settings = { > browser: { > factory: IOBrowser > } > }; > > const onInitError = console.log; > > // The `onInitError` callback will be invoked if the io.Connect library fails to initialize. > const io = useIOConnectInit(settings, onInitError); > > return io ?
: ; > }; > > export default App; > ``` > ### @interopio/widget > > - The new [`@interopio/widget`](https://www.npmjs.com/package/@interopio/widget) library allows you to use the [io.Connect widget](https://docs.interop.io/browser/capabilities/widget/index.md) in your **io.Connect Browser** apps. The widget is a floating UI element that provides the user with a Channel Selector for the current window and an easy way to return an extracted window back in the Workspace from which it was extracted. The widget has a compact mode and settings for its position within the window: > > ![Widget](https://docs.interop.io/browser/images/widget/widget.mp4) > > To use the widget in your [Main app](https://docs.interop.io/browser/developers/browser-platform/overview/index.md) or in your [Browser Client](https://docs.interop.io/browser/developers/browser-client/overview/index.md) apps, install the library in your project: > > ```cmd > npm install @interopio/widget > ``` > > For JavaScript and Angular apps, import the `IOBrowserWidget()` factory function directly from the library. For React apps, import the `IOBrowserWidget()` factory function from `"@interopio/widget/react"`, which will import only the library bundle without React in it: > > ```javascript > // For JavaScript and Angular apps. > import IOBrowserWidget from "@interopio/widget"; > > // For React apps. > import IOBrowserWidget from "@interopio/widget/react"; > ``` > > To initialize the widget, include the `IOBrowserWidget()` factory function in the `libraries` array of the configuration object for initializing the [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) library. You can pass optional configuration for the widget by using the `widget` property of the library configuration object. > > Using the widget in a Browser Client app: > > ```javascript > import IOBrowser from "@interopio/browser" > import IOBrowserWidget from "@interopio/widget"; > // Import the widget styles in order for the widget to be displayed properly. > import "@interopio/widget/styles"; > > const config = { > libraries: [IOBrowserWidget], > // Optional configuration for the widget. > widget: { > channelSelector: { > enable: true, > type: "directional" > } > } > }; > > const io = await IOBrowser(config); > ``` > > Using the widget in a Main app: > > ```javascript > import IOBrowserPlatform from "@interopio/browser-platform" > import IOBrowserWidget from "@interopio/widget"; > // Import the widget styles in order for the widget to be displayed properly. > import "@interopio/widget/styles"; > > const config = { > licenseKey: "my-license-key", > // Configuration for the internal initialization of the `@interopio/browser` library. > browser: { > libraries: [IOBrowserWidget], > // Optional configuration for the widget. > widget: { > channelSelector: { > enable: true, > type: "directional" > } > } > } > }; > > const { io } = await IOBrowserPlatform(config); > ``` ## Improvements & Bug Fixes > ⚠️ *Note that each improvement or bug fix is listed under all libraries it affects.* > ### @interopio/browser-platform > > - Started awaiting the operation for clearing the window context when the window is closed. > - Fixed error related to clearing window context. > - Fixed error related to querying for Window Management permission. > ### @interopio/home-ui-react > > - Added an error page displayed when the platform fails to initialize. > - Improved the responsiveness and features of the browser not supported page. > - Added additional user validation for Auth0 authentication. > - Started awaiting current Layout operations. > - Various improvements and fixes related to internal components and functions. > - Various UI fixes.