docs: replace useMount$, useClientMount$, useServerMount$ and `…

…useWatch$` with `useTask$` on docs (QwikDev#2467)
czfadmin · Dec 19, 2022 · 93b7c51 · 93b7c51
1 parent 2259fc2
commit 93b7c51
Show file tree

Hide file tree

Showing 44 changed files with 82 additions and 192 deletions.
diff --git a/.vscode/qwik.code-snippets b/.vscode/qwik.code-snippets
@@ -60,9 +60,9 @@
 			""
 		]
 	},
-	"useWatch": {
+	"useTask": {
 		"scope": "javascriptreact,typescriptreact",
-		"prefix": "q:useWatch",
+		"prefix": "q:useTask",
 		"description": "useTask$() function hook",
 		"body": [
 			"useTask$(({ track }) => {",

diff --git a/packages/docs/src/components/docsearch/useTouchEvents.ts b/packages/docs/src/components/docsearch/useTouchEvents.ts
@@ -1,5 +1,5 @@
 import type { AutocompleteApi } from '@algolia/autocomplete-core';
-import { useWatch$ } from '@builder.io/qwik';
+import { useTask$ } from '@builder.io/qwik';
 
 interface UseTouchEventsProps {
   getEnvironmentProps: AutocompleteApi<any>['getEnvironmentProps'];
@@ -14,7 +14,7 @@ export function useTouchEvents({
   formElement,
   inputElement,
 }: UseTouchEventsProps) {
-  useWatch$(() => {
+  useTask$(() => {
     // TODO:
     // if (!(panelElement && formElement && inputElement)) {
     //   return undefined;

diff --git a/packages/docs/src/components/docsearch/useTrapFocus.ts b/packages/docs/src/components/docsearch/useTrapFocus.ts
@@ -1,11 +1,11 @@
-import { useWatch$ } from '@builder.io/qwik';
+import { useTask$ } from '@builder.io/qwik';
 
 interface UseTrapFocusProps {
   containerRef: any;
 }
 
 export function useTrapFocus(props: UseTrapFocusProps) {
-  useWatch$(({ track }) => {
+  useTask$(({ track }) => {
     const container = track(props.containerRef, 'current') as HTMLElement;
     if (!container) {
       return undefined;

diff --git a/packages/docs/src/repl/editor.tsx b/packages/docs/src/repl/editor.tsx
@@ -6,7 +6,7 @@ import {
   useContext,
   useRef,
   useStore,
-  useWatch$,
+  useTask$,
 } from '@builder.io/qwik';
 import type { IStandaloneCodeEditor } from './monaco';
 import {
@@ -51,7 +51,7 @@ export const Editor = component$((props: EditorProps) => {
     }
   });
 
-  useWatch$(async ({ track }) => {
+  useTask$(async ({ track }) => {
     track(() => props.input.version);
     track(() => store.editor);
 
@@ -60,7 +60,7 @@ export const Editor = component$((props: EditorProps) => {
     }
   });
 
-  useWatch$(async ({ track }) => {
+  useTask$(async ({ track }) => {
     track(() => store.editor);
     track(() => props.input.version);
     track(() => props.input.files);

diff --git a/packages/docs/src/repl/repl.tsx b/packages/docs/src/repl/repl.tsx
@@ -4,7 +4,7 @@ import {
   noSerialize,
   useStyles$,
   useStore,
-  useWatch$,
+  useTask$,
   useClientEffect$,
   $,
 } from '@builder.io/qwik';
@@ -49,7 +49,7 @@ export const Repl = component$((props: ReplProps) => {
     return initStore;
   });
 
-  useWatch$(({ track }) => {
+  useTask$(({ track }) => {
     track(() => input.files);
 
     if (!input.files.some((i) => i.path === props.selectedInputPath) && input.files.length > 0) {
@@ -90,7 +90,7 @@ export const Repl = component$((props: ReplProps) => {
     }
   });
 
-  useWatch$(({ track }) => {
+  useTask$(({ track }) => {
     track(() => input.buildId);
     track(() => input.buildMode);
     track(() => input.entryStrategy);

diff --git a/packages/docs/src/routes/docs/components/overview/index.mdx b/packages/docs/src/routes/docs/components/overview/index.mdx
@@ -194,7 +194,6 @@ The Optimizer splits Qwik components into the host element and the behavior of t
 
 ### Lifecycles
 
-- [`useMount$()`](../lifecycle/index.mdx) - defines a callback that will be executed on mount time
 - [`useTask$()`](../lifecycle/index.mdx) - defines a callback that will be called before render and/or when a watched store changes
 - [`useResource$()`](../resource/index.mdx) - creates a resource to asyncronously load data
 - [`useClientEffect$()`](../lifecycle/index.mdx) - defines a callback that will be called after render in the client only (browser)

diff --git a/packages/docs/src/routes/docs/components/resource/index.mdx b/packages/docs/src/routes/docs/components/resource/index.mdx
@@ -43,7 +43,7 @@ The state `resource.state` can be one of the following strings:
 - `'resolved'` - the data is available.
 - `'rejected'` - the data is not available due to an error or timeout.
 
-The callback passed to [`useResource$()`](/docs/components/resource/index.mdx) runs right after the `useMount$()` and [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) callbacks complete. Please refer to the [Lifecycle](../lifecycle/index.mdx) section for more details.
+The callback passed to [`useResource$()`](/docs/components/resource/index.mdx) runs right after the [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) callbacks complete. Please refer to the [Lifecycle](../lifecycle/index.mdx) section for more details.
 
 ## `<Resource />`
 

diff --git a/packages/docs/src/routes/docs/components/state/index.mdx b/packages/docs/src/routes/docs/components/state/index.mdx
@@ -277,7 +277,7 @@ export default component$(() => {
 });
 ```
 
-Both [`useWatch()`](../lifecycle/index.mdx#usewatch) and [`useResource()`](../resource/index.mdx) are explained in detail in their respective sections.
+Both [`useTask()`](../lifecycle/index.mdx#usetask) and [`useResource()`](../resource/index.mdx) are explained in detail in their respective sections.
 
 ## Reactivity
 

diff --git a/packages/docs/src/routes/examples/[...id]/index!.tsx b/packages/docs/src/routes/examples/[...id]/index!.tsx
@@ -1,4 +1,4 @@
-import { component$, useStyles$, useWatch$, useStore } from '@builder.io/qwik';
+import { component$, useStyles$, useTask$, useStore } from '@builder.io/qwik';
 import type { RequestHandler, RouteParams, StaticGenerateHandler } from '@builder.io/qwik-city';
 import { Repl } from '../../../repl/repl';
 import styles from './examples.css?inline';
@@ -30,7 +30,7 @@ export default component$(() => {
     return initStore;
   });
 
-  useWatch$(({ track }) => {
+  useTask$(({ track }) => {
     const appId = track(() => store.appId);
     const app = getExampleApp(appId);
     store.files = app?.inputs || [];

diff --git a/packages/docs/src/routes/examples/apps/examples-menu.json b/packages/docs/src/routes/examples/apps/examples-menu.json
@@ -22,8 +22,8 @@
     "title": "Reactivity",
     "apps": [
       {
-        "id": "watch",
-        "title": "Simple useWatch()",
+        "id": "task",
+        "title": "Simple useTask()",
         "description": "Learn how to react to changes in variables.",
         "icon": "👀"
       },

diff --git a/packages/docs/src/routes/examples/apps/reactivity/auto-complete/app.tsx b/packages/docs/src/routes/examples/apps/reactivity/auto-complete/app.tsx
@@ -1,11 +1,11 @@
-import { component$, useStore, useWatch$ } from '@builder.io/qwik';
+import { component$, useStore, useTask$ } from '@builder.io/qwik';
 
 export default component$(() => {
   return (
     <div>
       This example features an auto-complete component with a debounce of 150 ms.
       <br />
-      The function `debouncedGetPeople` needs to be exported because it is used in `useWatch$`.
+      The function `debouncedGetPeople` needs to be exported because it is used in `useTask$`.
       <br />
       <br />
       Go ahead, search for Star Wars characters such as "Luke Skywalker", it uses the{' '}
@@ -28,7 +28,7 @@ export const AutoComplete = component$(() => {
     selectedValue: '',
   });
 
-  useWatch$(async ({ track }) => {
+  useTask$(async ({ track }) => {
     const searchInput = track(() => state.searchInput);
 
     if (!searchInput) {

diff --git a/...es/examples/apps/reactivity/watch/app.tsx → ...tes/examples/apps/reactivity/task/app.tsx b/...es/examples/apps/reactivity/watch/app.tsx → ...tes/examples/apps/reactivity/task/app.tsx
@@ -1,4 +1,4 @@
-import { component$, useWatch$, useStore } from '@builder.io/qwik';
+import { component$, useTask$, useStore } from '@builder.io/qwik';
 
 interface State {
   count: number;
@@ -11,7 +11,7 @@ export default component$(() => {
     debounced: 0,
   });
 
-  useWatch$(({ track }) => {
+  useTask$(({ track }) => {
     // track changes in store.count
     track(() => store.count);
     console.log('count changed');

diff --git a/...es/apps/reactivity/watch/entry.server.tsx → ...les/apps/reactivity/task/entry.server.tsx b/...es/apps/reactivity/watch/entry.server.tsx → ...les/apps/reactivity/task/entry.server.tsx
diff --git a/...s/examples/apps/reactivity/watch/root.tsx → ...es/examples/apps/reactivity/task/root.tsx b/...s/examples/apps/reactivity/watch/root.tsx → ...es/examples/apps/reactivity/task/root.tsx
diff --git a/packages/docs/src/routes/tutorial/hooks/use-mount/index.mdx b/packages/docs/src/routes/tutorial/hooks/use-mount/index.mdx
diff --git a/packages/docs/src/routes/tutorial/hooks/use-mount/problem/app.tsx b/packages/docs/src/routes/tutorial/hooks/use-mount/problem/app.tsx
diff --git a/packages/docs/src/routes/tutorial/hooks/use-mount/solution/app.tsx b/packages/docs/src/routes/tutorial/hooks/use-mount/solution/app.tsx
diff --git a/...routes/tutorial/hooks/use-watch/index.mdx → .../routes/tutorial/hooks/use-task/index.mdx b/...routes/tutorial/hooks/use-watch/index.mdx → .../routes/tutorial/hooks/use-task/index.mdx
diff --git a/.../tutorial/hooks/use-watch/problem/app.tsx → ...s/tutorial/hooks/use-task/problem/app.tsx b/.../tutorial/hooks/use-watch/problem/app.tsx → ...s/tutorial/hooks/use-task/problem/app.tsx
@@ -1,11 +1,11 @@
-import { component$, useWatch$, useStore } from '@builder.io/qwik';
+import { component$, useTask$, useStore } from '@builder.io/qwik';
 
 export default component$(() => {
   const store = useStore({
     value: '',
     debouncedValue: '',
   });
-  useWatch$(({ track }) => {
+  useTask$(({ track }) => {
     // Use track to rerun this function when store's `value` property changes.
 
     // Setup a timer to copy `value => debouncedValue` after half a second.

diff --git a/...tutorial/hooks/use-watch/solution/app.tsx → .../tutorial/hooks/use-task/solution/app.tsx b/...tutorial/hooks/use-watch/solution/app.tsx → .../tutorial/hooks/use-task/solution/app.tsx
@@ -1,11 +1,11 @@
-import { component$, useWatch$, useStore } from '@builder.io/qwik';
+import { component$, useTask$, useStore } from '@builder.io/qwik';
 
 export default component$(() => {
   const store = useStore({
     value: '',
     debouncedValue: '',
   });
-  useWatch$(({ track }) => {
+  useTask$(({ track }) => {
     // rerun this function  when `value` property changes.
     track(() => store.value);
     // Set up timeout for debounced value.

diff --git a/packages/docs/src/routes/tutorial/layout!.tsx b/packages/docs/src/routes/tutorial/layout!.tsx
@@ -1,4 +1,4 @@
-import { component$, Slot, useStore, useStyles$, useWatch$ } from '@builder.io/qwik';
+import { component$, Slot, useStore, useStyles$, useTask$ } from '@builder.io/qwik';
 import type { RequestHandler } from '@builder.io/qwik-city';
 import { useLocation } from '@builder.io/qwik-city';
 import { Repl } from '../../repl/repl';
@@ -39,7 +39,7 @@ export default component$(() => {
     return initStore;
   });
 
-  useWatch$(({ track }) => {
+  useTask$(({ track }) => {
     const appId = track(() => store.appId);
     const t = getTutorial(appId)!;
 

diff --git a/packages/docs/src/routes/tutorial/reactivity/explicit/problem/app.tsx b/packages/docs/src/routes/tutorial/reactivity/explicit/problem/app.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { component$, useStore, useWatch$ } from '@builder.io/qwik';
+import { component$, useStore, useTask$ } from '@builder.io/qwik';
 
 interface AppStore {
   count: number;
@@ -11,7 +11,7 @@ export default component$(() => {
     delayCount: 0,
   });
   console.log('Render: <App>');
-  useWatch$(({ track }) => {
+  useTask$(({ track }) => {
     // tracking `store.count`
     // setup a timer to copy `count => delayCount` after 2 seconds.
     return () => {

diff --git a/packages/docs/src/routes/tutorial/reactivity/explicit/solution/app.tsx b/packages/docs/src/routes/tutorial/reactivity/explicit/solution/app.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { component$, useStore, useWatch$ } from '@builder.io/qwik';
+import { component$, useStore, useTask$ } from '@builder.io/qwik';
 
 interface AppStore {
   count: number;
@@ -11,7 +11,7 @@ export default component$(() => {
     delayCount: 0,
   });
   console.log('Render: <App>');
-  useWatch$(({ track }) => {
+  useTask$(({ track }) => {
     track(() => store.count);
     const id = setTimeout(() => (store.delayCount = store.count), 2000);
     return () => clearTimeout(id);
-Original file line number
+Diff line change
@@ Expand Up / @@ -277,7 +277,7 @@ export default component$(() => { @@
     });
     ```
-    Both [`useWatch()`](../lifecycle/index.mdx#usewatch) and [`useResource()`](../resource/index.mdx) are explained in detail in their respective sections.
+    Both [`useTask()`](../lifecycle/index.mdx#usetask) and [`useResource()`](../resource/index.mdx) are explained in detail in their respective sections.
     ## Reactivity
@@ Expand Down @@