### Host MFE Plugin Configuration (JavaScript)

Source: https://github.com/openedx/frontend-plugin-framework/blob/master/README.rst

This JavaScript code defines the plugin configuration for a Host MFE. It imports necessary types and operations from the framework and declares an 'env.config.js' file. The configuration specifies various plugin operations like 'Insert', 'Wrap', and 'Modify' for different widgets within a 'sidebar' plugin slot, including their types, priorities, and associated rendering components or functions.

```javascript
// env.config.js

import { DIRECT_PLUGIN, IFRAME_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';

// import any additional dependencies or functions to be used for each plugin operation
import Sidebar from './widgets/social/Sidebar';
import SocialMediaLink from './widgets/social/SocialMediaLink';
import { wrapSidebar, modifySidebar } from './widgets/social/utils';
import { SomeIcon } from '@openedx/paragon/icons';

const config = {
  // additional environment variables
  pluginSlots: {
    sidebar: { // plugin slot id
      keepDefault: true,
      plugins: [
        {
          op: PLUGIN_OPERATIONS.Insert,
          widget: {
            id: 'social_media_link',
            type: DIRECT_PLUGIN,
            priority: 10,
            RenderWidget: SocialMediaLink,
          },
        },
        {
          op: PLUGIN_OPERATIONS.Wrap,
          widgetId: 'default_contents',
          wrapper: wrapSidebar,
        },
        {
          op: PLUGIN_OPERATIONS.Modify,
          widgetId: 'social_media_link',
          fn: modifySidebar,
        },
      ],
    },
  },
};
```

--------------------------------

### Importing from Module Public Interface (JavaScript)

Source: https://github.com/openedx/frontend-plugin-framework/blob/master/docs/decisions/0002-feature-based-application-organization.rst

Demonstrates the correct and incorrect ways to import modules within a feature-based organization. It highlights the importance of importing only from the module's public interface (index.js) to maintain encapsulation and prevent breaking changes.

```javascript
import { MyComponent, reducer as myComponentReducer } from './submodule'; // Good
import MyComponent from './submodule/MyComponent'; // Bad
import reducer from './submodule/data/reducers'; // Bad
```

--------------------------------

### Hide Operation for Plugins

Source: https://github.com/openedx/frontend-plugin-framework/blob/master/README.rst

Demonstrates the 'Hide' operation for a plugin, which is used to hide specific content. It requires the operation name and the widget ID to reference the content to be hidden.

```javascript
/*
  * {String} op - Name of plugin operation
  * {String} widgetId - The widget id needed for referencing when using Modify/Wrap/Hide
*/

{
  op: PLUGIN_OPERATIONS.Hide,
  widgetId: 'some_undesired_plugin',
}
```

--------------------------------

### Plugin Fallback Configuration (JS)

Source: https://github.com/openedx/frontend-plugin-framework/blob/master/README.rst

Configures a custom fallback component for a specific plugin within a JS configuration. This fallback is prioritized over any other configured fallbacks for that plugin.

```javascript
const config = {
  pluginSlots: {
    my_plugin_slot: {
      keepDefault: false,
      plugins: [
        {
          op: PLUGIN_OPERATIONS.Insert,
          widget: {
            id: 'this_is_a_plugin',
            type: DIRECT_PLUGIN,
            priority: 60,
            RenderWidget: ReactPluginComponent,
            errorFallbackComponent: MyCustomFallbackComponent,
          },
        },
      ],
    },
  },
};
```

--------------------------------

### iFrame Plugin with Fallback Component (React)

Source: https://github.com/openedx/frontend-plugin-framework/blob/master/README.rst

Illustrates how to wrap an iFrame-based plugin with a custom fallback component. This fallback is used if the iFrame fails to load or encounters an error.

```javascript
<MyMFE>
  <Route path="/mainContent">
      <MyMainContent />
  </Route>
  <Route path="/plugin1">
    <Plugin fallbackComponent={<OtherFallback />}>
      <MyCustomContent />
    </Plugin>
  </Route>
</MyMFE>
```

--------------------------------

### Insert Direct Plugin Operation (JavaScript)

Source: https://github.com/openedx/frontend-plugin-framework/blob/master/README.rst

This operation inserts a direct plugin widget into a slot. It requires the operation type 'Insert' and a widget object containing an ID, type (DIRECT_PLUGIN), priority, and a RenderWidget function.

```javascript
{
  op: PLUGIN_OPERATIONS.Insert,
  widget: {
    id: 'social_media_link',
    type: DIRECT_PLUGIN,
    priority: 10,
    RenderWidget: SocialMediaLink,
  }
}
```

--------------------------------

### Plugin Slot Configuration for Operators

Source: https://github.com/openedx/frontend-plugin-framework/blob/master/docs/decisions/0003-slot-naming-and-life-cycle.rst

Illustrates how operators configure plugin slots by specifying plugins to be inserted. The slot ID is used to reference the target slot for plugin operations like insertion.

