[✨] Allow attaching arbitrary data to JSX

[mhevery]

Is your feature request related to a problem?

I would like to implement a popup component that shows additional data on hover. I would like the component to be generic and so the popup needs to get a hold of the rendering data and the rendering component in some way. I would like to attach that data to DOM/HTML

Describe the solution you'd like

const Detail = component$<{name: string}>(() => {
 ....
});

const MyComp = component$(() => {
return <div qdata:hover={[Detail, {name: 'Hello World'}]}>text</div>
})

The result of the above would attach the [Detail, {name: 'Hello World'}] to the DOM The PopUp component could than retrieve it

const PopUp = component$(() => {
  useDocument('moseenter', $((e) => {
    const target = e.target;
   const data = qData(target, 'hover');
  }))
});

Describe alternatives you've considered

Using constum events

const Detail = component$<{name: string}>(() => {
 ....
});

const MyComp = component$(() => {
return <div onPopup$={(e) => e.detail.cb([Detail, {name: 'Hello World'}])}>text</div>
})

The result of the above would attach the [Detail, {name: 'Hello World'}] to the DOM The PopUp component could than retrieve it

const PopUp = component$(() => {
  useDocument('moseenter', $((e) => {
    const target = e.target;
   target.dispatchEvent(new CustomEvent({
    cb: (data) => ...
    }));
  }))
});

Additional context

No response

[ahnpnl]

Will this open the possibility that we can have "scoped slot" concept as well? :)

[mhevery]

could you elaborate on what you mean by "scoped slot"?

…

On Tue, Jul 18, 2023 at 1:50 AM Ahn ***@***.***> wrote: Will this open the possibility that we can have "scoped slot" concept as well? :) — Reply to this email directly, view it on GitHub <https://github.com/BuilderIO/qwik/issues/4793#issuecomment-1639804849>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA3KT3BJX54ACOQKGNIFL3XQZE47ANCNFSM6AAAAAA2KWO5HQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[ahnpnl]

Hi,

What triggered me thinking into "scoped slot" was the qdata:hover. I had an idea which was kind of extending your idea to a bigger scope.

I have pseudo codes like this

// ComponentWithSlots.tsx
export default component$((props: { firstSlotRef: Signal<Slot>; secondSlotRef: Signal<Slot> }) => {
     return (
             <>
                        <Slot
                            name="first-slot"
                            ref={firstSlotRef}
                            q:data={{ firstName: 'John' }} // attach data to Slot
                        />
                        <Slot
                            name="second-slot"
                            ref={secondSlotRef}
                            q:data={{ lastName: 'Doe' }} // attach data to Slot
                       />
             </>
     );
});

// HelloWorld.tsx
export default component$(() => {
       const firstSlotRef = useSignal<Slot>(); // this is somehow can result into "first-name" slot instance
       const secondSlotRef = useSignal<Slot>(); // this is somehow can result into "second-name" slot instance

       return (
              <ComponentWithSlots firstSlotRef={firstSlotRef} secondSlotRef={secondSlotRef}>
                     // The `data` property here would allow to access to the data provided in `q:data` above
                     <span q:slot="first-slot">First name: {firstSlotRef.value?.data.firstName}</span>
                     <span q:slot="second-slot">Last name: {secondSlotRef.value?.data.lastName}</span>
              </ComponentWithSlots>
       )
});

It's just wild idea. Normally with JSX, we can just pass in functions returns JSXNode as props but I was thinking about any other ways besides that.

I'm not sure if using Slot concept to this advance can hurt performance or not because I read somewhere that Slot requires early evaluation.

[mhevery]

I believe your use case can be solved with useContextProvider https://qwik.builder.io/docs/components/context/#usecontextprovider

[ahnpnl]

Indeed that is the existing way I can do. I was trying to see if there is a way to replicate what Vue has done.

[gioboa]

We moved this issue to qwik-evolution repo to create a RFC discussion for this.
Here is our Qwik RFC process thanks.

[wmertens]

very doable to implement, indeed a q:data prop on vnode that will be serialized as the state rootid of the object, and a qData function to retrieve the data.

Not sure if the name is needed, I think it would be more flexible to allow storing any data? That saves a few bytes for every use, but requires more coordination between things that use the data.