How to prevent data loss when managing visibility with #if.

[0x1618]

Hello, I have a multi-step modal integrated with a component that collects all data from inputs to create a request payload. I'm facing an issue where the #if tag causes components to unmount, resulting in data loss when changing steps including for the RequestContext. I know I can bind values and store them locally so they're passed to the component when it is remounted, but that doesn't work with the RequestContext, which is very important in my case.

Here is a minimal reproduction of the scenario I'm facing: https://svelte.dev/playground/f10844ad20a64904a51945d36f9c2d90?version=latest

edit: I want to add that in my real code, RequestContextInput also has validators and states like interacted, isValid, which are reseted when visibility is changed using #if.

[brunnerh]

If you cannot use bindings, I would recommend not using #if, instead show/hide steps with CSS.

I can bind values and store them locally so they're passed to the component when it is remounted, but that doesn't work with the RequestContext

I do not see how that follows; if you directly bind to the context rather than closing over local component state, there should be no issue - Example

[0x1618]

I do not see how that follows;

The structure for the RequestContext in my real code is quite different and it is adapted to handle multiple RequestContext "adapters".

RequestContextInput.svelte

onMount(() =>
	registerField({
		name: () => props.name,
		value: () => value,
		isValid: () => isValid,
	})
);

register.field.ts

export function registerField({ name, value, isValid }: RegisterFieldParams) {
	const requestContextRegistry: RequestContextRegistry = getContext(
		"request-context-registry"
	);

	if (!requestContextRegistry) {
		return;
	}

	const field: RequestContextRegistryField = {
		get name(): string {
			return name();
		},
		get value(): any {
			return value?.();
		},
		get isValid(): boolean {
			return isValid();
		},
	};

	requestContextRegistry.fields.add(field);

	return () => requestContextRegistry.fields.delete(field);
}

RequestContext.svelte

const requestContextRegistry = setContext<RequestContextRegistry>(
	"request-context-registry",
	{ fields: new SvelteSet(), executors: new SvelteSet() }
);

const createRequestPayload = (): RequestContextRequestPayload => {
	let requestPayload: RequestContextRequestPayload = {};

	requestContextRegistry.fields.forEach((field) => {
		requestPayload[field.name] = field.value;
	});

	config.method === "GET"
		? (requestPayload = { ...config.params, ...requestPayload })
		: (requestPayload = { ...config.data, ...requestPayload });

	return requestPayload;
};

If you cannot use bindings, I would recommend not using #if, instead show/hide steps with CSS.

It seems to be working. Is this what you had in mind by using CSS?https://svelte.dev/playground/aa48e089a31d47369787032c796c407a?version=5.33.4

[brunnerh]

It seems to be working. Is this what you had in mind by using CSS?

Yes.

Regarding the context: It still should be possible to store the actual value on the context separately from the field metadata. But if the CSS approach works for you, that should be fine as well.