Vue/Svelte-like named slots

[andrewcourtice]

For those interested, here is one method you can use to implement Vue/Svelte-like named slots in Solid with minimal effort (1 component + 1 directive):

Slot component for defining the named slot:

import {
    children,
    PropsWithChildren
} from 'solid-js';

interface Props {
    name?: string
}

export default function Slot(props: PropsWithChildren<Props>) {
    const elements = children(() => props.children);

    return () => ([] as Element[])
        .concat(elements() as Element[])
        .filter(el => el instanceof Element && !!props.name
            ? el?.getAttribute('data-slot') === props.name
            : !el?.hasAttribute('data-slot')
    );
}

Slot directive for projecting content to the named slot (or default if no name is specified):

declare module "solid-js" {
    namespace JSX {
        interface Directives {
            slot: string | true;
        }
    }
}

export default function slot(element: Element, accessor: () => string) {
    element.setAttribute('data-slot', accessor() || 'default');
}

Usage in receiving component:

import Slot from './slot';

import type {
    PropsWithChildren
} from 'solid-js';

export default function Modal(props: PropsWithChildren) {    
    return (
        <div class="modal">
            <div class="modal__header">
                <Slot name="header">{ props.children }</Slot>
            </div>
            <div class="modal__body">
                <Slot>{ props.children }</Slot>
            </div>
            <div class="modal__footer">
                <Slot name="footer">{ props.children }</Slot>
            </div>
        </div>
    );
};

Usage in projecting component:

import Modal from './components/modal';

import slot from './directives/slot';

import {
    createSignal,
    Show,
} from 'solid-js';

export default function App() {
    // This to prevent the bundler from tree-shaking the "unused" directive
    console.log(slot);

    const [getTime, setTime] = createSignal(Date.now());
    const [isVisible, setVisible] = createSignal(false);

    setInterval(() => setTime(Date.now()), 1000);
    
    return <>
        <input type="checkbox" checked={isVisible()} onInput={() => setVisible(!isVisible())} />
        <Modal>
            <div use:slot="header">Header</div>
            <Show when={isVisible()}>
                {/* Projected into the default slot */}
                <div>Timestamp 1 { getTime() }</div>
                <div>Timestamp 2 { getTime() }</div>
            </Show>
            <div use:slot="footer">Footer</div>
        </Modal>
    </>
};

[lxsmnsyc]

Interesting solution!

May I also add in this thread that in solid-sfc, an experimental SFC compiler I had fun working with, supports a compile-time component named <solid:slot> and <solid:fragment> which basically functions similarly to Svelte's

/* Example.solid */}
<solid:slot name="example" />

{/* ParentExample.solid */}
---
import Example from './Example.solid';
---
<Example>
  <solid:fragment name="example">
    <h1>Hello World</h1>
  </solid:fragment>
</Example>

There's also <solid:children> which is like <solid:slot> but for children prop.

https://github.com/LXSMNSYC/solid-sfc#solidfragment-solidslot-and-solidchildren

[rabbitkiller-dev]

nice