[5.9] Support linkable attribute tokens

src/components/DocumentationTopic/PrimaryContent/DeclarationToken.vue

@@ -11,9 +11,9 @@
 <script>
 import WordBreak from 'docc-render/components/WordBreak.vue';
 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 TypeIdentifierLink from './DeclarationToken/TypeIdentifierLink.vue';
 
 const TokenKind = {
   attribute: 'attribute',
@@ -46,10 +46,26 @@ export default {
     }
     case TokenKind.typeIdentifier: {
       const props = { identifier: this.identifier };
-      return createElement(TypeIdentifierLink, { props }, [
+      return createElement(LinkableToken, {
+        class: 'type-identifier-link',
+        props,
+      }, [
         createElement(WordBreak, text),
       ]);
     }
+    case TokenKind.attribute: {
+      const { identifier } = this;
+      return identifier ? (
+        createElement(LinkableToken, {
+          class: 'attribute-link',
+          props: { identifier },
+        }, [
+          createElement(WordBreak, text),
+        ])
+      ) : (
+        createElement(SyntaxToken, { props: { kind, text } })
+      );
+    }
     case TokenKind.added:
     case TokenKind.removed:
       return createElement(ChangedToken, { props: { tokens, kind } });
@@ -110,7 +126,8 @@ export default {
   color: var(--syntax-string, var(--color-syntax-strings));
 }
 
-.token-attribute {
+.token-attribute,
+.attribute-link {
   color: var(--syntax-attribute, var(--color-syntax-keywords));
 }
 

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

@@ -14,15 +14,13 @@ import Reference from 'docc-render/components/ContentNode/Reference.vue';
 import referencesProvider from 'docc-render/mixins/referencesProvider';
 
 export default {
-  name: 'TypeIdentifierLink',
+  name: 'LinkableToken',
   mixins: [referencesProvider],
   render(createElement) {
-    const klass = 'type-identifier-link';
     const reference = this.references[this.identifier];
     // internal and external link
     if (reference && reference.url) {
       return createElement(Reference, {
-        class: klass,
         props: {
           url: reference.url,
           kind: reference.kind,
@@ -33,9 +31,7 @@ export default {
       ));
     }
     // unresolved link, use span tag
-    return createElement('span', {
-      class: klass,
-    }, (
+    return createElement('span', {}, (
       this.$slots.default
     ));
   },

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

@@ -15,8 +15,8 @@ import DeclarationToken from 'docc-render/components/DocumentationTopic/PrimaryC
 import RawText from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationToken/RawText.vue';
 import SyntaxToken
   from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationToken/SyntaxToken.vue';
-import TypeIdentifierLink
-  from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationToken/TypeIdentifierLink.vue';
+import LinkableToken
+  from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationToken/LinkableToken.vue';
 import WordBreak from 'docc-render/components/WordBreak.vue';
 
 const { TokenKind } = DeclarationToken.constants;
@@ -36,19 +36,20 @@ describe('DeclarationToken', () => {
     expect(rawText.props()).toEqual({ text: propsData.text });
   });
 
-  it('renders a `TypeIdentifierLink` for `typeIdentifier` tokens', () => {
+  it('renders a `LinkableToken` for `typeIdentifier` tokens', () => {
     const propsData = {
       kind: TokenKind.typeIdentifier,
       identifier: 'foo',
       text: 'foo',
     };
     const wrapper = mountToken({ propsData });
 
-    const link = wrapper.find(TypeIdentifierLink);
+    const link = wrapper.find(LinkableToken);
     expect(link.exists()).toBe(true);
     expect(link.props()).toEqual({ identifier: propsData.identifier });
     expect(link.contains(WordBreak)).toBe(true);
     expect(link.text()).toBe(propsData.text);
+    expect(link.classes()).toContain('type-identifier-link');
   });
 
   it('renders a `SyntaxToken` for other tokens', () => {
@@ -97,4 +98,31 @@ describe('DeclarationToken', () => {
     expect(token.props('tokens')).toEqual(propsData.tokens);
     expect(token.props('kind')).toEqual(propsData.kind);
   });
+
+  it('renders a `SyntaxToken` for basic `attribute` tokens', () => {
+    const propsData = {
+      kind: TokenKind.attribute,
+      text: '@foo',
+    };
+    const wrapper = mountToken({ propsData });
+    const token = wrapper.find(SyntaxToken);
+    expect(token.exists()).toBe(true);
+    expect(token.props('kind')).toBe(TokenKind.attribute);
+    expect(token.props('text')).toBe(propsData.text);
+  });
+
+  it('renders a `LinkableToken` for `attribute` tokens with an `identifier`', () => {
+    const propsData = {
+      kind: TokenKind.attribute,
+      identifier: 'foo',
+      text: '@foo',
+    };
+    const wrapper = mountToken({ propsData });
+    const link = wrapper.find(LinkableToken);
+    expect(link.exists()).toBe(true);
+    expect(link.props()).toEqual({ identifier: propsData.identifier });
+    expect(link.contains(WordBreak)).toBe(true);
+    expect(link.text()).toBe(propsData.text);
+    expect(link.classes()).toContain('attribute-link');
+  });
 });

tests/unit/components/DocumentationTopic/PrimaryContent/DeclarationToken/TypeIdentifierLink.spec.js → tests/unit/components/DocumentationTopic/PrimaryContent/DeclarationToken/LinkableToken.spec.js

@@ -9,11 +9,11 @@
 */
 
 import { shallowMount } from '@vue/test-utils';
-import TypeIdentifierLink
-  from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationToken/TypeIdentifierLink.vue';
+import LinkableToken
+  from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationToken/LinkableToken.vue';
 import Reference from 'docc-render/components/ContentNode/Reference.vue';
 
-describe('TypeIdentifierLink', () => {
+describe('LinkableToken', () => {
   const foo = {
     identifier: 'foo',
     title: 'Foo',
@@ -46,13 +46,13 @@ describe('TypeIdentifierLink', () => {
   };
 
   it('renders a span for unresolved references', () => {
-    const wrapper = shallowMount(TypeIdentifierLink, defaultOpts);
-    expect(wrapper.is('span.type-identifier-link')).toBe(true);
+    const wrapper = shallowMount(LinkableToken, defaultOpts);
+    expect(wrapper.is('span')).toBe(true);
     expect(wrapper.text()).toBe(foo.title);
   });
 
   it('renders a link for resolved references', () => {
-    const wrapper = shallowMount(TypeIdentifierLink, {
+    const wrapper = shallowMount(LinkableToken, {
       ...defaultOpts,
       provide: {
         store: {
@@ -65,10 +65,8 @@ describe('TypeIdentifierLink', () => {
       },
     });
 
-    expect(wrapper.is('.type-identifier-link')).toBe(true);
     const link = wrapper.find(Reference);
     expect(link.exists()).toBe(true);
-    expect(link.classes('type-identifier-link')).toBe(true);
     expect(link.props('url')).toBe(foo.url);
     expect(link.text()).toBe(foo.title);
   });