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
ItemDisplay.svelte
Wrapper.svelte
<script>
import Wrapper from './Wrapper.svelte';
import ItemDisplay from './ItemDisplay.svelte';
let item = { isChecked: false };
let editDialog;
let editItem;
function onEdit(x) {
if (x.isChecked != item.isChecked)
console.error(`Mismatch: In arg: = ${x.isChecked}, source: ${item.isChecked}`);

editItem = { ...x };
editDialog.show();
}
function onEditSubmit() {
item = { ...editItem };
editDialog.close();
editItem = undefined;
}
</script>

<ItemDisplay content={item}>
<svelte:fragment slot="default" let:content>
<input type=checkbox disabled checked={content.isChecked} />

<Wrapper>
<button type=button on:click={() => onEdit(content)}>Edit (Wrapped)</button>
</Wrapper>
<button type=button on:click={() => onEdit(content)}>Edit</button>
</svelte:fragment>
</ItemDisplay>

<dialog bind:this={editDialog}>
{#if editItem != null}
<label>
loading Svelte compiler...
/* Select a component to see its compiled code */
result = svelte.compile(source, {
generate: ,
});
/* Select a component to see its compiled code */