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

[🐞] Recursive composition of components lacks named Slot projection. #4922

Open
genki opened this issue Aug 10, 2023 · 3 comments
Open

[🐞] Recursive composition of components lacks named Slot projection. #4922

genki opened this issue Aug 10, 2023 · 3 comments
Labels
TYPE: bug Something isn't working WAITING FOR: team Waiting for one of the core team members to review and reply

Comments

@genki
Copy link
Contributor

genki commented Aug 10, 2023

Which component is affected?

Qwik Runtime

Describe the bug

I am trying to compose components recursively like this:

import { component$, Slot } from '@builder.io/qwik';

const Foo = component$(() => {
  return (
    <div>
      <h1>
        <Slot />
      </h1>
      <p>
        <Slot name="foo" />
      </p>
    </div>
  )
})

const Bar = component$(() => {
  return (
  <>
    Hello,
    <p q:slot="foo">Bar</p>
  </>
  )
})

export default component$(() => {
  const comps = [Bar, Foo];
  let c = null;
  for(const cmp of comps) {
    const Cmp = cmp;
    c = <Cmp>{c}</Cmp>;
  }
  return c;
});

The result is success for <Slot /> but fail for <Slot name="foo" />.
The q:slot="foo" is not projected but entire component is projected to <Slot />

Reproduction

https://stackblitz.com/edit/qwik-starter-2us27r?file=src%2Froutes%2Findex.tsx

Steps to reproduce

No response

System Info

System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M2
    Memory: 95.38 MB / 24.00 GB
    Shell: 3.6.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 20.5.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.8.1 - /opt/homebrew/bin/npm
    pnpm: 8.6.11 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 115.0.5790.170
    Safari: 16.5.2
  npmPackages:
    @builder.io/partytown: ^0.8.0 => 0.8.0
    undici: 5.22.1 => 5.22.1
    vite: 4.4.7 => 4.4.7

Additional Information

No response

@genki genki added TYPE: bug Something isn't working STATUS-1: needs triage New issue which needs to be triaged labels Aug 10, 2023
@stackblitz
Copy link

stackblitz bot commented Aug 10, 2023

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@hamatoyogi
Copy link
Contributor

Not sure I understand what you're trying to achieve?

@genki
Copy link
Contributor Author

genki commented Aug 11, 2023

@hamatoyogi I am trying to compose a component procedurally at runtime.
I think this is useful for cases that visitors want to edit the layout or composition of components.
It partially succeeded but the named <Slot> projection fails even if the normal <Slot> goes well.
I wonder why that occurs.

@shairez shairez added WAITING FOR: team Waiting for one of the core team members to review and reply and removed STATUS-1: needs triage New issue which needs to be triaged labels Aug 14, 2023
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 WAITING FOR: team Waiting for one of the core team members to review and reply
Projects
None yet
Development

No branches or pull requests

3 participants