Предотвращение реактивности параметров компонента Svelte

Question

Я написал модальный компонент в Svelte, который имеет несколько экспортируемых переменных для управления поведением. Значения этих переменных могут варьироваться от вызова к вызову, но после отображения модального окна единственное значение, которое, как можно ожидать, изменится, - это значение. Это говорит о том, что это единственная переменная, требующая реактивности, но, если я правильно понимаю, присутствие других переменных в HTML заставит Svelte излишне генерировать реактивный код и для всех этих переменных, излишне пополняя базу кода.

Мой вопрос: какие существуют стратегии для предотвращения создания реактивного кода для параметров компонента, когда он не нужен?

В следующих, message не изменится, пока отображается модальное окно, поэтому кажется, что только isOpenнужно быть реактивным. Однако компилятор Svelte не может этого знать, поэтому я должен явно сделать что-то, что препятствует этому реактивному поведению.

      <script lang="ts">
  import { closeModal } from 'svelte-modals';

  export let isOpen: boolean;
  export let message: string;
</script>

{#if isOpen}
  <div class="contents">
    <p>{message}</p>
    <button on:click={closeModal}>OK</button>
  </div>
{/if}

Единственная известная мне техника - это переместить переменную в функцию следующим образом:

      <script lang="ts">
  import { closeModal } from 'svelte-modals';

  export let isOpen: boolean;
  export let message: string;
  
  const getMessage = () => message;
</script>

{#if isOpen}
  <div class="contents">
    <p>{getMessage()}</p>
    <button on:click={closeModal}>OK</button>
  </div>
{/if}

Есть ли более лаконичный или более традиционный способ добиться этого? Для такой хорошо продуманной технологии, как Svelte, я считаю, что должен быть менее неуклюжий способ сделать это. Человек, который придет поддерживать код после меня, может счесть это излишне многословным и устранить косвенное указание, невольно пополняя базу кода (если они сделают это оптом). Похоже, должно быть что-то более явное.

Или, возможно, есть способ потребовать, чтобы все реактивные переменные были явно обозначены, например, с помощью предшествующего $:?

Answer 1

Вы можете присвоить сообщение локальной переменной при инициализации компонента.

      <script>
    export let message;
    export let isOpen =true;
    const originalMessage=message;
</script>

<div>
    Message: {originalMessage}
</div>
<div>
    isOpen: {isOpen}
</div>