App.svelte
Inner.svelte
Outer.svelte
<script>
let name = 'world';
import Outer from "./Outer.svelte"
import Inner from "./Inner.svelte"
</script>
<h1>Hello {name}!</h1>
<Outer>
<Inner slot="inner" let:alert on:click={alert}></Inner>
</Outer>
/* App.svelte generated by Svelte v3.44.3 */
import {
SvelteComponent,
create_component,
destroy_component,
detach,
element,
init,
insert,
is_function,
mount_component,
safe_not_equal,
space,
transition_in,
transition_out
} from "svelte/internal";
import Outer from "./Outer.svelte";
import Inner from "./Inner.svelte";
function create_inner_slot(ctx) {
let inner;
let current;
inner = new Inner({ props: { slot: "inner" } });
inner.$on("click", function () {
if (is_function(/*alert*/ ctx[0])) /*alert*/ ctx[0].apply(this, arguments);
});
return {
c() {
create_component(inner.$$.fragment);
},
m(target, anchor) {
mount_component(inner, target, anchor);
current = true;
},
p(new_ctx, dirty) {
ctx = new_ctx;
},
i(local) {
if (current) return;
transition_in(inner.$$.fragment, local);
current = true;
},
o(local) {
transition_out(inner.$$.fragment, local);
current = false;
},
d(detaching) {
destroy_component(inner, detaching);
}
};
}
function create_fragment(ctx) {
let h1;
let t3;
let outer;
let current;
outer = new Outer({
props: {
$$slots: {
inner: [
create_inner_slot,
({ alert }) => ({ 0: alert }),
({ alert }) => alert ? 1 : 0
]
},
$$scope: { ctx }
}
});
return {
c() {
h1 = element("h1");
h1.textContent = `Hello ${name}!`;
t3 = space();
create_component(outer.$$.fragment);
},
m(target, anchor) {
insert(target, h1, anchor);
insert(target, t3, anchor);
mount_component(outer, target, anchor);
current = true;
},
p(ctx, [dirty]) {
const outer_changes = {};
if (dirty & /*$$scope, alert*/ 3) {
outer_changes.$$scope = { dirty, ctx };
}
outer.$set(outer_changes);
},
i(local) {
if (current) return;
transition_in(outer.$$.fragment, local);
current = true;
},
o(local) {
transition_out(outer.$$.fragment, local);
current = false;
},
d(detaching) {
if (detaching) detach(h1);
if (detaching) detach(t3);
destroy_component(outer, detaching);
}
};
}
let name = 'world';
class App extends SvelteComponent {
constructor(options) {
super();
init(this, options, null, create_fragment, safe_not_equal, {});
}
}
export default App;
/* Add a <style> tag to see compiled CSS */
- {
-
- css: undefined
- {
- type: "Script"
- start: 0
- end: 111
- context: "default"
-
} - module: undefined
}
