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 count = $state(0);

$effect(() => {
if (count >= 10) {
alert(`count is dangerously high!`);
count = 9;
}
});

function handleClick() {
count += 1;
}
</script>

<button onclick={handleClick}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>

Error compiling component

WebAssembly.instantiateStreaming(): value type opcode @+13
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';

function handleClick(_, count) {
$.set(count, $.get(count) + 1);
}

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

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

let count = $.state(0);

$.user_effect(() => {
if ($.get(count) >= 10) {
alert(`count is dangerously high!`);
$.set(count, 9);
}
});

var button = root();

button.__click = [handleClick, count];

var text = $.child(button);

$.reset(button);

$.template_effect(() => $.set_text(text, `Clicked ${$.get(count) ?? ''}
${($.get(count) === 1 ? 'time' : 'times') ?? ''}`));

$.append($$anchor, button);
$.pop();
}

result = svelte.compile(source, {
generate: ,
});
/* Add a <style> tag to see the CSS output */
		
			
				
  • Root {
    • css: null
    • js: []
    • start: 190
    • end: 281
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (2)
        • Text {...}
          • type: "Text"
          • start: 188
          • end: 190
          • raw: "\n\n"
          • data: "\n\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 190
          • end: 281
          • name: "button"
          • attributes: [...] (1)
            • Attribute {...}
              • type: "Attribute"
              • start: 198
              • end: 219
              • name: "onclick"
              • value: ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 206
                • end: 219
                • expression: Identifier {...}
                  • type: "Identifier"
                  • start: 207
                  • end: 218
                  • loc: {...}
                    • start: {...}
                      • line: 16
                      • column: 17
                      }
                    • end: {...}
                      • line: 16
                      • column: 28
                      }
                    }
                  • name: "handleClick"
                  }
                }
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (5)
              • Text {...}
                • type: "Text"
                • start: 220
                • end: 230
                • raw: "Clicked "
                • data: "Clicked "
                }
              • ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 230
                • end: 237
                • expression: Identifier {...}
                  • type: "Identifier"
                  • start: 231
                  • end: 236
                  • loc: {...}
                    • start: {...}
                      • line: 17
                      • column: 10
                      }
                    • end: {...}
                      • line: 17
                      • column: 15
                      }
                    }
                  • name: "count"
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 237
                • end: 239
                • raw: "\n\t"
                • data: "\n\t"
                }
              • ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 239
                • end: 271
                • expression: ConditionalExpression {...}
                  • type: "ConditionalExpression"
                  • start: 240
                  • end: 270
                  • loc: {...}
                    • start: {...}
                      • line: 18
                      • column: 2
                      }
                    • end: {...}
                      • line: 18
                      • column: 32
                      }
                    }
                  • test: BinaryExpression {...}
                    • type: "BinaryExpression"
                    • start: 240
                    • end: 251
                    • loc: {...}
                      • start: {...}
                        • line: 18
                        • column: 2
                        }
                      • end: {...}
                        • line: 18
                        • column: 13
                        }
                      }
                    • left: Identifier {...}
                      • type: "Identifier"
                      • start: 240
                      • end: 245
                      • loc: {...}
                        • start: {...}
                          • line: 18
                          • column: 2
                          }
                        • end: {...}
                          • line: 18
                          • column: 7
                          }
                        }
                      • name: "count"
                      }
                    • operator: "==="
                    • right: Literal {...}
                      • type: "Literal"
                      • start: 250
                      • end: 251
                      • loc: {...}
                        • start: {...}
                          • line: 18
                          • column: 12
                          }
                        • end: {...}
                          • line: 18
                          • column: 13
                          }
                        }
                      • value: 1
                      • raw: "1"
                      }
                    }
                  • consequent: Literal {...}
                    • type: "Literal"
                    • start: 254
                    • end: 260
                    • loc: {...}
                      • start: {...}
                        • line: 18
                        • column: 16
                        }
                      • end: {...}
                        • line: 18
                        • column: 22
                        }
                      }
                    • value: "time"
                    • raw: "'time'"
                    }
                  • alternate: Literal {...}
                    • type: "Literal"
                    • start: 263
                    • end: 270
                    • loc: {...}
                      • start: {...}
                        • line: 18
                        • column: 25
                        }
                      • end: {...}
                        • line: 18
                        • column: 32
                        }
                      }
                    • value: "times"
                    • raw: "'times'"
                    }
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 271
                • end: 272
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 188
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 179
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 14
            • column: 0
            }
          }
        • body: [...] (3)
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 10
            • end: 32
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 2
                • column: 23
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 14
                • end: 31
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 5
                    }
                  • end: {...}
                    • line: 2
                    • column: 22
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 14
                  • end: 19
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 5
                      }
                    • end: {...}
                      • line: 2
                      • column: 10
                      }
                    }
                  • name: "count"
                  }
                • init: CallExpression {...}
                  • type: "CallExpression"
                  • start: 22
                  • end: 31
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 13
                      }
                    • end: {...}
                      • line: 2
                      • column: 22
                      }
                    }
                  • callee: Identifier {...}
                    • type: "Identifier"
                    • start: 22
                    • end: 28
                    • loc: {...}
                      • start: {...}
                        • line: 2
                        • column: 13
                        }
                      • end: {...}
                        • line: 2
                        • column: 19
                        }
                      }
                    • name: "$state"
                    }
                  • arguments: [...] (1)
                    • Literal {...}
                      • type: "Literal"
                      • start: 29
                      • end: 30
                      • loc: {...}
                        • start: {...}
                          • line: 2
                          • column: 20
                          }
                        • end: {...}
                          • line: 2
                          • column: 21
                          }
                        }
                      • value: 0
                      • raw: "0"
                      }
                    ]
                  • optional: false
                  }
                }
              ]
            • kind: "let"
            }
          • ExpressionStatement {...}
            • type: "ExpressionStatement"
            • start: 35
            • end: 134
            • loc: {...}
              • start: {...}
                • line: 4
                • column: 1
                }
              • end: {...}
                • line: 9
                • column: 4
                }
              }
            • expression: CallExpression {...}
              • type: "CallExpression"
              • start: 35
              • end: 133
              • loc: {...}
                • start: {...}
                  • line: 4
                  • column: 1
                  }
                • end: {...}
                  • line: 9
                  • column: 3
                  }
                }
              • callee: Identifier {...}
                • type: "Identifier"
                • start: 35
                • end: 42
                • loc: {...}
                  • start: {...}
                    • line: 4
                    • column: 1
                    }
                  • end: {...}
                    • line: 4
                    • column: 8
                    }
                  }
                • name: "$effect"
                }
              • arguments: [...] (1)
                • ArrowFunctionExpression {...}
                  • type: "ArrowFunctionExpression"
                  • start: 43
                  • end: 132
                  • loc: {...}
                    • start: {...}
                      • line: 4
                      • column: 9
                      }
                    • end: {...}
                      • line: 9
                      • column: 2
                      }
                    }
                  • id: null
                  • expression: false
                  • generator: false
                  • async: false
                  • params: []
                  • body: BlockStatement {...}
                    • type: "BlockStatement"
                    • start: 49
                    • end: 132
                    • loc: {...}
                      • start: {...}
                        • line: 4
                        • column: 15
                        }
                      • end: {...}
                        • line: 9
                        • column: 2
                        }
                      }
                    • body: [...] (1)
                      • IfStatement {...}
                        • type: "IfStatement"
                        • start: 53
                        • end: 129
                        • loc: {...}
                          • start: {...}
                            • line: 5
                            • column: 2
                            }
                          • end: {...}
                            • line: 8
                            • column: 3
                            }
                          }
                        • test: BinaryExpression {...}
                          • type: "BinaryExpression"
                          • start: 57
                          • end: 68
                          • loc: {...}
                            • start: {...}
                              • line: 5
                              • column: 6
                              }
                            • end: {...}
                              • line: 5
                              • column: 17
                              }
                            }
                          • left: Identifier {...}
                            • type: "Identifier"
                            • start: 57
                            • end: 62
                            • loc: {...}
                              • start: {...}
                                • line: 5
                                • column: 6
                                }
                              • end: {...}
                                • line: 5
                                • column: 11
                                }
                              }
                            • name: "count"
                            }
                          • operator: ">="
                          • right: Literal {...}
                            • type: "Literal"
                            • start: 66
                            • end: 68
                            • loc: {...}
                              • start: {...}
                                • line: 5
                                • column: 15
                                }
                              • end: {...}
                                • line: 5
                                • column: 17
                                }
                              }
                            • value: 10
                            • raw: "10"
                            }
                          }
                        • consequent: BlockStatement {...}
                          • type: "BlockStatement"
                          • start: 70
                          • end: 129
                          • loc: {...}
                            • start: {...}
                              • line: 5
                              • column: 19
                              }
                            • end: {...}
                              • line: 8
                              • column: 3
                              }
                            }
                          • body: [...] (2)
                            • ExpressionStatement {...}
                              • type: "ExpressionStatement"
                              • start: 75
                              • end: 111
                              • loc: {...}
                                • start: {...}
                                  • line: 6
                                  • column: 3
                                  }
                                • end: {...}
                                  • line: 6
                                  • column: 39
                                  }
                                }
                              • expression: CallExpression {...}
                                • type: "CallExpression"
                                • start: 75
                                • end: 110
                                • loc: {...}
                                  • start: {...}
                                    • line: 6
                                    • column: 3
                                    }
                                  • end: {...}
                                    • line: 6
                                    • column: 38
                                    }
                                  }
                                • callee: Identifier {...}
                                  • type: "Identifier"
                                  • start: 75
                                  • end: 80
                                  • loc: {...}
                                    • start: {...}
                                      • line: 6
                                      • column: 3
                                      }
                                    • end: {...}
                                      • line: 6
                                      • column: 8
                                      }
                                    }
                                  • name: "alert"
                                  }
                                • arguments: [...] (1)
                                  • TemplateLiteral {...}
                                    • type: "TemplateLiteral"
                                    • start: 81
                                    • end: 109
                                    • loc: {...}
                                      • start: {...}
                                        • line: 6
                                        • column: 9
                                        }
                                      • end: {...}
                                        • line: 6
                                        • column: 37
                                        }
                                      }
                                    • expressions: []
                                    • quasis: [...] (1)
                                      • TemplateElement {...}
                                        • type: "TemplateElement"
                                        • start: 82
                                        • end: 108
                                        • loc: {...}
                                          • start: {...}
                                            • line: 6
                                            • column: 10
                                            }
                                          • end: {...}
                                            • line: 6
                                            • column: 36
                                            }
                                          }
                                        • value: {...}
                                          • raw: "count is dangerously high!"
                                          • cooked: "count is dangerously high!"
                                          }
                                        • tail: true
                                        }
                                      ]
                                    }
                                  ]
                                • optional: false
                                }
                              }
                            • ExpressionStatement {...}
                              • type: "ExpressionStatement"
                              • start: 115
                              • end: 125
                              • loc: {...}
                                • start: {...}
                                  • line: 7
                                  • column: 3
                                  }
                                • end: {...}
                                  • line: 7
                                  • column: 13
                                  }
                                }
                              • expression: AssignmentExpression {...}
                                • type: "AssignmentExpression"
                                • start: 115
                                • end: 124
                                • loc: {...}
                                  • start: {...}
                                    • line: 7
                                    • column: 3
                                    }
                                  • end: {...}
                                    • line: 7
                                    • column: 12
                                    }
                                  }
                                • operator: "="
                                • left: Identifier {...}
                                  • type: "Identifier"
                                  • start: 115
                                  • end: 120
                                  • loc: {...}
                                    • start: {...}
                                      • line: 7
                                      • column: 3
                                      }
                                    • end: {...}
                                      • line: 7
                                      • column: 8
                                      }
                                    }
                                  • name: "count"
                                  }
                                • right: Literal {...}
                                  • type: "Literal"
                                  • start: 123
                                  • end: 124
                                  • loc: {...}
                                    • start: {...}
                                      • line: 7
                                      • column: 11
                                      }
                                    • end: {...}
                                      • line: 7
                                      • column: 12
                                      }
                                    }
                                  • value: 9
                                  • raw: "9"
                                  }
                                }
                              }
                            ]
                          }
                        • alternate: null
                        }
                      ]
                    }
                  }
                ]
              • optional: false
              }
            }
          • FunctionDeclaration {...}
            • type: "FunctionDeclaration"
            • start: 137
            • end: 178
            • loc: {...}
              • start: {...}
                • line: 11
                • column: 1
                }
              • end: {...}
                • line: 13
                • column: 2
                }
              }
            • id: Identifier {...}
              • type: "Identifier"
              • start: 146
              • end: 157
              • loc: {...}
                • start: {...}
                  • line: 11
                  • column: 10
                  }
                • end: {...}
                  • line: 11
                  • column: 21
                  }
                }
              • name: "handleClick"
              }
            • expression: false
            • generator: false
            • async: false
            • params: []
            • body: BlockStatement {...}
              • type: "BlockStatement"
              • start: 160
              • end: 178
              • loc: {...}
                • start: {...}
                  • line: 11
                  • column: 24
                  }
                • end: {...}
                  • line: 13
                  • column: 2
                  }
                }
              • body: [...] (1)
                • ExpressionStatement {...}
                  • type: "ExpressionStatement"
                  • start: 164
                  • end: 175
                  • loc: {...}
                    • start: {...}
                      • line: 12
                      • column: 2
                      }
                    • end: {...}
                      • line: 12
                      • column: 13
                      }
                    }
                  • expression: AssignmentExpression {...}
                    • type: "AssignmentExpression"
                    • start: 164
                    • end: 174
                    • loc: {...}
                      • start: {...}
                        • line: 12
                        • column: 2
                        }
                      • end: {...}
                        • line: 12
                        • column: 12
                        }
                      }
                    • operator: "+="
                    • left: Identifier {...}
                      • type: "Identifier"
                      • start: 164
                      • end: 169
                      • loc: {...}
                        • start: {...}
                          • line: 12
                          • column: 2
                          }
                        • end: {...}
                          • line: 12
                          • column: 7
                          }
                        }
                      • name: "count"
                      }
                    • right: Literal {...}
                      • type: "Literal"
                      • start: 173
                      • end: 174
                      • loc: {...}
                        • start: {...}
                          • line: 12
                          • column: 11
                          }
                        • end: {...}
                          • line: 12
                          • column: 12
                          }
                        }
                      • value: 1
                      • raw: "1"
                      }
                    }
                  }
                ]
              }
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
Reactive statements • Playground • Svelte