qwik icon indicating copy to clipboard operation
qwik copied to clipboard

[DOCS] Clarify Points 8 & 9 in Advanced > QRL > Rendered HTML

Open iburzynski opened this issue 3 years ago • 0 comments

How can the documentation be improved? Items 8 and 9 in Advanced > QRL > Rendered HTML section are difficult to understand.

  1. Parse the <script type="qwik/json">{...json...}</script> JSON and distribute the deserialized objects per q:obj attribute. In our case
  • <div q:id="123" q:obj="456" q:host> gets object with id 123. This will be the store created in the Counter_onMount function.
  • <button q:obj="456, 123" gets store as well as reference to the <div q:id="457">

Where does the JSON in this <script> block come from?

What are the q:obj and q:id attributes, and what is their relationship? The role of q:obj is touched on a bit further up but I feel these have not been adequately explained.

Where are the <div>s being mentioned in the above bullet points coming from? Particularly <div q:id="457">, which appears to be a typo (this id is not mentioned anywhere else), but there are also no <div> elements anywhere in the code snippets, so it's not clear what either of them are referencing. And what is q:host?

  1. Once the qwik/json is deserialized, useLexicalScope can use the QRL's [0,1] array to look into q:obj="456, 123" to retrieve object with id 456 and 123, which are props of <div q:id="123" q:obj="456" q:host> as well as store from Counter_onMount function.

I've tried my best, but I can't make any sense of this point at all. Part of it is that the correspondences between the numbers and the associated variables are unclear: does 123 correspond to props and 456 to store? It would be helpful if these are referenced in a consistent way.

useLexicalScope can use the QRL's [0,1] array (which QRL? the one in the on:click attribute of the <button> element?)...

...to look into (the <button>'s?) q:obj attribute to retrieve object (objects?) with id(s?) 456 and 123 (from where? the last bit of this sentence needs clarification)

Perhaps if point 8 were clarified then 9 would make more sense, but I think it would be very helpful to more explicitly trace the path that the variables take from their origins in the original component code to how they are ultimately restored. Currently there seems to be some major gaps in that tracing that caused me to lose the thread.

Lastly, I think there is a typo in point 4: on:click="./chunk-c.js#Counter_onClick[0,2]" should be on:click="./chunk-c.js#Counter_onClick[0,1]"

Thank you very much for your kind attention... I'd really like to understand how Qwik captures the lexical scoped variables as it's fascinating!

iburzynski avatar Oct 10 '22 23:10 iburzynski