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

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

Код проекта: GitHub
Лайв демо: ivan-sem.com

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. Если у вас есть вопросы по проекту, буду рад ответить в комментариях.