components break with VT w/ same component on two routes

[thejackshelton]

Astro's current view transitions implementation relies on hydration directives, which is the reason we have the issue with #40 for example.

https://stackblitz.com/~/github.com/thejackshelton/vt-state-repro/
https://github.com/thejackshelton/vt-state-repro

My understanding, is that Qwik's scripts aren't being re-executed because they don't hook into the lifecycle events Astro view transitions emit. This is on my radar and intend to fix soon.

[iivvaannxx]

@thejackshelton Not sure if it's relevant but this may be what you needed, if I understood the problem correctly:

https://astro.build/blog/astro-450/#view-transitions-re-run-scripts

It's a brand new feature, so that would require to have a version of Astro 4.5 or above I guess. Although it can probably be done manually (re-running scripts) and prevent the version requirement.

[thejackshelton]

@thejackshelton Not sure if it's relevant but this may be what you needed, if I understood the problem correctly:

https://astro.build/blog/astro-450/#view-transitions-re-run-scripts

It's a brand new feature, so that would require to have a version of Astro 4.5 or above I guess. Although it can probably be done manually (re-running scripts) and prevent the version requirement.

I think we can go ahead and close this! Looks like the new update to view transitions fixed many of the problems we had.

https://vt-astro-qwik-demo.pages.dev/
https://github.com/thejackshelton/vt-astro-qwik-demo

[thejackshelton]

Ah spoke too soon. If you have the same component on both pages during a transition, you get the following qwik error:

Internal assert, this is likely caused by a bug in Qwik: missing inlined function for id: 0 Error: Internal assert, this is likely caused by a bug in Qwik: missing inlined function for id:
    at createAndLogError

For example, a Header component would just stop working.

🤔 debugging time

[thejackshelton]

So the problem is actually related to signals in particular. For example, a counter component's symbols would look like this:

import { _fnSignal } from "@builder.io/qwik";
import { _jsxQ } from "@builder.io/qwik";
import { qrlDEV } from "@builder.io/qwik";
import { useSignal } from "@builder.io/qwik";
export const Counter_component_0Rrgl7gJe2o = ()=>{
    const count = useSignal(0);
    return /*#__PURE__*/ _jsxQ("button", null, {
        onClick$: /*#__PURE__*/ qrlDEV(()=>import("./counter_component_button_onclick_vctjebylrp4.js"), "Counter_component_button_onClick_vcTjebYLrP4", {
            file: "/app.tsx",
            lo: 160,
            hi: 179,
            displayName: "Counter_component_button_onClick"
        }, [
            count
        ])
    }, _fnSignal((p0)=>p0.value, [
        count
    ]), 3, "4e_0", {
        fileName: "app.tsx",
        lineNumber: 6,
        columnNumber: 10
    });
};

_fnSignal is our signal function

The error we get is this:

Internal assert, this is likely caused by a bug in Qwik: missing inlined function for id: 0 Error: Internal assert, this is likely caused by a bug in Qwik: missing inlined function for id:

so it seems that perhaps the function is missing when the page transitions? 🤔

id: 0 is likely saying it's the first signal on the page.

[thejackshelton]

fixed in 0.5.10