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

let showModal = $state(false);
</script>

<button onclick={() => (showModal = true)}> show modal </button>

<Modal bind:showModal>
{#snippet header()}
<h2>
modal
<small><em>adjective</em> mod·al \ˈmō-dəl\</small>
</h2>
{/snippet}

<ol class="definition-list">
<li>of or relating to modality in logic</li>
<li>
containing provisions as to the mode of procedure or the manner of taking effect —used of a
contract or legacy
</li>
<li>of or relating to a musical mode</li>
<li>of or relating to structure as opposed to substance</li>
<li>
of, relating to, or constituting a grammatical form or category characteristically indicating
predication
</li>
<li>of or relating to a statistical mode</li>
</ol>

<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
</Modal>

Error compiling component

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

var on_click = (_, showModal) => $.set(showModal, true);
var root_1 = $.template(`<h2>modal <small><em>adjective</em> mod·al \\ˈmō-dəl\\</small></h2>`);

var root_2 = $.template(
`<ol class="definition-list"><li>of or relating to modality in logic</li> <li>containing provisions as to the mode of procedure or the manner of taking effect —used of a
contract or legacy</li> <li>of or relating to a musical mode</li> <li>of or relating to structure as opposed to substance</li> <li>of, relating to, or constituting a grammatical form or category characteristically indicating
predication</li> <li>of or relating to a statistical mode</li></ol> <a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>`,
1
);

var root = $.template(`<button>show modal</button> <!>`, 1);

export default function App($$anchor) {
let showModal = $.state(false);
var fragment = root();
var button = $.first_child(fragment);

button.__click = [on_click, showModal];

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

{
const header = ($$anchor) => {
var h2 = root_1();

$.append($$anchor, h2);
};

Modal(node, {
get showModal() {
return $.get(showModal);
},
result = svelte.compile(source, {
generate: ,
});
/* Add a <style> tag to see the CSS output */
		
			
				
  • Root {
    • css: null
    • js: []
    • start: 90
    • end: 882
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (4)
        • Text {...}
          • type: "Text"
          • start: 88
          • end: 90
          • raw: "\n\n"
          • data: "\n\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 90
          • end: 154
          • name: "button"
          • attributes: [...] (1)
            • Attribute {...}
              • type: "Attribute"
              • start: 98
              • end: 132
              • name: "onclick"
              • value: ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 106
                • end: 132
                • expression: ArrowFunctionExpression {...}
                  • type: "ArrowFunctionExpression"
                  • start: 107
                  • end: 131
                  • loc: {...}
                    • start: {...}
                      • line: 7
                      • column: 17
                      }
                    • end: {...}
                      • line: 7
                      • column: 41
                      }
                    }
                  • id: null
                  • expression: true
                  • generator: false
                  • async: false
                  • params: []
                  • body: AssignmentExpression {...}
                    • type: "AssignmentExpression"
                    • start: 114
                    • end: 130
                    • loc: {...}
                      • start: {...}
                        • line: 7
                        • column: 24
                        }
                      • end: {...}
                        • line: 7
                        • column: 40
                        }
                      }
                    • operator: "="
                    • left: Identifier {...}
                      • type: "Identifier"
                      • start: 114
                      • end: 123
                      • loc: {...}
                        • start: {...}
                          • line: 7
                          • column: 24
                          }
                        • end: {...}
                          • line: 7
                          • column: 33
                          }
                        }
                      • name: "showModal"
                      }
                    • right: Literal {...}
                      • type: "Literal"
                      • start: 126
                      • end: 130
                      • loc: {...}
                        • start: {...}
                          • line: 7
                          • column: 36
                          }
                        • end: {...}
                          • line: 7
                          • column: 40
                          }
                        }
                      • value: true
                      • raw: "true"
                      }
                    }
                  }
                }
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (1)
              • Text {...}
                • type: "Text"
                • start: 133
                • end: 145
                • raw: "show modal"
                • data: "show modal"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 154
          • end: 156
          • raw: " "
          • data: " "
          }
        • Component {...}
          • type: "Component"
          • start: 156
          • end: 882
          • name: "Modal"
          • attributes: [...] (1)
            • BindDirective {...}
              • start: 163
              • end: 177
              • type: "BindDirective"
              • name: "showModal"
              • expression: Identifier {...}
                • start: 168
                • end: 177
                • type: "Identifier"
                • name: "showModal"
                }
              • modifiers: []
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (7)
              • Text {...}
                • type: "Text"
                • start: 178
                • end: 180
                • raw: "\n\t"
                • data: "\n\t"
                }
              • SnippetBlock {...}
                • type: "SnippetBlock"
                • start: 180
                • end: 289
                • expression: Identifier {...}
                  • type: "Identifier"
                  • start: 190
                  • end: 196
                  • name: "header"
                  }
                • parameters: []
                • body: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (3)
                    • Text {...}
                      • type: "Text"
                      • start: 199
                      • end: 202
                      • raw: "\n\t\t"
                      • data: "\n\t\t"
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 202
                      • end: 277
                      • name: "h2"
                      • attributes: []
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (3)
                          • Text {...}
                            • type: "Text"
                            • start: 206
                            • end: 219
                            • raw: "modal "
                            • data: "modal "
                            }
                          • RegularElement {...}
                            • type: "RegularElement"
                            • start: 219
                            • end: 269
                            • name: "small"
                            • attributes: []
                            • fragment: Fragment {...}
                              • type: "Fragment"
                              • nodes: [...] (2)
                                • RegularElement {...}
                                  • type: "RegularElement"
                                  • start: 226
                                  • end: 244
                                  • name: "em"
                                  • attributes: []
                                  • fragment: Fragment {...}
                                    • type: "Fragment"
                                    • nodes: [...] (1)
                                      • Text {...}
                                        • type: "Text"
                                        • start: 230
                                        • end: 239
                                        • raw: "adjective"
                                        • data: "adjective"
                                        }
                                      ]
                                    }
                                  }
                                • Text {...}
                                  • type: "Text"
                                  • start: 244
                                  • end: 261
                                  • raw: " mod·al \\ˈmō-dəl\\"
                                  • data: " mod·al \\ˈmō-dəl\\"
                                  }
                                ]
                              }
                            }
                          • Text {...}
                            • type: "Text"
                            • start: 269
                            • end: 272
                            • raw: "\n\t\t"
                            • data: "\n\t\t"
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 277
                      • end: 279
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 289
                • end: 292
                • raw: "\n\n\t"
                • data: "\n\n\t"
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 292
                • end: 788
                • name: "ol"
                • attributes: [...] (1)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 296
                    • end: 319
                    • name: "class"
                    • value: [...] (1)
                      • Text {...}
                        • start: 303
                        • end: 318
                        • type: "Text"
                        • raw: "definition-list"
                        • data: "definition-list"
                        }
                      ]
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (13)
                    • Text {...}
                      • type: "Text"
                      • start: 320
                      • end: 323
                      • raw: "\n\t\t"
                      • data: "\n\t\t"
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 323
                      • end: 367
                      • name: "li"
                      • attributes: []
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • Text {...}
                            • type: "Text"
                            • start: 327
                            • end: 362
                            • raw: "of or relating to modality in logic"
                            • data: "of or relating to modality in logic"
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 367
                      • end: 370
                      • raw: " "
                      • data: " "
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 370
                      • end: 499
                      • name: "li"
                      • attributes: []
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • Text {...}
                            • type: "Text"
                            • start: 374
                            • end: 494
                            • raw: "containing provisions as to the mode of procedure or the manner of taking effect —used of a\n\t\t\tcontract or legacy"
                            • data: "containing provisions as to the mode of procedure or the manner of taking effect —used of a\n\t\t\tcontract or legacy"
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 499
                      • end: 502
                      • raw: " "
                      • data: " "
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 502
                      • end: 543
                      • name: "li"
                      • attributes: []
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • Text {...}
                            • type: "Text"
                            • start: 506
                            • end: 538
                            • raw: "of or relating to a musical mode"
                            • data: "of or relating to a musical mode"
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 543
                      • end: 546
                      • raw: " "
                      • data: " "
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 546
                      • end: 606
                      • name: "li"
                      • attributes: []
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • Text {...}
                            • type: "Text"
                            • start: 550
                            • end: 601
                            • raw: "of or relating to structure as opposed to substance"
                            • data: "of or relating to structure as opposed to substance"
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 606
                      • end: 609
                      • raw: " "
                      • data: " "
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 609
                      • end: 733
                      • name: "li"
                      • attributes: []
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • Text {...}
                            • type: "Text"
                            • start: 613
                            • end: 728
                            • raw: "of, relating to, or constituting a grammatical form or category characteristically indicating\n\t\t\tpredication"
                            • data: "of, relating to, or constituting a grammatical form or category characteristically indicating\n\t\t\tpredication"
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 733
                      • end: 736
                      • raw: " "
                      • data: " "
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 736
                      • end: 781
                      • name: "li"
                      • attributes: []
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • Text {...}
                            • type: "Text"
                            • start: 740
                            • end: 776
                            • raw: "of or relating to a statistical mode"
                            • data: "of or relating to a statistical mode"
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 781
                      • end: 783
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 788
                • end: 791
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 791
                • end: 873
                • name: "a"
                • attributes: [...] (1)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 794
                    • end: 849
                    • name: "href"
                    • value: [...] (1)
                      • Text {...}
                        • start: 800
                        • end: 848
                        • type: "Text"
                        • raw: "https://www.merriam-webster.com/dictionary/modal"
                        • data: "https://www.merriam-webster.com/dictionary/modal"
                        }
                      ]
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (1)
                    • Text {...}
                      • type: "Text"
                      • start: 850
                      • end: 869
                      • raw: "merriam-webster.com"
                      • data: "merriam-webster.com"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 873
                • end: 874
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 88
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 79
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 5
            • column: 0
            }
          }
        • body: [...] (2)
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 10
            • end: 45
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 2
                • column: 36
                }
              }
            • specifiers: [...] (1)
              • ImportDefaultSpecifier {...}
                • type: "ImportDefaultSpecifier"
                • start: 17
                • end: 22
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 8
                    }
                  • end: {...}
                    • line: 2
                    • column: 13
                    }
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 17
                  • end: 22
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 8
                      }
                    • end: {...}
                      • line: 2
                      • column: 13
                      }
                    }
                  • name: "Modal"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 28
              • end: 44
              • loc: {...}
                • start: {...}
                  • line: 2
                  • column: 19
                  }
                • end: {...}
                  • line: 2
                  • column: 35
                  }
                }
              • value: "./Modal.svelte"
              • raw: "'./Modal.svelte'"
              }
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 48
            • end: 78
            • loc: {...}
              • start: {...}
                • line: 4
                • column: 1
                }
              • end: {...}
                • line: 4
                • column: 31
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 52
                • end: 77
                • loc: {...}
                  • start: {...}
                    • line: 4
                    • column: 5
                    }
                  • end: {...}
                    • line: 4
                    • column: 30
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 52
                  • end: 61
                  • loc: {...}
                    • start: {...}
                      • line: 4
                      • column: 5
                      }
                    • end: {...}
                      • line: 4
                      • column: 14
                      }
                    }
                  • name: "showModal"
                  }
                • init: CallExpression {...}
                  • type: "CallExpression"
                  • start: 64
                  • end: 77
                  • loc: {...}
                    • start: {...}
                      • line: 4
                      • column: 17
                      }
                    • end: {...}
                      • line: 4
                      • column: 30
                      }
                    }
                  • callee: Identifier {...}
                    • type: "Identifier"
                    • start: 64
                    • end: 70
                    • loc: {...}
                      • start: {...}
                        • line: 4
                        • column: 17
                        }
                      • end: {...}
                        • line: 4
                        • column: 23
                        }
                      }
                    • name: "$state"
                    }
                  • arguments: [...] (1)
                    • Literal {...}
                      • type: "Literal"
                      • start: 71
                      • end: 76
                      • loc: {...}
                        • start: {...}
                          • line: 4
                          • column: 24
                          }
                        • end: {...}
                          • line: 4
                          • column: 29
                          }
                        }
                      • value: false
                      • raw: "false"
                      }
                    ]
                  • optional: false
                  }
                }
              ]
            • kind: "let"
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
Modal • Playground • Svelte