Run script even if component is not mounted

[cloudymeatball]

Describe the problem

Re-submission of kit#13123 to here.

I want to run some code in a component in children, even if the snippet is conditionally rendered. The use case I have in mind is debugging and meta-programming related.

Describe the proposed solution

Set using <svelte:options>, a component's <script> always runs when the component is used in the markup and not in a comment, even if the component is otherwise not rendered.

Alternatives considered

Also set using <svelte:options>, a component that is unaffected by {#if}, {:else}, {:else if} and possibly {:then} of the await-then block. In other words, they are always mounted/called. Leaning towards the proposed solution, because this alternative affects rendering of children components and elements, while the proposed solution is more modular.

Another alternative is a different block, {#run} or {#always}, that implements either the proposed or the alternative solution, but instead of changing component options, a new template block is introduced.

Additional Information

For example when there is {#if a()} ... {#if b()} ... {/if}{/if} then the solution should allow such component <script> in the inner {#if b()} to run even if the branch is not rendered.

Importance

would make my life easier

[webJose]

This is a very weird request. Can you describe at least one use-case (which I assume you have already)?

[cloudymeatball]

The use case I have in mind is that I have many forms with questions conditionally rendered with {#if} and I would like to programmatically generate the form inputs validation code, which requires knowing all the branches.

[webJose]

I see. I would suggest creating a Form component that uses a MutationObserver that "discovers" whenever input fields are added or removed and then use it to validate. I've done this for the project at work. I vouch for this approach, assuming I understood the problem.

[webJose]

Hmm, a simpler way that doesn't use MutationObserver: If all your input fields are added using components, then you can use setContext/getContext. Have a Form component that adds a communication object as context, and then have the individual input components "broadcast" themselves using said communication object.

[cloudymeatball]

Thanks for the replies. I have to play around with MutationObserver as I'm hearing about it for the first time. However, I am looking to modify the schema for the form regardless whether the input is mounted. I don't believe either methods do that.

[webJose]

Hello, again.

This is where things get fuzzy. If you want the complete form schema, regardless of which components actually mount, there are 2 possible scenarios:

1. You already know this schema at development time, as in you know every field name.
2. You don't know the schema at development time.

If it is the first one, just program your fields at development time.

If it is the second one, how does it differ from collecting the fields as they appear? But let's say there's a difference somehow: Just have the root component (the component that has all the IF blocks) register all possible fields.

If this still doesn't apply to your use case, I guess I'll have to know about your use case.

[dummdidumm]

We're not going to add logic to run a component's script without actually mounting it. I'm converting this to a discussion since there are potentially a few workaround available.

Another potential one would be to not use #if but instead render the whole form and hide the ones you don't want with display:none

[david-plugge]

You should not use the DOM to build your validation schema. Thats the wrong way around. Create a validation schema with code (zod, valibot, typebox, jsonschema, ...) and use that to create the DOM. I dont know of any validation library that does it the other way around

[cloudymeatball]

Before this issue/discussion I have a prototype version with set/getContext, I just need to interact with the DOM to get the full schema, which is not a huge issue. I thought about display:none but it seems like a huge rewrite at the moment, probably only considering that if something goes seriously wrong with {#if}. While unconventional, I would prefer to have the components and DOM first as I'm more likely to switch validator than out of svelte. Thanks for everyone's input!