QwikDev / qwik

Instant-loading web apps, without effort
https://qwik.dev
MIT License
20.7k stars 1.29k forks source link

[🐞] Qwik serializers more data than is required. #5173

Open mhevery opened 1 year ago

mhevery commented 1 year ago

Which component is affected?

Qwik Runtime

Describe the bug

import { component$, useSignal } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
import { readFile } from 'node:fs/promises';

export const useMyData = routeLoader$(async () => {
  // pretent you are talking to a database...
  // executes on server
  const json = String(await readFile('static-data.json'));
  // {
  //   "name": "Qwik",
  //   "url": "https://qwik.builder.io",
  //   "payload": "... Huge amount of data .... "
  // }
  return JSON.parse(json) as { name: string; url: string };
});

export const useMyHearts = routeLoader$(() => {
  return {
    fav: '❤️',
    unfav: '♡',
  };
});

export default component$(() => {
  const myData = useMyData();
  const myHearts = useMyHearts();
  const isFavorite = useSignal(true);
  return (
    <ul>
      <li>
        <button onClick$={() => (isFavorite.value = !isFavorite.value)}>
          {isFavorite.value ? myHearts.value.fav : myHearts.value.unfav}
        </button>
        <a href={myData.value.url}>{myData.value.name}</a>
      </li>
    </ul>
  );
});

I would expect that qwik/json would only have myHearts data but NOT myData, instead I see both.

Reproduction

https://stackblitz.com/edit/qwik-starter-itgm6v

Steps to reproduce

examine qwik/json

System Info

na

Additional Information

No response

mhevery commented 1 year ago

It even happens if across components: https://stackblitz.com/edit/qwik-starter-hychtc