feat: add client mount for symmetry reasons (QwikDev#2195)

packages/docs/src/routes/docs/components/lifecycle/index.mdx

@@ -95,6 +95,35 @@ export function User(props: { user: User }) {
 }
 ```
 
+## `useClientMount$()`
+
+- **Trigger:** component mount
+- **When:** before rendering and resources
+- **Times:** exactly once per component instance
+- **Platform:** browser only
+
+`useClientMount$()` registers a client-mounted hook that only runs on the browser when the component is first mounted.
+
+### Example
+
+```tsx
+export const Cmp = component$(() => {
+  const store = useStore({
+    option: string,
+  });
+  useClientMount$(() => {
+    // This code will ONLY run once in the browser, when the component is mounted
+    store.option = localStorage.getItem('option');
+  });
+  return (
+    <>
+      Localstore: {store.option}
+    </>
+  );
+});
+```
+
+
 ## `useWatch$()`
 
 - **Trigger:** component mount and on tracked state changes

packages/qwik/src/core/api.md

@@ -863,6 +863,12 @@ export const useClientEffect$: (first: WatchFn, opts?: UseEffectOptions | undefi
 // @public
 export const useClientEffectQrl: (qrl: QRL<WatchFn>, opts?: UseEffectOptions) => void;
 
+// @public
+export const useClientMount$: <T>(first: MountFn<T>) => void;
+
+// @public
+export const useClientMountQrl: <T>(mountQrl: QRL<MountFn<T>>) => void;
+
 // Warning: (ae-forgotten-export) The symbol "UseContext" needs to be exported by the entry point index.d.ts
 //
 // @public

packages/qwik/src/core/container/pause.ts

@@ -65,8 +65,6 @@ import type { QRL } from '../qrl/qrl.public';
 // !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
 // (edit ../readme.md#pauseContainer instead)
 /**
- * Serialize the current state of the application into DOM
- *
  */
 // </docs>
 export const pauseContainer = async (

packages/qwik/src/core/examples.tsx

@@ -12,7 +12,8 @@ import { $, QRL } from './qrl/qrl.public';
 import { useOn, useOnDocument, useOnWindow } from './use/use-on';
 import { useStore } from './use/use-store.public';
 import { useStyles$, useStylesScoped$ } from './use/use-styles';
-import { useClientEffect$, useMount$, useServerMount$, useWatch$ } from './use/use-watch';
+import { useClientEffect$, useWatch$ } from './use/use-watch';
+import { useClientMount$, useMount$, useServerMount$ } from './use/use-mount';
 import { implicit$FirstArg } from './util/implicit_dollar';
 
 //////////////////////////////////////////////////////////
@@ -261,6 +262,19 @@ export const CmpInline = component$(() => {
   return Cmp;
 };
 
+() => {
+  // <docs anchor="use-client-mount">
+  const Cmp = component$(() => {
+    useClientMount$(async () => {
+      // This code will ONLY run once in the client, when the component is mounted
+    });
+
+    return <div>Cmp</div>;
+  });
+  // </docs>
+  return Cmp;
+};
+
 () => {
   // <docs anchor="use-mount">
   const Cmp = component$(() => {

packages/qwik/src/core/index.ts

@@ -85,7 +85,6 @@ export type { UseStoreOptions } from './use/use-store.public';
 export type {
   Tracker,
   WatchFn,
-  MountFn,
   UseEffectOptions,
   EagernessOptions,
   ResourceReturn,
@@ -97,12 +96,14 @@ export type {
   UseWatchOptions,
   ResourceFn,
 } from './use/use-watch';
+export type { MountFn } from './use/use-mount';
 export { useWatch$, useWatchQrl } from './use/use-watch';
 export type { ResourceProps, ResourceOptions } from './use/use-resource';
 export { useResource$, useResourceQrl, Resource } from './use/use-resource';
 export { useClientEffect$, useClientEffectQrl } from './use/use-watch';
-export { useServerMount$, useServerMountQrl } from './use/use-watch';
-export { useMount$, useMountQrl } from './use/use-watch';
+export { useServerMount$, useServerMountQrl } from './use/use-mount';
+export { useMount$, useMountQrl } from './use/use-mount';
+export { useClientMount$, useClientMountQrl } from './use/use-mount';
 export { useErrorBoundary } from './use/use-error-boundary';
 
 //////////////////////////////////////////////////////////////////////////////////////////

packages/qwik/src/core/qrl/qrl.public.ts

@@ -210,7 +210,7 @@ export type PropFunction<T extends Function> = T extends (...args: infer ARGS) =
  *    - Must be runtime serializable.
  *
  * ```tsx
- * import { importedFn } from './import/example';
+ *
  * import { createContext, useContext, useContextProvider } from './use/use-context';
  * import { useRef } from './use/use-ref';
  * import { Resource, useResource$ } from './use/use-resource';
@@ -223,9 +223,7 @@ export type PropFunction<T extends Function> = T extends (...args: infer ARGS) =
  *   function localFn() {}
  *   // Valid Examples
  *   $(greet); // greet is importable
- *   $(importedFn); // importedFn is importable
  *   $(() => greet()); // greet is importable;
- *   $(() => importedFn()); // importedFn is importable
  *   $(() => console.log(store)); // store is serializable.
  *
  *   // Compile time errors

packages/qwik/src/core/readme.md

@@ -146,7 +146,18 @@ Registers a server mount hook that runs only in the server when the component is
 
 <docs code="./examples.tsx#use-server-mount"/>
 
-@see `useMount`
+@see `useMount`, `useClientMount`
+@public
+
+# `useClientMount`
+
+Registers a client mount hook that runs only in the browser when the component is first mounted.
+
+### Example
+
+<docs code="./examples.tsx#use-client-mount"/>
+
+@see `useMount`, `useServerMount`
 @public
 
 # `useStyles`