refactor: ship latest API stabilizations

.vscode/qwik.code-snippets

@@ -66,7 +66,7 @@
 		"prefix": "useClientEffect",
 		"description": "useClientEffect$() function hook",
 		"body": [
-			"useClientEffect$((track) => {",
+			"useClientEffect$(({track}) => {",
 			"  $0",
 			"});",
 			""
@@ -77,7 +77,7 @@
 		"prefix": "useWatch",
 		"description": "useWatch$() function hook",
 		"body": [
-			"useWatch$((track) => {",
+			"useWatch$(({track}) => {",
 			"  track($1);",
 			"  $0",
 			"});",

packages/docs/src/repl/apps/examples/reactivity/auto-complete/app.tsx

@@ -28,7 +28,7 @@ export const AutoComplete = component$(() => {
     selectedValue: '',
   });
 
-  useWatch$(async (track) => {
+  useWatch$(async ({ track }) => {
     const searchInput = track(state, 'searchInput');
 
     if (!searchInput) {

packages/docs/src/repl/apps/examples/reactivity/watch/app.tsx

@@ -11,7 +11,7 @@ export const App = component$(() => {
     debounced: 0,
   });
 
-  useWatch$((track) => {
+  useWatch$(({ track }) => {
     // track changes in store.count
     track(store, 'count');
     console.log('count changed');

packages/docs/src/repl/apps/tutorial/hooks/use-watch/problem/app.tsx

@@ -5,7 +5,7 @@ export const App = component$(() => {
     value: '',
     debouncedValue: '',
   });
-  useWatch$((track) => {
+  useWatch$(({ track }) => {
     // rerun this function  when `value` property changes.
     track(store, 'value');
     // Set up timeout for debounced value.

packages/docs/src/repl/apps/tutorial/hooks/use-watch/solution/app.tsx

@@ -5,7 +5,7 @@ export const App = component$(() => {
     value: '',
     debouncedValue: '',
   });
-  useWatch$((track) => {
+  useWatch$(({ track }) => {
     // rerun this function  when `value` property changes.
     track(store, 'value');
     // Set up timeout for debounced value.

packages/docs/src/repl/apps/tutorial/reactivity/explicit/solution/app.tsx

@@ -11,7 +11,7 @@ export const App = component$(() => {
     delayCount: 0,
   });
   console.log('Render: <App>');
-  useWatch$((track) => {
+  useWatch$(({ track }) => {
     track(store, 'count');
     const id = setTimeout(() => (store.delayCount = store.count), 2000);
     return () => clearTimeout(id);

packages/docs/src/repl/apps/tutorial/tutorial-menu.json

@@ -358,7 +358,7 @@
       },
       {
         "id": "scoped",
-        "title": "useScopedStyles() - Scoped styles",
+        "title": "useStylesScoped() - Scoped styles",
         "enableHtmlOutput": false,
         "enableClientOutput": false,
         "enableSsrOutput": false

packages/docs/src/repl/editor.tsx

@@ -33,7 +33,7 @@ export const Editor = component$((props: EditorProps) => {
     };
   });
 
-  useWatch$(async (track) => {
+  useWatch$(async ({ track }) => {
     track(props.input, 'version');
     track(store, 'editor');
 
@@ -42,7 +42,7 @@ export const Editor = component$((props: EditorProps) => {
     }
   });
 
-  useWatch$(async (track) => {
+  useWatch$(async ({ track }) => {
     track(store, 'editor');
     track(props.input, 'version');
     track(props.input, 'files');

packages/docs/src/repl/repl.tsx

@@ -51,7 +51,7 @@ export const Repl = component$((props: ReplProps) => {
     return initStore;
   });
 
-  useWatch$((track) => {
+  useWatch$(({ track }) => {
     track(input, 'files');
 
     if (!input.files.some((i) => i.path === props.selectedInputPath) && input.files.length > 0) {
@@ -92,7 +92,7 @@ export const Repl = component$((props: ReplProps) => {
     }
   });
 
-  useWatch$((track) => {
+  useWatch$(({ track }) => {
     track(input, 'buildId');
     track(input, 'buildMode');
     track(input, 'entryStrategy');

packages/docs/src/routes/examples/[...id]!.tsx

@@ -26,7 +26,7 @@ export default component$(() => {
     return initStore;
   });
 
-  useWatch$((track) => {
+  useWatch$(({ track }) => {
     const appId = track(store, 'appId');
     const app = getExampleApp(appId);
     store.files = app?.inputs || [];

packages/docs/src/routes/playground/index!.tsx

@@ -35,7 +35,7 @@ export default component$(() => {
     }
   });
 
-  useClientEffect$((track) => {
+  useClientEffect$(({ track }) => {
     track(store, 'buildId');
     track(store, 'buildMode');
     track(store, 'entryStrategy');

packages/docs/src/routes/tutorial/_layout!/index.tsx

@@ -33,7 +33,7 @@ export default component$(() => {
     return initStore;
   });
 
-  useWatch$((track) => {
+  useWatch$(({ track }) => {
     const appId = track(store, 'appId');
     const t = getTutorial(appId)!;
 

packages/docs/src/routes/tutorial/style/scoped/index.mdx

@@ -8,8 +8,8 @@ THIS API IS NOT FULLY IMPLEMENTED YET. SHOWING HERE JUST TO GET THE GENERAL DIRE
 
 In previous sections, we have discussed how styles can be loaded lazily as they are needed using `useStyles$()` hook. Browser styles are global and apply to all DOM elements, for this reason, Qwik also provides a way to load styles that are specific to a specific component. This is achieved by generating a unique class for each component and then inserting that unique class id into the stylesheet.
 
-Use `useScopedStyles$()` to load and scope the style to a specific component only.
+Use `useStylesScoped$()` to load and scope the style to a specific component only.
 
 ## Example
 
-In this example, there are two components both of which have a class with the same name. Because of that, the two styles collide which results in undesirable behavior. Use the `useScopedStyles$()` hook to scope the styles to a specific component and fix the collision.
+In this example, there are two components both of which have a class with the same name. Because of that, the two styles collide which results in undesirable behavior. Use the `useStylesScoped$()` hook to scope the styles to a specific component and fix the collision.

packages/qwik-city/runtime/src/library/html.tsx

@@ -70,7 +70,7 @@ export const Html = component$<HtmlProps>(
     useContextProvider(RouteLocationContext, routeLocation);
     useContextProvider(RouteNavigateContext, routeNavigate);
 
-    useWatch$(async (track) => {
+    useWatch$(async ({ track }) => {
       const { default: cityPlan } = await import('@qwik-city-plan');
       const path = track(routeNavigate, 'path');
       const url = new URL(path, routeLocation.href);

packages/qwik-react/src/react/qwikify.tsx

@@ -56,7 +56,7 @@ export function qwikifyQrl<PROPS extends {}>(
       }
 
       useWatch$(
-        async (track) => {
+        async ({ track }) => {
           track(props);
 
           if (isBrowser) {

packages/qwik/src/core/api.md

@@ -579,16 +579,14 @@ export const useHostElement: () => Element;
 export const useLexicalScope: <VARS extends any[]>() => VARS;
 
 // Warning: (ae-incompatible-release-tags) The symbol "useMount$" is marked as @public, but its signature references "MountFn" which is marked as @alpha
-// Warning: (ae-incompatible-release-tags) The symbol "useMount$" is marked as @public, but its signature references "ResourceReturn" which is marked as @alpha
 //
 // @public
-export const useMount$: <T>(first: MountFn<T>) => ResourceReturn<T>;
+export const useMount$: <T>(first: MountFn<T>) => void;
 
 // Warning: (ae-incompatible-release-tags) The symbol "useMountQrl" is marked as @public, but its signature references "MountFn" which is marked as @alpha
-// Warning: (ae-incompatible-release-tags) The symbol "useMountQrl" is marked as @public, but its signature references "ResourceReturn" which is marked as @alpha
 //
 // @public
-export const useMountQrl: <T>(mountQrl: QRL<MountFn<T>>) => ResourceReturn<T>;
+export const useMountQrl: <T>(mountQrl: QRL<MountFn<T>>) => void;
 
 // @alpha
 export const useOn: (event: string, eventQrl: QRL<(ev: Event) => void>) => void;
@@ -614,23 +612,15 @@ export const useResource$: <T>(generatorFn: ResourceFn<T>) => ResourceReturn<T>;
 // @alpha (undocumented)
 export const useResourceQrl: <T>(qrl: QRL<ResourceFn<T>>, opts?: ResourceOptions) => ResourceReturn<T>;
 
-// @alpha (undocumented)
-export const useScopedStyles$: (first: string) => void;
-
-// @alpha (undocumented)
-export const useScopedStylesQrl: (styles: QRL<string>) => void;
-
 // Warning: (ae-incompatible-release-tags) The symbol "useServerMount$" is marked as @public, but its signature references "MountFn" which is marked as @alpha
-// Warning: (ae-incompatible-release-tags) The symbol "useServerMount$" is marked as @public, but its signature references "ResourceReturn" which is marked as @alpha
 //
 // @public
-export const useServerMount$: <T>(first: MountFn<T>) => ResourceReturn<T>;
+export const useServerMount$: <T>(first: MountFn<T>) => void;
 
 // Warning: (ae-incompatible-release-tags) The symbol "useServerMountQrl" is marked as @public, but its signature references "MountFn" which is marked as @alpha
-// Warning: (ae-incompatible-release-tags) The symbol "useServerMountQrl" is marked as @public, but its signature references "ResourceReturn" which is marked as @alpha
 //
 // @public
-export const useServerMountQrl: <T>(mountQrl: QRL<MountFn<T>>) => ResourceReturn<T>;
+export const useServerMountQrl: <T>(mountQrl: QRL<MountFn<T>>) => void;
 
 // Warning: (ae-forgotten-export) The symbol "UseStoreOptions" needs to be exported by the entry point index.d.ts
 //
@@ -643,32 +633,39 @@ export const useStyles$: (first: string) => void;
 // @public
 export const useStylesQrl: (styles: QRL<string>) => void;
 
+// @alpha (undocumented)
+export const useStylesScoped$: (first: string) => void;
+
+// @alpha (undocumented)
+export const useStylesScopedQrl: (styles: QRL<string>) => void;
+
 // @alpha (undocumented)
 export function useUserContext<T>(key: string): T | undefined;
 
 // @alpha (undocumented)
 export function useUserContext<T, B = T>(key: string, defaultValue: B): T | B;
 
+// Warning: (ae-forgotten-export) The symbol "UseWatchOptions" needs to be exported by the entry point index.d.ts
 // Warning: (ae-incompatible-release-tags) The symbol "useWatch$" is marked as @public, but its signature references "WatchFn" which is marked as @alpha
-// Warning: (ae-incompatible-release-tags) The symbol "useWatch$" is marked as @public, but its signature references "UseEffectOptions" which is marked as @alpha
 //
 // @public
-export const useWatch$: (first: WatchFn, opts?: UseEffectOptions | undefined) => void;
+export const useWatch$: (first: WatchFn, opts?: UseWatchOptions | undefined) => void;
 
 // Warning: (ae-incompatible-release-tags) The symbol "useWatchQrl" is marked as @public, but its signature references "WatchFn" which is marked as @alpha
-// Warning: (ae-incompatible-release-tags) The symbol "useWatchQrl" is marked as @public, but its signature references "UseEffectOptions" which is marked as @alpha
 //
 // @public
-export const useWatchQrl: (qrl: QRL<WatchFn>, opts?: UseEffectOptions) => void;
+export const useWatchQrl: (qrl: QRL<WatchFn>, opts?: UseWatchOptions) => void;
 
 // @public
 export type ValueOrPromise<T> = T | Promise<T>;
 
 // @public
 export const version: string;
 
+// Warning: (ae-forgotten-export) The symbol "WatchCtx" needs to be exported by the entry point index.d.ts
+//
 // @alpha (undocumented)
-export type WatchFn = (track: Tracker) => ValueOrPromise<void | (() => void)>;
+export type WatchFn = (ctx: WatchCtx) => ValueOrPromise<void | (() => void)>;
 
 // (No @packageDocumentation comment for this package)
 

packages/qwik/src/core/examples.tsx

@@ -152,13 +152,13 @@ export const CmpInline = component$(() => {
     });
 
     // Double count watch
-    useWatch$((track) => {
+    useWatch$(({ track }) => {
       const count = track(store, 'count');
       store.doubleCount = 2 * count;
     });
 
     // Debouncer watch
-    useWatch$((track) => {
+    useWatch$(({ track }) => {
       const doubleCount = track(store, 'doubleCount');
       const timer = setTimeout(() => {
         store.debounced = doubleCount;
@@ -184,7 +184,7 @@ export const CmpInline = component$(() => {
   // <docs anchor="use-watch-simple">
   const Cmp = component$(() => {
     const store = useStore({ count: 0, doubleCount: 0 });
-    useWatch$((track) => {
+    useWatch$(({ track }) => {
       const count = track(store, 'count');
       store.doubleCount = 2 * count;
     });
@@ -361,7 +361,7 @@ export const CmpInline = component$(() => {
   const Cmp = component$(() => {
     const input = useRef<HTMLInputElement>();
 
-    useClientEffect$((track) => {
+    useClientEffect$(({ track }) => {
       const el = track(input, 'current')!;
       el.focus();
     });

packages/qwik/src/core/index.ts

@@ -82,7 +82,7 @@ export { useLexicalScope } from './use/use-lexical-scope.public';
 export { useStore, useRef } from './use/use-store.public';
 export { useContext, useContextProvider, createContext } from './use/use-context';
 export { useUserContext } from './use/use-user-context';
-export { useStylesQrl, useStyles$, useScopedStylesQrl, useScopedStyles$ } from './use/use-styles';
+export { useStylesQrl, useStyles$, useStylesScopedQrl, useStylesScoped$ } from './use/use-styles';
 export { useOn, useOnDocument, useOnWindow, useCleanupQrl, useCleanup$ } from './use/use-on';
 export type { Context } from './use/use-context';
 export type { Ref } from './use/use-store.public';

packages/qwik/src/core/render/ssr/render-ssr.unit.tsx

@@ -11,7 +11,7 @@ import { createContext, useContext, useContextProvider } from '../../use/use-con
 import { useOn, useOnDocument, useOnWindow } from '../../use/use-on';
 import { Resource, useResource$ } from '../../use/use-resource';
 import { Ref, useRef, useStore } from '../../use/use-store.public';
-import { useScopedStylesQrl, useStylesQrl } from '../../use/use-styles';
+import { useStylesScopedQrl, useStylesQrl } from '../../use/use-styles';
 import { useClientEffect$ } from '../../use/use-watch';
 import { delay } from '../../util/promises';
 import { Host, SkipRerender, SSRComment } from '../jsx/host.public';
@@ -555,7 +555,7 @@ renderSSRSuite('component useStyles()', async () => {
   );
 });
 
-renderSSRSuite('component useScopedStyles()', async () => {
+renderSSRSuite('component useStylesScoped()', async () => {
   await testSSR(
     <html>
       <ScopedStyles1>
@@ -800,7 +800,7 @@ export const Styles = component$(() => {
 });
 
 export const ScopedStyles1 = component$(() => {
-  useScopedStylesQrl(inlinedQrl('.host {color: red}', 'styles_scoped_1'));
+  useStylesScopedQrl(inlinedQrl('.host {color: red}', 'styles_scoped_1'));
 
   return (
     <Host class="host">
@@ -816,7 +816,7 @@ export const ScopedStyles1 = component$(() => {
 });
 
 export const ScopedStyles2 = component$(() => {
-  useScopedStylesQrl(inlinedQrl('.host {color: blue}', '20_styles_scoped'));
+  useStylesScopedQrl(inlinedQrl('.host {color: blue}', '20_styles_scoped'));
 
   return (
     <Host class="host">

packages/qwik/src/core/use/use-styles.ts

@@ -57,29 +57,29 @@ export const useStylesQrl = (styles: QRL<string>): void => {
 // </docs>
 export const useStyles$ = /*#__PURE__*/ implicit$FirstArg(useStylesQrl);
 
-// <docs markdown="../readme.md#useScopedStyles">
+// <docs markdown="../readme.md#useStylesScoped">
 // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
-// (edit ../readme.md#useScopedStyles instead)
+// (edit ../readme.md#useStylesScoped instead)
 /**
  * @see `useStyles`.
  *
  * @alpha
  */
 // </docs>
-export const useScopedStylesQrl = (styles: QRL<string>): void => {
+export const useStylesScopedQrl = (styles: QRL<string>): void => {
   _useStyles(styles, scopeStylesheet, true);
 };
 
-// <docs markdown="../readme.md#useScopedStyles">
+// <docs markdown="../readme.md#useStylesScoped">
 // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
-// (edit ../readme.md#useScopedStyles instead)
+// (edit ../readme.md#useStylesScoped instead)
 /**
  * @see `useStyles`.
  *
  * @alpha
  */
 // </docs>
-export const useScopedStyles$ = /*#__PURE__*/ implicit$FirstArg(useScopedStylesQrl);
+export const useStylesScoped$ = /*#__PURE__*/ implicit$FirstArg(useStylesScopedQrl);
 
 const _useStyles = (
   styleQrl: QRL<string>,