parse attachments

Author: Rich-Harris

packages/svelte/src/compiler/phases/1-parse/state/element.js

@@ -480,14 +480,32 @@ function read_static_attribute(parser) {
 
 /**
  * @param {Parser} parser
- * @returns {AST.Attribute | AST.SpreadAttribute | AST.Directive | null}
+ * @returns {AST.Attribute | AST.SpreadAttribute | AST.Directive | AST.UseTag | null}
  */
 function read_attribute(parser) {
 	const start = parser.index;
 
 	if (parser.eat('{')) {
 		parser.allow_whitespace();
 
+		if (parser.eat('@use')) {
+			parser.require_whitespace();
+
+			const expression = read_expression(parser);
+			parser.allow_whitespace();
+			parser.eat('}', true);
+
+			/** @type {AST.UseTag} */
+			const use = {
+				type: 'UseTag',
+				start,
+				end: parser.index,
+				expression
+			};
+
+			return use;
+		}
+
 		if (parser.eat('...')) {
 			const expression = read_expression(parser);
 

packages/svelte/src/compiler/types/template.d.ts

@@ -174,6 +174,12 @@ export namespace AST {
 		};
 	}
 
+	/** A `{@use foo(...)} tag */
+	export interface UseTag extends BaseNode {
+		type: 'UseTag';
+		expression: Expression;
+	}
+
 	/** An `animate:` directive */
 	export interface AnimateDirective extends BaseNode {
 		type: 'AnimateDirective';
@@ -273,7 +279,7 @@ export namespace AST {
 
 	interface BaseElement extends BaseNode {
 		name: string;
-		attributes: Array<Attribute | SpreadAttribute | Directive>;
+		attributes: Array<Attribute | SpreadAttribute | Directive | UseTag>;
 		fragment: Fragment;
 	}
 

packages/svelte/tests/parser-modern/samples/attachments/input.svelte

@@ -0,0 +1 @@
+<div {@use (node) => {}} {@use (node) => {}}></div>

packages/svelte/tests/parser-modern/samples/attachments/output.json

@@ -0,0 +1,141 @@
+{
+	"css": null,
+	"js": [],
+	"start": 0,
+	"end": 51,
+	"type": "Root",
+	"fragment": {
+		"type": "Fragment",
+		"nodes": [
+			{
+				"type": "RegularElement",
+				"start": 0,
+				"end": 51,
+				"name": "div",
+				"attributes": [
+					{
+						"type": "UseTag",
+						"start": 5,
+						"end": 24,
+						"expression": {
+							"type": "ArrowFunctionExpression",
+							"start": 11,
+							"end": 23,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 11
+								},
+								"end": {
+									"line": 1,
+									"column": 23
+								}
+							},
+							"id": null,
+							"expression": false,
+							"generator": false,
+							"async": false,
+							"params": [
+								{
+									"type": "Identifier",
+									"start": 12,
+									"end": 16,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 12
+										},
+										"end": {
+											"line": 1,
+											"column": 16
+										}
+									},
+									"name": "node"
+								}
+							],
+							"body": {
+								"type": "BlockStatement",
+								"start": 21,
+								"end": 23,
+								"loc": {
+									"start": {
+										"line": 1,
+										"column": 21
+									},
+									"end": {
+										"line": 1,
+										"column": 23
+									}
+								},
+								"body": []
+							}
+						}
+					},
+					{
+						"type": "UseTag",
+						"start": 25,
+						"end": 44,
+						"expression": {
+							"type": "ArrowFunctionExpression",
+							"start": 31,
+							"end": 43,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 31
+								},
+								"end": {
+									"line": 1,
+									"column": 43
+								}
+							},
+							"id": null,
+							"expression": false,
+							"generator": false,
+							"async": false,
+							"params": [
+								{
+									"type": "Identifier",
+									"start": 32,
+									"end": 36,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 32
+										},
+										"end": {
+											"line": 1,
+											"column": 36
+										}
+									},
+									"name": "node"
+								}
+							],
+							"body": {
+								"type": "BlockStatement",
+								"start": 41,
+								"end": 43,
+								"loc": {
+									"start": {
+										"line": 1,
+										"column": 41
+									},
+									"end": {
+										"line": 1,
+										"column": 43
+									}
+								},
+								"body": []
+							}
+						}
+					}
+				],
+				"fragment": {
+					"type": "Fragment",
+					"nodes": []
+				}
+			}
+		]
+	},
+	"options": null
+}