Describe how to create your own Material UI components

[MarcSkovMadsen]

Material UI provides a wealth of options. I think it would be really useful to describe how to create a Material UI component.

I think its relevant to do here instead of in the Panel documentation. We might migrate what is in the Panel documentation to this repository and docs . And then just refer to it.

[MarcSkovMadsen]

For example for #143 it would be really nice to know how to create a material-ui Timeline component that works well with the existing Panel Material UI components including arguments like dark_theme, theme_config etc.

A starting point could be

import panel as pn
from panel.custom import ReactComponent

pn.extension()

class Timeline(ReactComponent):

    _importmap = {
        "imports": {
            "@mui/lab/": "https://esm.sh/@mui/lab/",
        }
    }

    _esm = """
    import Timeline from '@mui/lab/Timeline';
    import TimelineItem from '@mui/lab/TimelineItem';
    import TimelineSeparator from '@mui/lab/TimelineSeparator';
    import TimelineConnector from '@mui/lab/TimelineConnector';
    import TimelineContent from '@mui/lab/TimelineContent';
    import TimelineDot from '@mui/lab/TimelineDot';

    export function render({ model }) {
      return (
        <Timeline>
        <TimelineItem>
            <TimelineSeparator>
                <TimelineDot />
                <TimelineConnector />
            </TimelineSeparator>
            <TimelineContent>Eat</TimelineContent>
        </TimelineItem>
        <TimelineItem>
            <TimelineSeparator>
                <TimelineDot />
                <TimelineConnector />
            </TimelineSeparator>
            <TimelineContent>Code</TimelineContent>
        </TimelineItem>
        <TimelineItem>
            <TimelineSeparator>
                <TimelineDot />
                <TimelineConnector />
            </TimelineSeparator>
            <TimelineContent>Sleep</TimelineContent>
        </TimelineItem>
        </Timeline>
    )
    }
    """

timeline = Timeline(width=500, styles={"border": "1px solid black"})

pn.Column(timeline).servable()

[philippjfr]

This is definitely something I want to be able to do but probably not in the initial release. Specifically the goal would be to have the custom component build on top of the existing panel-material-ui bundle so all the dependencies don't have to be re-exported. Suspect that would mean building a custom module where you can import the Mui components from, so you could do:

import {Timeline, ...} from "panel-material-ui/mui"
...

[philippjfr]

So I've got this working now. However, there are limitations, the main one being that I've had to shim a bunch of stuff. This means it's possible to import material-ui components but not as easily possible to import e.g. @mui/lab components. In principle this should also be doable, but it requires very carefully shimming each possible import that overlaps between the existing Mui library and the lab components. I think what I've got now is very useful already, so I will merge but there's room for further improvement.

[MarcSkovMadsen]

What does 'shimming' mean?

[philippjfr]

Shimming in this context effectively faking the imports, i.e. when you do something like import * as React from "react" ordinarily it would fetch React from the CDN defined in the importmap. The shim layer effectively exposes the version of React bundled into panel-material-ui.js, so that we don't have to fetch React (and whatever other libraries we have shimmed) from CDN. This means we don't have to fetch a bunch of redundant code and means we don't have different versions of React, Material UI and all the other supporting libraries running, which could interfere in weird ways.

Where this falls apart is that it's very hard to shim everything, i.e. material-ui imports many, many modules so when you try to add "@mui/lab/" it'll trigger all kinds of imports and unless every single one was shimmed correctly, it'll fail.