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>
export let count = 0;
// `doubled`, `tripled`, `quadrupled` are reactive
$: doubled = count * 2;
$: tripled = count * 3;
$: quadrupled = doubled * 2;
</script>

{doubled} {tripled} {quadrupled}
fetching https://unpkg.com/svelte@5.20.5/src/internal/client/index.js
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';

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

const doubled = $.mutable_state();
const tripled = $.mutable_state();
const quadrupled = $.mutable_state();
let count = $.prop($$props, 'count', 8, 0);

$.legacy_pre_effect(() => ($.deep_read_state(count())), () => {
$.set(doubled, count() * 2);
});

$.legacy_pre_effect(() => ($.deep_read_state(count())), () => {
$.set(tripled, count() * 3);
});

$.legacy_pre_effect(() => ($.get(doubled)), () => {
$.set(quadrupled, $.get(doubled) * 2);
});

$.legacy_pre_effect_reset();
$.next();

var text = $.text();

$.template_effect(() => $.set_text(text, `${$.get(doubled) ?? ''} ${$.get(tripled) ?? ''} ${$.get(quadrupled) ?? ''}`));
$.append($$anchor, text);
$.pop();
}
result = svelte.compile(source, {
generate: ,
});
/* Add a <style> tag to see the CSS output */
		
			
				
  • Root {
    • css: null
    • js: []
    • start: 180
    • end: 212
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (6)
        • Text {...}
          • type: "Text"
          • start: 178
          • end: 180
          • raw: "\n\n"
          • data: "\n\n"
          }
        • ExpressionTag {...}
          • type: "ExpressionTag"
          • start: 180
          • end: 189
          • expression: Identifier {...}
            • type: "Identifier"
            • start: 181
            • end: 188
            • loc: {...}
              • start: {...}
                • line: 9
                • column: 1
                }
              • end: {...}
                • line: 9
                • column: 8
                }
              }
            • name: "doubled"
            }
          }
        • Text {...}
          • type: "Text"
          • start: 189
          • end: 190
          • raw: " "
          • data: " "
          }
        • ExpressionTag {...}
          • type: "ExpressionTag"
          • start: 190
          • end: 199
          • expression: Identifier {...}
            • type: "Identifier"
            • start: 191
            • end: 198
            • loc: {...}
              • start: {...}
                • line: 9
                • column: 11
                }
              • end: {...}
                • line: 9
                • column: 18
                }
              }
            • name: "tripled"
            }
          }
        • Text {...}
          • type: "Text"
          • start: 199
          • end: 200
          • raw: " "
          • data: " "
          }
        • ExpressionTag {...}
          • type: "ExpressionTag"
          • start: 200
          • end: 212
          • expression: Identifier {...}
            • type: "Identifier"
            • start: 201
            • end: 211
            • loc: {...}
              • start: {...}
                • line: 9
                • column: 21
                }
              • end: {...}
                • line: 9
                • column: 31
                }
              }
            • name: "quadrupled"
            }
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 178
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 169
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 7
            • column: 0
            }
          }
        • body: [...] (4)
          • ExportNamedDeclaration {...}
            • type: "ExportNamedDeclaration"
            • start: 11
            • end: 32
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 2
                }
              • end: {...}
                • line: 2
                • column: 23
                }
              }
            • declaration: VariableDeclaration {...}
              • type: "VariableDeclaration"
              • start: 18
              • end: 32
              • loc: {...}
                • start: {...}
                  • line: 2
                  • column: 9
                  }
                • end: {...}
                  • line: 2
                  • column: 23
                  }
                }
              • declarations: [...] (1)
                • VariableDeclarator {...}
                  • type: "VariableDeclarator"
                  • start: 22
                  • end: 31
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 13
                      }
                    • end: {...}
                      • line: 2
                      • column: 22
                      }
                    }
                  • id: Identifier {...}
                    • type: "Identifier"
                    • start: 22
                    • end: 27
                    • loc: {...}
                      • start: {...}
                        • line: 2
                        • column: 13
                        }
                      • end: {...}
                        • line: 2
                        • column: 18
                        }
                      }
                    • name: "count"
                    }
                  • init: Literal {...}
                    • type: "Literal"
                    • start: 30
                    • end: 31
                    • loc: {...}
                      • start: {...}
                        • line: 2
                        • column: 21
                        }
                      • end: {...}
                        • line: 2
                        • column: 22
                        }
                      }
                    • value: 0
                    • raw: "0"
                    }
                  }
                ]
              • kind: "let"
              }
            • specifiers: []
            • source: null
            }
          • LabeledStatement {...}
            • type: "LabeledStatement"
            • start: 88
            • end: 111
            • loc: {...}
              • start: {...}
                • line: 4
                • column: 2
                }
              • end: {...}
                • line: 4
                • column: 25
                }
              }
            • body: ExpressionStatement {...}
              • type: "ExpressionStatement"
              • start: 91
              • end: 111
              • loc: {...}
                • start: {...}
                  • line: 4
                  • column: 5
                  }
                • end: {...}
                  • line: 4
                  • column: 25
                  }
                }
              • expression: AssignmentExpression {...}
                • type: "AssignmentExpression"
                • start: 91
                • end: 110
                • loc: {...}
                  • start: {...}
                    • line: 4
                    • column: 5
                    }
                  • end: {...}
                    • line: 4
                    • column: 24
                    }
                  }
                • operator: "="
                • left: Identifier {...}
                  • type: "Identifier"
                  • start: 91
                  • end: 98
                  • loc: {...}
                    • start: {...}
                      • line: 4
                      • column: 5
                      }
                    • end: {...}
                      • line: 4
                      • column: 12
                      }
                    }
                  • name: "doubled"
                  }
                • right: BinaryExpression {...}
                  • type: "BinaryExpression"
                  • start: 101
                  • end: 110
                  • loc: {...}
                    • start: {...}
                      • line: 4
                      • column: 15
                      }
                    • end: {...}
                      • line: 4
                      • column: 24
                      }
                    }
                  • left: Identifier {...}
                    • type: "Identifier"
                    • start: 101
                    • end: 106
                    • loc: {...}
                      • start: {...}
                        • line: 4
                        • column: 15
                        }
                      • end: {...}
                        • line: 4
                        • column: 20
                        }
                      }
                    • name: "count"
                    }
                  • operator: "*"
                  • right: Literal {...}
                    • type: "Literal"
                    • start: 109
                    • end: 110
                    • loc: {...}
                      • start: {...}
                        • line: 4
                        • column: 23
                        }
                      • end: {...}
                        • line: 4
                        • column: 24
                        }
                      }
                    • value: 2
                    • raw: "2"
                    }
                  }
                }
              }
            • label: Identifier {...}
              • type: "Identifier"
              • start: 88
              • end: 89
              • loc: {...}
                • start: {...}
                  • line: 4
                  • column: 2
                  }
                • end: {...}
                  • line: 4
                  • column: 3
                  }
                }
              • name: "$"
              }
            • leadingComments: [...] (1)
              • Line {...}
                • type: "Line"
                • value: " `doubled`, `tripled`, `quadrupled` are reactive"
                • start: 35
                • end: 85
                }
              ]
            }
          • LabeledStatement {...}
            • type: "LabeledStatement"
            • start: 114
            • end: 137
            • loc: {...}
              • start: {...}
                • line: 5
                • column: 2
                }
              • end: {...}
                • line: 5
                • column: 25
                }
              }
            • body: ExpressionStatement {...}
              • type: "ExpressionStatement"
              • start: 117
              • end: 137
              • loc: {...}
                • start: {...}
                  • line: 5
                  • column: 5
                  }
                • end: {...}
                  • line: 5
                  • column: 25
                  }
                }
              • expression: AssignmentExpression {...}
                • type: "AssignmentExpression"
                • start: 117
                • end: 136
                • loc: {...}
                  • start: {...}
                    • line: 5
                    • column: 5
                    }
                  • end: {...}
                    • line: 5
                    • column: 24
                    }
                  }
                • operator: "="
                • left: Identifier {...}
                  • type: "Identifier"
                  • start: 117
                  • end: 124
                  • loc: {...}
                    • start: {...}
                      • line: 5
                      • column: 5
                      }
                    • end: {...}
                      • line: 5
                      • column: 12
                      }
                    }
                  • name: "tripled"
                  }
                • right: BinaryExpression {...}
                  • type: "BinaryExpression"
                  • start: 127
                  • end: 136
                  • loc: {...}
                    • start: {...}
                      • line: 5
                      • column: 15
                      }
                    • end: {...}
                      • line: 5
                      • column: 24
                      }
                    }
                  • left: Identifier {...}
                    • type: "Identifier"
                    • start: 127
                    • end: 132
                    • loc: {...}
                      • start: {...}
                        • line: 5
                        • column: 15
                        }
                      • end: {...}
                        • line: 5
                        • column: 20
                        }
                      }
                    • name: "count"
                    }
                  • operator: "*"
                  • right: Literal {...}
                    • type: "Literal"
                    • start: 135
                    • end: 136
                    • loc: {...}
                      • start: {...}
                        • line: 5
                        • column: 23
                        }
                      • end: {...}
                        • line: 5
                        • column: 24
                        }
                      }
                    • value: 3
                    • raw: "3"
                    }
                  }
                }
              }
            • label: Identifier {...}
              • type: "Identifier"
              • start: 114
              • end: 115
              • loc: {...}
                • start: {...}
                  • line: 5
                  • column: 2
                  }
                • end: {...}
                  • line: 5
                  • column: 3
                  }
                }
              • name: "$"
              }
            }
          • LabeledStatement {...}
            • type: "LabeledStatement"
            • start: 140
            • end: 168
            • loc: {...}
              • start: {...}
                • line: 6
                • column: 2
                }
              • end: {...}
                • line: 6
                • column: 30
                }
              }
            • body: ExpressionStatement {...}
              • type: "ExpressionStatement"
              • start: 143
              • end: 168
              • loc: {...}
                • start: {...}
                  • line: 6
                  • column: 5
                  }
                • end: {...}
                  • line: 6
                  • column: 30
                  }
                }
              • expression: AssignmentExpression {...}
                • type: "AssignmentExpression"
                • start: 143
                • end: 167
                • loc: {...}
                  • start: {...}
                    • line: 6
                    • column: 5
                    }
                  • end: {...}
                    • line: 6
                    • column: 29
                    }
                  }
                • operator: "="
                • left: Identifier {...}
                  • type: "Identifier"
                  • start: 143
                  • end: 153
                  • loc: {...}
                    • start: {...}
                      • line: 6
                      • column: 5
                      }
                    • end: {...}
                      • line: 6
                      • column: 15
                      }
                    }
                  • name: "quadrupled"
                  }
                • right: BinaryExpression {...}
                  • type: "BinaryExpression"
                  • start: 156
                  • end: 167
                  • loc: {...}
                    • start: {...}
                      • line: 6
                      • column: 18
                      }
                    • end: {...}
                      • line: 6
                      • column: 29
                      }
                    }
                  • left: Identifier {...}
                    • type: "Identifier"
                    • start: 156
                    • end: 163
                    • loc: {...}
                      • start: {...}
                        • line: 6
                        • column: 18
                        }
                      • end: {...}
                        • line: 6
                        • column: 25
                        }
                      }
                    • name: "doubled"
                    }
                  • operator: "*"
                  • right: Literal {...}
                    • type: "Literal"
                    • start: 166
                    • end: 167
                    • loc: {...}
                      • start: {...}
                        • line: 6
                        • column: 28
                        }
                      • end: {...}
                        • line: 6
                        • column: 29
                        }
                      }
                    • value: 2
                    • raw: "2"
                    }
                  }
                }
              }
            • label: Identifier {...}
              • type: "Identifier"
              • start: 140
              • end: 141
              • loc: {...}
                • start: {...}
                  • line: 6
                  • column: 2
                  }
                • end: {...}
                  • line: 6
                  • column: 3
                  }
                }
              • name: "$"
              }
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
Compile Svelte in your Head - Reactive Declarations • Playground • Svelte