Creating an IndexStore for Quick Navigation

src/components/DocumentationLayout.vue

@@ -40,7 +40,7 @@
             <div class="documentation-layout-aside">
               <QuickNavigationModal
                 v-if="enableQuickNavigation"
-                :children="slotProps.flatChildren"
+                :children="state.flatChildren"
                 :showQuickNavigationModal.sync="showQuickNavigationModal"
                 :technology="technology ? technology.title : ''"
               />
@@ -87,6 +87,7 @@ 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 DocumentationNav from 'theme/components/DocumentationTopic/DocumentationNav.vue';
 
@@ -150,6 +151,7 @@ export default {
       sidenavHiddenOnLarge: storage.get(NAVIGATOR_HIDDEN_ON_LARGE_KEY, false),
       showQuickNavigationModal: false,
       BreakpointName,
+      state: IndexStore.state,
     };
   },
   computed: {

src/components/DocumentationTopic.vue

@@ -615,7 +615,7 @@ export default {
         identifier: {
           interfaceLanguage,
           url: identifier,
-        },
+        } = {},
         metadata: {
           conformance,
           hasNoExpandedDocumentation,
@@ -643,7 +643,7 @@ export default {
         seeAlsoSections,
         variantOverrides,
         variants = [],
-      } = json;
+      } = json || {};
       const languagePaths = variants.reduce((memo, variant) => (
         variant.traits.reduce((_memo, trait) => (!trait.interfaceLanguage ? _memo : ({
           ..._memo,

src/components/Navigator/NavigatorDataProvider.vue

@@ -11,7 +11,7 @@
 <script>
 import { fetchIndexPathsData } from 'docc-render/utils/data';
 import { flattenNestedData } from 'docc-render/utils/navigatorData';
-import AppStore from 'docc-render/stores/AppStore';
+import IndexStore from 'docc-render/stores/IndexStore';
 import Language from 'docc-render/constants/Language';
 
 /**
@@ -99,7 +99,7 @@ export default {
         );
         this.navigationIndex = Object.freeze(interfaceLanguages);
         this.navigationReferences = Object.freeze(references);
-        AppStore.setIncludedArchiveIdentifiers(includedArchiveIdentifiers);
+        IndexStore.setIncludedArchiveIdentifiers(includedArchiveIdentifiers);
       } catch (e) {
         this.errorFetching = true;
       } finally {

src/mixins/indexProvider.js

@@ -0,0 +1,97 @@
+/**
+ * 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 { fetchData } from 'docc-render/utils/data';
+import { pathJoin } from 'docc-render/utils/assets';
+import { getAbsoluteUrl } from 'docc-render/utils/url-helper';
+import { flattenNestedData } from 'docc-render/utils/navigatorData';
+import Language from 'docc-render/constants/Language';
+import IndexStore from 'docc-render/stores/IndexStore';
+
+export default {
+  computed: {
+    technologyUrl: ({ technology }) => (technology ? technology.url : ''),
+    /**
+         * Recomputes the list of flat children.
+         * @return NavigatorFlatItem[]
+         */
+    flatChildren: ({
+      technologyWithChildren = {},
+    }) => (
+      flattenNestedData(
+        technologyWithChildren.children || [], null, 0, technologyWithChildren.beta,
+      )
+    ),
+    technologyPath: ({ technologyUrl }) => {
+      // regex should match only the first section, no slash - `/documentation/:technology`
+      const matches = /(\/documentation\/(?:[^/]+))\/?/.exec(technologyUrl);
+      return matches ? matches[1] : '';
+    },
+    /**
+     * Extracts the technology data, for the currently chosen language
+     * @return {Object}
+     */
+    technologyWithChildren({
+      navigationIndex,
+      topicProps: { interfaceLanguage } = { interfaceLanguage: Language.swift.key.url },
+      technologyPath,
+    }) {
+      // get the technologies for the current language
+      let currentLangTechnologies = navigationIndex[interfaceLanguage] || [];
+      // if no such items, we use the default swift one
+      if (!currentLangTechnologies.length) {
+        currentLangTechnologies = navigationIndex[Language.swift.key.url] || [];
+      }
+      // find the current technology
+      const currentTechnology = currentLangTechnologies.find(t => (
+        technologyPath.toLowerCase() === t.path.toLowerCase()
+      ));
+      return currentTechnology ?? currentLangTechnologies[0];
+    },
+    indexDataPath() {
+      const slug = this.$route?.params?.locale || '';
+      return pathJoin(['/index/', slug, 'index.json']);
+    },
+    technologyProps: ({ technologyWithChildren }) => (
+      !technologyWithChildren ? null : {
+        technology: technologyWithChildren.title,
+        technologyPath: technologyWithChildren.path || technologyWithChildren.url,
+        isTechnologyBeta: technologyWithChildren.beta,
+      }
+    ),
+  },
+  methods: {
+    async fetchIndexPathsData() {
+      const path = getAbsoluteUrl(this.indexDataPath);
+      return fetchData(path);
+    },
+    async fetchIndexData() {
+      try {
+        const {
+          includedArchiveIdentifiers = [],
+          interfaceLanguages,
+          references = {},
+        } = await this.fetchIndexPathsData();
+        this.navigationIndex = Object.freeze(interfaceLanguages);
+        IndexStore.setReferences(references);
+        IndexStore.setIncludedArchiveIdentifiers(includedArchiveIdentifiers);
+        IndexStore.setFlatChildren(this.flatChildren);
+        IndexStore.setTechnologyProps(this.technologyProps);
+      } catch (e) {
+        IndexStore.setErrorFetching(true);
+      }
+    },
+  },
+  watch: {
+    indexDataPath: {
+      handler: 'fetchIndexData',
+      immediate: true,
+    },
+  },
+};

src/stores/AppStore.js

@@ -30,15 +30,13 @@ export default {
     supportsAutoColorScheme,
     systemColorScheme: ColorScheme.light,
     availableLocales: [],
-    includedArchiveIdentifiers: [],
   },
   reset() {
     this.state.imageLoadingStrategy = process.env.VUE_APP_TARGET === 'ide'
       ? ImageLoadingStrategy.eager : ImageLoadingStrategy.lazy;
     this.state.preferredColorScheme = Settings.preferredColorScheme || defaultColorScheme;
     this.state.supportsAutoColorScheme = supportsAutoColorScheme;
     this.state.systemColorScheme = ColorScheme.light;
-    this.state.includedArchiveIdentifiers = [];
   },
   setImageLoadingStrategy(strategy) {
     this.state.imageLoadingStrategy = strategy;
@@ -61,9 +59,6 @@ export default {
   setSystemColorScheme(value) {
     this.state.systemColorScheme = value;
   },
-  setIncludedArchiveIdentifiers(value) {
-    this.state.includedArchiveIdentifiers = value;
-  },
   syncPreferredColorScheme() {
     if (!!Settings.preferredColorScheme
       && Settings.preferredColorScheme !== this.state.preferredColorScheme) {

src/stores/IndexStore.js

@@ -0,0 +1,46 @@
+/**
+ * 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
+*/
+
+export default {
+  state: {
+    flatChildren: [],
+    references: {},
+    apiChanges: null,
+    includedArchiveIdentifiers: [],
+    errorFetching: false,
+    technologyProps: {},
+  },
+  reset() {
+    this.state.flatChildren = [];
+    this.state.references = {};
+    this.state.apiChanges = null;
+    this.state.includedArchiveIdentifiers = [];
+    this.state.errorFetching = false;
+    this.state.technologyProps = {};
+  },
+  setFlatChildren(children) {
+    this.state.flatChildren = children;
+  },
+  setReferences(references) {
+    this.state.references = references;
+  },
+  setApiChanges(diff) {
+    this.state.apiChanges = diff;
+  },
+  setIncludedArchiveIdentifiers(includedArchiveIdentifiers) {
+    this.state.includedArchiveIdentifiers = includedArchiveIdentifiers;
+  },
+  setErrorFetching(state) {
+    this.state.errorFetching = state;
+  },
+  setTechnologyProps(technology) {
+    this.state.technologyProps = technology;
+  },
+};

src/views/DocumentationTopic.vue

@@ -54,6 +54,7 @@ import {
 import DocumentationTopic from 'theme/components/DocumentationTopic.vue';
 import DocumentationLayout from 'docc-render/components/DocumentationLayout.vue';
 import DocumentationTopicStore from 'docc-render/stores/DocumentationTopicStore';
+import indexProvider from 'theme/mixins/indexProvider';
 import Language from 'docc-render/constants/Language';
 import OnThisPageRegistrator from 'docc-render/mixins/onThisPageRegistrator';
 import { updateLocale } from 'theme/utils/i18n-utils';
@@ -74,7 +75,7 @@ export default {
     Topic: DocumentationTopic,
     DocumentationLayout,
   },
-  mixins: [OnThisPageRegistrator, communicationBridgeUtils],
+  mixins: [OnThisPageRegistrator, communicationBridgeUtils, indexProvider],
   props: {
     enableMinimized: {
       type: Boolean,
@@ -86,6 +87,7 @@ export default {
       topicDataDefault: null,
       topicDataObjc: null,
       store: DocumentationTopicStore,
+      navigationIndex: {},
     };
   },
   provide() {

tests/unit/components/Navigator/NavigatorDataProvider.spec.js

@@ -10,7 +10,7 @@
 
 import NavigatorDataProvider from '@/components/Navigator/NavigatorDataProvider.vue';
 import { shallowMount } from '@vue/test-utils';
-import AppStore from 'docc-render/stores/AppStore';
+import IndexStore from 'docc-render/stores/IndexStore';
 import Language from 'docc-render/constants/Language';
 import { TopicTypes } from '@/constants/TopicTypes';
 import { fetchIndexPathsData } from '@/utils/data';
@@ -176,7 +176,7 @@ describe('NavigatorDataProvider', () => {
   });
 
   afterEach(() => {
-    AppStore.reset();
+    IndexStore.reset();
   });
 
   it('fetches data when mounting NavigatorDataProvider', async () => {
@@ -558,11 +558,11 @@ describe('NavigatorDataProvider', () => {
     ]);
   });
 
-  it('sets `includedArchiveIdentifiers` state in the app store', async () => {
-    expect(AppStore.state.includedArchiveIdentifiers).toEqual([]);
+  it('sets `includedArchiveIdentifiers` state in the index store', async () => {
+    expect(IndexStore.state.includedArchiveIdentifiers).toEqual([]);
     fetchIndexPathsData.mockResolvedValue(response);
     createWrapper();
     await flushPromises();
-    expect(AppStore.state.includedArchiveIdentifiers).toEqual(includedArchiveIdentifiers);
+    expect(IndexStore.state.includedArchiveIdentifiers).toEqual(includedArchiveIdentifiers);
   });
 });