```javascript
pluginSlots: {
  arbitrary_slot_name: {
    plugins: [{
      op: PLUGIN_OPERATIONS.Insert,
      widget: {
        id: 'arbitrary_plugin_name',
        ...
      }
    }]
  }
}
```

```javascript
pluginSlots: {
  org.openedx.frontend.courseware.navigation_sidebar.v2: {
    plugins: [{
      op: PLUGIN_OPERATIONS.Insert,
      widget: {
        id: 'arbitrary_plugin_name',
        ...
      }
    }]
  }
}
```

--------------------------------

### Wrap Widget Operation (JavaScript)

Source: https://github.com/openedx/frontend-plugin-framework/blob/master/README.rst

The Wrap operation adds a React component around a widget. It requires the 'Wrap' operation type, the 'widgetId' of the target widget, and a 'wrapper' function that receives component and id props and returns the wrapped component.

```javascript
const wrapWidget = ({ component, idx }) => (
  <div className="bg-warning" data-testid={`wrapper${idx + 1}`} key={idx}>
    <p>This is a wrapper component that is placed around the widget.</p>
    {component}
    <p>With this wrapper, you can add anything before or after the widget.</p>
  </div>
);

/*
  * {String} op - Name of plugin operation
  * {String} widgetId - The widget id needed for referencing when using Modify/Wrap/Hide
  * {Function} wrapper - The function to call that can wrap the widget with a React component
*/

{
  op: PLUGIN_OPERATIONS.Wrap,
  widgetId: 'default_contents',
  wrapper: wrapWidget,
}
```

--------------------------------

### Define Plugin Slot in Host MFE (React)

Source: https://github.com/openedx/frontend-plugin-framework/blob/master/README.rst

This snippet demonstrates how to define a 'PluginSlot' component within a Host MFE's React application. It specifies the slot's ID, which is referenced in the JavaScript configuration, and passes additional properties and styles to the slot. It also shows how to include default content or child components within the slot.

```jsx
<HostApp>
  <Route path="/page1">
    <SomeHostContent />
    <PluginSlot
      id="sidebar" // this `id` is referenced in the JS-based config
      pluginProps={{
        className: 'flex-grow-1',
        title: 'example plugins',
      }}
      style={{
        height: 700,
      }}
    >
      <SideBar
        propExampleA: 'edX Sidebar',
        propExampleB: SomeIcon,
      >
    </PluginSlot >
  </Route>
  <Route path="/page2">
    <OtherRouteContent />
  </Route>
</HostApp>
```

--------------------------------

### Insert iFrame Plugin Operation (JavaScript)

Source: https://github.com/openedx/frontend-plugin-framework/blob/master/README.rst

This operation inserts an iFrame plugin widget into a slot. It requires the 'Insert' operation type and a widget object specifying an ID, type (IFRAME_PLUGIN), priority, URL for the iFrame, and an optional title.

```javascript
{
  op: PLUGIN_OPERATIONS.Insert,
  widget: {
    id: 'enterprise_navbar',
    type: IFRAME_PLUGIN,
    priority: 30,
    url: 'http://{child_mfe_url}/plugin_iframe',
    title: 'Login with XYZ',
  }
}
```

--------------------------------

### React Plugin Slot Definition

Source: https://github.com/openedx/frontend-plugin-framework/blob/master/docs/decisions/0003-slot-naming-and-life-cycle.rst

Demonstrates how to define a plugin slot in React components using the PluginSlot component. The 'id' attribute follows the reverse DNS naming convention for clarity and uniqueness.

```jsx
<PluginSlot id="arbitrary_slot_name">
...
</PluginSlot>
```

```jsx
<PluginSlot id="org.openedx.frontend.courseware.navigation_sidebar.v2">
...
</PluginSlot>
```

--------------------------------

### PluginSlot Fallback Configuration (React)

Source: https://github.com/openedx/frontend-plugin-framework/blob/master/README.rst

Configures a custom fallback component for a PluginSlot in React. This is used when a plugin within the slot fails to render, replacing the default error component.

```javascript
<PluginSlot
  id='my-plugin-slot'
  slotErrorFallbackComponent={<MyCustomFallbackComponent />}
/>
```

--------------------------------

### Modify Widget Operation (JavaScript)

Source: https://github.com/openedx/frontend-plugin-framework/blob/master/README.rst

The Modify operation updates properties of an existing widget. It requires the operation type 'Modify', the 'widgetId' of the widget to change, and a function 'fn' that takes the widget object and returns the modified widget.

```javascript
const modifyWidget = (widget) => {
  widget.content = {
    propExampleA: 'University XYZ Sidebar',
    propExampleB: SomeOtherIcon,
  };
  return widget;
};

/*
  * {String} op - Name of plugin operation
  * {String} widgetId - The widget id needed for referencing when using Modify/Wrap/Hide
  * {Function} fn - The function to call that can modify the widget's contents and properties
*/

{
  op: PLUGIN_OPERATIONS.Modify,
  widgetId: 'sidebar_plugin',
  fn: modifyWidget,
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.