Hooks for Astro runtime API

[grumpyTofu]

Is there any interest in building the equivalent of the qwik-city hooks like useLocation but for the astro integration? I am struggling to access the Astro runtime API in qwik components: https://docs.astro.build/en/reference/api-reference/

[thejackshelton]

Hey @grumpyTofu!

If there's a "Astro" way to do this, then that's always preferred since Astro is the meta-framework of choice here.

I do think that this would be important to have in the integration (if this functionality is missing or unintuitive). I'll be happy to review any PR's 👍

[grumpyTofu]

Thanks for the quick response @thejackshelton! I've had success getting the values from the Astro API and passing in values as props to my qwik components. This seems to be the most reliable, but ideally my qwik components would not have to have a dependency on an Astro wrapper. I would be down to write some utility hooks, but I have been running into some issues with what I have so far.

I have written an example hook that seems to work okay. I noticed that the astro:page-load and astro:after-swap events do not trigger for view transitions, but the document load event seems to catch all of them. Have you heard of any similar issues related to view transition events with astro?

export const usePathname = () => {
  const pathname = useSignal("");

  const updatePathname = $(() => {
    pathname.value = window.location.pathname;
  });

  useOnDocument("astro:page-load", updatePathname);
  useOnDocument("astro:after-swap", updatePathname);
  useOnDocument("load", updatePathname);

  return pathname;
};

The final issue I noticed while testing was when I used this hook to toggle some other signal values with the following code:

const active = useSignal(false);
useVisibleTask$(({ track }) => {
  track(() => pathname.value);
  active.value = Boolean(href && pathname.value === "/");
});

On initial load, it works perfectly. However, if you navigate to a new page, I get the following errors:

I am not sure if this is because I am a qwik noob, or if there is an actual bug here. Any insight that you can provide?

[thejackshelton]

Thanks for the quick response @thejackshelton! I've had success getting the values from the Astro API and passing in values as props to my qwik components. This seems to be the most reliable, but ideally my qwik components would not have to have a dependency on an Astro wrapper. I would be down to write some utility hooks, but I have been running into some issues with what I have so far.

I have written an example hook that seems to work okay. I noticed that the astro:page-load and astro:after-swap events do not trigger for view transitions, but the document load event seems to catch all of them. Have you heard of any similar issues related to view transition events with astro?

export const usePathname = () => {
  const pathname = useSignal("");

  const updatePathname = $(() => {
    pathname.value = window.location.pathname;
  });

  useOnDocument("astro:page-load", updatePathname);
  useOnDocument("astro:after-swap", updatePathname);
  useOnDocument("load", updatePathname);

  return pathname;
};

The final issue I noticed while testing was when I used this hook to toggle some other signal values with the following code:

const active = useSignal(false);
useVisibleTask$(({ track }) => {
  track(() => pathname.value);
  active.value = Boolean(href && pathname.value === "/");
});

On initial load, it works perfectly. However, if you navigate to a new page, I get the following errors:

I am not sure if this is because I am a qwik noob, or if there is an actual bug here. Any insight that you can provide?

If you're using useVisibleTask$ with view transitions it might be related to https://github.com/QwikDev/astro/issues/80

[thejackshelton]

Hey @grumpyTofu! Have you played with the new Astro container API?

I have been swamped lately. Trying to find time to improve the integration whenever possible.

The project now has continuous releases, so any commit or PR made to the project can be consumed in your own Astro project.

If you'd like to take a stab at something let me know 👍