(cache)Dynamic attributes • Playground • Svelte

App.svelte

let src = '/tutorial/image.gif';

let name = 'Rick Astley';

</script>

import "svelte/internal/disclose-version";

import * as $ from "svelte/internal/client";

var root = $.template(`<img>`);

export default function App($$anchor) {

let src = '/tutorial/image.gif';

let name = 'Rick Astley';

var img = root();

$.set_attribute(img, "src", src);

$.set_attribute(img, "alt", `${name ?? ""} dancing`);

$.append($$anchor, img);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

/* Add a <style> tag to see the CSS output */

		
			
				
					 Root {
 css: null
js: []
start: 81
end: 153
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (4)
  Text {...}
 type: "Text"
start: 79
end: 81
raw: "\n\n"
data: "\n\n"
 }
 Comment {...}
 type: "Comment"
start: 81
end: 118
data: " {src} is short for src={src} "
 }
 Text {...}
 type: "Text"
start: 118
end: 119
raw: "\n"
data: "\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 119
end: 153
name: "img"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 124
end: 129
name: "src"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 125
end: 128
expression: Identifier {...}
 start: 125
end: 128
type: "Identifier"
name: "src"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 130
end: 150
name: "alt"
value: [...] (2)
  ExpressionTag {...}
 type: "ExpressionTag"
start: 135
end: 141
expression: Identifier {...}
 type: "Identifier"
start: 136
end: 140
loc:  {...}
 start:  {...}
 line: 7
column: 17
 }
end:  {...}
 line: 7
column: 21
 }
 }
name: "name"
 }
 }
 Text {...}
 start: 141
end: 149
type: "Text"
raw: " dancing"
data: " dancing"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 ]
 }
options: null
instance: Script {
 type: "Script"
start: 0
end: 79
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 70
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 4
column: 0
 }
 }
body: [...] (2)
  VariableDeclaration {...}
 type: "VariableDeclaration"
start: 10
end: 42
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 33
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 14
end: 41
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 2
column: 32
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 14
end: 17
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 2
column: 8
 }
 }
name: "src"
 }
init: Literal {...}
 type: "Literal"
start: 20
end: 41
loc:  {...}
 start:  {...}
 line: 2
column: 11
 }
end:  {...}
 line: 2
column: 32
 }
 }
value: "/tutorial/image.gif"
raw: "'/tutorial/image.gif'"
 }
 }
 ]
kind: "let"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 44
end: 69
loc:  {...}
 start:  {...}
 line: 3
column: 1
 }
end:  {...}
 line: 3
column: 26
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 48
end: 68
loc:  {...}
 start:  {...}
 line: 3
column: 5
 }
end:  {...}
 line: 3
column: 25
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 48
end: 52
loc:  {...}
 start:  {...}
 line: 3
column: 5
 }
end:  {...}
 line: 3
column: 9
 }
 }
name: "name"
 }
init: Literal {...}
 type: "Literal"
start: 55
end: 68
loc:  {...}
 start:  {...}
 line: 3
column: 12
 }
end:  {...}
 line: 3
column: 25
 }
 }
value: "Rick Astley"
raw: "'Rick Astley'"
 }
 }
 ]
kind: "let"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern