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
Keypad.svelte
<script>
import Keypad from './Keypad.svelte';

let pin = $state('');
let view = $derived(pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin');

function handleSubmit() {
alert(`submitted ${pin}`);
}
</script>

<h1 class:pin>{view}</h1>

<Keypad bind:value={pin} onSubmit={handleSubmit} />

<style>
h1 {
color: #ccc;
}
h1.pin {
color: #333;
}
:global(body.dark) h1 {
color: #444;
}
:global(body.dark) h1.pin {
color: #fff;
}
</style>

Error compiling component

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

var root = $.template(`<h1 class="svelte-1gw0kf"> </h1> <!>`, 1);

export default function App($$anchor) {
let pin = $.state('');
let view = $.derived(() => $.get(pin) ? $.get(pin).replace(/\d(?!$)/g, '•') : 'enter your pin');

function handleSubmit() {
alert(`submitted ${$.get(pin)}`);
}

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

$.reset(h1);

var node = $.sibling(h1, 2);

Keypad(node, {
onSubmit: handleSubmit,
get value() {
return $.get(pin);
},
set value($$value) {
$.set(pin, $.proxy($$value));
}
});

$.template_effect(() => {
$.toggle_class(h1, 'pin', $.get(pin));
$.set_text(text, $.get(view));
});
result = svelte.compile(source, {
generate: ,
});

h1.svelte-1gw0kf {
color: #ccc;
}
h1.pin.svelte-1gw0kf {
color: #333;
}
body.dark h1.svelte-1gw0kf {
color: #444;
}
body.dark h1.pin.svelte-1gw0kf {
color: #fff;
}

		
			
				
  • Root {
    • css: StyleSheet {...}
      • type: "StyleSheet"
      • start: 300
      • end: 458
      • attributes: []
      • children: [...] (4)
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 309
            • end: 311
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 309
                • end: 311
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • TypeSelector {...}
                        • type: "TypeSelector"
                        • name: "h1"
                        • start: 309
                        • end: 311
                        }
                      ]
                    • start: 309
                    • end: 311
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 312
            • end: 331
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • start: 316
                • end: 327
                • property: "color"
                • value: "#ccc"
                }
              ]
            }
          • start: 309
          • end: 331
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 333
            • end: 339
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 333
                • end: 339
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (2)
                      • TypeSelector {...}
                        • type: "TypeSelector"
                        • name: "h1"
                        • start: 333
                        • end: 335
                        }
                      • ClassSelector {...}
                        • type: "ClassSelector"
                        • name: "pin"
                        • start: 335
                        • end: 339
                        }
                      ]
                    • start: 333
                    • end: 339
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 340
            • end: 359
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • start: 344
                • end: 355
                • property: "color"
                • value: "#333"
                }
              ]
            }
          • start: 333
          • end: 359
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 361
            • end: 382
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 361
                • end: 382
                • children: [...] (2)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • PseudoClassSelector {...}
                        • type: "PseudoClassSelector"
                        • name: "global"
                        • args: SelectorList {...}
                          • type: "SelectorList"
                          • start: 369
                          • end: 378
                          • children: [...] (1)
                            • ComplexSelector {...}
                              • type: "ComplexSelector"
                              • start: 369
                              • end: 378
                              • children: [...] (1)
                                • RelativeSelector {...}
                                  • type: "RelativeSelector"
                                  • combinator: null
                                  • selectors: [...] (2)
                                    • TypeSelector {...}
                                      • type: "TypeSelector"
                                      • name: "body"
                                      • start: 369
                                      • end: 373
                                      }
                                    • ClassSelector {...}
                                      • type: "ClassSelector"
                                      • name: "dark"
                                      • start: 373
                                      • end: 378
                                      }
                                    ]
                                  • start: 369
                                  • end: 378
                                  }
                                ]
                              }
                            ]
                          }
                        • start: 361
                        • end: 379
                        }
                      ]
                    • start: 361
                    • end: 379
                    }
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: Combinator {...}
                      • type: "Combinator"
                      • name: " "
                      • start: 379
                      • end: 380
                      }
                    • selectors: [...] (1)
                      • TypeSelector {...}
                        • type: "TypeSelector"
                        • name: "h1"
                        • start: 380
                        • end: 382
                        }
                      ]
                    • start: 379
                    • end: 382
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 383
            • end: 402
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • start: 387
                • end: 398
                • property: "color"
                • value: "#444"
                }
              ]
            }
          • start: 361
          • end: 402
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 404
            • end: 429
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 404
                • end: 429
                • children: [...] (2)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • PseudoClassSelector {...}
                        • type: "PseudoClassSelector"
                        • name: "global"
                        • args: SelectorList {...}
                          • type: "SelectorList"
                          • start: 412
                          • end: 421
                          • children: [...] (1)
                            • ComplexSelector {...}
                              • type: "ComplexSelector"
                              • start: 412
                              • end: 421
                              • children: [...] (1)
                                • RelativeSelector {...}
                                  • type: "RelativeSelector"
                                  • combinator: null
                                  • selectors: [...] (2)
                                    • TypeSelector {...}
                                      • type: "TypeSelector"
                                      • name: "body"
                                      • start: 412
                                      • end: 416
                                      }
                                    • ClassSelector {...}
                                      • type: "ClassSelector"
                                      • name: "dark"
                                      • start: 416
                                      • end: 421
                                      }
                                    ]
                                  • start: 412
                                  • end: 421
                                  }
                                ]
                              }
                            ]
                          }
                        • start: 404
                        • end: 422
                        }
                      ]
                    • start: 404
                    • end: 422
                    }
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: Combinator {...}
                      • type: "Combinator"
                      • name: " "
                      • start: 422
                      • end: 423
                      }
                    • selectors: [...] (2)
                      • TypeSelector {...}
                        • type: "TypeSelector"
                        • name: "h1"
                        • start: 423
                        • end: 425
                        }
                      • ClassSelector {...}
                        • type: "ClassSelector"
                        • name: "pin"
                        • start: 425
                        • end: 429
                        }
                      ]
                    • start: 422
                    • end: 429
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 430
            • end: 449
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • start: 434
                • end: 445
                • property: "color"
                • value: "#fff"
                }
              ]
            }
          • start: 404
          • end: 449
          }
        ]
      • content: {...}
        • start: 307
        • end: 450
        • styles: "\n\th1 {\n\t\tcolor: #ccc;\n\t}\n\th1.pin {\n\t\tcolor: #333;\n\t}\n\t:global(body.dark) h1 {\n\t\tcolor: #444;\n\t}\n\t:global(body.dark) h1.pin {\n\t\tcolor: #fff;\n\t}\n"
        • comment: null
        }
      }
    • js: []
    • start: 220
    • end: 298
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (5)
        • Text {...}
          • type: "Text"
          • start: 218
          • end: 220
          • raw: "\n\n"
          • data: "\n\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 220
          • end: 245
          • name: "h1"
          • attributes: [...] (2)
            • ClassDirective {...}
              • start: 224
              • end: 233
              • type: "ClassDirective"
              • name: "pin"
              • expression: Identifier {...}
                • start: 230
                • end: 233
                • type: "Identifier"
                • name: "pin"
                }
              • modifiers: []
              }
            • Attribute {...}
              • type: "Attribute"
              • start: -1
              • end: -1
              • name: "class"
              • value: [...] (1)
                • Text {...}
                  • type: "Text"
                  • data: "svelte-1gw0kf"
                  • raw: "svelte-1gw0kf"
                  • start: -1
                  • end: -1
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (1)
              • ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 234
                • end: 240
                • expression: Identifier {...}
                  • type: "Identifier"
                  • start: 235
                  • end: 239
                  • loc: {...}
                    • start: {...}
                      • line: 12
                      • column: 15
                      }
                    • end: {...}
                      • line: 12
                      • column: 19
                      }
                    }
                  • name: "view"
                  }
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 245
          • end: 247
          • raw: " "
          • data: " "
          }
        • Component {...}
          • type: "Component"
          • start: 247
          • end: 298
          • name: "Keypad"
          • attributes: [...] (2)
            • BindDirective {...}
              • start: 255
              • end: 271
              • type: "BindDirective"
              • name: "value"
              • expression: Identifier {...}
                • type: "Identifier"
                • start: 267
                • end: 270
                • loc: {...}
                  • start: {...}
                    • line: 14
                    • column: 20
                    }
                  • end: {...}
                    • line: 14
                    • column: 23
                    }
                  }
                • name: "pin"
                }
              • modifiers: []
              }
            • Attribute {...}
              • type: "Attribute"
              • start: 272
              • end: 295
              • name: "onSubmit"
              • value: ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 281
                • end: 295
                • expression: Identifier {...}
                  • type: "Identifier"
                  • start: 282
                  • end: 294
                  • loc: {...}
                    • start: {...}
                      • line: 14
                      • column: 35
                      }
                    • end: {...}
                      • line: 14
                      • column: 47
                      }
                    }
                  • name: "handleSubmit"
                  }
                }
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: []
            }
          }
        • Text {...}
          • type: "Text"
          • start: 298
          • end: 300
          • raw: "\n\n"
          • data: "\n\n"
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 218
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 209
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 10
            • column: 0
            }
          }
        • body: [...] (4)
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 10
            • end: 47
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 2
                • column: 38
                }
              }
            • specifiers: [...] (1)
              • ImportDefaultSpecifier {...}
                • type: "ImportDefaultSpecifier"
                • start: 17
                • end: 23
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 8
                    }
                  • end: {...}
                    • line: 2
                    • column: 14
                    }
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 17
                  • end: 23
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 8
                      }
                    • end: {...}
                      • line: 2
                      • column: 14
                      }
                    }
                  • name: "Keypad"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 29
              • end: 46
              • loc: {...}
                • start: {...}
                  • line: 2
                  • column: 20
                  }
                • end: {...}
                  • line: 2
                  • column: 37
                  }
                }
              • value: "./Keypad.svelte"
              • raw: "'./Keypad.svelte'"
              }
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 50
            • end: 71
            • loc: {...}
              • start: {...}
                • line: 4
                • column: 1
                }
              • end: {...}
                • line: 4
                • column: 22
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 54
                • end: 70
                • loc: {...}
                  • start: {...}
                    • line: 4
                    • column: 5
                    }
                  • end: {...}
                    • line: 4
                    • column: 21
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 54
                  • end: 57
                  • loc: {...}
                    • start: {...}
                      • line: 4
                      • column: 5
                      }
                    • end: {...}
                      • line: 4
                      • column: 8
                      }
                    }
                  • name: "pin"
                  }
                • init: CallExpression {...}
                  • type: "CallExpression"
                  • start: 60
                  • end: 70
                  • loc: {...}
                    • start: {...}
                      • line: 4
                      • column: 11
                      }
                    • end: {...}
                      • line: 4
                      • column: 21
                      }
                    }
                  • callee: Identifier {...}
                    • type: "Identifier"
                    • start: 60
                    • end: 66
                    • loc: {...}
                      • start: {...}
                        • line: 4
                        • column: 11
                        }
                      • end: {...}
                        • line: 4
                        • column: 17
                        }
                      }
                    • name: "$state"
                    }
                  • arguments: [...] (1)
                    • Literal {...}
                      • type: "Literal"
                      • start: 67
                      • end: 69
                      • loc: {...}
                        • start: {...}
                          • line: 4
                          • column: 18
                          }
                        • end: {...}
                          • line: 4
                          • column: 20
                          }
                        }
                      • value: ""
                      • raw: "''"
                      }
                    ]
                  • optional: false
                  }
                }
              ]
            • kind: "let"
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 73
            • end: 148
            • loc: {...}
              • start: {...}
                • line: 5
                • column: 1
                }
              • end: {...}
                • line: 5
                • column: 76
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 77
                • end: 147
                • loc: {...}
                  • start: {...}
                    • line: 5
                    • column: 5
                    }
                  • end: {...}
                    • line: 5
                    • column: 75
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 77
                  • end: 81
                  • loc: {...}
                    • start: {...}
                      • line: 5
                      • column: 5
                      }
                    • end: {...}
                      • line: 5
                      • column: 9
                      }
                    }
                  • name: "view"
                  }
                • init: CallExpression {...}
                  • type: "CallExpression"
                  • start: 84
                  • end: 147
                  • loc: {...}
                    • start: {...}
                      • line: 5
                      • column: 12
                      }
                    • end: {...}
                      • line: 5
                      • column: 75
                      }
                    }
                  • callee: Identifier {...}
                    • type: "Identifier"
                    • start: 84
                    • end: 92
                    • loc: {...}
                      • start: {...}
                        • line: 5
                        • column: 12
                        }
                      • end: {...}
                        • line: 5
                        • column: 20
                        }
                      }
                    • name: "$derived"
                    }
                  • arguments: [...] (1)
                    • ConditionalExpression {...}
                      • type: "ConditionalExpression"
                      • start: 93
                      • end: 146
                      • loc: {...}
                        • start: {...}
                          • line: 5
                          • column: 21
                          }
                        • end: {...}
                          • line: 5
                          • column: 74
                          }
                        }
                      • test: Identifier {...}
                        • type: "Identifier"
                        • start: 93
                        • end: 96
                        • loc: {...}
                          • start: {...}
                            • line: 5
                            • column: 21
                            }
                          • end: {...}
                            • line: 5
                            • column: 24
                            }
                          }
                        • name: "pin"
                        }
                      • consequent: CallExpression {...}
                        • type: "CallExpression"
                        • start: 99
                        • end: 127
                        • loc: {...}
                          • start: {...}
                            • line: 5
                            • column: 27
                            }
                          • end: {...}
                            • line: 5
                            • column: 55
                            }
                          }
                        • callee: MemberExpression {...}
                          • type: "MemberExpression"
                          • start: 99
                          • end: 110
                          • loc: {...}
                            • start: {...}
                              • line: 5
                              • column: 27
                              }
                            • end: {...}
                              • line: 5
                              • column: 38
                              }
                            }
                          • object: Identifier {...}
                            • type: "Identifier"
                            • start: 99
                            • end: 102
                            • loc: {...}
                              • start: {...}
                                • line: 5
                                • column: 27
                                }
                              • end: {...}
                                • line: 5
                                • column: 30
                                }
                              }
                            • name: "pin"
                            }
                          • property: Identifier {...}
                            • type: "Identifier"
                            • start: 103
                            • end: 110
                            • loc: {...}
                              • start: {...}
                                • line: 5
                                • column: 31
                                }
                              • end: {...}
                                • line: 5
                                • column: 38
                                }
                              }
                            • name: "replace"
                            }
                          • computed: false
                          • optional: false
                          }
                        • arguments: [...] (2)
                          • Literal {...}
                            • type: "Literal"
                            • start: 111
                            • end: 121
                            • loc: {...}
                              • start: {...}
                                • line: 5
                                • column: 39
                                }
                              • end: {...}
                                • line: 5
                                • column: 49
                                }
                              }
                            • value: {...}
                                }
                              • raw: "/\\d(?!$)/g"
                              • regex: {...}
                                • pattern: "\\d(?!$)"
                                • flags: "g"
                                }
                              }
                            • Literal {...}
                              • type: "Literal"
                              • start: 123
                              • end: 126
                              • loc: {...}
                                • start: {...}
                                  • line: 5
                                  • column: 51
                                  }
                                • end: {...}
                                  • line: 5
                                  • column: 54
                                  }
                                }
                              • value: "•"
                              • raw: "'•'"
                              }
                            ]
                          • optional: false
                          }
                        • alternate: Literal {...}
                          • type: "Literal"
                          • start: 130
                          • end: 146
                          • loc: {...}
                            • start: {...}
                              • line: 5
                              • column: 58
                              }
                            • end: {...}
                              • line: 5
                              • column: 74
                              }
                            }
                          • value: "enter your pin"
                          • raw: "'enter your pin'"
                          }
                        }
                      ]
                    • optional: false
                    }
                  }
                ]
              • kind: "let"
              }
            • FunctionDeclaration {...}
              • type: "FunctionDeclaration"
              • start: 151
              • end: 208
              • loc: {...}
                • start: {...}
                  • line: 7
                  • column: 1
                  }
                • end: {...}
                  • line: 9
                  • column: 2
                  }
                }
              • id: Identifier {...}
                • type: "Identifier"
                • start: 160
                • end: 172
                • loc: {...}
                  • start: {...}
                    • line: 7
                    • column: 10
                    }
                  • end: {...}
                    • line: 7
                    • column: 22
                    }
                  }
                • name: "handleSubmit"
                }
              • expression: false
              • generator: false
              • async: false
              • params: []
              • body: BlockStatement {...}
                • type: "BlockStatement"
                • start: 175
                • end: 208
                • loc: {...}
                  • start: {...}
                    • line: 7
                    • column: 25
                    }
                  • end: {...}
                    • line: 9
                    • column: 2
                    }
                  }
                • body: [...] (1)
                  • ExpressionStatement {...}
                    • type: "ExpressionStatement"
                    • start: 179
                    • end: 205
                    • loc: {...}
                      • start: {...}
                        • line: 8
                        • column: 2
                        }
                      • end: {...}
                        • line: 8
                        • column: 28
                        }
                      }
                    • expression: CallExpression {...}
                      • type: "CallExpression"
                      • start: 179
                      • end: 204
                      • loc: {...}
                        • start: {...}
                          • line: 8
                          • column: 2
                          }
                        • end: {...}
                          • line: 8
                          • column: 27
                          }
                        }
                      • callee: Identifier {...}
                        • type: "Identifier"
                        • start: 179
                        • end: 184
                        • loc: {...}
                          • start: {...}
                            • line: 8
                            • column: 2
                            }
                          • end: {...}
                            • line: 8
                            • column: 7
                            }
                          }
                        • name: "alert"
                        }
                      • arguments: [...] (1)
                        • TemplateLiteral {...}
                          • type: "TemplateLiteral"
                          • start: 185
                          • end: 203
                          • loc: {...}
                            • start: {...}
                              • line: 8
                              • column: 8
                              }
                            • end: {...}
                              • line: 8
                              • column: 26
                              }
                            }
                          • expressions: [...] (1)
                            • Identifier {...}
                              • type: "Identifier"
                              • start: 198
                              • end: 201
                              • loc: {...}
                                • start: {...}
                                  • line: 8
                                  • column: 21
                                  }
                                • end: {...}
                                  • line: 8
                                  • column: 24
                                  }
                                }
                              • name: "pin"
                              }
                            ]
                          • quasis: [...] (2)
                            • TemplateElement {...}
                              • type: "TemplateElement"
                              • start: 186
                              • end: 196
                              • loc: {...}
                                • start: {...}
                                  • line: 8
                                  • column: 9
                                  }
                                • end: {...}
                                  • line: 8
                                  • column: 19
                                  }
                                }
                              • value: {...}
                                • raw: "submitted "
                                • cooked: "submitted "
                                }
                              • tail: false
                              }
                            • TemplateElement {...}
                              • type: "TemplateElement"
                              • start: 202
                              • end: 202
                              • loc: {...}
                                • start: {...}
                                  • line: 8
                                  • column: 25
                                  }
                                • end: {...}
                                  • line: 8
                                  • column: 25
                                  }
                                }
                              • value: {...}
                                • raw: ""
                                • cooked: ""
                                }
                              • tail: true
                              }
                            ]
                          }
                        ]
                      • optional: false
                      }
                    }
                  ]
                }
              }
            ]
          • sourceType: "module"
          }
        • attributes: []
        }
      }
    The AST is not public API and may change at any point in time
    Component bindings • Playground • Svelte