feat(schema/api-ref): spread support for inference nodes

scopes/api-reference/renderers/inference-type/inference-type.module.scss

@@ -1,8 +1,15 @@
 .inferenceWrapper {
+  position: relative;
   > pre {
     > code {
       // override syntax highlighter code font size
       font-size: var(--bit-p-xxs, 12px) !important;
     }
   }
 }
+
+.isSpread {
+  > span {
+    font-style: italic;
+  }
+}

scopes/api-reference/renderers/inference-type/inference-type.renderer.tsx

@@ -5,6 +5,8 @@ import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
 import tsxSyntax from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
 import defaultTheme from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
 import classNames from 'classnames';
+import { Tooltip } from '@teambit/design.ui.tooltip';
+
 import styles from './inference-type.module.scss';
 
 SyntaxHighlighter.registerLanguage('tsx', tsxSyntax);
@@ -24,8 +26,9 @@ function InferenceTypeComponent(props: APINodeRenderProps) {
   } = props;
 
   const inferenceTypeNode = api as InferenceTypeSchema;
+  const isSpread = inferenceTypeNode.isSpread;
   const typeToRender = (inferenceTypeNode.type || inferenceTypeNode.name) ?? '';
-  // ugly - but we need to make an educated guess if this is an object or not to decide if we should highlight it or not
+
   const maybeObject = typeToRender.includes('{');
   const disableHighlight = metadata?.[inferenceTypeNode.__schema]?.disableHighlight || !maybeObject;
 
@@ -39,24 +42,48 @@ function InferenceTypeComponent(props: APINodeRenderProps) {
   return (
     <div
       key={`inference-${inferenceTypeNode.name}`}
-      className={classNames(nodeStyles.node, className, styles.inferenceWrapper)}
+      className={classNames(nodeStyles.node, className, styles.inferenceWrapper, isSpread && styles.isSpread)}
     >
-      {!disableHighlight && (
-        <SyntaxHighlighter
-          language={lang}
-          style={defaultTheme}
-          customStyle={{
-            borderRadius: '8px',
-            marginTop: '4px',
-            padding: '8px',
-            fontFamily: 'roboto mono',
-            fontSize: 12,
-          }}
+      {isSpread && (
+        <Tooltip
+          placement={'bottom-end'}
+          content={
+            <SyntaxHighlighter
+              language={lang}
+              style={defaultTheme}
+              customStyle={{
+                borderRadius: '8px',
+                margin: '0',
+                padding: '0',
+                fontFamily: 'roboto mono',
+                fontSize: 11,
+              }}
+            >
+              {typeToRender}
+            </SyntaxHighlighter>
+          }
         >
-          {typeToRender}
-        </SyntaxHighlighter>
+          {`...rest`}
+        </Tooltip>
       )}
-      {disableHighlight && (inferenceTypeNode.type || inferenceTypeNode.name)}
+      {!isSpread &&
+        (!disableHighlight ? (
+          <SyntaxHighlighter
+            language={lang}
+            style={defaultTheme}
+            customStyle={{
+              borderRadius: '8px',
+              marginTop: '4px',
+              padding: '8px',
+              fontFamily: 'roboto mono',
+              fontSize: 12,
+            }}
+          >
+            {typeToRender}
+          </SyntaxHighlighter>
+        ) : (
+          inferenceTypeNode.type || inferenceTypeNode.name
+        ))}
     </div>
   );
 }

scopes/semantics/entities/semantic-schema/schemas/inference-type.ts

@@ -8,7 +8,8 @@ export class InferenceTypeSchema extends SchemaNode {
     readonly location: SchemaLocation,
     readonly type: string,
     readonly name?: string,
-    readonly defaultValue?: string
+    readonly defaultValue?: string,
+    readonly isSpread?: boolean
   ) {
     super();
   }
@@ -25,6 +26,7 @@ export class InferenceTypeSchema extends SchemaNode {
       ...super.toObject(),
       type: this.type,
       defaultValue: this.defaultValue,
+      isSpread: this.isSpread,
     };
   }
 
@@ -33,6 +35,7 @@ export class InferenceTypeSchema extends SchemaNode {
     const type = obj.type;
     const name = obj.name;
     const defaultValue = obj.defaultValue;
-    return new InferenceTypeSchema(location, type, name, defaultValue);
+    const isSpread = obj.isSpread;
+    return new InferenceTypeSchema(location, type, name, defaultValue, isSpread);
   }
 }

scopes/typescript/typescript/transformers/parameter.ts

@@ -100,7 +100,13 @@ export class ParameterTransformer implements SchemaTransformer {
       const info = await context.getQuickInfo(elem.name);
       const parsed = info ? parseTypeFromQuickInfo(info) : elem.getText();
       const defaultValue = elem.initializer ? elem.initializer.getText() : undefined;
-      return new InferenceTypeSchema(context.getLocation(elem.name), parsed, elem.name.getText(), defaultValue);
+      return new InferenceTypeSchema(
+        context.getLocation(elem.name),
+        parsed,
+        elem.name.getText(),
+        defaultValue,
+        Boolean(elem.dotDotDotToken)
+      );
     });
   }
 }

scopes/ui-foundation/uis/side-bar/component-tree/scope-tree-node/scope-tree-node.module.scss

@@ -42,7 +42,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     margin-right: 8px;
-    line-height: 16px;
+    line-height: 115%;
   }
 }