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 wishlist = [
'DJI PHANTOM 4 RTK',
'Apple Vision Pro',
'iPhone 16 Pro Max with Swarovski Crystals case'
].join('\n');
</script>

<form onsubmit={(e) => {
e.preventDefault();
alert('the elves received your letter');
}}>
<p>Dear Santa,</p>
<p>This Christmas I would like:</p>
<textarea defaultValue="a lump of coal">{wishlist}</textarea>

<input type="reset" value="start over">
<button>send</button>
</form>

<style>
:global(*) {
font-family: 'Comic Sans MS';
}
textarea {
width: 100%;
height: 200px;
resize: none;
margin: 0 0 1em 0;
}
</style>

Error compiling component

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

var root = $.template(`<form><p>Dear Santa,</p> <p>This Christmas I would like:</p> <textarea class="svelte-1ncc6yl"></textarea> <input type="reset" value="start over"> <button>send</button></form>`);

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

let wishlist = [
'DJI PHANTOM 4 RTK',
'Apple Vision Pro',
'iPhone 16 Pro Max with Swarovski Crystals case'
].join('\n');

$.init();

var form = root();
var textarea = $.sibling($.child(form), 4);

$.remove_textarea_child(textarea);
textarea.defaultValue = 'a lump of coal';
$.set_value(textarea, wishlist);
$.next(4);
$.reset(form);

$.event('submit', form, (e) => {
e.preventDefault();
alert('the elves received your letter');
});

$.append($$anchor, form);
$.pop();
}
result = svelte.compile(source, {
generate: ,
});

