Wrap Declarations in Minimized and IDE mode (#646) rdar://106567892

hqhhuang · Dobromir Hristov · web-flow · commit 43facbe465af · 2023-06-01T18:24:44.000-07:00
* Wrap declarations in minimized and ide mode rdar://106567892

Wrap declarations in minimized and ide mode

* break at any character for long identifiers

break at any character for long identifiers

* Only wrap when no smart wrapping

Only wrap when no smart wrapping

* Update logic for calculating if declaration has multiple lines

Update logic for calculating if declaration has multiple lines

* Use the correct formatted token

Use the correct formatted token

* make distinction bw have vs display multiple lines

* adds a test for `has-multiple-lines`

adds a test for `has-multiple-lines`

* fix logic for window resize

fix logic for window resize

* add comment and clean up logic for `handleWindowResize`

add comment and clean up logic for `handleWindowResize`

* fix test

fix test

---------

Co-authored-by: Dobromir Hristov &lt;dhristov@apple.com&gt;
diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
@@ -731,6 +731,17 @@ export default {
       border-radius: var(--code-border-radius);
     }
 
+    /* wrap declaration only when not using smart wrapping */
+    .source:not(.has-multiple-lines) > code {
+      @include inTargetIde() {
+        white-space: pre-wrap;
+
+        .token-identifier {
+          word-break: break-all;
+        }
+      }
+    }
+
     .single-line {
       border-radius: var(--code-border-radius);
     }
diff --git a/src/components/DocumentationTopic/PrimaryContent/DeclarationGroup.vue b/src/components/DocumentationTopic/PrimaryContent/DeclarationGroup.vue
@@ -72,9 +72,9 @@ export default {
     },
   },
   computed: {
-    classes: ({ changeType, multipleLinesClass, hasMultipleLinesAfterAPIChanges }) => ({
+    classes: ({ changeType, multipleLinesClass, displaysMultipleLinesAfterAPIChanges }) => ({
       [`declaration-group--changed declaration-group--${changeType}`]: changeType,
-      [multipleLinesClass]: hasMultipleLinesAfterAPIChanges,
+      [multipleLinesClass]: displaysMultipleLinesAfterAPIChanges,
     }),
     caption() {
       return this.declaration.platforms.join(', ');
diff --git a/src/components/DocumentationTopic/PrimaryContent/DeclarationSource.vue b/src/components/DocumentationTopic/PrimaryContent/DeclarationSource.vue
@@ -12,7 +12,7 @@
   <pre
     ref="declarationGroup"
     class="source"
-    :class="{ [multipleLinesClass]: hasMultipleLines }"
+    :class="{ [multipleLinesClass]: displaysMultipleLines, 'has-multiple-lines': hasMultipleLines }"
   ><CodeBlock ref="code"><Token
     v-for="(token, i) in formattedTokens"
     :key="i"
@@ -21,7 +21,7 @@
 
 <script>
 import { indentDeclaration } from 'docc-render/utils/indentation';
-import { hasMultipleLines } from 'docc-render/utils/multipleLines';
+import { displaysMultipleLines } from 'docc-render/utils/multipleLines';
 import { multipleLinesClass } from 'docc-render/constants/multipleLines';
 import { getSetting } from 'docc-render/utils/theme-settings';
 import Language from 'docc-render/constants/Language';
@@ -36,7 +36,7 @@ export default {
   name: 'DeclarationSource',
   data() {
     return {
-      hasMultipleLines: false,
+      displaysMultipleLines: false,
       multipleLinesClass,
     };
   },
@@ -182,6 +182,14 @@ export default {
 
       return newTokens;
     },
+    hasMultipleLines({ formattedTokens }) {
+      return formattedTokens.reduce((lineCount, tokens, idx) => {
+        let REGEXP = /\n/g;
+        if (idx === formattedTokens.length - 1) REGEXP = /\n(?!$)/g;
+        if (!tokens.text) return lineCount; // handles TokenKind add & changed
+        return lineCount + (tokens.text.match(REGEXP) || []).length;
+      }, 1) >= 2;
+    },
   },
   methods: {
     propsFor(token) {
@@ -192,13 +200,20 @@ export default {
         tokens: token.tokens,
       };
     },
+    handleWindowResize() {
+      this.displaysMultipleLines = displaysMultipleLines(this.$refs.declarationGroup);
+    },
   },
   async mounted() {
+    window.addEventListener('resize', this.handleWindowResize);
     if (this.language === Language.objectiveC.key.api) {
       await this.$nextTick();
       indentDeclaration(this.$refs.code.$el, this.language);
     }
-    if (hasMultipleLines(this.$refs.declarationGroup)) this.hasMultipleLines = true;
+    this.handleWindowResize();
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleWindowResize);
   },
 };
 </script>
@@ -225,7 +240,7 @@ $docs-declaration-source-border-width: 1px !default;
   // the scrollbar is not clipped by this element depending on its border-radius
   @include new-stacking-context;
 
-  &.has-multiple-lines {
+  &.displays-multiple-lines {
     border-radius: $border-radius;
   }
 
diff --git a/src/components/DocumentationTopic/RelationshipsList.vue b/src/components/DocumentationTopic/RelationshipsList.vue
@@ -68,13 +68,13 @@ export default {
     };
   },
   computed: {
-    classes({ changeType, multipleLinesClass, hasMultipleLinesAfterAPIChanges }) {
+    classes({ changeType, multipleLinesClass, displaysMultipleLinesAfterAPIChanges }) {
       return [
         {
           inline: this.shouldDisplayInline,
           column: !this.shouldDisplayInline,
           [`changed changed-${changeType}`]: !!changeType,
-          [multipleLinesClass]: hasMultipleLinesAfterAPIChanges,
+          [multipleLinesClass]: displaysMultipleLinesAfterAPIChanges,
         },
       ];
     },
diff --git a/src/components/DocumentationTopic/TopicsLinkBlock.vue b/src/components/DocumentationTopic/TopicsLinkBlock.vue
@@ -148,11 +148,11 @@ export default {
     linkBlockClasses: ({
       changesClasses,
       hasAbstractElements,
-      hasMultipleLinesAfterAPIChanges,
+      displaysMultipleLinesAfterAPIChanges,
       multipleLinesClass,
     }) => ({
       'has-inline-element': !hasAbstractElements,
-      [multipleLinesClass]: hasMultipleLinesAfterAPIChanges,
+      [multipleLinesClass]: displaysMultipleLinesAfterAPIChanges,
       /*
        * The following display the "changes" highlight styles
        * on the parent div (this one) when there is not an abstract
diff --git a/src/constants/multipleLines.js b/src/constants/multipleLines.js
@@ -1,12 +1,12 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2023 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
 */
 
 // eslint-disable-next-line import/prefer-default-export
-export const multipleLinesClass = 'has-multiple-lines';
+export const multipleLinesClass = 'displays-multiple-lines';
diff --git a/src/mixins/apiChangesHelpers.js b/src/mixins/apiChangesHelpers.js
@@ -10,7 +10,7 @@
 
 import { ChangeNames } from 'docc-render/constants/Changes';
 import { multipleLinesClass } from 'docc-render/constants/multipleLines';
-import { hasMultipleLines } from 'docc-render/utils/multipleLines';
+import { displaysMultipleLines } from 'docc-render/utils/multipleLines';
 
 const latestPrefix = 'latest_';
 
@@ -28,10 +28,10 @@ export const APIChangesMultipleLines = {
     };
   },
   computed: {
-    hasMultipleLinesAfterAPIChanges: ({ change, changeType, $refs }) => {
+    displaysMultipleLinesAfterAPIChanges: ({ change, changeType, $refs }) => {
       if (!change && !changeType) return false;
 
-      return hasMultipleLines($refs.apiChangesDiff);
+      return displaysMultipleLines($refs.apiChangesDiff);
     },
   },
 };
diff --git a/src/styles/base/_changes.scss b/src/styles/base/_changes.scss
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2023 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
@@ -19,7 +19,7 @@
   border-radius: $large-border-radius;
   position: relative;
 
-  &.has-multiple-lines, .has-multiple-lines & {
+  &.displays-multiple-lines, .displays-multiple-lines & {
     border-radius: $border-radius;
   }
 
diff --git a/src/utils/multipleLines.js b/src/utils/multipleLines.js
@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2023 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
@@ -14,7 +14,7 @@
  * @returns {Boolean}
  */
 // eslint-disable-next-line import/prefer-default-export
-export function hasMultipleLines(el) {
+export function displaysMultipleLines(el) {
   if (!el) return false;
 
   const computedStyle = window.getComputedStyle(el.$el || el);
diff --git a/tests/unit/components/DocumentationTopic/PrimaryContent/DeclarationGroup.spec.js b/tests/unit/components/DocumentationTopic/PrimaryContent/DeclarationGroup.spec.js
@@ -80,12 +80,12 @@ describe('DeclarationGroup', () => {
     expect(srcComponent.props('language')).toEqual('swift');
   });
 
-  it('applies the `multipleLinesClass` class if `hasMultipleLinesAfterAPIChanges` is true', () => {
+  it('applies the `multipleLinesClass` class if `displaysMultipleLinesAfterAPIChanges` is true', () => {
     const wrapper = shallowMount({
       ...DeclarationGroup,
       computed: {
         ...DeclarationGroup.computed,
-        hasMultipleLinesAfterAPIChanges: () => true,
+        displaysMultipleLinesAfterAPIChanges: () => true,
       },
     },
     {
diff --git a/tests/unit/components/DocumentationTopic/PrimaryContent/DeclarationSource.spec.js b/tests/unit/components/DocumentationTopic/PrimaryContent/DeclarationSource.spec.js
@@ -12,7 +12,7 @@ import { shallowMount } from '@vue/test-utils';
 import DeclarationSource
   from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationSource.vue';
 import { multipleLinesClass } from 'docc-render/constants/multipleLines';
-import { hasMultipleLines } from 'docc-render/utils/multipleLines';
+import { displaysMultipleLines } from 'docc-render/utils/multipleLines';
 import { themeSettingsState } from 'docc-render/utils/theme-settings';
 import { indentDeclaration } from 'docc-render/utils/indentation';
 import Language from '@/constants/Language';
@@ -24,7 +24,7 @@ const { TokenKind } = Token.constants;
 jest.mock('@/utils/indentation');
 jest.mock('@/utils/multipleLines');
 
-hasMultipleLines.mockImplementation(() => false);
+displaysMultipleLines.mockImplementation(() => false);
 
 describe('DeclarationSource', () => {
   let wrapper;
@@ -81,21 +81,102 @@ describe('DeclarationSource', () => {
     });
   });
 
-  it('applies the `multipleLinesClass` class if declaration group has multiple lines', async () => {
-    expect(wrapper.vm.hasMultipleLines).toBe(false);
+  it('applies the `multipleLinesClass` class if declaration group displays multiple lines', async () => {
+    expect(wrapper.find({ ref: 'declarationGroup' }).classes()).not.toContain(multipleLinesClass);
 
-    hasMultipleLines.mockResolvedValue(true);
+    displaysMultipleLines.mockResolvedValue(true);
     wrapper = shallowMount(DeclarationSource, { propsData });
-    expect(wrapper.vm.hasMultipleLines).toBe(true);
-
     await wrapper.vm.$nextTick();
     expect(wrapper.find({ ref: 'declarationGroup' }).classes()).toContain(multipleLinesClass);
   });
 
-  it('runs the hasMultipleLines, after `indentDeclaration` for ObjC code', async () => {
+  it('applies the `has-multiple-lines` class if declaration group has multiple lines regardless of window width', async () => {
+    const multiLineDeclaration = {
+      tokens: [
+        {
+          kind: TokenKind.keyword,
+          text: 'func',
+        },
+        {
+          kind: TokenKind.text,
+          text: ' ',
+        },
+        {
+          kind: TokenKind.identifier,
+          text: 'Foo',
+        },
+        {
+          kind: TokenKind.text,
+          text: '(\n',
+        },
+        {
+          kind: TokenKind.externalParam,
+          text: '_',
+        },
+        {
+          kind: TokenKind.text,
+          text: ' ',
+        },
+        {
+          kind: TokenKind.internalParam,
+          text: 'Bar',
+        },
+        {
+          kind: TokenKind.text,
+          text: ': ',
+        },
+        {
+          kind: TokenKind.typeIdentifier,
+          text: 'Self',
+        },
+        {
+          kind: TokenKind.text,
+          text: '.',
+        },
+        {
+          kind: TokenKind.typeIdentifier,
+          text: 'FooBar',
+        },
+        {
+          kind: TokenKind.text,
+          text: ',\n',
+        },
+        {
+          kind: TokenKind.externalParam,
+          text: 'context',
+        },
+        {
+          kind: TokenKind.text,
+          text: ': ',
+        },
+        {
+          kind: TokenKind.typeIdentifier,
+          text: 'Self',
+        },
+        {
+          kind: TokenKind.text,
+          text: '.',
+        },
+        {
+          kind: TokenKind.typeIdentifier,
+          text: 'Context',
+        },
+        {
+          kind: TokenKind.text,
+          text: ')',
+        },
+      ],
+    };
+
+    wrapper = shallowMount(DeclarationSource, { propsData: multiLineDeclaration });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find({ ref: 'declarationGroup' }).classes()).toContain('has-multiple-lines');
+  });
+
+  it('runs the displaysMultipleLines, after `indentDeclaration` for ObjC code', async () => {
     const callStack = [];
-    hasMultipleLines.mockImplementationOnce(() => {
-      callStack.push('hasMultipleLines');
+    displaysMultipleLines.mockImplementationOnce(() => {
+      callStack.push('displaysMultipleLines');
       return true;
     });
     indentDeclaration.mockImplementationOnce(() => callStack.push('indentDeclaration'));
@@ -110,7 +191,7 @@ describe('DeclarationSource', () => {
     expect(indentDeclaration).toHaveBeenCalledTimes(1);
     expect(indentDeclaration)
       .toHaveBeenCalledWith(wrapper.find({ ref: 'code' }).vm.$el, Language.objectiveC.key.api);
-    expect(callStack).toEqual(['indentDeclaration', 'hasMultipleLines']);
+    expect(callStack).toEqual(['indentDeclaration', 'displaysMultipleLines']);
   });
 });
 
diff --git a/tests/unit/components/DocumentationTopic/RelationshipsList.spec.js b/tests/unit/components/DocumentationTopic/RelationshipsList.spec.js
@@ -80,12 +80,12 @@ describe('RelationshipsList', () => {
     expect(wrapper.classes('inline')).toBe(false);
   });
 
-  it('applies the `multipleLinesClass` class if `hasMultipleLinesAfterAPIChanges` is true', () => {
+  it('applies the `multipleLinesClass` class if `displaysMultipleLinesAfterAPIChanges` is true', () => {
     wrapper = shallowMount({
       ...RelationshipsList,
       computed: {
         ...RelationshipsList.computed,
-        hasMultipleLinesAfterAPIChanges: () => true,
+        displaysMultipleLinesAfterAPIChanges: () => true,
       },
     },
     {
diff --git a/tests/unit/components/DocumentationTopic/TopicsLinkBlock.spec.js b/tests/unit/components/DocumentationTopic/TopicsLinkBlock.spec.js
@@ -250,12 +250,12 @@ describe('TopicsLinkBlock', () => {
     expect(wrapper.find(ContentNode).exists()).toBe(false);
   });
 
-  it('applies the `multipleLinesClass` class if `hasMultipleLinesAfterAPIChanges` is true', () => {
+  it('applies the `multipleLinesClass` class if `displaysMultipleLinesAfterAPIChanges` is true', () => {
     wrapper = shallowMount({
       ...TopicsLinkBlock,
       computed: {
         ...TopicsLinkBlock.computed,
-        hasMultipleLinesAfterAPIChanges: () => true,
+        displaysMultipleLinesAfterAPIChanges: () => true,
       },
     },
     {
diff --git a/tests/unit/mixins/apiChangesHelpers.spec.js b/tests/unit/mixins/apiChangesHelpers.spec.js
diff --git a/tests/unit/utils/multipleLines.spec.js b/tests/unit/utils/multipleLines.spec.js

Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,12 @@`
`1`	`1`	`/**`
`2`	`2`	`* This source file is part of the Swift.org open source project`
`3`	`3`	`*`
`4`		`- * Copyright (c) 2021 Apple Inc. and the Swift project authors`
	`4`	`+ * Copyright (c) 2021-2023 Apple Inc. and the Swift project authors`
`5`	`5`	`* Licensed under Apache License v2.0 with Runtime Library Exception`
`6`	`6`	`*`
`7`	`7`	`* See https://swift.org/LICENSE.txt for license information`
`8`	`8`	`* See https://swift.org/CONTRIBUTORS.txt for Swift project authors`
`9`	`9`	`*/`
`10`	`10`
`11`	`11`	`// eslint-disable-next-line import/prefer-default-export`
`12`		`-export const multipleLinesClass = 'has-multiple-lines';`
	`12`	`+export const multipleLinesClass = 'displays-multiple-lines';`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`/**`
`2`	`2`	`* This source file is part of the Swift.org open source project`
`3`	`3`	`*`
`4`		`- * Copyright (c) 2021 Apple Inc. and the Swift project authors`
	`4`	`+ * Copyright (c) 2021-2023 Apple Inc. and the Swift project authors`
`5`	`5`	`* Licensed under Apache License v2.0 with Runtime Library Exception`
`6`	`6`	`*`
`7`	`7`	`* See https://swift.org/LICENSE.txt for license information`
`@@ -19,7 +19,7 @@`
`19`	`19`	`border-radius: $large-border-radius;`
`20`	`20`	`position: relative;`
`21`	`21`
`22`		`- &.has-multiple-lines, .has-multiple-lines & {`
	`22`	`+ &.displays-multiple-lines, .displays-multiple-lines & {`
`23`	`23`	`border-radius: $border-radius;`
`24`	`24`	`}`
`25`	`25`