Support lets

pull/4604/head
Timothy Johnson 6 years ago
parent 4e525d9e11
commit c766af7541

@ -455,7 +455,7 @@ export default function dom(
${(reactive_declarations.length > 0 || uses_slots) && b`
$$self.$$.update = () => {
if (${renderer.dirty(['$$scope'], true)}) {
#update_$$slots($$scope, $$self.$$.dirty)
#update_$$slots($$scope)
}
${reactive_declarations}

@ -1,5 +1,5 @@
import { onDestroy } from './lifecycle';
import { assign } from './utils'
import { assign, noop } from './utils';
export function create_slot(definition, ctx, $$scope, fn) {
if (definition) {
@ -39,28 +39,37 @@ export function get_slot_changes(definition, $$scope, dirty, fn) {
}
export function create_slots_accessor(slots, scope) {
const slot_list = [];
function update(scope, dirty) {
slot_list.forEach(({ slot, definition }) =>
slot.p(
get_slot_context(definition, [], scope, null),
get_slot_changes(definition, scope, dirty, null)
)
);
const update_list = [];
function update(scope) {
update_list.forEach(fn => fn(scope));
}
const $$slots = {};
for (const key in slots) {
$$slots[key] = function () {
let definition = slots[key];
let slot = create_slot(definition, [], scope, null);
$$slots[key] = function (ctx, callback = noop) {
const definition = slots[key];
const slot = create_slot(definition, null, scope, () => ctx);
const content = slot.c();
function local_update (scope, ctx_fn, dirty_fn) {
slot.p(
get_slot_context(definition, null, scope, ctx_fn),
get_slot_changes(definition, scope, 0, dirty_fn)
);
callback(content);
}
if (slot.d) onDestroy(slot.d);
if (slot.p) slot_list.push({ definition, slot });
if (slot.p) update_list.push(local_update);
return {
content: slot.c(),
mount: slot.m
content,
mount: slot.m,
update: props => local_update(
scope,
() => assign(ctx, props),
() => Object.keys(props).reduce((o, k) => (o[k] = true, o), {})
)
};
};
}

@ -0,0 +1,8 @@
<script>
const slot = $$slots.default({ value: 'foo' })
let target
$: target && slot.mount(target)
</script>
<button on:click={e => slot.update({ value: 'bar' })}>Click me</button>
<div bind:this={target} />

@ -0,0 +1,18 @@
export default {
async test({ assert, target, window, }) {
assert.htmlEqual(target.innerHTML, `
<button>Click me</button>
<div>foo</div>
`);
const btn = target.querySelector('button');
const clickEvent = new window.MouseEvent('click');
await btn.dispatchEvent(clickEvent);
assert.htmlEqual(target.innerHTML, `
<button>Click me</button>
<div>bar</div>
`);
}
};

@ -0,0 +1,7 @@
<script>
import Child from './Child.svelte'
</script>
<Child let:value>
{value}
</Child>
Loading…
Cancel
Save