Partial components

[jjagielka]

Describe the bug

Components in Svelte 5 are functions so it should be pretty straight forward to make a curried (partial) component (with some props pre-populated).

Doing the below implementation works perfectly for the component creation. However the partial components do not react for props changes (change the size in the input).

Where is the problem?

<!-- Button.svelte -->
<script>
    let { children, color, size } = $props();
</script>

<button style:border-width={size + "px"} style:border-color={color}>{@render children()}</button>

// buttons.ts
import type { Component, ComponentInternals, ComponentProps } from "svelte";
import Button from "./Button.svelte"

function partial<T extends Component<any>>(component: T, partialProps: Partial<ComponentProps<T>>) {
    return (anchor: ComponentInternals, props: ComponentProps<T>) => {
        return component(anchor, { ...partialProps, ...props })
    }
}

export const GreenButton = partial(Button, {color: 'green'});
export const RedButton = partial(Button, {color: 'red'});

then

<script>
<script lang="ts">
    import Button from "./Button.svelte";
    import { RedButton, GreenButton } from "./buttons";

    let size = $state(4);
</script>

<Button color="blue" {size}>White</Button>
<Button color="green" {size}>Green</Button>
<Button color="red" {size}>Red</Button>
<RedButton {size}>Red button</RedButton>
<GreenButton {size}>Green button</GreenButton>
<input bind:value={size} />

</script>

Reproduction

https://svelte.dev/playground/88ba3c73bba646da95a3d11082c3a05c?version=latest

Logs

System Info

System:
    OS: Linux 6.14 Arch Linux
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11390H @ 3.40GHz
    Memory: 17.90 GB / 31.08 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 24.1.0 - /usr/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 11.4.1 - /usr/bin/npm
    pnpm: 10.11.1 - /usr/bin/pnpm
  Browsers:
    Chromium: 137.0.7151.68
  npmPackages:
    svelte: ^5.33.19 => 5.33.19

Severity

annoyance

[MotionlessTrain]

That has to do with how spreading works in JavaScript. Svelte makes a getter on the props object, to keep the size in sync (you can see that in the js output of App.svelte in your reproduction)
During spreading in your partial function, JavaScript calls the getter and passes the value (in this case 4) to the resulting object. So component will always keep the value 4 there

I’m really wondering how this is considered to be blocking an upgrade, as this was not really possible to do like this before svelte 5, and you are using the internals from svelte. Things may break without warning there

[jjagielka]

In Svelte3 components were classes so I was using a Proxy like:

export function partial(Component, partialProps = {}) {
    return new Proxy(Component, {
        construct(target, [options], newTarget) {
            options.props = { ...options.props, ...partialProps };
            return Reflect.construct(target, [options], newTarget);
        },
    });
}

and components were reactive to props changes even though the spreading is used here as well.

I trying to upgrade my lib https://github.com/jjagielka/svelte-pivottable to Svelte 5 and this is blocking me, but I've change the severity to annoyance.

[Ocean-OS]

If you were to try to make partial components, you should probably use mount and a Proxy for props, because the parameters of the compiled component function are internal and may change without warning. Here's a partial component function that should work. Apologies for any bad formatting; I did this on my phone.

[jjagielka]

@Ocean-OS thanks for trying to help. In your example you create a Proxy but you don' t use it any where. Is that intended?

[Ocean-OS]

I don't think the REPL had saved when I copied the link, should be fixed now.

[jjagielka]

@Ocean-OS - that solution doesn't work.

I have copied the internal svelte code of spread_props that is used for options passed to component 'constructor' and that doesn't work neither.

export function partial(component, partialProps) {
    return function (anchor, props) {
        const proxy = spread_props({ ...partialPops, ...props });
        return component(anchor, proxy);
        // or: return mount(component, { target: anchor.parentElement, props: proxy };
    }
}

The moment you start coping values (destructuring/sprading) you loose the connection with that original props proxy and therefore reactivity stops working.

[MotionlessTrain]

That is because again, first JavaScript changed the getters to the current values, before passing it to spread_props. Reactivity is lost there
Ocean-OS’s solution retrieves the default property at the moment the value is needed, which keeps reactivity. So that proxy should work inside your partial function, instead of the spread_props({ …spreaded, …objects }) you have now

[jjagielka]

Thanks. Now I get the trick.

However Ocean-OS's solution is slightly not correct:

• options.props is undefined always
• proxy misses ownKeys trap
• mount disallow dynamic changes of the component variants

This is the version that works for me:

export function partial(component, partialProps) {
    return function (anchor, props) {
        const proxy = new Proxy({}, {
            get(target, prop, receiver) {
                if (prop in partialProps) {
                    return partialProps[prop];
                }
                return props[prop];
            },
            set(target, prop, value) {
                if (prop in partialProps) {
                    partialProps[prop] = value;
                } else if (prop in props) {
                    props[prop] = value;
                }
            },
            has(target, prop) {
                return (prop in partialProps) || (prop in props)
            },
            ownKeys(target) {
                return [...new Set([partialProps, props].flatMap(Object.keys))];
            },
        });
        return component(anchor, proxy)
    }
}

[Ocean-OS]

options in my code is meant to be used as the MountOptions, so to mount the component you'd have to bind:this to an element to append the component.

[jjagielka]

So just to close the discussion, final version of the working partial component function if someone wants to use it:

export function partial(component,  partialProps) {
    return function (anchor, props) {
        const proxy = new Proxy(partialProps, {
            get(target, p, receiver) {
                return Reflect.get(props, p, receiver) ?? Reflect.get(target, p, receiver)
            },
            set(target, p, newValue, receiver) {
                return Reflect.set(props, p, newValue, receiver) || Reflect.set(target, p, newValue, receiver)
            },
            has(target, p) {
                return Reflect.has(props, p) || Reflect.has(target, p)
            },
            getOwnPropertyDescriptor(target, p) {
                return Reflect.getOwnPropertyDescriptor(props, p) ?? Reflect.getOwnPropertyDescriptor(target, p);
            },
            ownKeys(target) {
                return [...new Set([...Reflect.ownKeys(props), ...Reflect.ownKeys(target)])];
            },
        });
        return component(anchor, proxy)
    }
}

I have update the REPL to demonstrate how it can be used.