QwikDev / qwik

Instant-loading web apps, without effort
https://qwik.dev
MIT License
20.71k stars 1.29k forks source link

[🐞] v2 signal ordering issue #6900

Open wmertens opened 1 week ago

wmertens commented 1 week ago

Which component is affected?

Qwik Runtime

Describe the bug

In v2, signals should be ordered so parents run first

This works correctly:

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

const AvatarImage = component$<{ src: string }>(({ src }) => src);

export default component$(() => {
  const signal = useSignal<null | { url: string }>({ url: "https://picsum.photos/200" });
  if (!signal.value) return <p>User is not signed in</p>;

  return (
    <div>
      <button onClick$={() => signal.value = null}>Sign out</button>
      <AvatarImage src={signal.value.url} />
    </div>
  )
});

when you click the button, it "logs out".

This fails, the difference is the extra component in between:

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

const AvatarRoot = component$(() => <Slot />);
const AvatarImage = component$<{ src: string }>(({ src }) => src);

export default component$(() => {
  const signal = useSignal<null | { url: string }>({ url: "https://picsum.photos/200" });
  if (!signal.value) return <p>User is not signed in</p>;

  return (
    <div>
      <button onClick$={() => signal.value = null}>Sign out</button>
      <AvatarRoot>
        <AvatarImage src={signal.value.url} />
      </AvatarRoot>
    </div>
  )
});

The AvatarImage attribute update runs before the default export re-runs, and it breaks when dereferencing signal.value.url.

Reproduction

https://qwikdev-build-v2.qwik-8nx.pages.dev/playground/#f=7VbLDoIwELzzFZUTJgSJCTFRIPHoB%2FgFRCMHHgHxgv13Z%2Fugq2ji1cQbacp0p53dGSaaJNm8E00oSMeh8%2BCPIvI8TXZ%2Fg092hvJMRynBoTCc%2F7T%2FUFFP8x%2FSUfRdsbXRQeZBoFaEVED4IoxvdGuChp6zGYsTamrewReOyw8yC751rLYs%2BqGK2ktzbfrVOo59FLEDcnkWwUIDR5gIw2nJmuRITo%2FRVoMw7YHxlrXul5kEKF1ND6kSlgsWo2bCjwELql3mRERgnk25zIK4V%2BCaYFeN%2B8tGjhmBs%2BSSeYXQGZC08%2B%2F3H%2B33Bw

Steps to reproduce

click the button

System Info

v2

Additional Information

No response