Визуализация алгоритмов поиска пути на Svelte: Практические заметки

Привет, Хабр! В этом посте делюсь опытом разработки на Svelte, демонстрируя это на моем пет-проекте.

Код проекта: GitHub
Лайв демо: pathfinding-visualizer

1. Как реализована анимация сетки?

Анимация нодов

Анимация нодов осуществляется с использованием keyframes CSS анимации, вынесенной в отдельный класс:

@keyframes touch {
    0% {
        transform: scale(0.7);
    }
    35% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
  }

  .inAnimation {
      animation: touch 0.5s ease-in-out;
  }

Каждый нод в сетке представлен div элементом с уникальным id. Для анимации нодов используется writable store из Svelte, animationQ:

<div
	id={node.key}
    ...
	class:inAnimation={$animationQ.has(node.key)}
/>

После завершения анимации ключ удаляется из очереди и удаляется класс, чтобы анимация могла быть вызвана еще раз.

const animateNode = (node) => {
      queueAnimation(node.id);

      node.addEventListener('animationend', () => removeFromAnimation(node.id), {
          once: true
      });

      node.addEventListener('animationcancel', () => removeFromAnimationQ(node.id), {
          once: true
      });
  };

2. Темная и светлая темы

Цвета проекта определены с помощью CSS переменных в layout.svelte и состояние темы вынесено в отдельный стор.

<script lang="ts">
	import { theme } from '$lib/stores/theme';
</script>

<div class:light={$theme === 'light'}>
	<slot />
</div>

<style>
	div {
		--main-white: #f0e8f4;
		--bg-body: #160f1d;
      	--bg-not-visited: #3b2d52;
        ...
    }

	.light {
		--bg-not-visited: var(--main-white);
	}
</style>

3. Как добавить Google Analytics?

Для интеграции Google Analytics, мета информация проекта и соответствующие скрипты размещаются в компоненте Head с использованием тега <svelte:head>.

<script lang="ts">
    // API ключ передается с помощью env переменной
	import { env } from '$env/dynamic/public';
	import { onMount } from 'svelte';

	onMount(() => {
        // Настройка гугл аналитики, по гайду из официальных доков
		window.dataLayer = window.dataLayer || [];

		function gtag() {
			dataLayer.push(arguments);
		}

		gtag('js', new Date());
		gtag('config', env.PUBLIC_GTAG_KEY);
	});
</script>

<svelte:head>
	<meta name="author" content="Ivan Semochkin" />
    ...
    {#if env.PUBLIC_GTAG_KEY}
  	    <script async src="https://www.googletagmanager.com/gtag/js?id={env.PUBLIC_GTAG_KEY}"></script>
    {/if}
</svelte:head>

4. Продакшн билд

Проект создан на основе SvelteKit. Для сборки продакшн версии используется команда npm run build. Запуск билда происходит через pm2:

pm2 start build/index.js

Конфигурация Nginx:

upstream sveltekit-server {
  server 127.0.0.1:3000;
  keepalive 8;
}

server {
  listen 80;
  server_name mydomain.com;

  root /home/deploy/frontend/build/client;

  location / {
    try_files $uri $uri/ @sveltekit;
  }

  location @sveltekit {
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Sendfile-Type X-Accel-Redirect;

    proxy_pass http://sveltekit-server;
    proxy_redirect off;

    # error_page 502 = @static;
  }

  location ^~ /_app/immutable/ {
    # gzip_static on;
    expires max;
    add_header Cache-Control public;
    access_log off;
    try_files $uri $uri/ @sveltekit;
  }
}

Надеюсь, эти заметки окажутся полезными для тех, кто изучает Svelte. Если у вас есть вопросы по проекту, буду рад ответить в комментариях.