heyloh/poc-qwik

Qwik Builder Prototype ⚡️

---

Things to try

• Routing/Navigation
• Styling
• State/Signal
• Effects
• Data Fetching and Suspense

Issues and Workarounds

Styling

• 🛑 Link component não funciona com hooks useStylesScoped$.

• 💡 Definir o scopeId no class do componente Link.

    const { scopeId } = useStylesScoped$(styles)
  
    return (
      <Link href="/" class={`${scopeId} my-class`}>
    )

State

Store

• 🛑 Só detecta alterações no primeiro nível do objeto

• 💡

const store = useStore({ user: { id: "", cpf: "", address: { street: "" } } });

const changeStreet1 = $(() => {
  store.user.address.street = "new street"; // Não funciona
});

const changeStreet2 = $(() => {
  store.user = {
    ...store.user,
    address: { street: "new street" },
  }; // Funciona
});

return (
  <div>
    <button onClick$={changeStreet1}>Não muda</button>
    <button onClick$={changeStreet2}>Muda</button>
  </div>
);

References

• Qwik
• Ecosystem
• Misko Hevery - Qwik Overview

In depth

• API Routes
• Qwik Dollar Sign
• Context