tsParticles 2.0.5 Changelog

Ломающие изменения

Начиная с версии 2.0.0, tsparticles больше не будет единым пакетом. Его рост заставляет меня много думать о разделении проекта на большее количество пакетов.

Новая структура будет представлять собой общий движок и множество пакетов с отдельными функциями, которые могут быть установлены и загружены, так что каждый сможет установить только те функции, которые ему нужны, а для ленивых есть наборы и пресеты, готовые к использованию.

Например, если вы хотите придерживаться библиотеки tsparticles, вы все равно можете установить ее и использовать файл bundle с CDN. Вы можете легко настроить его при использовании import или require, поскольку вам нужно добавить несколько строк кода в конфигурацию v1.

import { tsParticles } from "tsparticles-engine"; // this is the new common package
import { loadFull } from "tsparticles"; // this function loads all the features contained in v1 package

(async () => {
    await loadFull(tsParticles); // this is needed to load all the features and can be done everywhere before using tsParticles.load

    await tsParticles.load("tsparticles", { /* options */ }); // this must be done after loadFull
})();

PRO

• Меньший выход, вы можете импортировать только те функции, которые вам нужны, без большого количества неиспользуемого кода.
• Более высокая производительность, так как многие функции не импортируются, они не работают, снижая общую производительность. Больше функций, больше вычислений.

ПРОТИВ

• Все функции должны быть установлены, что приводит к длинному файлу package.json, поэтому пресеты теперь будут более важны.
• Предыдущий код больше не будет работать без импорта нужных пакетов, это необходимое изменение.

Новые возможности

• Добавлены значения outside и inside к опциям направления перемещения частиц
• Добавлены значения outside и inside к опциям режимов перемещения частиц

Как перейти с v1 на v2?

Версия 1.x все еще является latest тегом на npm, но next имеет версию 2.0.0, которую мне нужно выпустить на публику, чтобы найти проблемы и получить некоторые отзывы.

Шаги миграции

Использование ванильного JS / HTML

Просто измените файл tsparticles с tsparticles.min.js на tsparticles.bundle.min.js, если используется версия slim, там тоже есть bundle, но это другой пакет, теперь он называется tsparticles-slim.

Модули

1. Установите пакет "tsparticles-engine" с помощью тега next следующим образом: npm install tsparticles-engine@next.
2. Замените все импорты "tsparticles" на "tsparticles-engine".
3. Добавьте import { loadFull } из "tsparticles"; в импорт, или его RequireJS версию. Для этого требуется новая версия 2.0.x, вы можете установить ее с помощью npm install tsparticles@next.
4. Вызовите loadFull.
   • Если используется React/Vue/Angular/Svelte или другой компонент: в свойстве particlesInit/init, передавая тот же параметр, что и в функции init в loadFull.
   • Если нет, просто вызовите loadFull(tsParticles) перед любым использованием tsParticles.

Альтернатива

Использование поставляемой версии пакета tsparticles не является оптимальным, его проще реализовать, но он может загрузить много ненужного материала.

В качестве примера я хочу привести следующий код (это ядро пакета tsparticles-slim)

