Slots Class — astro Architecture
Architecture documentation for the Slots class in slots.ts from the astro codebase.
Entity Profile
Dependency Diagram
graph TD 39243d9c_ec83_60a3_c7ca_6ad834992ebb["Slots"] 8991a42b_851a_4b20_3c51_bc8fbe6ed0e7["slots.ts"] 39243d9c_ec83_60a3_c7ca_6ad834992ebb -->|defined in| 8991a42b_851a_4b20_3c51_bc8fbe6ed0e7 4c536943_3ccc_52fe_8b35_0fb2704bccba["constructor()"] 39243d9c_ec83_60a3_c7ca_6ad834992ebb -->|method| 4c536943_3ccc_52fe_8b35_0fb2704bccba 9edf48b2_00a8_f415_dc4e_dcdd75514521["has()"] 39243d9c_ec83_60a3_c7ca_6ad834992ebb -->|method| 9edf48b2_00a8_f415_dc4e_dcdd75514521 cac0efcf_85fe_9d2e_7466_f43eee3dc68d["render()"] 39243d9c_ec83_60a3_c7ca_6ad834992ebb -->|method| cac0efcf_85fe_9d2e_7466_f43eee3dc68d
Relationship Graph
Source Code
packages/astro/src/core/render/slots.ts lines 16–84
export class Slots {
#result: SSRResult;
#slots: ComponentSlots | null;
#logger: Logger;
constructor(result: SSRResult, slots: ComponentSlots | null, logger: Logger) {
this.#result = result;
this.#slots = slots;
this.#logger = logger;
if (slots) {
for (const key of Object.keys(slots)) {
if ((this as any)[key] !== undefined) {
throw new AstroError({
...AstroErrorData.ReservedSlotName,
message: AstroErrorData.ReservedSlotName.message(key),
});
}
Object.defineProperty(this, key, {
get() {
return true;
},
enumerable: true,
});
}
}
}
public has(name: string) {
if (!this.#slots) return false;
return Boolean(this.#slots[name]);
}
public async render(name: string, args: any[] = []) {
if (!this.#slots || !this.has(name)) return;
const result = this.#result;
if (!Array.isArray(args)) {
this.#logger.warn(
null,
`Expected second parameter to be an array, received a ${typeof args}. If you're trying to pass an array as a single argument and getting unexpected results, make sure you're passing your array as a item of an array. Ex: Astro.slots.render('default', [["Hello", "World"]])`,
);
} else if (args.length > 0) {
const slotValue = this.#slots[name];
const component = typeof slotValue === 'function' ? await slotValue(result) : await slotValue;
// Astro
const expression = getFunctionExpression(component);
if (expression) {
const slot = async () =>
typeof expression === 'function' ? expression(...args) : expression;
return await renderSlotToString(result, slot).then((res) => {
return res;
});
}
// JSX
if (typeof component === 'function') {
return await renderJSX(result, (component as any)(...args)).then((res) =>
res != null ? String(res) : res,
);
}
}
const content = await renderSlotToString(result, this.#slots[name]);
const outHTML = chunkToString(result, content);
return outHTML;
}
}
Domain
Defined In
Source
Frequently Asked Questions
What is the Slots class?
Slots is a class in the astro codebase, defined in packages/astro/src/core/render/slots.ts.
Where is Slots defined?
Slots is defined in packages/astro/src/core/render/slots.ts at line 16.
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free