Add raw attribute values to AST

.changeset/orange-kangaroos-dress.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+[AST] add raw attribute values to AST

internal/printer/print-to-json.go

@@ -34,6 +34,7 @@ type ASTNode struct {
 
 	// Attributes only
 	Kind string `json:"kind,omitempty"`
+	Raw  string `json:"raw,omitempty"`
 }
 
 func escapeForJSON(value string) string {
@@ -65,6 +66,9 @@ func (n ASTNode) String() string {
 	if n.Value != "" || n.Type == "attribute" {
 		str += fmt.Sprintf(`,"value":"%s"`, escapeForJSON(n.Value))
 	}
+	if n.Raw != "" || n.Type == "attribute" {
+		str += fmt.Sprintf(`,"raw":"%s"`, escapeForJSON(n.Raw))
+	}
 	if len(n.Attributes) > 0 {
 		str += `,"attributes":[`
 		for i, attr := range n.Attributes {
@@ -103,7 +107,8 @@ func (n ASTNode) String() string {
 
 func PrintToJSON(sourcetext string, n *Node, opts t.ParseOptions) PrintResult {
 	p := &printer{
-		builder: sourcemap.MakeChunkBuilder(nil, sourcemap.GenerateLineOffsetTables(sourcetext, len(strings.Split(sourcetext, "\n")))),
+		builder:    sourcemap.MakeChunkBuilder(nil, sourcemap.GenerateLineOffsetTables(sourcetext, len(strings.Split(sourcetext, "\n")))),
+		sourcetext: sourcetext,
 	}
 	root := ASTNode{}
 	renderNode(p, &root, n, opts)
@@ -223,12 +228,27 @@ func renderNode(p *printer, parent *ASTNode, n *Node, opts t.ParseOptions) {
 				if attr.Namespace != "" {
 					name = fmt.Sprintf("%s:%s", attr.Namespace, attr.Key)
 				}
+				position := attrPositionAt(p, &attr, opts)
+				raw := ""
+				if attr.Type == QuotedAttribute {
+					start := attr.ValLoc.Start - 1
+					end := attr.ValLoc.Start + len(attr.Val)
+
+					char := p.sourcetext[start]
+					if char == '=' {
+						start += 1
+					} else {
+						end += 1
+					}
+					raw = strings.TrimSpace(p.sourcetext[start:end])
+				}
 				attrNode := ASTNode{
 					Type:     "attribute",
 					Kind:     attr.Type.String(),
-					Position: attrPositionAt(p, &attr, opts),
+					Position: position,
 					Name:     name,
 					Value:    attr.Val,
+					Raw:      raw,
 				}
 				node.Attributes = append(node.Attributes, attrNode)
 			}

internal/printer/printer_test.go

@@ -3014,7 +3014,7 @@ const c = '\''
 		{
 			name:   "Preserve namespaces",
 			source: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect xlink:href="#id"></svg>`,
-			want:   []ASTNode{{Type: "element", Name: "svg", Attributes: []ASTNode{{Type: "attribute", Kind: "quoted", Name: "xmlns", Value: "http://www.w3.org/2000/svg"}, {Type: "attribute", Kind: "quoted", Name: "xmlns:xlink", Value: "http://www.w3.org/1999/xlink"}}, Children: []ASTNode{{Type: "element", Name: "rect", Attributes: []ASTNode{{Type: "attribute", Kind: "quoted", Name: "xlink:href", Value: "#id"}}}}}},
+			want:   []ASTNode{{Type: "element", Name: "svg", Attributes: []ASTNode{{Type: "attribute", Kind: "quoted", Name: "xmlns", Value: "http://www.w3.org/2000/svg", Raw: `"http://www.w3.org/2000/svg"`}, {Type: "attribute", Kind: "quoted", Name: "xmlns:xlink", Value: "http://www.w3.org/1999/xlink", Raw: `"http://www.w3.org/1999/xlink"`}}, Children: []ASTNode{{Type: "element", Name: "rect", Attributes: []ASTNode{{Type: "attribute", Kind: "quoted", Name: "xlink:href", Value: "#id", Raw: `"#id"`}}}}}},
 		},
 		{
 			name:   "style before html",

packages/compiler/src/browser/utils.ts

@@ -82,7 +82,7 @@ function serializeAttributes(node: TagLikeNode): string {
         break;
       }
       case 'quoted': {
-        output += `${attr.name}="${attr.value}"`;
+        output += `${attr.name}=${attr.raw}`;
         break;
       }
       case 'template-literal': {

packages/compiler/src/node/utils.ts

@@ -82,7 +82,7 @@ function serializeAttributes(node: TagLikeNode): string {
         break;
       }
       case 'quoted': {
-        output += `${attr.name}="${attr.value}"`;
+        output += `${attr.name}=${attr.raw}`;
         break;
       }
       case 'template-literal': {

packages/compiler/src/shared/ast.ts

@@ -38,6 +38,7 @@ export interface AttributeNode extends BaseNode {
   kind: 'quoted' | 'empty' | 'expression' | 'spread' | 'shorthand' | 'template-literal';
   name: string;
   value: string;
+  raw?: string;
 }
 
 export interface TextNode extends ValueNode {

packages/compiler/test/parse/serialize.ts

@@ -50,4 +50,11 @@ test('self-close elements', async () => {
   assert.equal(selfClosedOutput, input, `Expected serialized output to equal ${input}`);
 });
 
+test('raw attributes', async () => {
+  const input = `<div name="value" single='quote' un=quote />`;
+  const { ast } = await parse(input);
+  const output = serialize(ast);
+  assert.equal(output, input, `Expected serialized output to equal ${input}`);
+});
+
 test.run();