Overview

Importing 1fe Platform Utils

import { platformProps } from "@1fe/shell";

Note

The @1fe/shell package is automatically installed in your widget or plugin project using the latest @1fe/cli.

The above approach is also known as shell import syntax or 1fe contextual injection.

Basic Usage of 1fe utils

// The 1fe shell provided the platform utils to all widgets loaded in 1fe
import { PlatformPropsType, platformProps } from "@1fe/shell";

// This type is for reference and is included out of box in the widget-starter-kit
interface WidgetProps {
  platform: PlatformPropsType;
  host?: HostPropType;
}

const MyWidget = (props: WidgetProps) => {
  useEffect(() => {
    // this is how you access all utils, use these docs for examples
    platformProps.utils.experience.setTitle("foo bar");
  }, []);

  return <>{/* ... */}</>;
};

export default MyWidget;

How does the contextual injection work?

In a nutshell, the @1fe/shell is a simple types package to provide intellisense to the developer. In practice, there’s no code that is being shipped in the @1fe/shell package. Instead when your widget is loaded inside of 1fe, we intercept the request to load the @1fe/shell package and instead inject platformProps contextualized to your widget.

Using the contextual injection, you can access the platformProps from anywhere in your widget without having to pass it down as a prop. Additionally this now enables us to safely provide some convenience React hooks from the 1fe platform.

Why contextual injection?

• No Prop Drilling: No more prop drilling through the code.
• Stability of References: Stability of references for things like Widgets.get etc.
• No Need for React Contexts: No need for a shared context between widgets.
• Platform Hooks: We can now pass hooks from platformProps with a stable reference and not having to worry about react rule of hooks being voided.
• Access Outside of React Lifecycle: Access utils like logger etc outside of React lifecycle.
• Syntax Sugar: The syntax is concise and easy to use.