* {
font-family: 'Comic Sans MS';
}
textarea.svelte-1ncc6yl {
width: 100%;
height: 200px;
resize: none;
margin: 0 0 1em 0;
}

		
			
				
  • Root {
    • css: StyleSheet {...}
      • type: "StyleSheet"
      • start: 437
      • end: 588
      • attributes: []
      • children: [...] (2)
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 446
            • end: 456
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 446
                • end: 456
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • PseudoClassSelector {...}
                        • type: "PseudoClassSelector"
                        • name: "global"
                        • args: SelectorList {...}
                          • type: "SelectorList"
                          • start: 454
                          • end: 455
                          • children: [...] (1)
                            • ComplexSelector {...}
                              • type: "ComplexSelector"
                              • start: 454
                              • end: 455
                              • children: [...] (1)
                                • RelativeSelector {...}
                                  • type: "RelativeSelector"
                                  • combinator: null
                                  • selectors: [...] (1)
                                    • TypeSelector {...}
                                      • type: "TypeSelector"
                                      • name: "*"
                                      • start: 454
                                      • end: 455
                                      }
                                    ]
                                  • start: 454
                                  • end: 455
                                  }
                                ]
                              }
                            ]
                          }
                        • start: 446
                        • end: 456
                        }
                      ]
                    • start: 446
                    • end: 456
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 457
            • end: 493
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • start: 461
                • end: 489
                • property: "font-family"
                • value: "'Comic Sans MS'"
                }
              ]
            }
          • start: 446
          • end: 493
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 497
            • end: 505
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 497
                • end: 505
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • TypeSelector {...}
                        • type: "TypeSelector"
                        • name: "textarea"
                        • start: 497
                        • end: 505
                        }
                      ]
                    • start: 497
                    • end: 505
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 506
            • end: 579
            • children: [...] (4)
              • Declaration {...}
                • type: "Declaration"
                • start: 510
                • end: 521
                • property: "width"
                • value: "100%"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 525
                • end: 538
                • property: "height"
                • value: "200px"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 542
                • end: 554
                • property: "resize"
                • value: "none"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 558
                • end: 575
                • property: "margin"
                • value: "0 0 1em 0"
                }
              ]
            }
          • start: 497
          • end: 579
          }
        ]
      • content: {...}
        • start: 444
        • end: 580
        • styles: "\n\t:global(*) {\n\t\tfont-family: 'Comic Sans MS';\n\t}\n\t\n\ttextarea {\n\t\twidth: 100%;\n\t\theight: 200px;\n\t\tresize: none;\n\t\tmargin: 0 0 1em 0;\n\t}\n"
        • comment: null
        }
      }
    • js: []
    • start: 149
    • end: 435
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (3)
        • Text {...}
          • type: "Text"
          • start: 147
          • end: 149
          • raw: "\n\n"
          • data: "\n\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 149
          • end: 435
          • name: "form"
          • attributes: [...] (1)
            • Attribute {...}
              • type: "Attribute"
              • start: 155
              • end: 239
              • name: "onsubmit"
              • value: ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 164
                • end: 239
                • expression: ArrowFunctionExpression {...}
                  • type: "ArrowFunctionExpression"
                  • start: 165
                  • end: 238
                  • loc: {...}
                    • start: {...}
                      • line: 9
                      • column: 16
                      }
                    • end: {...}
                      • line: 12
                      • column: 1
                      }
                    }
                  • id: null
                  • expression: false
                  • generator: false
                  • async: false
                  • params: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • start: 166
                      • end: 167
                      • loc: {...}
                        • start: {...}
                          • line: 9
                          • column: 17
                          }
                        • end: {...}
                          • line: 9
                          • column: 18
                          }
                        }
                      • name: "e"
                      }
                    ]
                  • body: BlockStatement {...}
                    • type: "BlockStatement"
                    • start: 172
                    • end: 238
                    • loc: {...}
                      • start: {...}
                        • line: 9
                        • column: 23
                        }
                      • end: {...}
                        • line: 12
                        • column: 1
                        }
                      }
                    • body: [...] (2)
                      • ExpressionStatement {...}
                        • type: "ExpressionStatement"
                        • start: 175
                        • end: 194
                        • loc: {...}
                          • start: {...}
                            • line: 10
                            • column: 1
                            }
                          • end: {...}
                            • line: 10
                            • column: 20
                            }
                          }
                        • expression: CallExpression {...}
                          • type: "CallExpression"
                          • start: 175
                          • end: 193
                          • loc: {...}
                            • start: {...}
                              • line: 10
                              • column: 1
                              }
                            • end: {...}
                              • line: 10
                              • column: 19
                              }
                            }
                          • callee: MemberExpression {...}
                            • type: "MemberExpression"
                            • start: 175
                            • end: 191
                            • loc: {...}
                              • start: {...}
                                • line: 10
                                • column: 1
                                }
                              • end: {...}
                                • line: 10
                                • column: 17
                                }
                              }
                            • object: Identifier {...}
                              • type: "Identifier"
                              • start: 175
                              • end: 176
                              • loc: {...}
                                • start: {...}
                                  • line: 10
                                  • column: 1
                                  }
                                • end: {...}
                                  • line: 10
                                  • column: 2
                                  }
                                }
                              • name: "e"
                              }
                            • property: Identifier {...}
                              • type: "Identifier"
                              • start: 177
                              • end: 191
                              • loc: {...}
                                • start: {...}
                                  • line: 10
                                  • column: 3
                                  }
                                • end: {...}
                                  • line: 10
                                  • column: 17
                                  }
                                }
                              • name: "preventDefault"
                              }
                            • computed: false
                            • optional: false
                            }
                          • arguments: []
                          • optional: false
                          }
                        }
                      • ExpressionStatement {...}
                        • type: "ExpressionStatement"
                        • start: 196
                        • end: 236
                        • loc: {...}
                          • start: {...}
                            • line: 11
                            • column: 1
                            }
                          • end: {...}
                            • line: 11
                            • column: 41
                            }
                          }
                        • expression: CallExpression {...}
                          • type: "CallExpression"
                          • start: 196
                          • end: 235
                          • loc: {...}
                            • start: {...}
                              • line: 11
                              • column: 1
                              }
                            • end: {...}
                              • line: 11
                              • column: 40
                              }
                            }
                          • callee: Identifier {...}
                            • type: "Identifier"
                            • start: 196
                            • end: 201
                            • loc: {...}
                              • start: {...}
                                • line: 11
                                • column: 1
                                }
                              • end: {...}
                                • line: 11
                                • column: 6
                                }
                              }
                            • name: "alert"
                            }
                          • arguments: [...] (1)
                            • Literal {...}
                              • type: "Literal"
                              • start: 202
                              • end: 234
                              • loc: {...}
                                • start: {...}
                                  • line: 11
                                  • column: 7
                                  }
                                • end: {...}
                                  • line: 11
                                  • column: 39
                                  }
                                }
                              • value: "the elves received your letter"
                              • raw: "'the elves received your letter'"
                              }
                            ]
                          • optional: false
                          }
                        }
                      ]
                    }
                  }
                }
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (11)
              • Text {...}
                • type: "Text"
                • start: 240
                • end: 242
                • raw: "\n\t"
                • data: "\n\t"
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 242
                • end: 260
                • name: "p"
                • attributes: []
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (1)
                    • Text {...}
                      • type: "Text"
                      • start: 245
                      • end: 256
                      • raw: "Dear Santa,"
                      • data: "Dear Santa,"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 260
                • end: 262
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 262
                • end: 297
                • name: "p"
                • attributes: []
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (1)
                    • Text {...}
                      • type: "Text"
                      • start: 265
                      • end: 293
                      • raw: "This Christmas I would like:"
                      • data: "This Christmas I would like:"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 297
                • end: 301
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 301
                • end: 362
                • name: "textarea"
                • attributes: [...] (3)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 311
                    • end: 340
                    • name: "defaultValue"
                    • value: [...] (1)
                      • Text {...}
                        • start: 325
                        • end: 339
                        • type: "Text"
                        • raw: "a lump of coal"
                        • data: "a lump of coal"
                        }
                      ]
                    }
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 341
                    • end: 351
                    • name: "value"
                    • value: [...] (1)
                      • ExpressionTag {...}
                        • type: "ExpressionTag"
                        • start: 341
                        • end: 351
                        • expression: Identifier {...}
                          • type: "Identifier"
                          • start: 342
                          • end: 350
                          • loc: {...}
                            • start: {...}
                              • line: 16
                              • column: 42
                              }
                            • end: {...}
                              • line: 16
                              • column: 50
                              }
                            }
                          • name: "wishlist"
                          }
                        }
                      ]
                    }
                  • Attribute {...}
                    • type: "Attribute"
                    • start: -1
                    • end: -1
                    • name: "class"
                    • value: [...] (1)
                      • Text {...}
                        • type: "Text"
                        • data: "svelte-1ncc6yl"
                        • raw: "svelte-1ncc6yl"
                        • start: -1
                        • end: -1
                        }
                      ]
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: []
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 362
                • end: 365
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 365
                • end: 404
                • name: "input"
                • attributes: [...] (2)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 372
                    • end: 384
                    • name: "type"
                    • value: [...] (1)
                      • Text {...}
                        • start: 378
                        • end: 383
                        • type: "Text"
                        • raw: "reset"
                        • data: "reset"
                        }
                      ]
                    }
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 385
                    • end: 403
                    • name: "value"
                    • value: [...] (1)
                      • Text {...}
                        • start: 392
                        • end: 402
                        • type: "Text"
                        • raw: "start over"
                        • data: "start over"
                        }
                      ]
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: []
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 404
                • end: 406
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 406
                • end: 427
                • name: "button"
                • attributes: []
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (1)
                    • Text {...}
                      • type: "Text"
                      • start: 414
                      • end: 418
                      • raw: "send"
                      • data: "send"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 427
                • end: 428
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 435
          • end: 437
          • raw: "\n\n"
          • data: "\n\n"
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 147
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 138
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 7
            • column: 0
            }
          }
        • body: [...] (1)
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 10
            • end: 137
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 6
                • column: 14
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 14
                • end: 136
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 5
                    }
                  • end: {...}
                    • line: 6
                    • column: 13
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 14
                  • end: 22
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 5
                      }
                    • end: {...}
                      • line: 2
                      • column: 13
                      }
                    }
                  • name: "wishlist"
                  }
                • init: CallExpression {...}
                  • type: "CallExpression"
                  • start: 25
                  • end: 136
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 16
                      }
                    • end: {...}
                      • line: 6
                      • column: 13
                      }
                    }
                  • callee: MemberExpression {...}
                    • type: "MemberExpression"
                    • start: 25
                    • end: 130
                    • loc: {...}
                      • start: {...}
                        • line: 2
                        • column: 16
                        }
                      • end: {...}
                        • line: 6
                        • column: 7
                        }
                      }
                    • object: ArrayExpression {...}
                      • type: "ArrayExpression"
                      • start: 25
                      • end: 125
                      • loc: {...}
                        • start: {...}
                          • line: 2
                          • column: 16
                          }
                        • end: {...}
                          • line: 6
                          • column: 2
                          }
                        }
                      • elements: [...] (3)
                        • Literal {...}
                          • type: "Literal"
                          • start: 29
                          • end: 48
                          • loc: {...}
                            • start: {...}
                              • line: 3
                              • column: 2
                              }
                            • end: {...}
                              • line: 3
                              • column: 21
                              }
                            }
                          • value: "DJI PHANTOM 4 RTK"
                          • raw: "'DJI PHANTOM 4 RTK'"
                          }
                        • Literal {...}
                          • type: "Literal"
                          • start: 52
                          • end: 70
                          • loc: {...}
                            • start: {...}
                              • line: 4
                              • column: 2
                              }
                            • end: {...}
                              • line: 4
                              • column: 20
                              }
                            }
                          • value: "Apple Vision Pro"
                          • raw: "'Apple Vision Pro'"
                          }
                        • Literal {...}
                          • type: "Literal"
                          • start: 74
                          • end: 122
                          • loc: {...}
                            • start: {...}
                              • line: 5
                              • column: 2
                              }
                            • end: {...}
                              • line: 5
                              • column: 50
                              }
                            }
                          • value: "iPhone 16 Pro Max with Swarovski Crystals case"
                          • raw: "'iPhone 16 Pro Max with Swarovski Crystals case'"
                          }
                        ]
                      }
                    • property: Identifier {...}
                      • type: "Identifier"
                      • start: 126
                      • end: 130
                      • loc: {...}
                        • start: {...}
                          • line: 6
                          • column: 3
                          }
                        • end: {...}
                          • line: 6
                          • column: 7
                          }
                        }
                      • name: "join"
                      }
                    • computed: false
                    • optional: false
                    }
                  • arguments: [...] (1)
                    • Literal {...}
                      • type: "Literal"
                      • start: 131
                      • end: 135
                      • loc: {...}
                        • start: {...}
                          • line: 6
                          • column: 8
                          }
                        • end: {...}
                          • line: 6
                          • column: 12
                          }
                        }
                      • value: "\n"
                      • raw: "'\\n'"
                      }
                    ]
                  • optional: false
                  }
                }
              ]
            • kind: "let"
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
Dear Santa • Playground • Svelte