Skip to content

Commit 085a03d

Browse files
docs: add section about slotOptions in README
Documents the `slotOptions.mergeProps` option to change the behavior of `PluginSlot` components to merge custom attributes with existing props on widgets.
1 parent f34f4df commit 085a03d

File tree

1 file changed

+30
-11
lines changed

1 file changed

+30
-11
lines changed

README.rst

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ plugin slot.
5858
The slot also determines the dimensions and responsiveness of each plugin, and supports passing any additional
5959
data to the plugin as part of its contract.
6060

61-
.. code-block::
61+
.. code-block:: javascript
6262
6363
<HostApp>
6464
<Route path="/page1">
@@ -74,9 +74,9 @@ data to the plugin as part of its contract.
7474
}}
7575
>
7676
<SideBar
77-
propExampleA: 'edX Sidebar',
78-
propExampleB: SomeIcon,
79-
>
77+
propExampleA="edX Sidebar"
78+
propExampleB={SomeIcon},
79+
/>
8080
</PluginSlot >
8181
</Route>
8282
<Route path="/page2">
@@ -95,7 +95,7 @@ However, note that any Child MFE can theoretically contain one or more ``PluginS
9595
thereby making it both a Child MFE and a Host MFE. In this instance, the Child MFE would need its own ``env.config.js``
9696
file as well to define its plugin slots.
9797

98-
.. code-block::
98+
.. code-block:: javascript
9999
100100
// env.config.js
101101
@@ -178,7 +178,7 @@ Insert a Direct Plugin
178178
The Insert operation will add a widget in the plugin slot. The contents required for a Direct Plugin is the same as
179179
is demonstrated in the Default Contents section above, with the ``content`` key being optional.
180180

181-
.. code-block::
181+
.. code-block:: javascript
182182
183183
/*
184184
* {String} op - Name of plugin operation
@@ -201,7 +201,7 @@ Insert an iFrame Plugin
201201
The Insert operation will add a widget in the plugin slot. The contents required for an iFrame Plugin is the same as
202202
is demonstrated in the Default Contents section above.
203203

204-
.. code-block::
204+
.. code-block:: javascript
205205
206206
/*
207207
* {String} op - Name of plugin operation
@@ -225,7 +225,7 @@ Modify
225225
The Modify operation allows us to modify the contents of a widget, including its id, type, content, RenderWidget function,
226226
or its priority. The operation requires the id of the widget that will be modified and a function to make those changes.
227227

228-
.. code-block::
228+
.. code-block:: javascript
229229
230230
const modifyWidget = (widget) => {
231231
widget.content = {
@@ -253,7 +253,7 @@ Wrap
253253
Unlike Modify, the Wrap operation adds a React component around the widget, and a single widget can receive more than
254254
one wrap operation. Each wrapper function takes in a ``component`` and ``id`` prop.
255255

256-
.. code-block::
256+
.. code-block:: javascript
257257
258258
const wrapWidget = ({ component, idx }) => (
259259
<div className="bg-warning" data-testid={`wrapper${idx + 1}`} key={idx}>
@@ -280,7 +280,7 @@ Hide
280280

281281
The Hide operation will simply hide whatever content is desired. This is generally used for the default content.
282282

283-
.. code-block::
283+
.. code-block:: javascript
284284
285285
/*
286286
* {String} op - Name of plugin operation
@@ -292,6 +292,25 @@ The Hide operation will simply hide whatever content is desired. This is general
292292
widgetId: 'some_undesired_plugin',
293293
}
294294
295+
``PluginSlot`` options
296+
``````````````````````
297+
298+
You may optionally pass the ``slotOptions`` prop to customize the behavior of a ``PluginSlot``, including changing the behavior plugin operations used by widgets within the ``PluginSlot``.
299+
300+
``mergeProps``
301+
''''''''''''''
302+
303+
When enabled, this option will merge custom/overridden attributes with existing props passed to the widget, as opposed to passing these attributes to the widget via a ``content`` prop. This is especially useful when using a ``PluginSlot`` to support any custom attributes as well as handle special cases such as merging of custom class names with existing class names.
304+
305+
.. code-block:: javascript
306+
307+
<PluginSlot
308+
slotOptions={{ mergeProps: true }}
309+
>
310+
<DefaultContents />
311+
</PluginSlot>
312+
313+
295314
Using a Child Micro-frontend (MFE) for iFrame-based Plugins and Fallback Behavior
296315
---------------------------------------------------------------------------------
297316

@@ -306,7 +325,7 @@ loaded, so we have to rely on waiting for a ``postMessage`` event from within th
306325
A fallback component can be provided to the Plugin that is wrapped around the component, as noted below.
307326
Otherwise, the `default Error fallback from Frontend Platform`_ would be used.
308327

309-
.. code-block::
328+
.. code-block:: javascript
310329
311330
<MyMFE>
312331
<Route path="/mainContent">

0 commit comments

Comments
 (0)