astro/packages/integrations/svelte/client.js

54 lines
1 KiB
JavaScript
Raw Normal View History

const noop = () => {};
export default (target) => {
return (Component, props, slotted, { client }) => {
if (!target.hasAttribute('ssr')) return;
const slots = {};
for (const [key, value] of Object.entries(slotted)) {
slots[key] = createSlotDefinition(key, value);
}
try {
new Component({
target,
2022-06-23 15:12:46 +00:00
props: {
...props,
$$slots: slots,
2022-06-23 15:12:46 +00:00
$$scope: { ctx: [] },
},
hydrate: client !== 'only',
$$inline: true,
});
} catch (e) {}
};
};
function createSlotDefinition(key, children) {
2023-02-15 14:28:59 +00:00
let parent;
2022-06-23 15:12:46 +00:00
return [
() => ({
// mount
m(target) {
2023-02-15 14:28:59 +00:00
parent = target;
2022-06-23 15:12:46 +00:00
target.insertAdjacentHTML(
'beforeend',
`<astro-slot${key === 'default' ? '' : ` name="${key}"`}>${children}</astro-slot>`
);
},
// create
c: noop,
// hydrate
l: noop,
// destroy
2023-02-15 14:28:59 +00:00
d() {
if (!parent) return;
const slot = parent.querySelector(
`astro-slot${key === 'default' ? ':not([name])' : `[name="${key}"]`}`
);
if (slot) slot.remove();
},
}),
2022-06-23 15:12:46 +00:00
noop,
noop,
];
}