import type { Engine } from "tsparticles-engine";
import { loadAngleUpdater } from "tsparticles-updater-angle";
import { loadBaseMover } from "tsparticles-move-base";
import { loadCircleShape } from "tsparticles-shape-circle";
import { loadColorUpdater } from "tsparticles-updater-color";
import { loadExternalAttractInteraction } from "tsparticles-interaction-external-attract";
import { loadExternalBounceInteraction } from "tsparticles-interaction-external-bounce";
import { loadExternalBubbleInteraction } from "tsparticles-interaction-external-bubble";
import { loadExternalConnectInteraction } from "tsparticles-interaction-external-connect";
import { loadExternalGrabInteraction } from "tsparticles-interaction-external-grab";
import { loadExternalPauseInteraction } from "tsparticles-interaction-external-pause";
import { loadExternalPushInteraction } from "tsparticles-interaction-external-push";
import { loadExternalRemoveInteraction } from "tsparticles-interaction-external-remove";
import { loadExternalRepulseInteraction } from "tsparticles-interaction-external-repulse";
import { loadImageShape } from "tsparticles-shape-image";
import { loadLifeUpdater } from "tsparticles-updater-life";
import { loadLineShape } from "tsparticles-shape-line";
import { loadOpacityUpdater } from "tsparticles-updater-opacity";
import { loadOutModesUpdater } from "tsparticles-updater-out-modes";
import { loadParallaxMover } from "tsparticles-move-parallax";
import { loadParticlesAttractInteraction } from "tsparticles-interaction-particles-attract";
import { loadParticlesCollisionsInteraction } from "tsparticles-interaction-particles-collisions";
import { loadParticlesLinksInteraction } from "tsparticles-interaction-particles-links";
import { loadPolygonShape } from "tsparticles-shape-polygon";
import { loadSizeUpdater } from "tsparticles-updater-size";
import { loadSquareShape } from "tsparticles-shape-square";
import { loadStarShape } from "tsparticles-shape-star";
import { loadStrokeColorUpdater } from "tsparticles-updater-stroke-color";
import { loadTextShape } from "tsparticles-shape-text";

export async function loadSlim(engine: Engine): Promise<void> {
    await loadBaseMover(engine);
    await loadParallaxMover(engine);

    await loadExternalAttractInteraction(engine);
    await loadExternalBounceInteraction(engine);
    await loadExternalBubbleInteraction(engine);
    await loadExternalConnectInteraction(engine);
    await loadExternalGrabInteraction(engine);
    await loadExternalPauseInteraction(engine);
    await loadExternalPushInteraction(engine);
    await loadExternalRemoveInteraction(engine);
    await loadExternalRepulseInteraction(engine);

    await loadParticlesAttractInteraction(engine);
    await loadParticlesCollisionsInteraction(engine);
    await loadParticlesLinksInteraction(engine);

    await loadCircleShape(engine);
    await loadImageShape(engine);
    await loadLineShape(engine);
    await loadPolygonShape(engine);
    await loadSquareShape(engine);
    await loadStarShape(engine);
    await loadTextShape(engine);

    await loadLifeUpdater(engine);
    await loadOpacityUpdater(engine);
    await loadSizeUpdater(engine);
    await loadAngleUpdater(engine);
    await loadColorUpdater(engine);
    await loadStrokeColorUpdater(engine);
    await loadOutModesUpdater(engine);
}

Использование ванильного JS / HTML

Разделение вещей может быть долгим занятием при использовании тегов <script>, но нет ничего невозможного.

Из примера выше, каждому пакету нужен свой тег <script>, а каждую функцию load нужно вызывать, используя tsParticles в качестве параметра, затем использовать объект tsParticles как всегда.

tsparticles-engine должен присутствовать всегда, если нет пакетов (tsparticles-slim, tsparticles или любого пресета из пакета). Все остальные пакеты требуются только в том случае, если вы хотите использовать эту функцию.

Рассмотрим пример:

Как вы можете видеть, в опциях JS есть необходимые скрипты, и перед использованием tsParticles.load вызываются их функции для корректной загрузки. Каждая функция load является async, то есть это Promise, который можно ожидать, это не всегда необходимо (как в данном случае), но рекомендуется.

Модули

В этом случае импортировать модули проще, так как каждый модуль можно легко установить с помощью npm, yarn или pnpm.

После установки необходимых пакетов, импортируйте их, и код, используемый для "Vanilla JS / HTML Usage", будет работать и здесь.

Пример модуля можно найти здесь:

Компоненты (React, Vue, Angular, Svelte, …)

Каждый компонент имеет функцию init или particlesInit (проверьте документацию, все ли компоненты имеют одинаковый атрибут), которая является местом загрузки всех компонентов, эта функция имеет атрибут engine, который является экземпляром tsParticles, используемым компонентом.

Образец React

Vue.js 2.x Образец

Образец Vue.js 3.x

Образец Angular