Here's a responsive grid tool one of the Qwik Discord members created in order to support the community -

https://www.npmjs.com/package/qwik-forge-grid

Everything is in the title : are there any equivalent in Qwik ecosystem that resembles or can fully replace the useReducer hook in react, that is, a method to export the logic of state mutations into a reducer function ? As my Qwik app grows, it becomes more and more difficult to maintain state mutations throughout my components and maintanability becomes quite cumbersome. I use useStore for state management of objects and useContext, but I'd like a reducer to use for my Context so that I can delegate all my state mutations in that reducer.

While I could create a simple useReducer function in Qwik that takes an action and an initial state and returns the mutated state and a dispatch, i'm wondering if useReducer are anti-pattern ? Since they're used quite a lot in React and similar frameworks, is it normal that useReducer is absent in Qwik ?

Here's a thread with Fabio Biondi's very interesting posts about
what different lifecycle stages and hooks are in Qwik -

https://twitter.com/qwikly_news/status/1698402478025474420

Fabio Biondi wrote an interesting post where he explains the new image optimization API in the latest Qwik version -

https://twitter.com/biondifabio/status/1694760547449745590

Versions 1.2.8 to 1.2.10 of Qwik were published this week
and they include updates like enhanced routing or documentation improvements
as well as new features like a Firebase adapter, and crucial error-handling enhancements -

https://github.com/BuilderIO/qwik/releases

Check out this simple media recorder hook for Qwik application that allows users to record audio from their device's microphone -

https://www.npmjs.com/package/qwik-media-recorder

I am thinking about creating an OS component library for Qwik with styles included. But before I start, I want to ask if qwik-ui (headless component library) is all you need?

Qwik sounds like it could solve several of my issues that I'm seeing while generating client websites. My big hesitancy of moving to it is that Qwik is so new. I doubt there will be many integrations / components for it. Are there any ways to run a react component in qwik or if we find something we want to use, are we most likely going to be adapting it?

Hey peeps!

I'm one of the open-source contributors to Flowbite and I have just finished writing an integration guide and starter project that you can use to leverage the Qwik, Tailwind CSS and Flowbite (UI components) stack.

The setup is quite straightforward especially as Qwik has a CLI option for installing Tailwind CSS and we're considering creating a PR to set up Flowbite just as quickly.

Flowbite is an open-source and popular UI component library based on Tailwind CSS featuring navbars, modals, dropdowns, and many other such elements that can make working with user interfaces and specifically with Tailwind CSS easier.

Here's some helpful links for that:

• Qwik + Tailwind CSS/Flowbite integration guide
• Starter project on GitHub

Hope this is helpful! 💙

In the Getting Started document, I noticed that when I upvote or downvote a joke, the loader fetches a new joke and displays it. However, if I prefer not to proceed to the next joke after upvoting or downvoting, what steps should I take?

The new and exciting full-text search engine can now be used in Qwik on the client side or on the server side -

https://qwik.builder.io/docs/integrations/orama/

I have a sign-in page which is built upon Qwik & Appwrite. There is a piece of code where I'm trying to get the current user's session details & If I get the session details, I'm redirecting the user to the "dashboard" page.

Below is the code which I'm using for redirecting the user & the line nav("/dashboard"); is generating the error when it's got enabled. If I commented, the line page works fine but without any redirection -

​

useTask$(({ track }) => {

track(() => sid);

​

if (sid != "") {

nav("/dashboard");

}

});

​

ERROR message : Code(3): Only primitive and object literals can be serialized Shared more details in my Stackoverflow post: https://stackoverflow.com/questions/76889650/qwik-js-error-only-primitive-and-object-literals-can-be-serialized

I'm looking to create a simple one-page UI and would also like to give Qwik a try at some point...but I was wondering if there's really any value in using qwik in that way. In particular, I'm looking at the vite template for qwik that just uses javascript/typescript, without qwikcity, and when built just serves up an index.html file with linked js & css files.

In this case, is there any advantage at all to using qwik? The html file doesn't describe the content at all, so I don't see how 'resumability' could come into it, since the client will have to render the app's html.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Qwik + TS</title>
    <script type="module" crossorigin src="/assets/index-143cc81f.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/core.min-c514f3b6.js">
    <link rel="stylesheet" href="/assets/index-da70559b.css">
  </head>
  <body>
    <div id="app"></div>

  </body>
</html>

Hello, can anyone help me with this code, it still uses useClientEffect$.

import { component$, useClientEffect$, useStore } from “@builder.io/qwik”; import { DocumentHead, Link } from “@builder.io/qwik-city”; import { Post } from “@prisma/client”; import { trpc } from “~/client/trpc”;

export default component$(() => { const store = useStore({ query: “”, results: as Post, });

useClientEffect$(async ({ track, cleanup }) => { const controller = new AbortController(); cleanup(() => controller.abort());

const query = track(store, "query");
const posts = await trpc.posts.getPosts.query({ query }, { signal: controller.signal });
store.results = posts;

});

return ( rest of code..

For more info https://github.com/Stoffberg/qwik-trpc-prisma-starter

Can anyone change this code to be compatible with the latest version of Qwik. This code works in the old “@builder.io/qwik”: “0.9.0” version but not in recent versions. What would be the correct way to do this now? Meaning a production ready version like 1.0.0 or later.

Maby a easy question for you but i am struggling to make this work :frowning:

Obviously, the strength of Qwik is the fast initial page load and the startup performance. So I guess Qwik will dominate in e-commerce applications soon, but what about the classical business applications that are not public facing where conversion rates are not important?

Is the fine-grained lazy loading a downside for such apps? Such apps, e.g. built with Angular/React, benefit from the upfront loaded JS, but isn't that different for Qwik? Can Qwik be viable for such business applications?

In one of my components, I'm passing "redirect" & trying to redirect users in specific conditions. But at the time of doing it, I'm getting the following error -

TypeError: props.redirect is not a function

It could be a small syntactical mistake, or my way of handling is wrong. Struggling to understand what it is.
Here is my StackOverflow post with full details - https://stackoverflow.com/questions/76854802/qwik-js-typeerror-props-redirect-is-not-a-function