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

* 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 <[email protected]>

Author: hqhhuang

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);
     }

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(', ');

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;
   }
 

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,
         },
       ];
     },

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

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';

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);
     },
   },
 };

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;
   }
 

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);

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,
       },
     },
     {