Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
<script>
let name = "Sarah";
let countChanges = 0;
$: {
console.log("I run whenever the name changes!", name);
countChanges++;
}
name = "John";
name = "Another name that will be ignored?";
console.log("the name was indeed", name)
name = "Rose";
</script>

<h1>Hello {name}!</h1>
<p>
I think that name has changed {countChanges} times
</p>

the name was indeed Another name that will be ignored?
I run whenever the name changes! Rose
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';

var root = $.template(`<h1> </h1> <p> </p>`, 1);

export default function App($$anchor, $$props) {
$.push($$props, false);

let name = $.mutable_state("Sarah");
let countChanges = $.mutable_state(0);

$.set(name, "John");
$.set(name, "Another name that will be ignored?");
console.log("the name was indeed", $.get(name));
$.set(name, "Rose");

$.legacy_pre_effect(() => ($.get(name), $.get(countChanges)), () => {
console.log("I run whenever the name changes!", $.get(name));
$.update(countChanges);
});

$.legacy_pre_effect_reset();

var fragment = root();
var h1 = $.first_child(fragment);
var text = $.child(h1);

$.reset(h1);

var p = $.sibling(h1, 2);
var text_1 = $.child(p);

$.reset(p);

$.template_effect(() => {
result = svelte.compile(source, {
generate: ,
});
/* Add a <style> tag to see the CSS output */
		
			
				
  • Root {
    • css: null
    • js: []
    • start: 271
    • end: 354
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (4)
        • Text {...}
          • type: "Text"
          • start: 269
          • end: 271
          • raw: "\n\n"
          • data: "\n\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 271
          • end: 293
          • name: "h1"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (3)
              • Text {...}
                • type: "Text"
                • start: 275
                • end: 281
                • raw: "Hello "
                • data: "Hello "
                }
              • ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 281
                • end: 287
                • expression: Identifier {...}
                  • type: "Identifier"
                  • start: 282
                  • end: 286
                  • loc: {...}
                    • start: {...}
                      • line: 15
                      • column: 11
                      }
                    • end: {...}
                      • line: 15
                      • column: 15
                      }
                    }
                  • name: "name"
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 287
                • end: 288
                • raw: "!"
                • data: "!"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 293
          • end: 294
          • raw: " "
          • data: " "
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 294
          • end: 354
          • name: "p"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (3)
              • Text {...}
                • type: "Text"
                • start: 297
                • end: 329
                • raw: "I think that name has changed "
                • data: "I think that name has changed "
                }
              • ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 329
                • end: 343
                • expression: Identifier {...}
                  • type: "Identifier"
                  • start: 330
                  • end: 342
                  • loc: {...}
                    • start: {...}
                      • line: 17
                      • column: 32
                      }
                    • end: {...}
                      • line: 17
                      • column: 44
                      }
                    }
                  • name: "countChanges"
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 343
                • end: 350
                • raw: " times"
                • data: " times"
                }
              ]
            }
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 269
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 260
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 13
            • column: 0
            }
          }
        • body: [...] (7)
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 10
            • end: 29
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 2
                • column: 20
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 14
                • end: 28
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 5
                    }
                  • end: {...}
                    • line: 2
                    • column: 19
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 14
                  • end: 18
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 5
                      }
                    • end: {...}
                      • line: 2
                      • column: 9
                      }
                    }
                  • name: "name"
                  }
                • init: Literal {...}
                  • type: "Literal"
                  • start: 21
                  • end: 28
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 12
                      }
                    • end: {...}
                      • line: 2
                      • column: 19
                      }
                    }
                  • value: "Sarah"
                  • raw: "\"Sarah\""
                  }
                }
              ]
            • kind: "let"
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 31
            • end: 52
            • loc: {...}
              • start: {...}
                • line: 3
                • column: 1
                }
              • end: {...}
                • line: 3
                • column: 22
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 35
                • end: 51
                • loc: {...}
                  • start: {...}
                    • line: 3
                    • column: 5
                    }
                  • end: {...}
                    • line: 3
                    • column: 21
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 35
                  • end: 47
                  • loc: {...}
                    • start: {...}
                      • line: 3
                      • column: 5
                      }
                    • end: {...}
                      • line: 3
                      • column: 17
                      }
                    }
                  • name: "countChanges"
                  }
                • init: Literal {...}
                  • type: "Literal"
                  • start: 50
                  • end: 51
                  • loc: {...}
                    • start: {...}
                      • line: 3
                      • column: 20
                      }
                    • end: {...}
                      • line: 3
                      • column: 21
                      }
                    }
                  • value: 0
                  • raw: "0"
                  }
                }
              ]
            • kind: "let"
            }
          • LabeledStatement {...}
            • type: "LabeledStatement"
            • start: 54
            • end: 136
            • loc: {...}
              • start: {...}
                • line: 4
                • column: 1
                }
              • end: {...}
                • line: 7
                • column: 2
                }
              }
            • body: BlockStatement {...}
              • type: "BlockStatement"
              • start: 57
              • end: 136
              • loc: {...}
                • start: {...}
                  • line: 4
                  • column: 4
                  }
                • end: {...}
                  • line: 7
                  • column: 2
                  }
                }
              • body: [...] (2)
                • ExpressionStatement {...}
                  • type: "ExpressionStatement"
                  • start: 61
                  • end: 115
                  • loc: {...}
                    • start: {...}
                      • line: 5
                      • column: 2
                      }
                    • end: {...}
                      • line: 5
                      • column: 56
                      }
                    }
                  • expression: CallExpression {...}
                    • type: "CallExpression"
                    • start: 61
                    • end: 114
                    • loc: {...}
                      • start: {...}
                        • line: 5
                        • column: 2
                        }
                      • end: {...}
                        • line: 5
                        • column: 55
                        }
                      }
                    • callee: MemberExpression {...}
                      • type: "MemberExpression"
                      • start: 61
                      • end: 72
                      • loc: {...}
                        • start: {...}
                          • line: 5
                          • column: 2
                          }
                        • end: {...}
                          • line: 5
                          • column: 13
                          }
                        }
                      • object: Identifier {...}
                        • type: "Identifier"
                        • start: 61
                        • end: 68
                        • loc: {...}
                          • start: {...}
                            • line: 5
                            • column: 2
                            }
                          • end: {...}
                            • line: 5
                            • column: 9
                            }
                          }
                        • name: "console"
                        }
                      • property: Identifier {...}
                        • type: "Identifier"
                        • start: 69
                        • end: 72
                        • loc: {...}
                          • start: {...}
                            • line: 5
                            • column: 10
                            }
                          • end: {...}
                            • line: 5
                            • column: 13
                            }
                          }
                        • name: "log"
                        }
                      • computed: false
                      • optional: false
                      }
                    • arguments: [...] (2)
                      • Literal {...}
                        • type: "Literal"
                        • start: 73
                        • end: 107
                        • loc: {...}
                          • start: {...}
                            • line: 5
                            • column: 14
                            }
                          • end: {...}
                            • line: 5
                            • column: 48
                            }
                          }
                        • value: "I run whenever the name changes!"
                        • raw: "\"I run whenever the name changes!\""
                        }
                      • Identifier {...}
                        • type: "Identifier"
                        • start: 109
                        • end: 113
                        • loc: {...}
                          • start: {...}
                            • line: 5
                            • column: 50
                            }
                          • end: {...}
                            • line: 5
                            • column: 54
                            }
                          }
                        • name: "name"
                        }
                      ]
                    • optional: false
                    }
                  }
                • ExpressionStatement {...}
                  • type: "ExpressionStatement"
                  • start: 118
                  • end: 133
                  • loc: {...}
                    • start: {...}
                      • line: 6
                      • column: 2
                      }
                    • end: {...}
                      • line: 6
                      • column: 17
                      }
                    }
                  • expression: UpdateExpression {...}
                    • type: "UpdateExpression"
                    • start: 118
                    • end: 132
                    • loc: {...}
                      • start: {...}
                        • line: 6
                        • column: 2
                        }
                      • end: {...}
                        • line: 6
                        • column: 16
                        }
                      }
                    • operator: "++"
                    • prefix: false
                    • argument: Identifier {...}
                      • type: "Identifier"
                      • start: 118
                      • end: 130
                      • loc: {...}
                        • start: {...}
                          • line: 6
                          • column: 2
                          }
                        • end: {...}
                          • line: 6
                          • column: 14
                          }
                        }
                      • name: "countChanges"
                      }
                    }
                  }
                ]
              }
            • label: Identifier {...}
              • type: "Identifier"
              • start: 54
              • end: 55
              • loc: {...}
                • start: {...}
                  • line: 4
                  • column: 1
                  }
                • end: {...}
                  • line: 4
                  • column: 2
                  }
                }
              • name: "$"
              }
            }
          • ExpressionStatement {...}
            • type: "ExpressionStatement"
            • start: 139
            • end: 153
            • loc: {...}
              • start: {...}
                • line: 8
                • column: 1
                }
              • end: {...}
                • line: 8
                • column: 15
                }
              }
            • expression: AssignmentExpression {...}
              • type: "AssignmentExpression"
              • start: 139
              • end: 152
              • loc: {...}
                • start: {...}
                  • line: 8
                  • column: 1
                  }
                • end: {...}
                  • line: 8
                  • column: 14
                  }
                }
              • operator: "="
              • left: Identifier {...}
                • type: "Identifier"
                • start: 139
                • end: 143
                • loc: {...}
                  • start: {...}
                    • line: 8
                    • column: 1
                    }
                  • end: {...}
                    • line: 8
                    • column: 5
                    }
                  }
                • name: "name"
                }
              • right: Literal {...}
                • type: "Literal"
                • start: 146
                • end: 152
                • loc: {...}
                  • start: {...}
                    • line: 8
                    • column: 8
                    }
                  • end: {...}
                    • line: 8
                    • column: 14
                    }
                  }
                • value: "John"
                • raw: "\"John\""
                }
              }
            }
          • ExpressionStatement {...}
            • type: "ExpressionStatement"
            • start: 155
            • end: 199
            • loc: {...}
              • start: {...}
                • line: 9
                • column: 1
                }
              • end: {...}
                • line: 9
                • column: 45
                }
              }
            • expression: AssignmentExpression {...}
              • type: "AssignmentExpression"
              • start: 155
              • end: 198
              • loc: {...}
                • start: {...}
                  • line: 9
                  • column: 1
                  }
                • end: {...}
                  • line: 9
                  • column: 44
                  }
                }
              • operator: "="
              • left: Identifier {...}
                • type: "Identifier"
                • start: 155
                • end: 159
                • loc: {...}
                  • start: {...}
                    • line: 9
                    • column: 1
                    }
                  • end: {...}
                    • line: 9
                    • column: 5
                    }
                  }
                • name: "name"
                }
              • right: Literal {...}
                • type: "Literal"
                • start: 162
                • end: 198
                • loc: {...}
                  • start: {...}
                    • line: 9
                    • column: 8
                    }
                  • end: {...}
                    • line: 9
                    • column: 44
                    }
                  }
                • value: "Another name that will be ignored?"
                • raw: "\"Another name that will be ignored?\""
                }
              }
            }
          • ExpressionStatement {...}
            • type: "ExpressionStatement"
            • start: 201
            • end: 241
            • loc: {...}
              • start: {...}
                • line: 10
                • column: 1
                }
              • end: {...}
                • line: 10
                • column: 41
                }
              }
            • expression: CallExpression {...}
              • type: "CallExpression"
              • start: 201
              • end: 241
              • loc: {...}
                • start: {...}
                  • line: 10
                  • column: 1
                  }
                • end: {...}
                  • line: 10
                  • column: 41
                  }
                }
              • callee: MemberExpression {...}
                • type: "MemberExpression"
                • start: 201
                • end: 212
                • loc: {...}
                  • start: {...}
                    • line: 10
                    • column: 1
                    }
                  • end: {...}
                    • line: 10
                    • column: 12
                    }
                  }
                • object: Identifier {...}
                  • type: "Identifier"
                  • start: 201
                  • end: 208
                  • loc: {...}
                    • start: {...}
                      • line: 10
                      • column: 1
                      }
                    • end: {...}
                      • line: 10
                      • column: 8
                      }
                    }
                  • name: "console"
                  }
                • property: Identifier {...}
                  • type: "Identifier"
                  • start: 209
                  • end: 212
                  • loc: {...}
                    • start: {...}
                      • line: 10
                      • column: 9
                      }
                    • end: {...}
                      • line: 10
                      • column: 12
                      }
                    }
                  • name: "log"
                  }
                • computed: false
                • optional: false
                }
              • arguments: [...] (2)
                • Literal {...}
                  • type: "Literal"
                  • start: 213
                  • end: 234
                  • loc: {...}
                    • start: {...}
                      • line: 10
                      • column: 13
                      }
                    • end: {...}
                      • line: 10
                      • column: 34
                      }
                    }
                  • value: "the name was indeed"
                  • raw: "\"the name was indeed\""
                  }
                • Identifier {...}
                  • type: "Identifier"
                  • start: 236
                  • end: 240
                  • loc: {...}
                    • start: {...}
                      • line: 10
                      • column: 36
                      }
                    • end: {...}
                      • line: 10
                      • column: 40
                      }
                    }
                  • name: "name"
                  }
                ]
              • optional: false
              }
            }
          • ExpressionStatement {...}
            • type: "ExpressionStatement"
            • start: 243
            • end: 257
            • loc: {...}
              • start: {...}
                • line: 11
                • column: 1
                }
              • end: {...}
                • line: 11
                • column: 15
                }
              }
            • expression: AssignmentExpression {...}
              • type: "AssignmentExpression"
              • start: 243
              • end: 256
              • loc: {...}
                • start: {...}
                  • line: 11
                  • column: 1
                  }
                • end: {...}
                  • line: 11
                  • column: 14
                  }
                }
              • operator: "="
              • left: Identifier {...}
                • type: "Identifier"
                • start: 243
                • end: 247
                • loc: {...}
                  • start: {...}
                    • line: 11
                    • column: 1
                    }
                  • end: {...}
                    • line: 11
                    • column: 5
                    }
                  }
                • name: "name"
                }
              • right: Literal {...}
                • type: "Literal"
                • start: 250
                • end: 256
                • loc: {...}
                  • start: {...}
                    • line: 11
                    • column: 8
                    }
                  • end: {...}
                    • line: 11
                    • column: 14
                    }
                  }
                • value: "Rose"
                • raw: "\"Rose\""
                }
              }
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
multiple changes per tick are ignored • Playground • Svelte