Switch Navigator data source to IndexStore

src/components/DocumentationLayout.vue

@@ -30,46 +30,44 @@
     >
       <PortalTarget name="modal-destination" multiple />
       <template #aside="{ scrollLockID, breakpoint }">
-        <NavigatorDataProvider
-          :interface-language="interfaceLanguage"
-          :technologyUrl="technology ? technology.url : ''"
-          :api-changes-version="selectedAPIChangesVersion"
-          ref="NavigatorDataProvider"
-        >
-          <template #default="slotProps">
-            <div class="documentation-layout-aside">
-              <QuickNavigationModal
-                v-if="enableQuickNavigation"
-                :children="quickNavNodes"
-                :showQuickNavigationModal.sync="showQuickNavigationModal"
-                :technology="technology ? technology.title : ''"
-              />
-              <transition name="delay-hiding">
-                <Navigator
-                  v-show="sidenavVisibleOnMobile || breakpoint === BreakpointName.large"
-                  :flatChildren="slotProps.flatChildren"
-                  :parent-topic-identifiers="parentTopicIdentifiers"
-                  :technology="slotProps.technology || technology"
-                  :is-fetching="slotProps.isFetching"
-                  :error-fetching="slotProps.errorFetching"
-                  :api-changes="slotProps.apiChanges"
-                  :references="references"
-                  :navigator-references="slotProps.references"
-                  :scrollLockID="scrollLockID"
-                  :render-filter-on-top="breakpoint !== BreakpointName.large"
-                  @close="handleToggleSidenav(breakpoint)"
-                >
-                  <template v-if="enableQuickNavigation" #filter>
-                    <QuickNavigationButton @click.native="openQuickNavigationModal" />
-                  </template>
-                  <template #navigator-head="{ className }">
-                    <slot name="nav-title" :className="className" />
-                  </template>
-                </Navigator>
-              </transition>
-            </div>
-          </template>
-        </NavigatorDataProvider>
+        <div class="documentation-layout-aside">
+          <QuickNavigationModal
+            v-if="enableQuickNavigation"
+            :children="indexNodes"
+            :showQuickNavigationModal.sync="showQuickNavigationModal"
+            :technology="technology ? technology.title : ''"
+          />
+          <transition name="delay-hiding">
+            <slot
+              name="navigator"
+              v-bind="{
+                scrollLockID,
+                breakpoint,
+                sidenavVisibleOnMobile,
+                handleToggleSidenav,
+                enableQuickNavigation,
+                openQuickNavigationModal,
+              }"
+            >
+              <Navigator
+                v-show="sidenavVisibleOnMobile || breakpoint === BreakpointName.large"
+                v-bind="navigatorProps"
+                :parent-topic-identifiers="parentTopicIdentifiers"
+                :references="references"
+                :scrollLockID="scrollLockID"
+                :render-filter-on-top="breakpoint !== BreakpointName.large"
+                @close="handleToggleSidenav(breakpoint)"
+              >
+                <template v-if="enableQuickNavigation" #filter>
+                  <QuickNavigationButton @click.native="openQuickNavigationModal" />
+                </template>
+                <template #navigator-head="{ className }">
+                  <slot name="nav-title" :className="className" />
+                </template>
+              </Navigator>
+            </slot>
+          </transition>
+        </div>
       </template>
       <slot name="content" />
     </AdjustableSidebarWidth>
@@ -83,13 +81,10 @@ import QuickNavigationModal from 'docc-render/components/Navigator/QuickNavigati
 import AdjustableSidebarWidth from 'docc-render/components/AdjustableSidebarWidth.vue';
 import Navigator from 'docc-render/components/Navigator.vue';
 import onPageLoadScrollToFragment from 'docc-render/mixins/onPageLoadScrollToFragment';
-import Language from 'docc-render/constants/Language';
 import { BreakpointName } from 'docc-render/utils/breakpoints';
 import { storage } from 'docc-render/utils/storage';
 import { getSetting } from 'docc-render/utils/theme-settings';
-
-import IndexStore from 'docc-render/stores/IndexStore';
-import NavigatorDataProvider from 'theme/components/Navigator/NavigatorDataProvider.vue';
+import indexGetter from 'docc-render/mixins/indexGetter';
 import DocumentationNav from 'theme/components/DocumentationTopic/DocumentationNav.vue';
 
 const NAVIGATOR_HIDDEN_ON_LARGE_KEY = 'navigator-hidden-large';
