Plasmic Studio design-time rendering issue

Issues
1

Hi, when registering <table/> as a react component to plasmic, it doesn’t display properly at design time in plasmic studio, but only works in preview.

Here’s the detailed video recording to this issue.:point_down:
https://vimeo.com/manage/videos/1000408139

Project link (no host required):
https://studio.plasmic.app/projects/7s87qE7Dg22YLtSL5iMQdB/-/Homepage?arena_type=page&arena=7P6YAOgEdFPr

2

The issue happens because the table tags are not being used on the canvas. But normally, tags used in code components are rendered, so I’m unsure why that’s not the case here. Can you share your registrations? Alternatively, can you try the following registrations:


PLASMIC.registerComponent(TableCell, {
    name: 'TableCell',
    props: {
        children: {
            type: 'slot',
            defaultValue: {
                type: 'text',
                value: 'Hello World',
            },
        }
    },
});

PLASMIC.registerComponent(TableRow, {
    name: 'TableRow',
    props: {
        children: {
            type: 'slot',
            defaultValue: {
                type: 'component',
                name: 'TableCell',
                props: {
                    children: {
                        type: 'text',
                        value: 'Hello World',
                    }
                },
            },
        },
    }
});

PLASMIC.registerComponent(TableBody, {
    name: 'TableBody',
    props: {
        children: {
            type: 'slot',
            defaultValue: [
                {
                    type: 'component',
                    name: 'TableRow',
                }, {
                    type: 'component',
                    name: 'TableRow',

                }
            ]
        },
    },
});

PLASMIC.registerComponent(Table, {
    name: 'Table',
    props: {
        children: {
            type: 'slot',
            defaultValue: [
                {
                    type: 'component',
                    name: 'TableBody',
                }
            ]
        },
    },
});
3

Hi, i tried your registration and I’m seeing the same result in Plasmic Studio, here’s my registration file: plamsic-code-component-registry/pages/plasmic-host.tsx at main · MrBiscuit/plamsic-code-component-registry · GitHub

And in this folder are all my table tsx files: plamsic-code-component-registry/components at main · MrBiscuit/plamsic-code-component-registry · GitHub

4

I tried your code and the issue seems to be with the fact that the component names are being retrieved from the query string. If you try the following instead, it should work:

let componentsToRegister = ["Table", "TableBody", "TableRow", "TableCell"];

const allComponents = [...otherComponents, ...antdComponents, ...unstyledComponents];

componentsToRegister.forEach((componentName) => {
  const component = allComponents.find(
    (comp) => comp.metadata.name === componentName
  );

  if (component) {
    registerComponent(component.component, component.metadata);
  }
});
5

Awesome, this worked, although it’s very weird i don’t exactly understand how it works and how it was glitchy before, both registers, but putting these 4 comp names inside of the register array does make the Plasmic studio happy.
I would like to know the difference in detail if possible, so I know what to do when similar problem arises nest time :slight_smile:

1 Like