From 6a4c6890bc11cae0228f6248a5c795bdccf33d23 Mon Sep 17 00:00:00 2001 From: Sreekanth Nagareddy Date: Tue, 4 Apr 2023 14:34:21 +0530 Subject: [PATCH] track(signal) to track(()=>signal.value) --- .vscode/qwik.code-snippets | 2 +- .../routes/demo/getting-started/04-state/index.tsx | 2 +- .../routes/demo/getting-started/05-tasks/index.tsx | 2 +- .../routes/demo/getting-started/06-styling/index.tsx | 2 +- .../docs/src/routes/demo/state/resource/index.tsx | 2 +- .../docs/src/routes/demo/tasks/resource/index.tsx | 2 +- .../routes/demo/tasks/track-server-guard/index.tsx | 2 +- packages/docs/src/routes/demo/tasks/track/index.tsx | 2 +- .../routes/docs/(qwik)/components/resource/index.mdx | 2 +- .../routes/docs/(qwik)/components/state/index.mdx | 2 +- .../routes/docs/(qwik)/components/tasks/index.mdx | 6 +++--- .../src/routes/docs/(qwik)/getting-started/index.mdx | 12 ++++++------ 12 files changed, 19 insertions(+), 19 deletions(-) diff --git a/.vscode/qwik.code-snippets b/.vscode/qwik.code-snippets index 36b2296723f..82ab8729d50 100644 --- a/.vscode/qwik.code-snippets +++ b/.vscode/qwik.code-snippets @@ -66,7 +66,7 @@ "description": "useTask$() function hook", "body": [ "useTask$(({ track }) => {", - " track($1);", + " track(() => $1);", " $0", "});", "" diff --git a/packages/docs/src/routes/demo/getting-started/04-state/index.tsx b/packages/docs/src/routes/demo/getting-started/04-state/index.tsx index 87c16c5d8c8..a4c86f86cfb 100644 --- a/packages/docs/src/routes/demo/getting-started/04-state/index.tsx +++ b/packages/docs/src/routes/demo/getting-started/04-state/index.tsx @@ -27,7 +27,7 @@ export default component$(() => { const dadJokeSignal = useDadJoke(); const favoriteJokeAction = useJokeVoteAction(); useTask$(({ track }) => { - track(isFavoriteSignal); + track(() => isFavoriteSignal.value); console.log('FAVORITE (isomorphic)', isFavoriteSignal.value); server$(() => { console.log('FAVORITE (server)', isFavoriteSignal.value); diff --git a/packages/docs/src/routes/demo/getting-started/05-tasks/index.tsx b/packages/docs/src/routes/demo/getting-started/05-tasks/index.tsx index 87c16c5d8c8..a4c86f86cfb 100644 --- a/packages/docs/src/routes/demo/getting-started/05-tasks/index.tsx +++ b/packages/docs/src/routes/demo/getting-started/05-tasks/index.tsx @@ -27,7 +27,7 @@ export default component$(() => { const dadJokeSignal = useDadJoke(); const favoriteJokeAction = useJokeVoteAction(); useTask$(({ track }) => { - track(isFavoriteSignal); + track(() => isFavoriteSignal.value); console.log('FAVORITE (isomorphic)', isFavoriteSignal.value); server$(() => { console.log('FAVORITE (server)', isFavoriteSignal.value); diff --git a/packages/docs/src/routes/demo/getting-started/06-styling/index.tsx b/packages/docs/src/routes/demo/getting-started/06-styling/index.tsx index 87d62e18f10..8c4b158e9e3 100644 --- a/packages/docs/src/routes/demo/getting-started/06-styling/index.tsx +++ b/packages/docs/src/routes/demo/getting-started/06-styling/index.tsx @@ -34,7 +34,7 @@ export default component$(() => { const dadJokeSignal = useDadJoke(); const favoriteJokeAction = useJokeVoteAction(); useTask$(({ track }) => { - track(isFavoriteSignal); + track(() => isFavoriteSignal.value); console.log('FAVORITE (isomorphic)', isFavoriteSignal.value); server$(() => { console.log('FAVORITE (server)', isFavoriteSignal.value); diff --git a/packages/docs/src/routes/demo/state/resource/index.tsx b/packages/docs/src/routes/demo/state/resource/index.tsx index 09cebe97d71..506e1d8760e 100644 --- a/packages/docs/src/routes/demo/state/resource/index.tsx +++ b/packages/docs/src/routes/demo/state/resource/index.tsx @@ -9,7 +9,7 @@ export default component$(() => { const prNumber = useSignal(3576); const prTitle = useResource$(async ({ track }) => { - track(prNumber); // Requires explicit tracking of inputs + track(() => prNumber.value); // Requires explicit tracking of inputs const response = await fetch( `https://api.github.com/repos/BuilderIO/qwik/pulls/${prNumber.value}` ); diff --git a/packages/docs/src/routes/demo/tasks/resource/index.tsx b/packages/docs/src/routes/demo/tasks/resource/index.tsx index 09cebe97d71..506e1d8760e 100644 --- a/packages/docs/src/routes/demo/tasks/resource/index.tsx +++ b/packages/docs/src/routes/demo/tasks/resource/index.tsx @@ -9,7 +9,7 @@ export default component$(() => { const prNumber = useSignal(3576); const prTitle = useResource$(async ({ track }) => { - track(prNumber); // Requires explicit tracking of inputs + track(() => prNumber.value); // Requires explicit tracking of inputs const response = await fetch( `https://api.github.com/repos/BuilderIO/qwik/pulls/${prNumber.value}` ); diff --git a/packages/docs/src/routes/demo/tasks/track-server-guard/index.tsx b/packages/docs/src/routes/demo/tasks/track-server-guard/index.tsx index 74599e18d5d..e82a1a845a1 100644 --- a/packages/docs/src/routes/demo/tasks/track-server-guard/index.tsx +++ b/packages/docs/src/routes/demo/tasks/track-server-guard/index.tsx @@ -6,7 +6,7 @@ export default component$(() => { const isBold = useSignal(false); useTask$(({ track }) => { - track(text); + track(() => text.value); if (isServer) { return; // Server guard } diff --git a/packages/docs/src/routes/demo/tasks/track/index.tsx b/packages/docs/src/routes/demo/tasks/track/index.tsx index fc51ef7629c..f7b5cd850f6 100644 --- a/packages/docs/src/routes/demo/tasks/track/index.tsx +++ b/packages/docs/src/routes/demo/tasks/track/index.tsx @@ -6,7 +6,7 @@ export default component$(() => { const delayText = useSignal(''); useTask$(({ track }) => { - track(text); + track(() => text.value); const value = text.value; const update = () => (delayText.value = value); isServer diff --git a/packages/docs/src/routes/docs/(qwik)/components/resource/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/resource/index.mdx index 80b93e6becb..97224313c3d 100644 --- a/packages/docs/src/routes/docs/(qwik)/components/resource/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/components/resource/index.mdx @@ -93,7 +93,7 @@ import { component$, useResource$, Resource, useSignal } from '@builder.io/qwik' export default component$(() => { const query = useSignal('busy'); const jokes = useResource$(async ({ track, cleanup }) => { - track(query); + track(()=> query.value); // A good practice is to use `AbortController` to abort the fetching of data if // new request comes in. We create a new `AbortController` and register a `cleanup` // function which is called when this function re-runs. diff --git a/packages/docs/src/routes/docs/(qwik)/components/state/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/state/index.mdx index 6c43cff882b..34930f21b65 100644 --- a/packages/docs/src/routes/docs/(qwik)/components/state/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/components/state/index.mdx @@ -208,7 +208,7 @@ export default component$(() => { const prNumber = useSignal(3576); const prTitle = useResource$(async ({ track }) => { - track(prNumber); // Requires explicit tracking of inputs + track(()=> prNumber); // Requires explicit tracking of inputs const response = await fetch( `https://api.github.com/repos/BuilderIO/qwik/pulls/${prNumber.value}` ); diff --git a/packages/docs/src/routes/docs/(qwik)/components/tasks/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/tasks/index.mdx index 567234005d2..1e75ef7db16 100644 --- a/packages/docs/src/routes/docs/(qwik)/components/tasks/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/components/tasks/index.mdx @@ -151,7 +151,7 @@ export default component$(() => { const delayText = useSignal(''); useTask$(({ track }) => { - track(text); + track(()=> text.value); const value = text.value; const update = () => (delayText.value = value); isServer @@ -286,7 +286,7 @@ Sometimes a task needs to run only on the browser and after rendering, in that c > const isBold = useSignal(false); > > useTask$(({ track }) => { -> track(text); +> track(()=> text.value); > if (isServer) { > return; // Server guard > } @@ -421,7 +421,7 @@ export default component$(() => { const prNumber = useSignal(3576); const prTitle = useResource$(async ({ track }) => { - track(prNumber); // Requires explicit tracking of inputs + track(()=> prNumber.value); // Requires explicit tracking of inputs const response = await fetch( `https://api.github.com/repos/BuilderIO/qwik/pulls/${prNumber.value}` ); diff --git a/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx b/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx index 47ed337d203..3e0b16fedbb 100644 --- a/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx @@ -319,7 +319,7 @@ export default component$(() => { const dadJokeSignal = useDadJoke(); const favoriteJokeAction = useJokeVoteAction(); useTask$(({ track }) => { - track(isFavoriteSignal); + track(()=> isFavoriteSignal.value); console.log('FAVORITE (isomorphic)', isFavoriteSignal.value); server$(() => { console.log('FAVORITE (server)', isFavoriteSignal.value); @@ -359,20 +359,20 @@ In Qwik, a [task](/docs/components/tasks/#usetask) is work that needs to happen 2. Add a `track` call to the re-executed the task on `isFavoriteSignal` state change: ```tsx useTask$(({ track }) => { - track(isFavoriteSignal); + track(()=> isFavoriteSignal.value); }); ``` 3. Add the work that you want to execute on state change: ```tsx useTask$(({ track }) => { - track(isFavoriteSignal); + track(()=> isFavoriteSignal.value); console.log('FAVORITE (isomorphic)', isFavoriteSignal.value); }); ``` 4. If you want to have work happen on the server only, wrap it in `server$()` ```tsx useTask$(({ track }) => { - track(isFavoriteSignal); + track(()=> isFavoriteSignal.value); console.log('FAVORITE (isomorphic)', isFavoriteSignal.value); server$(() => { console.log('FAVORITE (server)', isFavoriteSignal.value); @@ -417,7 +417,7 @@ export default component$(() => { const dadJokeSignal = useDadJoke(); const favoriteJokeAction = useJokeVoteAction(); useTask$(({ track }) => { - track(isFavoriteSignal); + track(()=> isFavoriteSignal.value); console.log('FAVORITE (isomorphic)', isFavoriteSignal.value); server$(() => { console.log('FAVORITE (server)', isFavoriteSignal.value); @@ -519,7 +519,7 @@ export default component$(() => { const dadJokeSignal = useDadJoke(); const favoriteJokeAction = useJokeVoteAction(); useTask$(({ track }) => { - track(isFavoriteSignal); + track(()=> isFavoriteSignal.value); console.log('FAVORITE (isomorphic)', isFavoriteSignal.value); server$(() => { console.log('FAVORITE (server)', isFavoriteSignal.value);