Highlight unique components of overloaded declarations [alternate approach] (#875) rdar://117503463

Highlight unique components of overloaded declarations [alternate approach] (#875) rdar://117503463

---------

Co-authored-by: Vera Mitchell <[email protected]>
Co-authored-by: Marcus Ortiz <[email protected]>

Author: 3 people

src/components/DocumentationTopic/PrimaryContent/DeclarationList.vue

@@ -180,6 +180,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;
+  }
 }
 
 @include changedStyles {

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

@@ -14,7 +14,6 @@ import ChangedToken from './DeclarationToken/ChangedToken.vue';
 import LinkableToken from './DeclarationToken/LinkableToken.vue';
 import RawText from './DeclarationToken/RawText.vue';
 import SyntaxToken from './DeclarationToken/SyntaxToken.vue';
-import Highlighted from './DeclarationToken/Highlighted.vue';
 
 const TokenKind = {
   attribute: 'attribute',
@@ -28,7 +27,6 @@ const TokenKind = {
   string: 'string',
   text: 'text',
   typeIdentifier: 'typeIdentifier',
-  highlightDiff: 'highlightDiff',
   added: 'added',
   removed: 'removed',
 };
@@ -71,10 +69,6 @@ export default {
     case TokenKind.added:
     case TokenKind.removed:
       return createElement(ChangedToken, { props: { tokens, kind } });
-    case TokenKind.highlightDiff:
-      return createElement(Highlighted, {}, (tokens || []).map(token => (
-        _render.bind(token)(createElement)
-      )));
     default: {
       const props = {
         kind,

src/components/DocumentationTopic/PrimaryContent/DeclarationToken/Highlighted.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/components/DocumentationTopic/PrimaryContent/DeclarationToken/RawText.vue

@@ -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/DeclarationSource.spec.js

@@ -18,8 +18,6 @@ import SyntaxToken
 import LinkableToken
   from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationToken/LinkableToken.vue';
 import WordBreak from 'docc-render/components/WordBreak.vue';
-import Highlighted
-  from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationToken/Highlighted.vue';
 
 const { TokenKind } = DeclarationToken.constants;
 
@@ -60,7 +58,6 @@ describe('DeclarationToken', () => {
     otherKinds.delete(TokenKind.typeIdentifier);
     otherKinds.delete(TokenKind.removed);
     otherKinds.delete(TokenKind.added);
-    otherKinds.delete(TokenKind.highlightDiff);
 
     otherKinds.forEach((kind) => {
       const propsData = { kind, text: 'foo' };
@@ -128,29 +125,4 @@ describe('DeclarationToken', () => {
     expect(link.text()).toBe(propsData.text);
     expect(link.classes()).toContain('attribute-link');
   });
-
-  it('renders a `Highlighted` for `highlightDiff` tokens', () => {
-    const stubs = { RawText };
-    const propsData = {
-      kind: TokenKind.highlightDiff,
-      tokens: [
-        {
-          kind: TokenKind.text,
-          text: 'foo',
-        },
-        {
-          kind: TokenKind.text,
-          text: 'bar',
-        },
-      ],
-    };
-    const wrapper = mountToken({ propsData, stubs });
-    const highlighted = wrapper.find(Highlighted);
-    expect(highlighted.exists()).toBe(true);
-
-    const textTokens = highlighted.findAll(RawText);
-    expect(textTokens.length).toBe(propsData.tokens.length);
-    expect(textTokens.at(0).props('text')).toBe(propsData.tokens[0].text);
-    expect(textTokens.at(1).props('text')).toBe(propsData.tokens[1].text);
-  });
 });

tests/unit/components/DocumentationTopic/PrimaryContent/DeclarationToken.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);
   });