Inactivate known external links (Re-implementation)

src/components/ContentNode.vue

@@ -467,6 +467,8 @@ function renderNode(createElement, references) {
       const titlePlainText = node.overridingTitle || reference.title;
       return createElement(Reference, {
         props: {
+          identifier: node.identifier,
+          type: reference.type,
           url: reference.url,
           kind: reference.kind,
           role: reference.role,

src/components/ContentNode/Reference.vue

@@ -17,13 +17,19 @@
 <script>
 import { buildUrl } from 'docc-render/utils/url-helper';
 import { TopicRole } from 'docc-render/constants/roles';
+import AppStore from 'docc-render/stores/AppStore';
 
 import { notFoundRouteName } from 'docc-render/constants/router';
 import ReferenceExternalSymbol from './ReferenceExternalSymbol.vue';
 import ReferenceExternal from './ReferenceExternal.vue';
 import ReferenceInternalSymbol from './ReferenceInternalSymbol.vue';
 import ReferenceInternal from './ReferenceInternal.vue';
 
+const TopicReferenceTypes = new Set([
+  'section',
+  'topic',
+]);
+
 /**
  * Link to internal or external resources.
  *
@@ -52,6 +58,9 @@ import ReferenceInternal from './ReferenceInternal.vue';
  */
 export default {
   name: 'Reference',
+  data: () => ({
+    appState: AppStore.state,
+  }),
   computed: {
     isInternal({ url }) {
       if (!url) {
@@ -88,11 +97,42 @@ export default {
     urlWithParams({ isInternal }) {
       return isInternal ? buildUrl(this.url, this.$route.query) : this.url;
     },
-    isActiveComputed({ url, isActive }) {
-      return !!(url && isActive);
+    isActiveComputed({
+      type,
+      url,
+      isActive,
+      isFromIncludedArchive,
+    }) {
+      let flag = !!(url && isActive);
+
+      if (TopicReferenceTypes.has(type)) {
+        flag &&= isFromIncludedArchive;
+      }
+
+      return flag;
+    },
+    isFromIncludedArchive({ appState, identifier }) {
+      const { includedArchiveIdentifiers = [] } = appState;
+      // for backwards compatibility purposes, treat all references as being
+      // from included archives if there is no data for it
+      if (!includedArchiveIdentifiers.length) {
+        return true;
+      }
+
+      return includedArchiveIdentifiers.some(archiveId => (
+        identifier?.startsWith(`doc://${archiveId}/`)
+      ));
     },
   },
   props: {
+    identifier: {
+      type: String,
+      required: false,
+    },
+    type: {
+      type: String,
+      required: false,
+    },
     url: {
       type: String,
       required: false,

src/components/DocumentationTopic/PrimaryContent/DeclarationToken/LinkableToken.vue

@@ -22,6 +22,8 @@ export default {
     if (reference && reference.url) {
       return createElement(Reference, {
         props: {
+          identifier: this.identifier,
+          type: reference.type,
           url: reference.url,
           kind: reference.kind,
           role: reference.role,

src/components/DocumentationTopic/Relationships.vue

@@ -57,7 +57,10 @@ export default {
         ...section,
         symbols: section.identifiers.reduce((list, id) => (
           this.references[id] ? (
-            list.concat(this.references[id])
+            list.concat({
+              ...this.references[id],
+              identifier: id,
+            })
           ) : (
             list
           )

src/components/DocumentationTopic/RelationshipsList.vue

@@ -21,6 +21,8 @@
         :role="symbol.role"
         :kind="symbol.kind"
         :url="symbol.url"
+        :identifier="symbol.identifier"
+        :type="symbol.type"
       >{{symbol.title}}</Reference>
       <WordBreak v-else tag="code">{{symbol.title}}</WordBreak>
       <ConditionalConstraints

src/mixins/referencesProvider.js

@@ -9,11 +9,6 @@
 */
 import AppStore from 'docc-render/stores/AppStore';
 
-const TopicReferenceTypes = new Set([
-  'section',
-  'topic',
-]);
-
 export default {
   // inject the `store`
   inject: {
@@ -30,40 +25,6 @@ export default {
   data: () => ({ appState: AppStore.state }),
   computed: {
     // exposes the references for the current page
-    references() {
-      const {
-        isFromIncludedArchive,
-        store: {
-          state: { references: originalRefs = {} },
-        },
-      } = this;
-      // strip the `url` key from "topic"/"section" refs if their identifier
-      // comes from an archive that hasn't been included by DocC
-      return Object.keys(originalRefs).reduce((newRefs, id) => {
-        const originalRef = originalRefs[id];
-        const { url, ...refWithoutUrl } = originalRef;
-        return TopicReferenceTypes.has(originalRef.type) ? ({
-          ...newRefs,
-          [id]: isFromIncludedArchive(id) ? originalRefs[id] : refWithoutUrl,
-        }) : ({
-          ...newRefs,
-          [id]: originalRef,
-        });
-      }, {});
-    },
-  },
-  methods: {
-    isFromIncludedArchive(id) {
-      const { includedArchiveIdentifiers = [] } = this.appState;
-      // for backwards compatibility purposes, treat all references as being
-      // from included archives if there is no data for it
-      if (!includedArchiveIdentifiers.length) {
-        return true;
-      }
-
-      return includedArchiveIdentifiers.some(archiveId => (
-        id?.startsWith(`doc://${archiveId}/`)
-      ));
-    },
+    references: ({ store }) => store.state.references,
   },
 };

tests/unit/components/ContentNode/Reference.spec.js

@@ -278,4 +278,84 @@ describe('Reference', () => {
     expect(ref.props('url')).toBe('/downloads/foo.zip');
     expect(ref.text()).toBe('Foo');
   });
+
+  it('inactivates refs as appropriate with non-empty `includedArchiveIdentifiers`', () => {
+    const createWrapper = propsData => shallowMount(Reference, {
+      localVue,
+      router,
+      propsData,
+      slots: { default: propsData.title },
+    });
+    const aa = createWrapper({
+      identifier: 'doc://A/documentation/A/a',
+      url: '/documentation/A/a',
+      title: 'A.A',
+      type: 'topic',
+    });
+    const ab = createWrapper({
+      identifier: 'doc://A/documentation/A/b',
+      url: '/documentation/A/b',
+      title: 'A.B',
+      type: 'topic',
+    });
+    const bb = createWrapper({
+      identifier: 'doc://B/documentation/B/b',
+      url: '/documentation/B/b',
+      title: 'B.B',
+      type: 'topic',
+    });
+    const bbb = createWrapper({
+      identifier: 'doc://BB/documentation/BB/b',
+      url: '/documentation/BB/b#b',
+      title: 'BB.B',
+      type: 'section',
+    });
+    const c = createWrapper({
+      identifier: 'https://abc.dev',
+      url: 'https://abc.dev',
+      title: 'C',
+      type: 'link',
+    });
+
+    expect(aa.find(ReferenceInternal).props('isActive')).toBe(true);
+    expect(ab.find(ReferenceInternal).props('isActive')).toBe(true);
+    expect(bb.find(ReferenceInternal).props('isActive')).toBe(true);
+    expect(bbb.find(ReferenceInternal).props('isActive')).toBe(true);
+    expect(c.find(ReferenceExternal).props('isActive')).toBe(true);
+
+    const allIncluded = {
+      appState: {
+        includedArchiveIdentifiers: ['A', 'B', 'BB'],
+      },
+    };
+    aa.setData(allIncluded);
+    expect(aa.find(ReferenceInternal).props('isActive')).toBe(true);
+    ab.setData(allIncluded);
+    expect(ab.find(ReferenceInternal).props('isActive')).toBe(true);
+    bb.setData(allIncluded);
+    expect(bb.find(ReferenceInternal).props('isActive')).toBe(true);
+    bbb.setData(allIncluded);
+    expect(bbb.find(ReferenceInternal).props('isActive')).toBe(true);
+    c.setData(allIncluded);
+    expect(c.find(ReferenceExternal).props('isActive')).toBe(true);
+
+    // with only the B archive included, only internal links within B should
+    // be active (only bb in this example)
+    // c is an external link so it will also remain active
+    const onlyB = {
+      appState: {
+        includedArchiveIdentifiers: ['B'],
+      },
+    };
+    aa.setData(onlyB);
+    expect(aa.find(ReferenceInternal).props('isActive')).toBe(false);
+    ab.setData(onlyB);
+    expect(ab.find(ReferenceInternal).props('isActive')).toBe(false);
+    bb.setData(onlyB);
+    expect(bb.find(ReferenceInternal).props('isActive')).toBe(true);
+    bbb.setData(onlyB);
+    expect(bbb.find(ReferenceInternal).props('isActive')).toBe(false);
+    c.setData(onlyB);
+    expect(c.find(ReferenceExternal).props('isActive')).toBe(true);
+  });
 });

tests/unit/mixins/referencesProvider.spec.js

@@ -91,43 +91,4 @@ describe('referencesProvider', () => {
     expect(inner.exists()).toBe(true);
     expect(inner.props('references')).toEqual(references);
   });
-
-  it('removes `url` data for refs with non-empty `includedArchiveIdentifiers` app state', () => {
-    // empty `includedArchiveIdentifiers` — no changes to refs
-    const outer = createOuter();
-    let inner = outer.find(FakeComponentInner);
-    expect(inner.exists()).toBe(true);
-    expect(inner.props('references')).toEqual(references);
-
-    // `includedArchiveIdentifiers` contains all refs - no changes to refs
-    outer.setData({
-      appState: {
-        includedArchiveIdentifiers: ['A', 'B', 'BB'],
-      },
-    });
-    inner = outer.find(FakeComponentInner);
-    expect(inner.exists()).toBe(true);
-    expect(inner.props('references')).toEqual(references);
-
-    // `includedArchiveIdentifiers` only contains archive B — remove `url` field
-    // from all non-B refs
-    outer.setData({
-      appState: {
-        includedArchiveIdentifiers: ['B'],
-      },
-    });
-    inner = outer.find(FakeComponentInner);
-    expect(inner.exists()).toBe(true);
-    const refs3 = inner.props('references');
-    expect(refs3).not.toEqual(references);
-    expect(refs3[aa.identifier].title).toBe(aa.title);
-    expect(refs3[aa.identifier].url).toBeFalsy(); // aa `url` is gone now
-    expect(refs3[ab.identifier].title).toBe(ab.title);
-    expect(refs3[ab.identifier].url).toBeFalsy(); // ab `url` is gone now
-    expect(refs3[bb.identifier].title).toBe(bb.title);
-    expect(refs3[bb.identifier].url).toBe(bb.url); // bb still has `url`
-    expect(refs3[bbb.identifier].title).toBe(bbb.title);
-    expect(refs3[bbb.identifier].url).toBeFalsy(); // bbb `url` is gone now
-    expect(refs3[c.identifier].url).toBe(c.url); // external link untouched
-  });
 });