chore: provide LLM instructions in starters #7729
Conversation
|
commit: |
built with Refined Cloudflare Pages Action⚡ Cloudflare Pages Deployment
|
|
As discussed, we'll want to include specification of any tendency/misunderstanding of the LLM for proxy in a proxy (i.e., avoid creating stores within stores). And for the v2 instructions that useSerializer$ / hydration approach (where otherwise LLMs lose "scope" of noSerialize objects from server to clientside). |
| - Instead of `useReducer()`, use `useSignal()` or `useStore()`. | ||
| - Instead of `useMemo()`, use `useComputed$()`. | ||
| - For context, use `createContextId()`, `useContextProvider()`, and `useContext()`. You can `useContext()` in the same component that first provides the context. | ||
| - Instead of `useEffect()` and `useLayoutEffect()`, use `useTask$()` or `useVisibleTask$()`. |
There was a problem hiding this comment.
There are more cases that these two :
- useTask$ as a general rule of thumb
- useVisibleTask$ if it needs to track state or cleanup
- useOnDocument('qvisible`) if it needs to run a side effect on the client once
| - Exception: if you need to read `children` you can use an "Inline Component" which is a non-wrapped Component. This removes access to hooks, and disables automatic code splitting. | ||
| - Prefer to put the props type after the first argument of the component function, either inline or in a separate interface. This makes it easier to switch between inline and wrapped components. | ||
| - Event handlers always use `...$()` suffix for lazy loading. For example `onClick$={() => { ... }}`. In general, DOM events are to be handled with `onEventName$={(ev, el) => { ... }}`, where `ev` is the event object and `el` is the element that triggered the event. | ||
| - Event handlers are called async when they are not loaded yet and sync otherwise. This means that `ev.preventDefault()` will not always work. So instead, use the attributes `preventdefault:eventname` and `stoppropagation:eventname` to prevent the default behavior and stop the event from bubbling up. For example `preventdefault:click` to prevent the default click behavior and `stoppropagation:click` to stop the click event from bubbling up. |
There was a problem hiding this comment.
If you need logic to preventdefault an event use sync$ for example to prevent default ArrowUp and ArrowDown keyboard event, but not the rest.
| - `useComputed$()` - Reactive computed values. This is the preferred way to derive values from state. | ||
| - `useResource$()` - Async data fetching. | ||
| - `useTask$()` - Side effects and lifecycle. | ||
| - `useVisibleTask$()` - Side effects and lifecycle. Use this to run side effects that are not possible to run on the server, but be aware that it can slow down the initial load. Consider passing `{strategy: 'document-idle'}` to run it after the page is loaded. |
There was a problem hiding this comment.
Use useOnDocument('qvisible') if you only need to run a one time side effect when the component because visible
| address: { ...initialState.address }, | ||
| }); | ||
| ``` | ||
|
|
There was a problem hiding this comment.
Maybe add useOn, useOnDocument, useOnWindow and sync$
We should provide instructions that help LLMs trained on React code to write good Qwik code.
Here is a start.