Slots

Entry points for editing UI.

No support for Medusa plugins:

Slots are the main reason why Nocto does not support Medusa plugins. We are totally replacing how you are injecting your UI elements, so there is no point to mix these two frameworks.

The concept

Slots is the concept which makes Nocto incredibly flexible and customizable.

When working with Medusa you might have heard about the injection zones. Medusa uses them to render new UI elements provided by the user. Nocto uses similar, but very enhanced concept called Slots.

Slots are places where you can put your custom UI elements. However, the key difference between injection zones from Medusa is that slots do not have "single governance". While Medusa has them statically defined, slots are dynamic.

Slots are exposed from plugins - every plugin can define the Nocto Slot which will be the entry point for everyone else. Let's take example:

return (
    <TwoColumnPage
      widgets={{
        after: getWidgets("order.details.after"),
        before: getWidgets("order.details.before"),
        sideAfter: getWidgets("order.details.side.after"),
        sideBefore: getWidgets("order.details.side.before"),
      }}
      data={order}
      showJSON
      showMetadata
      hasOutlet
    >
      <TwoColumnPage.Main>
        <NoctoSlot pluginId="@order-detail" name="activeEdit" runtimeProps={{ order, orderPreview }} fallback={<OrderActiveEditSection order={order} />}/>
        <NoctoSlot pluginId="@order-detail" name="activeOrderClaim" runtimeProps={{ order, orderPreview }} fallback={<ActiveOrderClaimSection orderPreview={orderPreview!} />}/>
        <NoctoSlot pluginId="@order-detail" name="activeOrderExchange" runtimeProps={{ order, orderPreview }} fallback={<ActiveOrderExchangeSection orderPreview={orderPreview!} />}/>
        <NoctoSlot pluginId="@order-detail" name="activeOrderReturn" runtimeProps={{ order, orderPreview }} fallback={<ActiveOrderReturnSection orderPreview={orderPreview!} />}/>
        <NoctoSlot pluginId="@order-detail" name="general" runtimeProps={{ order, orderPreview }} fallback={<OrderGeneralSection order={order}/>}/>
        <NoctoSlot pluginId="@order-detail" name="summary" runtimeProps={{ order, orderPreview }} fallback={<OrderSummarySection order={order} plugins={plugins}/>}/>
        <NoctoSlot pluginId="@order-detail" name="payment" runtimeProps={{ order, orderPreview }} fallback={<OrderPaymentSection order={order} plugins={plugins}/>}/>
        <NoctoSlot pluginId="@order-detail" name="fulfillment" runtimeProps={{ order, orderPreview }} fallback={<OrderFulfillmentSection order={order}/>}/>
      </TwoColumnPage.Main>
      <TwoColumnPage.Sidebar>
        <OrderCustomerSection order={order} />
        <OrderActivitySection order={order} />
      </TwoColumnPage.Sidebar>
    </TwoColumnPage>
  )

Above code is just a part of bigger plugin but perfectly presents how slots work. Every <NoctoSlot> is a place where you can inject your custom UI element. You just need to know pluginId and name of the slot.

Runtime properties:

Nocto slots also support runtime properties. It means that your custom UI element can use property which will be available at the time of slot rendering. For instance, in the above example you can use order and orderPreview parameters in your custom UI element. It works like in Medusa, but it is more flexible.


Fallback:

The best part is that introducing slot is always backward-compatible. Parameter fallback indicates the default value of the slot if is not used by anyone. It means that plugin can have thousands of slots and still behave the same if not used.

Introducing a slot is very simple. Instruction can be found here: Expose slot

More slots:

If you see any place which you would like to have to be a slot - please kindly raise a pull request against Nocto - Github.

Thanks to that you and other people will be able to use it!