JavaScript: Add JS.Spread for spread and rest syntax (#6436)

* JavaScript: Add `JS.Spread` for spread syntax

This PR introduces a dedicated JS.Spread AST element to properly represent spread syntax in JavaScript/TypeScript, distinguishing it from rest syntax which continues to use the Spread marker.

### What's Covered: Spread Syntax

The JS.Spread AST element now represents spread expressions that expand iterables or objects:

Array spread:
```js
  const arr = [1, 2, 3];
  const expanded = [...arr, 4, 5];  // Spread: expands arr into individual elements
```

Object spread:
```js
  const obj = { a: 1 };
  const merged = { ...obj, b: 2 };  // Spread: expands obj properties
```

Function call spread:
```js
  const args = [1, 2, 3];
  fn(...args);  // Spread: expands args as individual arguments
```

### What's NOT Covered: Rest Syntax

Rest syntax (collecting elements into a single binding) continues to use the Spread marker since it's fundamentally different - it's a destructuring/binding pattern, not an expression operation:

Function parameter rest:
```js
  function fn(first, ...rest) {}  // Rest: collects remaining args into array
```

Array destructuring rest:
```js
  const [first, ...rest] = arr;  // Rest: collects remaining elements
```

Object destructuring rest:
```js
  const { a, ...rest } = obj;  // Rest: collects remaining properties
```

### Why the Distinction Matters

- Type semantics: Spread expressions have different types than the original (...arr produces individual elements, not an array)
- AST ownership: The ... prefix now lives on the JS.Spread element itself, following the rule that whitespace/prefix belongs on the outermost element
- Visitor pattern: Enables targeted transformations of spread expressions without affecting rest patterns

* Polish

* Also use `JS.Spread` for rest collection syntax

* Revert accidental change

Author: knutwannheden

rewrite-javascript/rewrite/src/javascript/comparator.ts

@@ -852,9 +852,20 @@ export class JavaScriptComparatorVisitor extends JavaScriptVisitor<J> {
         return this.visitElement(shebang, other as JS.Shebang);
     }
 
+    /**
+     * Overrides the visitSpread method to compare spread expressions.
+     *
+     * @param spread The spread expression to visit
+     * @param other The other spread expression to compare with
+     * @returns The visited spread expression, or undefined if the visit was aborted
+     */
+    override async visitSpread(spread: JS.Spread, other: J): Promise<J | undefined> {
+        return this.visitElement(spread, other as JS.Spread);
+    }
+
     /**
      * Overrides the visitStatementExpression method to compare statement expressions.
-     * 
+     *
      * @param statementExpression The statement expression to visit
      * @param other The other statement expression to compare with
      * @returns The visited statement expression, or undefined if the visit was aborted

rewrite-javascript/rewrite/src/javascript/format/format.ts

@@ -238,12 +238,8 @@ export class SpacesVisitor<P> extends JavaScriptVisitor<P> {
                 // Apply afterComma rule to elements after the first
                 for (let i = 1; i < draft.elements.length; i++) {
                     const currentWs = draft.elements[i].element.prefix.whitespace;
-                    // Also check for Spread marker with newline (for spread elements the newline is in the marker)
-                    const element = draft.elements[i].element as J;
-                    const spreadMarker = element.markers?.markers?.find(m => m.kind === JS.Markers.Spread) as { prefix: J.Space } | undefined;
-                    const hasNewlineInSpread = spreadMarker?.prefix?.whitespace?.includes("\n");
                     // Preserve original newlines - only adjust spacing when elements are on same line
-                    if (!currentWs.includes("\n") && !hasNewlineInSpread) {
+                    if (!currentWs.includes("\n")) {
                         draft.elements[i].element.prefix.whitespace = this.style.other.afterComma ? " " : "";
                     }
                 }

rewrite-javascript/rewrite/src/javascript/format/tabs-and-indents-visitor.ts

@@ -214,11 +214,6 @@ export class TabsAndIndentsVisitor<P> extends JavaScriptVisitor<P> {
         if (tree.prefix && lastWhitespace(tree.prefix).includes("\n")) {
             return true;
         }
-        // For elements with Spread marker, check the Spread marker's prefix
-        const spreadMarker = tree.markers?.markers?.find(m => m.kind === JS.Markers.Spread) as { prefix: J.Space } | undefined;
-        if (spreadMarker && spaceContainsNewline(spreadMarker.prefix)) {
-            return true;
-        }
         return false;
     }
 
@@ -305,20 +300,8 @@ export class TabsAndIndentsVisitor<P> extends JavaScriptVisitor<P> {
         let result = tree;
         const indentStr = this.indentString(myIndent);
 
-        // Check if the element has a Spread marker - if so, normalize its prefix instead
-        const spreadMarker = result.markers?.markers?.find(m => m.kind === JS.Markers.Spread) as { prefix: J.Space } | undefined;
-        if (spreadMarker && spaceContainsNewline(spreadMarker.prefix)) {
-            const normalizedPrefix = normalizeSpaceIndent(spreadMarker.prefix, indentStr);
-            if (normalizedPrefix !== spreadMarker.prefix) {
-                result = produce(result, draft => {
-                    const spreadIdx = draft.markers.markers.findIndex(m => m.kind === JS.Markers.Spread);
-                    if (spreadIdx !== -1) {
-                        (draft.markers.markers[spreadIdx] as any).prefix = normalizedPrefix;
-                    }
-                });
-            }
-        } else if (result.prefix && spaceContainsNewline(result.prefix)) {
-            // Normalize the entire prefix space including comment suffixes
+        // Normalize the prefix space including comment suffixes
+        if (result.prefix && spaceContainsNewline(result.prefix)) {
             const normalizedPrefix = normalizeSpaceIndent(result.prefix, indentStr);
             if (normalizedPrefix !== result.prefix) {
                 result = produce(result, draft => {
@@ -617,19 +600,19 @@ export class TabsAndIndentsVisitor<P> extends JavaScriptVisitor<P> {
     }
 
     /**
-     * Check if an element is a spread - either directly marked with Spread marker,
-     * or a PropertyAssignment whose name has a Spread marker (for object spreads).
+     * Check if an element is a spread - either a JS.Spread element
+     * or a PropertyAssignment wrapping a spread.
      */
     private isSpreadElement(element: J): boolean {
-        // Direct spread marker on element
-        if (findMarker(element, JS.Markers.Spread)) {
+        // JS.Spread AST element (for spread/rest expressions like `...arr`, `...obj`, `...args`)
+        if (element.kind === JS.Kind.Spread) {
             return true;
         }
         // PropertyAssignment wrapping a spread (for object spread like `...obj`)
         if (element.kind === JS.Kind.PropertyAssignment) {
             const propAssign = element as JS.PropertyAssignment;
             const nameElement = propAssign.name?.element;
-            if (findMarker(nameElement, JS.Markers.Spread)) {
+            if (nameElement?.kind === JS.Kind.Spread) {
                 return true;
             }
         }

rewrite-javascript/rewrite/src/javascript/markers.ts

@@ -35,7 +35,6 @@ declare module "./tree" {
             readonly Generator: "org.openrewrite.javascript.marker.Generator";
             readonly Optional: "org.openrewrite.javascript.marker.Optional";
             readonly NonNullAssertion: "org.openrewrite.javascript.marker.NonNullAssertion";
-            readonly Spread: "org.openrewrite.javascript.marker.Spread";
             readonly DelegatedYield: "org.openrewrite.javascript.marker.DelegatedYield";
             readonly FunctionDeclaration: "org.openrewrite.javascript.marker.FunctionDeclaration";
         };
@@ -48,7 +47,6 @@ declare module "./tree" {
     DelegatedYield: "org.openrewrite.javascript.marker.DelegatedYield",
     Optional: "org.openrewrite.javascript.marker.Optional",
     NonNullAssertion: "org.openrewrite.javascript.marker.NonNullAssertion",
-    Spread: "org.openrewrite.javascript.marker.Spread",
     FunctionDeclaration: "org.openrewrite.javascript.marker.FunctionDeclaration",
 } as const;
 
@@ -77,11 +75,6 @@ export interface NonNullAssertion extends Marker {
     readonly prefix: J.Space;
 }
 
-export interface Spread extends Marker {
-    readonly kind: typeof JS.Markers.Spread;
-    readonly prefix: J.Space;
-}
-
 export interface FunctionDeclaration extends Marker {
     readonly kind: typeof JS.Markers.FunctionDeclaration;
     readonly prefix: J.Space;
@@ -112,7 +105,6 @@ registerPrefixedMarkerCodec<DelegatedYield>(JS.Markers.DelegatedYield);
 registerPrefixedMarkerCodec<Optional>(JS.Markers.Optional);
 registerPrefixedMarkerCodec<Generator>(JS.Markers.Generator);
 registerPrefixedMarkerCodec<NonNullAssertion>(JS.Markers.NonNullAssertion);
-registerPrefixedMarkerCodec<Spread>(JS.Markers.Spread);
 registerPrefixedMarkerCodec<FunctionDeclaration>(JS.Markers.FunctionDeclaration);
 
 // Register codec for PrettierStyle (a NamedStyles that contains Prettier configuration)

rewrite-javascript/rewrite/src/javascript/parser.ts

@@ -29,7 +29,7 @@ import {
     TypeTree,
     VariableDeclarator,
 } from '../java';
-import {DelegatedYield, FunctionDeclaration, Generator, JS, JSX, NonNullAssertion, Optional, Spread} from '.';
+import {DelegatedYield, FunctionDeclaration, Generator, JS, JSX, NonNullAssertion, Optional} from '.';
 import {emptyMarkers, markers, Markers, MarkersKind, ParseExceptionResult, replaceMarkerByKind} from "../markers";
 import {NamedStyles} from "../style";
 import {Parser, ParserInput, parserInputFile, parserInputRead, ParserOptions, Parsers, SourcePath} from "../parser";
@@ -1028,6 +1028,21 @@ export class JavaScriptParserVisitor {
     }
 
     visitParameter(node: ts.ParameterDeclaration): J.VariableDeclarations {
+        let name: VariableDeclarator = produce(this.convert<VariableDeclarator>(node.name), draft => {
+            draft.markers = this.maybeAddOptionalMarker(draft, node);
+        });
+        if (node.dotDotDotToken) {
+            // Wrap in JS.Spread; prefix between ... and identifier stays on the inner expression
+            const spread: JS.Spread = {
+                kind: JS.Kind.Spread,
+                id: randomId(),
+                prefix: emptySpace,
+                markers: emptyMarkers,
+                expression: name as Expression,
+                type: this.mapType(node)
+            };
+            name = spread;
+        }
         return {
             kind: J.Kind.VariableDeclarations,
             id: randomId(),
@@ -1042,16 +1057,7 @@ export class JavaScriptParserVisitor {
                     id: randomId(),
                     prefix: node.dotDotDotToken ? this.prefix(node.dotDotDotToken) : this.prefix(node.name),
                     markers: emptyMarkers,
-                    name: produce(this.convert<VariableDeclarator>(node.name), draft => {
-                        draft.markers = this.maybeAddOptionalMarker(draft, node);
-                        if (node.dotDotDotToken) {
-                            draft.markers.markers.push({
-                                kind: JS.Markers.Spread,
-                                id: randomId(),
-                                prefix: this.prefix(node.name)
-                            } satisfies Spread as Spread);
-                        }
-                    }),
+                    name: name,
                     dimensionsAfterName: [],
                     initializer: node.initializer && this.leftPadded(this.prefix(node.getChildAt(node.getChildren().indexOf(node.initializer) - 1)), this.visit(node.initializer)),
                     variableType: this.mapVariableType(node)
@@ -1579,14 +1585,16 @@ export class JavaScriptParserVisitor {
         });
     }
 
-    visitRestType(node: ts.RestTypeNode): Expression {
-        return produce(this.convert<Expression>(node.type), draft => {
-            draft.markers.markers.push({
-                kind: JS.Markers.Spread,
-                id: randomId(),
-                prefix: this.prefix(node)
-            } satisfies Spread as Spread);
-        });
+    visitRestType(node: ts.RestTypeNode): JS.Spread {
+        const innerExpr = this.convert<Expression>(node.type);
+        return {
+            kind: JS.Kind.Spread,
+            id: randomId(),
+            prefix: this.prefix(node),
+            markers: emptyMarkers,
+            expression: {...innerExpr, prefix: emptySpace},
+            type: this.mapType(node)
+        };
     }
 
     visitUnionType(node: ts.UnionTypeNode): JS.Union {
@@ -1818,6 +1826,22 @@ export class JavaScriptParserVisitor {
     //  and this would potentially just trip up flow analyses. The names exist purely for documentation purposes,
     //  they has no semantics. See https://stackoverflow.com/questions/63629315/what-are-named-or-labeled-tuples-in-typescript.
     visitNamedTupleMember(node: ts.NamedTupleMember): J.VariableDeclarations {
+        let name: VariableDeclarator = produce(this.convert<J.Identifier>(node.name), draft => {
+            draft.markers = this.maybeAddOptionalMarker(draft, node);
+        });
+        if (node.dotDotDotToken) {
+            // Wrap in JS.Spread; use emptySpace since the whitespace belongs
+            // to VariableDeclarations.prefix, not to the spread itself
+            const spread: JS.Spread = {
+                kind: JS.Kind.Spread,
+                id: randomId(),
+                prefix: emptySpace,
+                markers: emptyMarkers,
+                expression: name as Expression,
+                type: this.mapType(node)
+            };
+            name = spread;
+        }
         return {
             kind: J.Kind.VariableDeclarations,
             id: randomId(),
@@ -1832,16 +1856,7 @@ export class JavaScriptParserVisitor {
                     id: randomId(),
                     prefix: emptySpace,
                     markers: emptyMarkers,
-                    name: produce(this.convert<J.Identifier>(node.name), draft => {
-                        draft.markers = this.maybeAddOptionalMarker(draft, node);
-                        if (node.dotDotDotToken) {
-                            draft.markers.markers.push({
-                                kind: JS.Markers.Spread,
-                                id: randomId(),
-                                prefix: this.prefix(node.dotDotDotToken)
-                            } satisfies Spread as Spread);
-                        }
-                    }),
+                    name: name,
                     dimensionsAfterName: [],
                     variableType: this.mapVariableType(node),
                 },
@@ -1937,21 +1952,28 @@ export class JavaScriptParserVisitor {
     }
 
     visitBindingElement(node: ts.BindingElement): JS.BindingElement {
+        // Capture prefix before converting name, as convert may consume whitespace
+        const elementPrefix = this.prefix(node);
+        let name: Expression = this.convert<Expression>(node.name);
+        if (node.dotDotDotToken) {
+            // Wrap in JS.Spread; use emptySpace for prefix since the whitespace
+            // belongs to BindingElement.prefix, not to the spread itself
+            name = {
+                kind: JS.Kind.Spread,
+                id: randomId(),
+                prefix: emptySpace,
+                markers: emptyMarkers,
+                expression: name,
+                type: this.mapType(node)
+            } satisfies JS.Spread as Expression;
+        }
         return {
             kind: JS.Kind.BindingElement,
             id: randomId(),
-            prefix: this.prefix(node),
+            prefix: elementPrefix,
             markers: emptyMarkers,
             propertyName: node.propertyName && this.rightPadded(this.convert<J.Identifier>(node.propertyName), this.suffix(node.propertyName)),
-            name: produce(this.convert<Expression>(node.name), draft => {
-                if (node.dotDotDotToken) {
-                    draft.markers.markers.push({
-                        kind: JS.Markers.Spread,
-                        id: randomId(),
-                        prefix: this.prefix(node.dotDotDotToken)
-                    } satisfies Spread as Spread);
-                }
-            }),
+            name: name,
             initializer: node.initializer && this.leftPadded(this.prefix(this.findChildNode(node, ts.SyntaxKind.EqualsToken)!), this.convert<Expression>(node.initializer)),
             variableType: this.mapVariableType(node)
         };
@@ -2622,14 +2644,15 @@ export class JavaScriptParserVisitor {
         };
     }
 
-    visitSpreadElement(node: ts.SpreadElement): Expression {
-        return produce(this.convert<Expression>(node.expression), draft => {
-            draft.markers.markers.push({
-                kind: JS.Markers.Spread,
-                id: randomId(),
-                prefix: this.prefix(node)
-            } satisfies Spread as Spread);
-        });
+    visitSpreadElement(node: ts.SpreadElement): JS.Spread {
+        return {
+            kind: JS.Kind.Spread,
+            id: randomId(),
+            prefix: this.prefix(node),
+            markers: emptyMarkers,
+            expression: this.convert(node.expression),
+            type: this.mapType(node)
+        };
     }
 
     visitClassExpression(node: ts.ClassExpression): JS.StatementExpression {
@@ -3903,13 +3926,16 @@ export class JavaScriptParserVisitor {
         let expr: Expression;
         if (node.expression) {
             if (node.dotDotDotToken) {
-                expr = produce(this.convert<Expression>(node.expression), draft => {
-                    draft.markers.markers.push({
-                        kind: JS.Markers.Spread,
-                        id: randomId(),
-                        prefix: this.prefix(node.dotDotDotToken!)
-                    } satisfies Spread as Spread);
-                });
+                // Wrap in JS.Spread
+                const innerExpr = this.convert<Expression>(node.expression);
+                expr = {
+                    kind: JS.Kind.Spread,
+                    id: randomId(),
+                    prefix: this.prefix(node.dotDotDotToken!),
+                    markers: emptyMarkers,
+                    expression: innerExpr,
+                    type: this.mapType(node.expression)
+                } satisfies JS.Spread as Expression;
             } else {
                 expr = this.convert<Expression>(node.expression);
             }
@@ -4086,23 +4112,14 @@ export class JavaScriptParserVisitor {
         };
     }
 
-    visitSpreadAssignment(node: ts.SpreadAssignment): JS.PropertyAssignment {
+    visitSpreadAssignment(node: ts.SpreadAssignment): JS.Spread {
         return {
-            kind: JS.Kind.PropertyAssignment,
+            kind: JS.Kind.Spread,
             id: randomId(),
             prefix: this.prefix(node),
             markers: emptyMarkers,
-            name: this.rightPadded(
-                produce(this.convert<Expression>(node.expression), draft => {
-                    draft.markers.markers.push({
-                        kind: JS.Markers.Spread,
-                        id: randomId(),
-                        prefix: this.prefix(node)
-                    } satisfies Spread as Spread);
-                }),
-                this.suffix(node.expression)
-            ),
-            assigmentToken: JS.PropertyAssignment.Token.Empty,
+            expression: this.convert(node.expression),
+            type: this.mapType(node)
         };
     }
 

rewrite-javascript/rewrite/src/javascript/print.ts

@@ -21,7 +21,7 @@ import {PrintOutputCapture, TreePrinters} from "../print";
 import {Cursor, isTree, Tree} from "../tree";
 import {Comment, emptySpace, J, Statement, TextComment, TrailingComma, TypedTree} from "../java";
 import {findMarker, Marker, Markers} from "../markers";
-import {DelegatedYield, FunctionDeclaration, Generator, NonNullAssertion, Optional, Spread} from "./markers";
+import {DelegatedYield, FunctionDeclaration, Generator, NonNullAssertion, Optional} from "./markers";
 
 export class JavaScriptPrinter extends JavaScriptVisitor<PrintOutputCapture> {
 
@@ -88,6 +88,14 @@ export class JavaScriptPrinter extends JavaScriptVisitor<PrintOutputCapture> {
         return statementExpression;
     }
 
+    override async visitSpread(spread: JS.Spread, p: PrintOutputCapture): Promise<J | undefined> {
+        await this.beforeSyntax(spread, p);
+        p.append("...");
+        await this.visit(spread.expression, p);
+        await this.afterSyntax(spread, p);
+        return spread;
+    }
+
     override async visitInferType(inferType: JS.InferType, p: PrintOutputCapture): Promise<J | undefined> {
         await this.beforeSyntax(inferType, p);
         await this.visitLeftPaddedLocal("infer", inferType.typeParameter, p);
@@ -1901,12 +1909,7 @@ export class JavaScriptPrinter extends JavaScriptVisitor<PrintOutputCapture> {
     }
 
     protected async preVisit(tree: J, p: PrintOutputCapture): Promise<J | undefined> {
-        for (const marker of tree.markers.markers) {
-            if (marker.kind === JS.Markers.Spread) {
-                await this.visitSpace((marker as Spread).prefix, p);
-                p.append("...");
-            }
-        }
+        // Note: Spread is now handled as JS.Spread AST element via visitSpread
         return tree;
     }