@@ -100,13 +95,12 @@ export default {
   components: {
     Navigator,
     AdjustableSidebarWidth,
-    NavigatorDataProvider,
     Nav: DocumentationNav,
     QuickNavigationButton,
     QuickNavigationModal,
     PortalTarget,
   },
-  mixins: [onPageLoadScrollToFragment],
+  mixins: [onPageLoadScrollToFragment, indexGetter],
   props: {
     enableNavigator: Boolean,
     diffAvailability: {
@@ -152,16 +146,12 @@ export default {
       sidenavHiddenOnLarge: storage.get(NAVIGATOR_HIDDEN_ON_LARGE_KEY, false),
       showQuickNavigationModal: false,
       BreakpointName,
-      indexState: IndexStore.state,
     };
   },
   computed: {
     enableQuickNavigation: ({ isTargetIDE }) => (
       !isTargetIDE && getSetting(['features', 'docs', 'quickNavigation', 'enable'], true)
     ),
-    quickNavNodes({ indexState: { flatChildren = {} }, interfaceLanguage }) {
-      return flatChildren[interfaceLanguage] ?? (flatChildren[Language.swift.key.url] || []);
-    },
     sidebarProps: ({
       sidenavVisibleOnMobile, enableNavigator, sidenavHiddenOnLarge, navigatorFixedWidth,
     }) => (

src/components/Navigator.vue

@@ -91,7 +91,7 @@ export default {
       type: Array,
       required: true,
     },
-    technology: {
+    technologyProps: {
       type: Object,
       required: false,
     },
@@ -153,13 +153,6 @@ export default {
      * The root item is always a module
      */
     type: () => TopicTypes.module,
-    technologyProps: ({ technology }) => (
-      !technology ? null : {
-        technology: technology.title,
-        technologyPath: technology.path || technology.url,
-        isTechnologyBeta: technology.beta,
-      }
-    ),
   },
 };
 </script>

src/mixins/indexGetter.js

@@ -0,0 +1,52 @@
+/**
+ * This source file is part of the Swift.org open source project
+ *
+ * Copyright (c) 2024 Apple Inc. and the Swift project authors
+ * Licensed under Apache License v2.0 with Runtime Library Exception
+ *
+ * See https://swift.org/LICENSE.txt for license information
+ * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+*/
+import IndexStore from 'docc-render/stores/IndexStore';
+import Language from 'docc-render/constants/Language';
+
+export default {
+  computed: {
+    indexNodes({ indexState: { flatChildren }, interfaceLanguage }) {
+      if (!flatChildren) return [];
+      return flatChildren[interfaceLanguage] ?? (flatChildren[Language.swift.key.url] || []);
+    },
+    technologyProps({ indexState: { technologyProps }, interfaceLanguage, technology }) {
+      // Select technology props from fetched index data for the current language, fallback to swift
+      // If none available, fallback to technology data of the curr page or null
+      return technologyProps[interfaceLanguage] ?? technologyProps[Language.swift.key.url]
+        ?? (technology ? {
+          technology: technology.title,
+          technologyPath: technology.path || technology.url,
+          isTechnologyBeta: technology.beta,
+        } : null);
+    },
+    navigatorProps: ({
+      indexNodes,
+      indexState: {
+        flatChildren,
+        references,
+        apiChanges,
+        errorFetching,
+      },
+      technologyProps,
+    }) => ({
+      flatChildren: indexNodes,
+      navigatorReferences: references,
+      apiChanges,
+      isFetching: !flatChildren && !errorFetching,
+      errorFetching,
+      technologyProps,
+    }),
+  },
+  data() {
+    return {
+      indexState: IndexStore.state,
+    };
+  },
+};

src/stores/IndexStore.js

@@ -10,15 +10,15 @@
 
 export default {
   state: {
-    flatChildren: {},
+    flatChildren: null,
     references: {},
     apiChanges: null,
     includedArchiveIdentifiers: [],
     errorFetching: false,
     technologyProps: {},
   },
   reset() {
-    this.state.flatChildren = {};
+    this.state.flatChildren = null;
     this.state.references = {};
     this.state.apiChanges = null;
     this.state.includedArchiveIdentifiers = [];

src/views/DocumentationTopic.vue

@@ -52,7 +52,7 @@ import {
   shouldFetchDataForRouteUpdate,
 } from 'docc-render/utils/data';
 import DocumentationTopic from 'theme/components/DocumentationTopic.vue';
-import DocumentationLayout from 'docc-render/components/DocumentationLayout.vue';
+import DocumentationLayout from 'theme/components/DocumentationLayout.vue';
 import DocumentationTopicStore from 'docc-render/stores/DocumentationTopicStore';
 import indexProvider from 'theme/mixins/indexProvider';
 import Language from 'docc-render/constants/Language';