Problem theming with FRONTEND_SLOTS

Site Operators
1

Hi,

I am trying to convert our MFE plugin slots operations to support FRONTEND_SLOTS. I wrote this change:

but when I build the MFEs, I am hit with:

52.95 ERROR in ./src/customApp.tsx:10:15
52.95 TS2322: Type '"widgetRemove"' is not assignable to type 'WidgetOperationTypes | LayoutOperationTypes'.
52.95      8 |             {
52.95      9 |               slotId: 'desktop_header_slot',
52.95   > 10 |               op: 'widgetRemove',
52.95        |               ^^
52.95     11 |               id: 'desktop_header_slot'
52.95     12 |             }
52.95     13 |             );
52.95

I am not sure what I am doing wrong, because this code is based on

https://github.com/overhangio/tutor-mfe/tree/main#using-frontend-slots

which uses op: 'widgetReplace' and lists widgetRemoveas a valid operation. Is there some bug in the documentation or am I understanding something wrong ?

2

In fact, if I copy exactly the code from the doc, into my plugin code

FRONTEND_SLOTS.add_items([
    """
    {
      slotId: 'org.openedx.frontend.slot.footer.main.v1',
      op: 'widgetReplace',
      id: 'customFooter',
      relatedId: 'defaultContent',
      element: (
        <h1>This is the footer.</h1>
      ),
    }""",
])

I get exactly the same error:

38.27 ERROR in ./src/customApp.tsx:50:7
38.27 TS2322: Type '"widgetReplace"' is not assignable to type 'WidgetOperationTypes | LayoutOperationTypes'.
38.27     48 |     {
38.27     49 |       slotId: 'org.openedx.frontend.slot.footer.main.v1',
38.27   > 50 |       op: 'widgetReplace',
38.27        |       ^^
38.27     51 |       id: 'customFooter',
38.27     52 |       relatedId: 'defaultContent',
38.27     53 |       element: (
38.27

So, something is wrong with the documentation.

3

If, however, I add

hooks.Filters.ENV_PATCHES.add_items([
    ("mfe-site-custom-app-definitions", """
import { WidgetOperationTypes } from '@openedx/frontend-base';
""")
])

to my custom-app definitions, and then use operations such as WidgetOperationTypes.REMOVE

instead of 'widgetRemove', contrary to the documentation, then it builds without error.

4

Also, while using WidgetOperationTypes.REMOVEcompiles fine, it does not actually remove anything if I use the documented relatedId: 'defaultContent'

I had to dig through frontend-base’s shell/footer/app.tsx and shell/header/app.tsxto figure out that the actual component IDs that I should remove are

org.openedx.frontend.widget.header.desktopLayout.v1
org.openedx.frontend.widget.header.mobileLayout.v1
org.openedx.frontend.widget.footer.desktopLayout.v1

Only when I applied the remove operation on these relatedIds did it actually remove the corresponding components.

5

The TS error is telling you widgetRemove isn’t in the WidgetOperationTypes enum your installed package actually ships, so it’s a version mismatch between the docs and your frontend-plugin-framework version. The docs likely describe a newer API than what your build resolves. Check the enum in your installed package’s types, the valid string may differ, or you may need to bump the framework version. Also better to use the exported enum constant than a raw string literal, that way TS catches this immediately.

6

I use tutor version 22.0.0, for verawood, and using the documentation from it. They should match. I would call that a bug in either the documentation or the code.

7

This is definitely a bug in the documentation. Thanks for reporting it!