Using <svelte:boundary> just to be able to define {@const}?

[guillemc]

I'm building a web page with lots of long forms. Is it a good idea to use svelte:boundary around each form element so that I can define consts? Or does it come at a cost?

For example, instead of:

<div class="mb-4">
  <label for="fDepartment" class="form-label mb-1">Department</label>
  <select
    id="fDepartment"
    class="form-select"
    bind:value={$modalForm.dept}
    class:border-danger={!!$modalForm.errors.dept}
  >
    <option value="">Please select</option>
    {#each deptOptions as option (option.value)}
      <option value={option.value}>{option.text}</option>
    {/each}
  </select>
  {#if !!$modalForm.errors.dept}
    <div class="invalid-feedback d-block">{$modalForm.errors.dept}</div>
  {/if}
</div>

I could do:

<svelte:boundary>
{@const field = 'dept' }
{@const label = 'Departament' }
{@const error = $modalForm.errors[field] }
<div class="mb-4">
  <label for="f-{field}" class="form-label mb-1">{label}</label>
  <select
    id="f-{field}"
    class="form-select"
    bind:value={$modalForm[field]}
    class:border-danger={!!error}
  >
    <option value="">Please select</option>
    {#each deptOptions as option (option.value)}
      <option value={option.value}>{option.text}</option>
    {/each}
  </select>
  {#if !!error}
    <div class="invalid-feedback d-block">{error}</div>
  {/if}
</div>
</svelte:boundary>

Which seems cleaner and less error prone. (It is not practical for me at this point to convert these form fields to components because there are too many small differences and things to take into account).

Would you advise against it for some reason?

[brunnerh]

I would advise against it because boundaries are for error handling and working with async data.
Even if you do not use them for that, they cause some overhead and could be confusing to anyone reading the code.

If anything, I would go with {#if true}, though that will also be unnecessary if #16490 gets implemented.