fix(headless/tabs): render on server

Co-authored-by: Igal Klebanov <[email protected]>
Co-authored-by: Naor Peled <[email protected]>

Author: 3 people

apps/website/src/components/keyboard-interaction-table/keyboard-interaction-table.tsx

@@ -23,7 +23,6 @@ export const KeyboardInteractionTable = component$(
         </thead>
         <tbody>
           {props.keyDescriptors.map((descriptor) => {
-            console.log('descriptor', descriptor);
             return (
               <KBInteractionTableRow
                 key={descriptor.keyTitle}

apps/website/src/routes/docs/headless/(components)/tabs/examples.tsx

@@ -9,7 +9,7 @@ export const Example01 = component$(() => {
   return (
     <PreviewCodeExample>
       <div q:slot="actualComponent" class="tabs-example">
-        <Tabs behavior="automatic">
+        <Tabs behavior="automatic" selectedIndex={2}>
           <h3 id="tablist-1">Danish Composers</h3>
           <TabList>
             <Tab>Maria Ahlefeldt</Tab>

packages/kit-headless/src/components/tabs/tab.tsx

@@ -7,9 +7,11 @@ import {
   useComputed$,
   useTask$,
   $,
+  useSignal,
 } from '@builder.io/qwik';
 import { tabsContextId } from './tabs-context-id';
 import { KeyCode } from '../../utils/key-code.type';
+import { isServer } from '@builder.io/qwik/build';
 
 export interface TabProps {
   onClick?: PropFunction<() => void>;
@@ -21,30 +23,33 @@ export interface TabProps {
 export const Tab = component$((props: TabProps) => {
   const contextService = useContext(tabsContextId);
 
+  const serverAssignedIndexSig = useSignal<number | undefined>(undefined);
   const uniqueId = useId();
 
-  useTask$(({ cleanup }) => {
-    contextService.onTabsChanged$();
-
-    cleanup(() => {
-      contextService.onTabsChanged$();
-    });
+  useTask$(() => {
+    if (isServer) {
+      serverAssignedIndexSig.value =
+        contextService.lastAssignedTabIndexSig.value;
+      contextService.lastAssignedTabIndexSig.value++;
+    }
   });
 
   useTask$(({ track }) => {
     track(() => props.disabled);
-    console.log(
-      'contextService.tabsMap[uniqueId]',
-      contextService.tabsMap[uniqueId]
-    );
+
     if (props.disabled && contextService.tabsMap[uniqueId]) {
       contextService.tabsMap[uniqueId].disabled = true;
     }
   });
 
   const isSelectedSignal = useComputed$(() => {
+    if (isServer) {
+      return (
+        serverAssignedIndexSig.value === contextService.selectedIndexSig.value
+      );
+    }
     return (
-      contextService.selectedIndex.value ===
+      contextService.selectedIndexSig.value ===
       contextService.tabsMap[uniqueId]?.index
     );
   });
@@ -53,22 +58,13 @@ export const Tab = component$((props: TabProps) => {
     () => contextService.tabsMap[uniqueId]?.tabPanelId
   );
 
-  // TODO: Figure out a way to fix this shitty hack :)
-  useTask$(({ track }) => {
-    track(() => isSelectedSignal.value);
-
-    if (isSelectedSignal.value) {
-      contextService.showTabs$();
-    }
-  });
-
   const selectTab$ = $(() => {
     // TODO: try to move this to the Tabs component
 
     if (props.disabled) {
       return;
     }
-    contextService.selectedIndex.value =
+    contextService.selectedIndexSig.value =
       contextService.tabsMap[uniqueId]?.index || 0;
 
     contextService.selectTab$(uniqueId);

packages/kit-headless/src/components/tabs/tabs-context.type.ts

@@ -4,13 +4,16 @@ import { TabInfo } from './tabs';
 import { KeyCode } from '../../utils/key-code.type';
 
 export interface TabsContext {
-  selectedIndex: Signal<number>;
-  selectedTabId: Signal<string>;
   selectTab$: QRL<(tabId: string) => void>;
   showTabs$: QRL<() => void>;
   onTabsChanged$: QRL<() => void>;
+  onTabKeyDown$: QRL<(key: KeyCode, tabId: string) => void>;
+  selectedIndexSig: Signal<number>;
+  selectedTabIdSig: Signal<string>;
   tabsMap: { [key: string]: TabInfo };
   tabPanelsMap: { [key: string]: TabInfo };
   behavior: Behavior;
-  onTabKeyDown$: QRL<(key: KeyCode, tabId: string) => void>;
+
+  lastAssignedTabIndexSig: Signal<number>;
+  lastAssignedPanelIndexSig: Signal<number>;
 }

packages/kit-headless/src/components/tabs/tabs-panel.tsx

@@ -5,32 +5,43 @@ import {
   Slot,
   useTask$,
   useComputed$,
+  useSignal,
 } from '@builder.io/qwik';
 import { tabsContextId } from './tabs-context-id';
+import { isServer } from '@builder.io/qwik/build';
 
 export interface TabPanelProps {
   class?: string;
 }
 
 export const TabPanel = component$(({ ...props }: TabPanelProps) => {
   const contextService = useContext(tabsContextId);
+
+  const serverAssignedIndexSig = useSignal<number | undefined>(undefined);
+
   const panelUID = useId();
 
   const matchedTabId = useComputed$(
     () => contextService.tabPanelsMap[panelUID]?.tabId
   );
 
-  useTask$(({ cleanup }) => {
-    contextService.onTabsChanged$();
-
-    cleanup(() => {
-      contextService.onTabsChanged$();
-    });
+  useTask$(() => {
+    if (isServer) {
+      serverAssignedIndexSig.value =
+        contextService.lastAssignedPanelIndexSig.value;
+      contextService.lastAssignedPanelIndexSig.value++;
+    }
   });
 
   const isSelectedSignal = useComputed$(() => {
+    if (isServer) {
+      return (
+        serverAssignedIndexSig.value === contextService.selectedIndexSig.value
+      );
+    }
+
     return (
-      contextService.selectedIndex.value ===
+      contextService.selectedIndexSig.value ===
       contextService.tabPanelsMap[panelUID]?.index
     );
   });

packages/kit-headless/src/components/tabs/tabs.tsx

@@ -55,32 +55,34 @@ export const Tabs = component$((props: TabsProps) => {
   const behavior = props.behavior ?? 'manual';
 
   const ref = useSignal<HTMLElement | undefined>();
-  const selectedIndex = useSignal(0);
+  const selectedIndexSig = useSignal(0);
+  const lastAssignedTabIndexSig = useSignal(0);
+  const lastAssignedPanelIndexSig = useSignal(0);
 
   useTask$(({ track }) => {
     track(() => props.selectedIndex);
-    selectedIndex.value = props.selectedIndex || 0;
+    selectedIndexSig.value = props.selectedIndex || 0;
   });
 
-  const selectedTabId = useSignal<string>('');
-  const reIndexTabs = useSignal(false);
-  const showTabsSignal = useSignal(false);
+  const selectedTabIdSig = useSignal<string>('');
+  const reIndexTabsSig = useSignal(true);
+  const showTabsSig = useSignal(false);
   const tabPairs = useStore<TabPair[]>([]);
 
   const tabsMap = useStore<{ [key: string]: TabInfo }>({});
 
   const tabPanelsMap = useStore<{ [key: string]: TabInfo }>({});
 
   const onTabsChanged$ = $(() => {
-    reIndexTabs.value = true;
+    reIndexTabsSig.value = true;
   });
 
   const selectTab$ = $((tabId: string) => {
-    selectedTabId.value = tabId;
+    selectedTabIdSig.value = tabId;
   });
 
   const showTabs$ = $(() => {
-    showTabsSignal.value = true;
+    showTabsSig.value = true;
   });
 
   const onTabKeyDown$ = $((key: KeyCode, tabId: string) => {
@@ -131,26 +133,28 @@ export const Tabs = component$((props: TabsProps) => {
   });
 
   const contextService: TabsContext = {
-    tabsMap,
-    tabPanelsMap,
-    selectedIndex,
     selectTab$,
     showTabs$,
     onTabsChanged$,
-    behavior,
-    selectedTabId,
     onTabKeyDown$,
+    selectedTabIdSig,
+    selectedIndexSig,
+    tabsMap,
+    tabPanelsMap,
+    behavior,
+    lastAssignedTabIndexSig,
+    lastAssignedPanelIndexSig,
   };
 
   useContextProvider(tabsContextId, contextService);
 
   useVisibleTask$(({ track }) => {
-    track(() => reIndexTabs.value);
+    track(() => reIndexTabsSig.value);
 
-    if (!reIndexTabs.value) {
+    if (!reIndexTabsSig.value) {
       return;
     }
-    reIndexTabs.value = false;
+    reIndexTabsSig.value = false;
 
     if (ref.value) {
       const tabsRootElement = ref.value;
@@ -173,13 +177,14 @@ export const Tabs = component$((props: TabsProps) => {
       }
 
       // See if the deleted index was the last one
-      let previousSelectedTabWasLastOne = false;
-      if (selectedIndex.value === tabPairs.length - 1) {
-        previousSelectedTabWasLastOne = true;
+      let lastTabWasSelectedPreviously = false;
+      if (selectedIndexSig.value === tabPairs.length - 1) {
+        lastTabWasSelectedPreviously = true;
       }
 
       tabPairs.length = 0;
-      tabsMap;
+
+      let deletedTabId: string | undefined = undefined;
 
       tabElements.forEach((tab, index) => {
         const tabId = tab.getAttribute('data-tab-id');
@@ -190,12 +195,14 @@ export const Tabs = component$((props: TabsProps) => {
         }
 
         // clear all lists and maps
-        let tabWasDeleted = true;
+        let thisTabWasDeleted = true;
         // TODO: delete object maps, or turn into Map()
 
-        if (tabId === selectedTabId.value) {
-          selectedIndex.value = index;
-          tabWasDeleted = false;
+        if (selectedTabIdSig.value === '') {
+          thisTabWasDeleted = false;
+        } else if (tabId === selectedTabIdSig.value) {
+          selectedIndexSig.value = index;
+          thisTabWasDeleted = false;
         }
 
         const tabPanelElement = tabPanelElements[index];
@@ -222,22 +229,22 @@ export const Tabs = component$((props: TabsProps) => {
           throw new Error('Missing tab id or tab panel id for tab: ' + index);
         }
 
-        if (tabPairs.length > 0) {
-          if (previousSelectedTabWasLastOne && tabWasDeleted) {
-            selectedIndex.value = tabPairs.length - 1;
-          }
-          selectedTabId.value = tabPairs[selectedIndex.value].tabId;
+        if (thisTabWasDeleted) {
+          deletedTabId = tabId;
         }
       });
+
+      if (tabPairs.length > 0) {
+        if (lastTabWasSelectedPreviously && deletedTabId) {
+          selectedIndexSig.value = tabPairs.length - 1;
+        }
+        selectedTabIdSig.value = tabPairs[selectedIndexSig.value].tabId;
+      }
     }
   });
 
   return (
-    <div
-      ref={ref}
-      {...props}
-      style={'visibility:' + (showTabsSignal.value ? 'visible' : 'hidden')}
-    >
+    <div ref={ref} {...props}>
       <Slot />
     </div>
   );