Changelog

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 3.3
@interopio/browser-platform 3.3
@interopio/browser-worker 3.3
@interopio/cli 1.3
@interopio/fdc3 2.3
@interopio/home-ui-react 1.3
@interopio/intents-resolver-api 2.3
@interopio/ng 4.3
@interopio/react-hooks 3.3
@interopio/search-api 2.3
@interopio/widget 1.0
@interopio/workspaces-api 3.3
@interopio/workspaces-ui-react 3.3

New Features

⚠️ Note that each new feature is listed under all libraries it affects.

@interopio/browser

To rename a Layout, use the rename() method and provide the Layout and the new name for it:

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:

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 object, use the updateMetadata() method and provide the Layout as an argument:

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);
// 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");
// 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 library.

@interopio/fdc3

  • Added support for the "ioConnect" property of the "hostManifests" object in the FDC3 app definition. You can use the "ioConnect" property to provide an io.Connect app definition for your FDC3 app.
{
    "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 <BrowserNotSupported /> component.

@interopio/react-hooks

  • Added an onInitError prop to the <IOConnectProvider /> component. It accepts a callback that will be invoked if the io.Connect library initialization fails.
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(
    <IOConnectProvider settings={{ browser: { factory: IOBrowser } }} onInitError={console.log}>
        <App />
    </IOConnectProvider>
);
  • Added a second optional callback argument to the useIOConnectInit() hook that will be invoked if the io.Connect library initialization fails.
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 ? <Main io={io} /> : <Loader />;
};

export default App;

@interopio/widget

  • The new @interopio/widget library allows you to use the io.Connect widget 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

To use the widget in your Main app or in your Browser Client apps, install the library in your project:

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:

// 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 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:

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:

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 login.
  • Started awaiting current Layout operations.
  • Various improvements and fixes related to internal components and functions.
  • Various UI fixes.