Highlight unique components of overloaded declarations [alternate approach]

src/components/DocumentationTopic/PrimaryContent/DeclarationList.vue

@@ -218,7 +218,7 @@ export default {
     border-color: var(--color-focus-border-color, var(--color-focus-border-color));
   }
 
-  :not(.selected-declaration) {
+  .source:not(.selected-declaration) {
     background: unset;
   }
 
@@ -233,6 +233,14 @@ export default {
       margin: 0;
     }
   }
+
+  :deep(.highlighted) {
+    background: var(--color-syntax-highlighted, mark);
+    font-weight: $font-weight-semibold;
+    transition:
+      background 0.3s linear,
+      font-weight 0.3s linear;
+  }
 }
 
 .source {

src/components/DocumentationTopic/PrimaryContent/DeclarationSource.vue

@@ -16,6 +16,7 @@
   ><CodeBlock ref="code"><Token
     v-for="(token, i) in formattedTokens"
     :key="i"
+    :class="extraClassesFor(token)"
     v-bind="propsFor(token)" /></CodeBlock></pre>
 </template>
 
@@ -32,6 +33,12 @@ const { TokenKind } = DeclarationToken.constants;
 
 const DEFAULT_INDENTATION_WIDTH = 4;
 
+const HighlightKind = {
+  added: 'added',
+  changed: 'changed',
+  removed: 'removed',
+};
+
 export default {
   name: 'DeclarationSource',
   data() {
@@ -41,6 +48,7 @@ export default {
     };
   },
   components: { Token: DeclarationToken, CodeBlock },
+  constants: { HighlightKind },
   props: {
     tokens: {
       type: Array,
@@ -203,6 +211,11 @@ export default {
     handleWindowResize() {
       this.displaysMultipleLines = displaysMultipleLines(this.$refs.declarationGroup);
     },
+    extraClassesFor(token) {
+      return {
+        highlighted: token.highlight === HighlightKind.changed,
+      };
+    },
   },
   async mounted() {
     window.addEventListener('resize', this.handleWindowResize);

src/components/DocumentationTopic/PrimaryContent/DeclarationToken.vue

@@ -33,7 +33,7 @@ const TokenKind = {
 
 export default {
   name: 'DeclarationToken',
-  render(createElement) {
+  render: function _render(createElement) {
     const {
       kind,
       text,

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

@@ -7,21 +7,13 @@
   See https://swift.org/LICENSE.txt for license information
   See https://swift.org/CONTRIBUTORS.txt for Swift project authors
 -->
+<template>
+  <span>{{text}}</span>
+</template>
 
 <script>
-// This component is an optimization that allows us to emit raw text DOM nodes
-// for simple text tokens that have no need for a wrapper element. This uses a
-// private Vue API (`this._v`) and falls back to adding an empty <span> tag if
-// that API goes away in the future.
 export default {
   name: 'RawText',
-  render(createElement) {
-    const {
-      _v: createTextNode = str => createElement('span', str),
-      text,
-    } = this;
-    return createTextNode(text);
-  },
   props: {
     text: {
       type: String,

src/styles/core/colors/_dark.scss

@@ -63,6 +63,7 @@
   --color-syntax-comments: rgb(127, 140, 152);
   --color-syntax-documentation-markup: rgb(127, 140, 152);
   --color-syntax-documentation-markup-keywords: rgb(163, 177, 191);
+  --color-syntax-highlighted: rgba(0, 113, 227, 0.6);
   --color-syntax-keywords: rgb(255, 122, 178);
   --color-syntax-marks: rgb(255, 255, 255);
   --color-syntax-numbers: rgb(217, 201, 124);

src/styles/core/colors/_light.scss

@@ -152,6 +152,7 @@
   --color-syntax-documentation-markup: rgb(80, 99, 117);
   --color-syntax-documentation-markup-keywords: rgb(80, 99, 117);
   --color-syntax-heading: rgb(186, 45, 162);
+  --color-syntax-highlighted: rgba(0, 113, 227, 0.2);
   --color-syntax-keywords: rgb(173, 61, 164);
   --color-syntax-marks: rgb(0, 0, 0);
   --color-syntax-numbers: rgb(39, 42, 216);

tests/unit/components/DocumentationTopic/PrimaryContent/DeclarationSource.spec.js

@@ -19,6 +19,7 @@ import Language from '@/constants/Language';
 import { flushPromises } from '../../../../../test-utils';
 
 const { Token, CodeBlock } = DeclarationSource.components;
+const { HighlightKind } = DeclarationSource.constants;
 const { TokenKind } = Token.constants;
 
 jest.mock('@/utils/indentation');
@@ -193,6 +194,20 @@ describe('DeclarationSource', () => {
       .toHaveBeenCalledWith(wrapper.find({ ref: 'code' }).vm.$el, Language.objectiveC.key.api);
     expect(callStack).toEqual(['indentDeclaration', 'displaysMultipleLines']);
   });
+
+  it('adds a "highlighted" class for tokens with `highlight="changed"`', () => {
+    expect(wrapper.findAll('.highlighted').length).toBe(0);
+
+    const tokensWithHighlights = [...propsData.tokens];
+    tokensWithHighlights[0].highlight = HighlightKind.changed;
+    tokensWithHighlights[2].highlight = HighlightKind.changed;
+    wrapper.setProps({ tokens: tokensWithHighlights });
+
+    const highlightedTokens = wrapper.findAll('.highlighted');
+    expect(highlightedTokens.length).toBe(2);
+    expect(highlightedTokens.at(0).props('text')).toBe(propsData.tokens[0].text);
+    expect(highlightedTokens.at(1).props('text')).toBe(propsData.tokens[2].text);
+  });
 });
 
 describe('Swift function/initializer formatting', () => {

tests/unit/components/DocumentationTopic/PrimaryContent/DeclarationToken/RawText.spec.js

@@ -14,19 +14,8 @@ import RawText from 'docc-render/components/DocumentationTopic/PrimaryContent/De
 describe('RawText', () => {
   const propsData = { text: 'foo' };
 
-  it('renders a raw text node', () => {
+  it('renders a span', () => {
     const wrapper = shallowMount(RawText, { propsData });
-    expect(wrapper.find('span').exists()).toBe(false);
-    expect(wrapper.text()).toBe(propsData.text);
-  });
-
-  it('renders a span with the text if private Vue API is not available', () => {
-    const wrapper = shallowMount(RawText, {
-      propsData,
-      mocks: {
-        _v: undefined, // `this._v` is private Vue API
-      },
-    });
     expect(wrapper.is('span')).toBe(true);
     expect(wrapper.text()).toBe(propsData.text);
   });