fix: deprecated useClientEffect$ and createContext hooks (#187)

Author: sebbalex

apps/website/src/constants.ts

@@ -1,4 +1,4 @@
-import { createContext } from '@builder.io/qwik';
+import { createContextId } from '@builder.io/qwik';
 import { AppState } from './types';
 
-export const APP_STATE = createContext<AppState>('app_state');
+export const APP_STATE = createContextId<AppState>('app_state');

apps/website/src/routes/layout.tsx

@@ -2,7 +2,6 @@ import {
   component$,
   Slot,
   useBrowserVisibleTask$,
-  useClientEffect$,
   useContextProvider,
   useStore,
 } from '@builder.io/qwik';

packages/daisy/src/components/rating/rating.tsx

@@ -1,6 +1,6 @@
 import {
   component$,
-  createContext,
+  createContextId,
   useContext,
   useContextProvider,
   useStore,
@@ -17,7 +17,7 @@ export type DaisyRatingProps = {
   mask?: string;
 } & RatingProps;
 
-export const ContextService = createContext<{ mask: string }>('my-context');
+export const ContextService = createContextId<{ mask: string }>('my-context');
 
 export const Rating = component$((props: DaisyRatingProps) => {
   useStyles$(styles);

packages/headless/src/components/drawer/drawer.tsx

@@ -1,6 +1,6 @@
 import {
   component$,
-  createContext,
+  createContextId,
   Signal,
   Slot,
   useContextProvider,
@@ -13,7 +13,7 @@ export interface DrawerContext {
   randomId: string;
 }
 
-export const drawerContext = createContext<DrawerContext>('DrawerContext');
+export const drawerContext = createContextId<DrawerContext>('DrawerContext');
 
 export interface DrawerProps {
   class?: string;

packages/headless/src/components/menu/menu.tsx

@@ -1,12 +1,12 @@
 import {
   $,
   component$,
-  createContext,
+  createContextId,
   QRL,
   QwikKeyboardEvent,
   Signal,
   Slot,
-  useClientEffect$,
+  useBrowserVisibleTask$,
   useContext,
   useContextProvider,
   useId,
@@ -30,7 +30,7 @@ interface MenuContextService {
 
 const MENU_CONTEXT_NAME = 'qui-menu';
 export const quiMenuContext =
-  createContext<MenuContextService>(MENU_CONTEXT_NAME);
+  createContextId<MenuContextService>(MENU_CONTEXT_NAME);
 
 export enum KEYBOARD_KEY_NAME {
   ARROW_UP = 'ArrowUp',
@@ -61,15 +61,15 @@ export const Menu = component$((props: MenuProps) => {
 
   useContextProvider(quiMenuContext, menuContextService);
 
-  useClientEffect$(({ track }) => {
+  useBrowserVisibleTask$(({ track }) => {
     track(() => isExpanded.value);
     if (!isExpanded.value) {
       currentButtonInFocusIndex.value = -1;
       currentId.value = '';
     }
   });
 
-  useClientEffect$(() => {
+  useBrowserVisibleTask$(() => {
     const options = container.value?.querySelectorAll<HTMLElement>('button');
     if (options?.length) {
       options.forEach((option) => children.push(option));

packages/headless/src/components/popover/popover-content.tsx

@@ -1,24 +1,26 @@
-import { component$, Slot, useClientEffect$, useContext, useSignal, useStylesScoped$ } from '@builder.io/qwik';
+import {
+  component$,
+  Slot,
+  useBrowserVisibleTask$,
+  useContext,
+  useSignal,
+  useStylesScoped$,
+} from '@builder.io/qwik';
 import styles from './popover-content.css?inline';
 import { PopoverContext } from './popover-context';
 
-export const PopoverContent = component$(
-  () => {
-    const ref = useSignal<HTMLElement>();
-    const contextService = useContext(PopoverContext);
-    useStylesScoped$(styles);
+export const PopoverContent = component$(() => {
+  const ref = useSignal<HTMLElement>();
+  const contextService = useContext(PopoverContext);
+  useStylesScoped$(styles);
 
-    useClientEffect$(() => {
-      contextService.setOverlayRef$(ref);
-    });
-
-    return (
-      <div
-        ref={ref}
-        class="popover-content">
-        <Slot />
-      </div>
-    );
-  }
-);
+  useBrowserVisibleTask$(() => {
+    contextService.setOverlayRef$(ref);
+  });
 
+  return (
+    <div ref={ref} class="popover-content">
+      <Slot />
+    </div>
+  );
+});

packages/headless/src/components/popover/popover-context.tsx

@@ -1,10 +1,11 @@
-import { createContext, QRL, Signal } from '@builder.io/qwik';
+import { createContextId, QRL, Signal } from '@builder.io/qwik';
 
-interface PopoverContextProps  {
-  isOpen: boolean,
+interface PopoverContextProps {
+  isOpen: boolean;
   triggerEvent?: 'click' | 'mouseOver';
   // NEW
   setTriggerRef$: QRL<(ref: Signal<HTMLElement | undefined>) => void>;
   setOverlayRef$: QRL<(ref: Signal<HTMLElement | undefined>) => void>;
 }
-export const PopoverContext = createContext<PopoverContextProps>('popover-context');
+export const PopoverContext =
+  createContextId<PopoverContextProps>('popover-context');

packages/headless/src/components/popover/popover-trigger.tsx

@@ -1,30 +1,39 @@
-import { $, component$, Slot, useClientEffect$, useContext, useSignal, useStylesScoped$ } from '@builder.io/qwik';
+import {
+  $,
+  component$,
+  Slot,
+  useBrowserVisibleTask$,
+  useContext,
+  useSignal,
+  useStylesScoped$,
+} from '@builder.io/qwik';
 import { PopoverContext } from './popover-context';
 import styles from './popover-trigger.css?inline';
 
-export const PopoverTrigger = component$(
-  () => {
-    const ref = useSignal<HTMLElement>();
-    const contextService = useContext(PopoverContext);
-    useStylesScoped$(styles);
+export const PopoverTrigger = component$(() => {
+  const ref = useSignal<HTMLElement>();
+  const contextService = useContext(PopoverContext);
+  useStylesScoped$(styles);
 
-    useClientEffect$(() => {
-      contextService.setTriggerRef$(ref);
-    });
+  useBrowserVisibleTask$(() => {
+    contextService.setTriggerRef$(ref);
+  });
 
-    const mouseOverHandler = $(() => {
-      contextService.isOpen = true
-    })
-
-    return (
-      <span
-        ref={ref}
-        class="popover-trigger"
-        onMouseOver$={contextService.triggerEvent === 'mouseOver' ? mouseOverHandler : undefined}
-      >
-        <Slot />
-      </span>
-    );
-  }
-);
+  const mouseOverHandler = $(() => {
+    contextService.isOpen = true;
+  });
 
+  return (
+    <span
+      ref={ref}
+      class="popover-trigger"
+      onMouseOver$={
+        contextService.triggerEvent === 'mouseOver'
+          ? mouseOverHandler
+          : undefined
+      }
+    >
+      <Slot />
+    </span>
+  );
+});