Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slot content projection doesn't load mdx components #222

Closed
adamdbradley opened this issue Feb 15, 2022 · 2 comments
Closed

Slot content projection doesn't load mdx components #222

adamdbradley opened this issue Feb 15, 2022 · 2 comments
Assignees
Labels
TYPE: bug Something isn't working
Milestone

Comments

@adamdbradley
Copy link
Contributor

In the docs site, when the Layout components wraps a content component (built from mdx), the content does render, but if the content has a child component it doesn't render.

Main component: https://github.com/BuilderIO/qwik/blob/844a1b2c03bdb685dfb4e11cc7e48c83e1e170a1/docs/site/src/main.tsx#L18-L20

Layout component w/ Slot:
https://github.com/BuilderIO/qwik/blob/844a1b2c03bdb685dfb4e11cc7e48c83e1e170a1/docs/site/src/layouts/docs/docs.tsx#L25

The bootstrap.mdx file has a <Counter/> component: https://github.com/BuilderIO/qwik/blob/844a1b2c03bdb685dfb4e11cc7e48c83e1e170a1/docs/guide/bootstrap.mdx

The counter component works when not using slot and wiring up the bootstrap component directly.

@adamdbradley adamdbradley added this to the 0.1.0 milestone Feb 15, 2022
@manucorporat manucorporat added the TYPE: bug Something isn't working label Feb 15, 2022
@mhevery
Copy link
Contributor

mhevery commented Feb 17, 2022

Add this to render.unit.ts

    it.only('should render nested component when it is projected by parent', async () => {
      const Layout = component$(
        () => {
          return $(() => (
            <div>
              <Slot />
            </div>
          ));
        },
        { tagName: 'layout' }
      );
      const Content = component$(
        () => {
          return $(() => (
            <span>
              <Slot />
            </span>
          ));
        },
        { tagName: `content` }
      );
      await render(
        fixture.host,
        <Layout>
          <Content>projection</Content>
        </Layout>
      );
      console.log(prettyHtml(fixture.host));
      expectRendered(
        <layout>
          <template />
          <div>
            <q:slot>
              <content>
                <template />
                <span>
                  <q:slot>projection</q:slot>
                </span>
              </content>
            </q:slot>
          </div>
        </layout>
      );
    });

the issue is that if you have two components the slot projection ends up in the inert <template> rather than inside of inner component. A quick look I suspect that cursorForComponent is not being called for the inner component. The purpose of the cursor is to abstract away the slot projection, and somehow in this case it is failing.

@manucorporat
Copy link
Contributor

Fixed 7fadd18

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
TYPE: bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants