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,{getModal} from './Modal.svelte'
let name = 'world';
let selection
// Callback function provided to the `open` function, it receives the value given to the `close` function call, or `undefined` if the Modal was closed with escape or clicking the X, etc.
function setSelection(res){
selection=res
}
</script>
<h2>Very Simple Modal Component</h2>
<ul>
<li>Sinlge .svelte file, no dependencies</li>
<li>Code is simple and commented, easy to modify to your needs</li>
<li>It will always display on top, even if placed low in the stacking context</li>
<li>Supports multiple, nested modal popups</li>
<li>Supports returning a value when closing modal popup</li>
</ul>

<!-- Simplest use: modal without an `id` or callback function -->
<button on:click={()=>getModal().open()}>
Open First Popup
</button>

<!-- the modal without an `id` -->
<Modal>
<h1>Hello {name}!</h1>
<!-- opening a model with an `id` and specifying a callback -->
<button on:click={()=>getModal('second').open(setSelection)}>
Open Nested Popup
</button>
{#if selection}
<p>
Your selection was: {selection}
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
import Modal, { getModal } from './Modal.svelte';

var root_2 = $.template(`<p> </p>`);
var root_1 = $.template(`<h1></h1> <button>Open Nested Popup</button> <!>`, 1);
var root_3 = $.template(`Inner window <button class="green svelte-8ruzc8">Select 1</button> <button class="green svelte-8ruzc8">Select 2</button>`, 1);
var root = $.template(`<h2>Very Simple Modal Component</h2> <ul><li>Sinlge .svelte file, no dependencies</li> <li>Code is simple and commented, easy to modify to your needs</li> <li>It will always display on top, even if placed low in the stacking context</li> <li>Supports multiple, nested modal popups</li> <li>Supports returning a value when closing modal popup</li></ul> <button>Open First Popup</button> <!> <!>`, 1);

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

let name = 'world';
let selection = $.mutable_state();

// Callback function provided to the `open` function, it receives the value given to the `close` function call, or `undefined` if the Modal was closed with escape or clicking the X, etc.
function setSelection(res) {
$.set(selection, res);
}

$.init();

var fragment = root();
var button = $.sibling($.first_child(fragment), 4);
var node = $.sibling(button, 2);

Modal(node, {
children: ($$anchor, $$slotProps) => {
var fragment_1 = root_1();
var h1 = $.first_child(fragment_1);

h1.textContent = `Hello ${name ?? ''}!`;

var button_1 = $.sibling(h1, 2);
var node_1 = $.sibling(button_1, 2);
result = svelte.compile(source, {
generate: ,
});

/* The content inside the modal can be styled as usual */
.green.svelte-8ruzc8 {
background: #0f0;
}

		
			
				
  • Root {
    • css: StyleSheet {...}
      • type: "StyleSheet"
      • start: 1428
      • end: 1537
      • attributes: []
      • children: [...] (1)
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 1497
            • end: 1503
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 1497
                • end: 1503
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • ClassSelector {...}
                        • type: "ClassSelector"
                        • name: "green"
                        • start: 1497
                        • end: 1503
                        }
                      ]
                    • start: 1497
                    • end: 1503
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 1504
            • end: 1528
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • start: 1508
                • end: 1524
                • property: "background"
                • value: "#0f0"
                }
              ]
            }
          • start: 1497
          • end: 1528
          }
        ]
      • content: {...}
        • start: 1435
        • end: 1529
        • styles: "\n\t/* The content inside the modal can be styled as usual\t */\n\t.green {\n\t\tbackground: #0f0;\n\t}\n"
        • comment: null
        }
      }
    • js: []
    • start: 344
    • end: 1426
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (15)
        • Text {...}
          • type: "Text"
          • start: 343
          • end: 344
          • raw: "\n"
          • data: "\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 344
          • end: 380
          • name: "h2"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (1)
              • Text {...}
                • type: "Text"
                • start: 348
                • end: 375
                • raw: "Very Simple Modal Component"
                • data: "Very Simple Modal Component"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 380
          • end: 381
          • raw: " "
          • data: " "
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 381
          • end: 702
          • name: "ul"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (11)
              • Text {...}
                • type: "Text"
                • start: 385
                • end: 387
                • raw: "\n\t"
                • data: "\n\t"
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 387
                • end: 432
                • name: "li"
                • attributes: []
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (1)
                    • Text {...}
                      • type: "Text"
                      • start: 391
                      • end: 427
                      • raw: "Sinlge .svelte file, no dependencies"
                      • data: "Sinlge .svelte file, no dependencies"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 432
                • end: 434
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 434
                • end: 501
                • name: "li"
                • attributes: []
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (1)
                    • Text {...}
                      • type: "Text"
                      • start: 438
                      • end: 496
                      • raw: "Code is simple and commented, easy to modify to your needs"
                      • data: "Code is simple and commented, easy to modify to your needs"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 501
                • end: 503
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 503
                • end: 585
                • name: "li"
                • attributes: []
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (1)
                    • Text {...}
                      • type: "Text"
                      • start: 507
                      • end: 580
                      • raw: "It will always display on top, even if placed low in the stacking context"
                      • data: "It will always display on top, even if placed low in the stacking context"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 585
                • end: 587
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 587
                • end: 634
                • name: "li"
                • attributes: []
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (1)
                    • Text {...}
                      • type: "Text"
                      • start: 591
                      • end: 629
                      • raw: "Supports multiple, nested modal popups"
                      • data: "Supports multiple, nested modal popups"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 634
                • end: 636
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 636
                • end: 696
                • name: "li"
                • attributes: []
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (1)
                    • Text {...}
                      • type: "Text"
                      • start: 640
                      • end: 691
                      • raw: "Supports returning a value when closing modal popup"
                      • data: "Supports returning a value when closing modal popup"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 696
                • end: 697
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 702
          • end: 704
          • raw: " "
          • data: " "
          }
        • Comment {...}
          • type: "Comment"
          • start: 704
          • end: 769
          • data: " Simplest use: modal without an `id` or callback function "
          }
        • Text {...}
          • type: "Text"
          • start: 769
          • end: 770
          • raw: ""
          • data: ""
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 770
          • end: 839
          • name: "button"
          • attributes: [...] (1)
            • OnDirective {...}
              • start: 778
              • end: 810
              • type: "OnDirective"
              • name: "click"
              • expression: ArrowFunctionExpression {...}
                • type: "ArrowFunctionExpression"
                • start: 788
                • end: 809
                • loc: {...}
                  • start: {...}
                    • line: 23
                    • column: 18
                    }
                  • end: {...}
                    • line: 23
                    • column: 39
                    }
                  }
                • id: null
                • expression: true
                • generator: false
                • async: false
                • params: []
                • body: CallExpression {...}
                  • type: "CallExpression"
                  • start: 792
                  • end: 809
                  • loc: {...}
                    • start: {...}
                      • line: 23
                      • column: 22
                      }
                    • end: {...}
                      • line: 23
                      • column: 39
                      }
                    }
                  • callee: MemberExpression {...}
                    • type: "MemberExpression"
                    • start: 792
                    • end: 807
                    • loc: {...}
                      • start: {...}
                        • line: 23
                        • column: 22
                        }
                      • end: {...}
                        • line: 23
                        • column: 37
                        }
                      }
                    • object: CallExpression {...}
                      • type: "CallExpression"
                      • start: 792
                      • end: 802
                      • loc: {...}
                        • start: {...}
                          • line: 23
                          • column: 22
                          }
                        • end: {...}
                          • line: 23
                          • column: 32
                          }
                        }
                      • callee: Identifier {...}
                        • type: "Identifier"
                        • start: 792
                        • end: 800
                        • loc: {...}
                          • start: {...}
                            • line: 23
                            • column: 22
                            }
                          • end: {...}
                            • line: 23
                            • column: 30
                            }
                          }
                        • name: "getModal"
                        }
                      • arguments: []
                      • optional: false
                      }
                    • property: Identifier {...}
                      • type: "Identifier"
                      • start: 803
                      • end: 807
                      • loc: {...}
                        • start: {...}
                          • line: 23
                          • column: 33
                          }
                        • end: {...}
                          • line: 23
                          • column: 37
                          }
                        }
                      • name: "open"
                      }
                    • computed: false
                    • optional: false
                    }
                  • arguments: []
                  • optional: false
                  }
                }
              • modifiers: []
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (1)
              • Text {...}
                • type: "Text"
                • start: 811
                • end: 830
                • raw: "Open First Popup"
                • data: "Open First Popup"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 839
          • end: 841
          • raw: " "
          • data: " "
          }
        • Comment {...}
          • type: "Comment"
          • start: 841
          • end: 875
          • data: " the modal without an `id` "
          }
        • Text {...}
          • type: "Text"
          • start: 875
          • end: 876
          • raw: ""
          • data: ""
          }
        • Component {...}
          • type: "Component"
          • start: 876
          • end: 1145
          • name: "Modal"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (9)
              • Text {...}
                • type: "Text"
                • start: 883
                • end: 885
                • raw: "\n\t"
                • data: "\n\t"
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 885
                • end: 907
                • name: "h1"
                • attributes: []
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (3)
                    • Text {...}
                      • type: "Text"
                      • start: 889
                      • end: 895
                      • raw: "Hello "
                      • data: "Hello "
                      }
                    • ExpressionTag {...}
                      • type: "ExpressionTag"
                      • start: 895
                      • end: 901
                      • expression: Identifier {...}
                        • type: "Identifier"
                        • start: 896
                        • end: 900
                        • loc: {...}
                          • start: {...}
                            • line: 29
                            • column: 12
                            }
                          • end: {...}
                            • line: 29
                            • column: 16
                            }
                          }
                        • name: "name"
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 901
                      • end: 902
                      • raw: "!"
                      • data: "!"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 907
                • end: 909
                • raw: " "
                • data: " "
                }
              • Comment {...}
                • type: "Comment"
                • start: 909
                • end: 973
                • data: " opening a model with an `id` and specifying a callback\t "
                }
              • Text {...}
                • type: "Text"
                • start: 973
                • end: 975
                • raw: ""
                • data: ""
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 975
                • end: 1067
                • name: "button"
                • attributes: [...] (1)
                  • OnDirective {...}
                    • start: 983
                    • end: 1035
                    • type: "OnDirective"
                    • name: "click"
                    • expression: ArrowFunctionExpression {...}
                      • type: "ArrowFunctionExpression"
                      • start: 993
                      • end: 1034
                      • loc: {...}
                        • start: {...}
                          • line: 31
                          • column: 19
                          }
                        • end: {...}
                          • line: 31
                          • column: 60
                          }
                        }
                      • id: null
                      • expression: true
                      • generator: false
                      • async: false
                      • params: []
                      • body: CallExpression {...}
                        • type: "CallExpression"
                        • start: 997
                        • end: 1034
                        • loc: {...}
                          • start: {...}
                            • line: 31
                            • column: 23
                            }
                          • end: {...}
                            • line: 31
                            • column: 60
                            }
                          }
                        • callee: MemberExpression {...}
                          • type: "MemberExpression"
                          • start: 997
                          • end: 1020
                          • loc: {...}
                            • start: {...}
                              • line: 31
                              • column: 23
                              }
                            • end: {...}
                              • line: 31
                              • column: 46
                              }
                            }
                          • object: CallExpression {...}
                            • type: "CallExpression"
                            • start: 997
                            • end: 1015
                            • loc: {...}
                              • start: {...}
                                • line: 31
                                • column: 23
                                }
                              • end: {...}
                                • line: 31
                                • column: 41
                                }
                              }
                            • callee: Identifier {...}
                              • type: "Identifier"
                              • start: 997
                              • end: 1005
                              • loc: {...}
                                • start: {...}
                                  • line: 31
                                  • column: 23
                                  }
                                • end: {...}
                                  • line: 31
                                  • column: 31
                                  }
                                }
                              • name: "getModal"
                              }
                            • arguments: [...] (1)
                              • Literal {...}
                                • type: "Literal"
                                • start: 1006
                                • end: 1014
                                • loc: {...}
                                  • start: {...}
                                    • line: 31
                                    • column: 32
                                    }
                                  • end: {...}
                                    • line: 31
                                    • column: 40
                                    }
                                  }
                                • value: "second"
                                • raw: "'second'"
                                }
                              ]
                            • optional: false
                            }
                          • property: Identifier {...}
                            • type: "Identifier"
                            • start: 1016
                            • end: 1020
                            • loc: {...}
                              • start: {...}
                                • line: 31
                                • column: 42
                                }
                              • end: {...}
                                • line: 31
                                • column: 46
                                }
                              }
                            • name: "open"
                            }
                          • computed: false
                          • optional: false
                          }
                        • arguments: [...] (1)
                          • Identifier {...}
                            • type: "Identifier"
                            • start: 1021
                            • end: 1033
                            • loc: {...}
                              • start: {...}
                                • line: 31
                                • column: 47
                                }
                              • end: {...}
                                • line: 31
                                • column: 59
                                }
                              }
                            • name: "setSelection"
                            }
                          ]
                        • optional: false
                        }
                      }
                    • modifiers: []
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (1)
                    • Text {...}
                      • type: "Text"
                      • start: 1036
                      • end: 1058
                      • raw: "Open Nested Popup"
                      • data: "Open Nested Popup"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 1067
                • end: 1069
                • raw: " "
                • data: " "
                }
              • IfBlock {...}
                • type: "IfBlock"
                • elseif: false
                • start: 1069
                • end: 1136
                • test: Identifier {...}
                  • type: "Identifier"
                  • start: 1074
                  • end: 1083
                  • loc: {...}
                    • start: {...}
                      • line: 34
                      • column: 6
                      }
                    • end: {...}
                      • line: 34
                      • column: 15
                      }
                    }
                  • name: "selection"
                  }
                • consequent: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (3)
                    • Text {...}
                      • type: "Text"
                      • start: 1084
                      • end: 1086
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 1086
                      • end: 1129
                      • name: "p"
                      • attributes: []
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (3)
                          • Text {...}
                            • type: "Text"
                            • start: 1089
                            • end: 1112
                            • raw: "Your selection was: "
                            • data: "Your selection was: "
                            }
                          • ExpressionTag {...}
                            • type: "ExpressionTag"
                            • start: 1112
                            • end: 1123
                            • expression: Identifier {...}
                              • type: "Identifier"
                              • start: 1113
                              • end: 1122
                              • loc: {...}
                                • start: {...}
                                  • line: 36
                                  • column: 23
                                  }
                                • end: {...}
                                  • line: 36
                                  • column: 32
                                  }
                                }
                              • name: "selection"
                              }
                            }
                          • Text {...}
                            • type: "Text"
                            • start: 1123
                            • end: 1125
                            • raw: "\n\t"
                            • data: "\n\t"
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 1129
                      • end: 1131
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    ]
                  }
                • alternate: null
                }
              • Text {...}
                • type: "Text"
                • start: 1136
                • end: 1137
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 1145
          • end: 1147
          • raw: " "
          • data: " "
          }
        • Component {...}
          • type: "Component"
          • start: 1147
          • end: 1426
          • name: "Modal"
          • attributes: [...] (1)
            • Attribute {...}
              • type: "Attribute"
              • start: 1154
              • end: 1165
              • name: "id"
              • value: [...] (1)
                • Text {...}
                  • start: 1158
                  • end: 1164
                  • type: "Text"
                  • raw: "second"
                  • data: "second"
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (7)
              • Text {...}
                • type: "Text"
                • start: 1166
                • end: 1182
                • raw: "Inner window "
                • data: "Inner window "
                }
              • Comment {...}
                • type: "Comment"
                • start: 1182
                • end: 1237
                • data: " Passing a value back to the callback function\t "
                }
              • Text {...}
                • type: "Text"
                • start: 1237
                • end: 1239
                • raw: ""
                • data: ""
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 1239
                • end: 1326
                • name: "button"
                • attributes: [...] (2)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 1247
                    • end: 1260
                    • name: "class"
                    • value: [...] (1)
                      • Text {...}
                        • start: 1254
                        • end: 1259
                        • type: "Text"
                        • raw: "green"
                        • data: "green"
                        }
                      ]
                    }
                  • OnDirective {...}
                    • start: 1261
                    • end: 1303
                    • type: "OnDirective"
                    • name: "click"
                    • expression: ArrowFunctionExpression {...}
                      • type: "ArrowFunctionExpression"
                      • start: 1271
                      • end: 1302
                      • loc: {...}
                        • start: {...}
                          • line: 44
                          • column: 33
                          }
                        • end: {...}
                          • line: 44
                          • column: 64
                          }
                        }
                      • id: null
                      • expression: true
                      • generator: false
                      • async: false
                      • params: []
                      • body: CallExpression {...}
                        • type: "CallExpression"
                        • start: 1275
                        • end: 1302
                        • loc: {...}
                          • start: {...}
                            • line: 44
                            • column: 37
                            }
                          • end: {...}
                            • line: 44
                            • column: 64
                            }
                          }
                        • callee: MemberExpression {...}
                          • type: "MemberExpression"
                          • start: 1275
                          • end: 1299
                          • loc: {...}
                            • start: {...}
                              • line: 44
                              • column: 37
                              }
                            • end: {...}
                              • line: 44
                              • column: 61
                              }
                            }
                          • object: CallExpression {...}
                            • type: "CallExpression"
                            • start: 1275
                            • end: 1293
                            • loc: {...}
                              • start: {...}
                                • line: 44
                                • column: 37
                                }
                              • end: {...}
                                • line: 44
                                • column: 55
                                }
                              }
                            • callee: Identifier {...}
                              • type: "Identifier"
                              • start: 1275
                              • end: 1283
                              • loc: {...}
                                • start: {...}
                                  • line: 44
                                  • column: 37
                                  }
                                • end: {...}
                                  • line: 44
                                  • column: 45
                                  }
                                }
                              • name: "getModal"
                              }
                            • arguments: [...] (1)
                              • Literal {...}
                                • type: "Literal"
                                • start: 1284
                                • end: 1292
                                • loc: {...}
                                  • start: {...}
                                    • line: 44
                                    • column: 46
                                    }
                                  • end: {...}
                                    • line: 44
                                    • column: 54
                                    }
                                  }
                                • value: "second"
                                • raw: "'second'"
                                }
                              ]
                            • optional: false
                            }
                          • property: Identifier {...}
                            • type: "Identifier"
                            • start: 1294
                            • end: 1299
                            • loc: {...}
                              • start: {...}
                                • line: 44
                                • column: 56
                                }
                              • end: {...}
                                • line: 44
                                • column: 61
                                }
                              }
                            • name: "close"
                            }
                          • computed: false
                          • optional: false
                          }
                        • arguments: [...] (1)
                          • Literal {...}
                            • type: "Literal"
                            • start: 1300
                            • end: 1301
                            • loc: {...}
                              • start: {...}
                                • line: 44
                                • column: 62
                                }
                              • end: {...}
                                • line: 44
                                • column: 63
                                }
                              }
                            • value: 1
                            • raw: "1"
                            }
                          ]
                        • optional: false
                        }
                      }
                    • modifiers: []
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (1)
                    • Text {...}
                      • type: "Text"
                      • start: 1304
                      • end: 1317
                      • raw: "Select 1"
                      • data: "Select 1"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 1326
                • end: 1328
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 1328
                • end: 1415
                • name: "button"
                • attributes: [...] (2)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 1336
                    • end: 1349
                    • name: "class"
                    • value: [...] (1)
                      • Text {...}
                        • start: 1343
                        • end: 1348
                        • type: "Text"
                        • raw: "green"
                        • data: "green"
                        }
                      ]
                    }
                  • OnDirective {...}
                    • start: 1350
                    • end: 1392
                    • type: "OnDirective"
                    • name: "click"
                    • expression: ArrowFunctionExpression {...}
                      • type: "ArrowFunctionExpression"
                      • start: 1360
                      • end: 1391
                      • loc: {...}
                        • start: {...}
                          • line: 47
                          • column: 33
                          }
                        • end: {...}
                          • line: 47
                          • column: 64
                          }
                        }
                      • id: null
                      • expression: true
                      • generator: false
                      • async: false
                      • params: []
                      • body: CallExpression {...}
                        • type: "CallExpression"
                        • start: 1364
                        • end: 1391
                        • loc: {...}
                          • start: {...}
                            • line: 47
                            • column: 37
                            }
                          • end: {...}
                            • line: 47
                            • column: 64
                            }
                          }
                        • callee: MemberExpression {...}
                          • type: "MemberExpression"
                          • start: 1364
                          • end: 1388
                          • loc: {...}
                            • start: {...}
                              • line: 47
                              • column: 37
                              }
                            • end: {...}
                              • line: 47
                              • column: 61
                              }
                            }
                          • object: CallExpression {...}
                            • type: "CallExpression"
                            • start: 1364
                            • end: 1382
                            • loc: {...}
                              • start: {...}
                                • line: 47
                                • column: 37
                                }
                              • end: {...}
                                • line: 47
                                • column: 55
                                }
                              }
                            • callee: Identifier {...}
                              • type: "Identifier"
                              • start: 1364
                              • end: 1372
                              • loc: {...}
                                • start: {...}
                                  • line: 47
                                  • column: 37
                                  }
                                • end: {...}
                                  • line: 47
                                  • column: 45
                                  }
                                }
                              • name: "getModal"
                              }
                            • arguments: [...] (1)
                              • Literal {...}
                                • type: "Literal"
                                • start: 1373
                                • end: 1381
                                • loc: {...}
                                  • start: {...}
                                    • line: 47
                                    • column: 46
                                    }
                                  • end: {...}
                                    • line: 47
                                    • column: 54
                                    }
                                  }
                                • value: "second"
                                • raw: "'second'"
                                }
                              ]
                            • optional: false
                            }
                          • property: Identifier {...}
                            • type: "Identifier"
                            • start: 1383
                            • end: 1388
                            • loc: {...}
                              • start: {...}
                                • line: 47
                                • column: 56
                                }
                              • end: {...}
                                • line: 47
                                • column: 61
                                }
                              }
                            • name: "close"
                            }
                          • computed: false
                          • optional: false
                          }
                        • arguments: [...] (1)
                          • Literal {...}
                            • type: "Literal"
                            • start: 1389
                            • end: 1390
                            • loc: {...}
                              • start: {...}
                                • line: 47
                                • column: 62
                                }
                              • end: {...}
                                • line: 47
                                • column: 63
                                }
                              }
                            • value: 2
                            • raw: "2"
                            }
                          ]
                        • optional: false
                        }
                      }
                    • modifiers: []
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (1)
                    • Text {...}
                      • type: "Text"
                      • start: 1393
                      • end: 1406
                      • raw: "Select 2"
                      • data: "Select 2"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 1415
                • end: 1418
                • raw: "\n\t\n"
                • data: "\n\t\n"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 1426
          • end: 1428
          • raw: "\n\n"
          • data: "\n\n"
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 343
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 334
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 12
            • column: 0
            }
          }
        • body: [...] (4)
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 10
            • end: 55
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 2
                • column: 46
                }
              }
            • specifiers: [...] (2)
              • 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"
                  }
                }
              • ImportSpecifier {...}
                • type: "ImportSpecifier"
                • start: 24
                • end: 32
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 15
                    }
                  • end: {...}
                    • line: 2
                    • column: 23
                    }
                  }
                • imported: Identifier {...}
                  • type: "Identifier"
                  • start: 24
                  • end: 32
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 15
                      }
                    • end: {...}
                      • line: 2
                      • column: 23
                      }
                    }
                  • name: "getModal"
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 24
                  • end: 32
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 15
                      }
                    • end: {...}
                      • line: 2
                      • column: 23
                      }
                    }
                  • name: "getModal"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 39
              • end: 55
              • loc: {...}
                • start: {...}
                  • line: 2
                  • column: 30
                  }
                • end: {...}
                  • line: 2
                  • column: 46
                  }
                }
              • value: "./Modal.svelte"
              • raw: "'./Modal.svelte'"
              }
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 57
            • end: 76
            • loc: {...}
              • start: {...}
                • line: 3
                • column: 1
                }
              • end: {...}
                • line: 3
                • column: 20
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 61
                • end: 75
                • loc: {...}
                  • start: {...}
                    • line: 3
                    • column: 5
                    }
                  • end: {...}
                    • line: 3
                    • column: 19
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 61
                  • end: 65
                  • loc: {...}
                    • start: {...}
                      • line: 3
                      • column: 5
                      }
                    • end: {...}
                      • line: 3
                      • column: 9
                      }
                    }
                  • name: "name"
                  }
                • init: Literal {...}
                  • type: "Literal"
                  • start: 68
                  • end: 75
                  • loc: {...}
                    • start: {...}
                      • line: 3
                      • column: 12
                      }
                    • end: {...}
                      • line: 3
                      • column: 19
                      }
                    }
                  • value: "world"
                  • raw: "'world'"
                  }
                }
              ]
            • kind: "let"
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 80
            • end: 93
            • loc: {...}
              • start: {...}
                • line: 5
                • column: 1
                }
              • end: {...}
                • line: 5
                • column: 14
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 84
                • end: 93
                • loc: {...}
                  • start: {...}
                    • line: 5
                    • column: 5
                    }
                  • end: {...}
                    • line: 5
                    • column: 14
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 84
                  • end: 93
                  • loc: {...}
                    • start: {...}
                      • line: 5
                      • column: 5
                      }
                    • end: {...}
                      • line: 5
                      • column: 14
                      }
                    }
                  • name: "selection"
                  }
                • init: null
                }
              ]
            • kind: "let"
            }
          • FunctionDeclaration {...}
            • type: "FunctionDeclaration"
            • start: 285
            • end: 331
            • loc: {...}
              • start: {...}
                • line: 8
                • column: 1
                }
              • end: {...}
                • line: 10
                • column: 2
                }
              }
            • id: Identifier {...}
              • type: "Identifier"
              • start: 294
              • end: 306
              • loc: {...}
                • start: {...}
                  • line: 8
                  • column: 10
                  }
                • end: {...}
                  • line: 8
                  • column: 22
                  }
                }
              • name: "setSelection"
              }
            • expression: false
            • generator: false
            • async: false
            • params: [...] (1)
              • Identifier {...}
                • type: "Identifier"
                • start: 307
                • end: 310
                • loc: {...}
                  • start: {...}
                    • line: 8
                    • column: 23
                    }
                  • end: {...}
                    • line: 8
                    • column: 26
                    }
                  }
                • name: "res"
                }
              ]
            • body: BlockStatement {...}
              • type: "BlockStatement"
              • start: 311
              • end: 331
              • loc: {...}
                • start: {...}
                  • line: 8
                  • column: 27
                  }
                • end: {...}
                  • line: 10
                  • column: 2
                  }
                }
              • body: [...] (1)
                • ExpressionStatement {...}
                  • type: "ExpressionStatement"
                  • start: 315
                  • end: 328
                  • loc: {...}
                    • start: {...}
                      • line: 9
                      • column: 2
                      }
                    • end: {...}
                      • line: 9
                      • column: 15
                      }
                    }
                  • expression: AssignmentExpression {...}
                    • type: "AssignmentExpression"
                    • start: 315
                    • end: 328
                    • loc: {...}
                      • start: {...}
                        • line: 9
                        • column: 2
                        }
                      • end: {...}
                        • line: 9
                        • column: 15
                        }
                      }
                    • operator: "="
                    • left: Identifier {...}
                      • type: "Identifier"
                      • start: 315
                      • end: 324
                      • loc: {...}
                        • start: {...}
                          • line: 9
                          • column: 2
                          }
                        • end: {...}
                          • line: 9
                          • column: 11
                          }
                        }
                      • name: "selection"
                      }
                    • right: Identifier {...}
                      • type: "Identifier"
                      • start: 325
                      • end: 328
                      • loc: {...}
                        • start: {...}
                          • line: 9
                          • column: 12
                          }
                        • end: {...}
                          • line: 9
                          • column: 15
                          }
                        }
                      • name: "res"
                      }
                    }
                  }
                ]
              }
            • leadingComments: [...] (1)
              • Line {...}
                • type: "Line"
                • value: " Callback function provided to the `open` function, it receives the value given to the `close` function call, or `undefined` if the Modal was closed with escape or clicking the X, etc."
                • start: 97
                • end: 283
                }
              ]
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
Simple Modal Component • Playground • Svelte