[🐞] Getting props/restProps inside component$() and turning them into signal doesn't seem to work like expected.

[akashlama1998-icloud]

Which component is affected?

Qwik Optimizer (rust)

Describe the bug

Describe

Below is the code snippet I wrote for changing aria-busy on an interval and inside the <Button></Button> reading that aria-busy turning it to a Signal to add transitions using useTransition hook.

import { component$, useSignal, useVisibleTask$, Slot, type PropsOf, type Signal } from '@builder.io/qwik';

export default component$(() => {
  const ariaBusy = useSignal<boolean>();

  useVisibleTask$(({ cleanup, track }) => {
    track(() => ariaBusy.value);

    const interval = setInterval(() => {
      ariaBusy.value = ariaBusy.value === undefined ? true : undefined;
    }, 3000);

    cleanup(() => clearInterval(interval));
  });

  return (
    <Button aria-busy={ariaBusy.value} disabled={ariaBusy.value}>
      Test
    </Button>
  );
});

export const Button = component$(({ class: className, ...restProps }: PropsOf<"button">) => {
  const ariaBusy = useSignal(!!restProps["aria-busy"]);
  const { stage, shouldMount } = useTransition(ariaBusy, { duration: 5 });

  useVisibleTask$(({ track }) => {
    track(() => restProps["aria-busy"]);

    ariaBusy.value = !!restProps["aria-busy"];
  });

  return (
    <button class={className} {...restProps}>
      {shouldMount.value ? (
        <i class={`${stage}`}>Spinner</i>
      ) : (
        <span class={`${stage}`}>
          <Slot />
        </span>
      )}
    </button>
  );
});

type Canceller = {
	id?: number;
};

type Stage = "enterFrom" | "enterTo" | "leaveFrom" | "leaveTo" | "idle";

export function useTransition(
	signal: Signal<boolean>,
	config: {
		appear?: boolean;
		duration: number;
	} = {
		appear: false,
		duration: 0.3,
	}
): { stage: Signal<Stage>; shouldMount: Signal<boolean> } {
	const stage = useSignal<Stage>(config.appear ? "enterFrom" : "idle");
	const timer = useSignal<Canceller>({});
	const shouldMount = useSignal(signal.value);

	useVisibleTask$(({ cleanup, track }) => {
		track(() => signal.value);
		clearAnimationFrameDuration(timer.value);

		if (signal.value) {
			if (config.appear) stage.value = "enterFrom";
			shouldMount.value = true;
			timer.value = setAnimationFrameDuration(() => (stage.value = "enterTo"));
		} else if (shouldMount.value) {
			stage.value = "leaveFrom";
			setAnimationFrameDuration(() => (stage.value = "leaveTo"));
			timer.value = setAnimationFrameDuration(() => (shouldMount.value = false), config.duration);
		}

		cleanup(() => clearAnimationFrameDuration(timer.value));
	});

	return { stage, shouldMount };
}

function setAnimationFrameDuration(callback: () => void, duration: number = 0) {
	const startTime = performance.now();
	const canceller: Canceller = {};

	function call() {
		canceller.id = requestAnimationFrame((now) => {
			if (now - startTime > duration * 1000) {
				callback();
			} else {
				call();
			}
		});
	}

	call();
	return canceller;
}

function clearAnimationFrameDuration(canceller: Canceller) {
	if (canceller.id) cancelAnimationFrame(canceller.id);
}

Expected

Expected turning aria-busy to a Signal and passing it to useTransition hook would just work.

What I got

Turns out making aria-busy into a Signal inside the component doesn't work due it being a Lexical Scoping I think and that's why the value isn't reactive. If that's the case then please teach me what should I do. If that's not the case then why is it not working as expected and how can I make it to work?

Reproduction

https://stackblitz.com/edit/vitejs-vite-khc7uk?file=src%2Fmain.tsx

Steps to reproduce

No response

System Info

System:
  OS: Linux 5.0 undefined
  CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 0 Bytes / 0 Bytes
  Shell: 1.0 - /bin/jsh
Binaries:
  Node: 18.18.0 - /usr/local/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 10.2.3 - /usr/local/bin/npm
  pnpm: 8.15.3 - /usr/local/bin/pnpm
npmPackages:
  @builder.io/qwik: ^1.5.1 => 1.5.2 
  vite: ^5.2.8 => 5.2.8

Additional Information

No response

[wmertens]

Can you add some logs here that show what's going wrong? I changed you signal processing a little bit but it works as before

https://qwik.dev/playground/#f=7VdLb9NAED5vfsU24mAj1wSqHnBrVxRUiQNwoDeE1LRJKkuhDYlSCRn%2Fd7557HidulUrTkjkFO9jnt98MxuB5s3hwdsh1GRd%2B%2BW%2Fhmb%2Bitku8wR5zSqQutp8WeiX3P9rAEo0qXudbje%2FENFuMri8Ra%2Bf3lQJHMPJXSJO4BLtb1ewiPt2a1KDXO6WqGvIRav7qF%2BRevoF5Tm2QO2l3%2BuvHPG5NvMHk8lEbIF8Ua2imBtNfNCa4jAuypU%2BPk555GLV%2B5fQVDZ9na119ns7AQDnaH%2BafZEWMED6elhVZWUvAxQ9zHk67n1Gc8l8nudoTkRJK5RtETJ%2BPJYJcVw9mraOFJO0rPb2TNS3sfk5%2Fs4xkesNDY%2FX0LvBLLOcfeJJoBVh5zS51MzSQUuGC7Ptmqm78IfDgRVLxamyMd9a38TOWRCbSLXm%2F0RFsbg6SLp40bCx7UVbfV3VN%2BiNx6%2FqICb1RXyLB%2BCBi3YCZ6iwumqmLNItE9hqanU2j1LL1fd%2BinGKO2KJfLh6dlLoeMYkIIfQk9FUSz9GxufrM9Tp2P%2FWr%2FNb%2Fg%2Fc3s1th790p54t5%2BMOSca5%2FdyMnMw6hfKBFW02ckjyor4uyD4HSkKFwEjdP8Jal8tguaPkd8cLv5guN3OIis5O8gMstKMUggU%2Fppv9rY5iON2zC%2FiCAn2naHw6yhEJiVieixUARBzAQkODVKgYmQJjMZadKmkoZ0FfBPPoeCIhFPhRht3Tqc45%2FlYRpMoxF727qX9wwM7WQP8HjV7CpkaKXL3wffUsk5d7QUglWEaRUURIp7tfRiUPyrwZaRUifsA64dJkSBNASWzqgJA5IOHZ7l2davzO%2FQ7iYukz1YeaEPXP9mUgLgzqNCMSpAAHaIt7lJSB3vKEfNJ9JginjDhMrzT0jKyaH3bgarpc0jMMxMZm3N3WsyziX30Mln7CYbeKWvOLEusrvFPx8qRSkMes1cFVKI%2Biz2NEXM5MIwOgmlJqF%2FJ6hoPr%2Bc8tmLxveJJAiVUFIxgLfj%2ByqTLz%2FUv%2Fmpq5nIV88ZVtNIx1e2GdEsRhhp22rtE2G%2FsBfix7Q3Fgk7j8Ip9Tlb7jce8I1P4f1%2F%2B9cf0P