docs: track(signal) to track(()=>signal.value) (QwikDev#3651)

czfadmin · Apr 5, 2023 · d4067e1 · d4067e1
1 parent 0a11eb3
commit d4067e1
Show file tree

Hide file tree

Showing 12 changed files with 19 additions and 18 deletions.
diff --git 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
@@ -21,6 +21,7 @@ export default component$(() => {
   const isFavoriteSignal = useSignal(false);
   const dadJokeSignal = useDadJoke();
   const favoriteJokeAction = useJokeVoteAction();
+
   return (
     <div class="section bright">
       <div>{dadJokeSignal.value.joke}</div>

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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);