2022-06-23 15:10:54 +00:00
|
|
|
const noop = () => {};
|
2022-03-18 22:35:45 +00:00
|
|
|
|
|
|
|
export default (target) => {
|
2022-06-23 15:10:54 +00:00
|
|
|
return (Component, props, slotted, { client }) => {
|
2022-05-31 16:29:36 +00:00
|
|
|
if (!target.hasAttribute('ssr')) return;
|
2022-06-23 15:10:54 +00:00
|
|
|
const slots = {};
|
|
|
|
for (const [key, value] of Object.entries(slotted)) {
|
|
|
|
slots[key] = createSlotDefinition(key, value);
|
|
|
|
}
|
2022-03-18 22:35:45 +00:00
|
|
|
try {
|
2022-06-23 15:10:54 +00:00
|
|
|
new Component({
|
2022-03-18 22:35:45 +00:00
|
|
|
target,
|
2022-06-23 15:12:46 +00:00
|
|
|
props: {
|
2022-06-23 15:10:54 +00:00
|
|
|
...props,
|
|
|
|
$$slots: slots,
|
2022-06-23 15:12:46 +00:00
|
|
|
$$scope: { ctx: [] },
|
2022-06-23 15:10:54 +00:00
|
|
|
},
|
2022-05-31 16:29:36 +00:00
|
|
|
hydrate: client !== 'only',
|
2022-06-23 15:10:54 +00:00
|
|
|
$$inline: true,
|
2022-03-18 22:35:45 +00:00
|
|
|
});
|
|
|
|
} catch (e) {}
|
|
|
|
};
|
|
|
|
};
|
2022-06-23 15:10:54 +00:00
|
|
|
|
|
|
|
function createSlotDefinition(key, children) {
|
2023-02-15 14:28:59 +00:00
|
|
|
let parent;
|
2022-06-23 15:12:46 +00:00
|
|
|
return [
|
|
|
|
() => ({
|
2022-06-23 15:10:54 +00:00
|
|
|
// 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>`
|
|
|
|
);
|
2022-06-23 15:10:54 +00:00
|
|
|
},
|
|
|
|
// 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:10:54 +00:00
|
|
|
}),
|
2022-06-23 15:12:46 +00:00
|
|
|
noop,
|
|
|
|
noop,
|
|
|
|
];
|
2022-06-23 15:10:54 +00:00
|
|
|
}
|