Size: a a a

2021 April 05

PM

Pavel 🦇 Malyshev in Svelte [svelt]
Ничего делать не надо, если в each выставить key,например тот же PID, главное уникальный. Тогда просто обновляем processes и свелт сам оптимизирует рендер
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
// App.svelte

<table>
 <thead>
    ….
 </thead>
 <tbody>
 {#each processes as process, index (process.PID)}
    <tr>
          …
          <td>
              <button on:click={() => startStop(process)}>
                    {process.started ? ‘Stop’ : ‘Start’}
              </button>
          </td>
    </tr>
 {/each}
 </tbody>
</table>

<script>
  import { onMount } from ‘svelte’;
  import { fetchProcesses, startProcess, stopProcess } from ‘….’;

  let processes = [];

  onMount(() => {
      const timeout = setTimeout(async () => {
          processes = await fetchProcesses();
      }, 5000);
      return () => clearTimeout(timeout);
 });

  function startStop(process) {
       process.started ? stopProcess() : startProcess();
  }
</script>
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
в этом случае про main.js можно забыть и оставить как есть в дефолность svelte/template
источник

АЧ

Александр Чумак... in Svelte [svelt]
обалдеть :)
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
осталось заполнить пробелы и реализовать функцию fetchProcesses
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
там у вас еще какие-то кнопки с действиями. дойдете до них, можете еще раз сюда спросить. поможем
источник

АЧ

Александр Чумак... in Svelte [svelt]
Как я понимаю на кнопки надо будет вешать события
Эту логику тоже ведь можно в each запихать или он только добавлять компоненты может?
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
можно все в одном компоненте сделать. тут скорее зависит от того, насколько там много будет логики. в данном случае скорее всего этот будет всего несколько функций тут же в App.svelte и пара кнопок вызывающих эти функции на клик
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
но в более больших приложениях мы как бы разбиваем его на логические, часто повторяющиеся/переиспользуемые части, каждая из которых выполняет какую-то работу. это и есть компоненты
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
дописал пример
источник

AP

Alexander Ponomarev in Svelte [svelt]
а надо было прочитать что появился тришейкинг ес импортов, убедиться что бабель не транспайлит импорты в require и не используются коммон жс модули.

в данный момент большинство модулей предоставляется с ес импортами и бабель пресет не транспайлит импорты/эскпортов. В момент появления тришейкинга в 4ом вебпаке все было по другому и не нужно было "собирать тот же самый код"
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
мне это не нужно было делать., потому что у меня уже был настроен роллап на этот код и он все прекрасно шейкал
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
не уверен что там вообще был бабель в проекте
источник

AP

Alexander Ponomarev in Svelte [svelt]
тогда что ты сравнивал? включил вебпак и надеялся на магию что все само заработает?
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
надеялся что заработает также как в роллапе
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
не заработало
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
ничего особенного в роллапе я не делал, чтобы получить то что мне было нужно
источник

AP

Alexander Ponomarev in Svelte [svelt]
никто не обещал что заработает так же как в роллапе, но тот же результат можно было достигнуть, потому что что-то нужно было сделать)
источник

AP

Alexander Ponomarev in Svelte [svelt]
в вебпаке ничего не нужно делать чтобы динамический импорт заработал в ие11
источник

PM

Pavel 🦇 Malyshev in Svelte [svelt]
зачем что-то делать, чтобы получить то, что итак работает без лишних действий? какой-то мазохизм)
источник