EDU-159: Remix Gen1 - Advanced child sub components #3750
Conversation
uttej-vsk
requested review from
samijaber,
kapunahelewong and
a team
as code owners
|
| @@ -45,4 +45,19 @@ test.describe('Editable regions in custom components', () => { | |||
| const secondText = await columns.nth(1).textContent(); | |||
| expect(secondText?.trim().toLowerCase()).toBe('column 2 text'); | |||
| }); | |||
|
|
|||
| test.describe('Remix gen1 editable regions text validation', () => { | |||
There was a problem hiding this comment.
why does remix gen1= have its own special test here? why aren't we enabling the existing tests in this spec for remix?
| const page = await builder | ||
| .get("editable-regions", { | ||
| userAttributes: { | ||
| urlPath: `/${request.url.split("/").pop()}`, |
There was a problem hiding this comment.
instead of request.url.split("/").pop(), we can rely on remix's file naming conventions to extract the URL path as a param. See
builder/packages/sdks/e2e/remix/app/routes/($slug).tsx
Lines 44 to 53 in b346d87
by naming the file ($slug).tsx, remix will automatically pass the URL path value to params.slug. This is far cleaner as an approach, so let's do things this way for Remix moving forward
There was a problem hiding this comment.
We do it in the snippets already too. See:
There was a problem hiding this comment.
i just realized this suggestion of mine doesn't work because the routes you added in this PR are hardcoded with exact URLs 🤔
forget what i said for now, and let's stick with your approach
| export const CustomHero = (props: CustomHeroProps) => { | ||
| return ( | ||
| <> | ||
| <div>This is your component's text</div> |
There was a problem hiding this comment.
' here is not pretty. can we use a '?
| <> | ||
| <BuilderBlocks | ||
| parentElementId={props.builderBlock.id} | ||
| dataPath={`column1.blocks`} |
There was a problem hiding this comment.
| dataPath={`column1.blocks`} | |
| dataPath="column1.blocks" |
|
|
||
| <BuilderBlocks | ||
| parentElementId={props.builderBlock.id} | ||
| dataPath={`column2.blocks`} |
There was a problem hiding this comment.
| dataPath={`column2.blocks`} | |
| dataPath="column2.blocks" |
| name: "column1", | ||
| type: "uiBlocks", | ||
| broadcast: true, | ||
| hideFromUI: true, |
There was a problem hiding this comment.
i don't think we need hideFromUI for uiBlocks input types. Test that everything works as expected in the editor (that the UI block doesn't show up as an input in the Content Editor sidebase). If that's the case, let's remove it from everywhere in the snippets (this PR and elsewhere)
|
|
||
| Builder.registerComponent(CustomHero, { | ||
| name: 'CustomHero', | ||
| inputs: [], |
There was a problem hiding this comment.
We don't need to provide an empty array, we can drop this altogether. If you can confirm that, go ahead and remove all empty inputs: []
| import { ReactNode } from 'react'; | ||
|
|
||
| interface CustomHeroProps { | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| export const CustomHero = (props: CustomHeroProps) => { |
There was a problem hiding this comment.
| import { ReactNode } from 'react'; | |
| interface CustomHeroProps { | |
| children: ReactNode; | |
| } | |
| export const CustomHero = (props: CustomHeroProps) => { | |
| import { type PropsWithChildren } from 'react'; | |
| export const CustomHero = (props: PropsWithChildren) => { |
Description
This PR introduces remix gen 1 example for Advanced child sub-components in the custom components page in the docs.
ticket: https://builder-io.atlassian.net/browse/EDU-324
@samijaber Please review