build: set for tsparticles v2

Author: matteobruni

apps/astro/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@tsparticles/astro-demo",
+  "name": "astro-particles-demo",
   "type": "module",
   "version": "2.8.0",
   "private": true,
@@ -12,9 +12,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@tsparticles/astro": "^2.8.0",
-    "@tsparticles/engine": "^3.0.0-alpha.1",
+    "astro-particles": "^2.9.3",
+    "tsparticles-engine": "^2.9.3",
     "astro": "^2.0.1",
-    "tsparticles": "^3.0.0-alpha.1"
+    "tsparticles": "^2.9.3"
   }
 }

apps/astro/src/pages/index.astro

@@ -1,8 +1,8 @@
 ---
-import Particles from "@tsparticles/astro"
+import Particles from "astro-particles"
 import Layout from '../layouts/Layout.astro';
 import Card from '../components/Card.astro';
-import type { ISourceOptions } from "@tsparticles/engine";
+import type { ISourceOptions } from "tsparticles-engine";
 
 const options: ISourceOptions = {
     background: {
@@ -12,6 +12,9 @@ const options: ISourceOptions = {
         zIndex: -1
     },
     particles: {
+		number: {
+			value: 100
+		},
         move: {
             enable: true
         }
@@ -20,7 +23,7 @@ const options: ISourceOptions = {
 ---
 
 <script>
-    import { tsParticles } from "@tsparticles/engine";
+    import { tsParticles } from "tsparticles-engine";
     import { loadFull } from "tsparticles";
 
     (async () => {

components/astro/README.md

@@ -1,8 +1,8 @@
 [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
 
-# @tsparticles/astro
+# astro-particles
 
-[![npm](https://img.shields.io/npm/v/@tsparticles/astro)](https://www.npmjs.com/package/@tsparticles/astro) [![npm](https://img.shields.io/npm/dm/@tsparticles/astro)](https://www.npmjs.com/package/@tsparticles/astro) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![npm](https://img.shields.io/npm/v/astro-particles)](https://www.npmjs.com/package/astro-particles) [![npm](https://img.shields.io/npm/dm/astro-particles)](https://www.npmjs.com/package/astro-particles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
 Official [tsParticles](https://github.com/matteobruni/tsparticles) Astro component
 
@@ -13,20 +13,20 @@ Official [tsParticles](https://github.com/matteobruni/tsparticles) Astro compone
 ## Installation
 
 ```shell
-npm install @tsparticles/astro
+npm install astro-particles
 ```
 
 or
 
 ```shell
-yarn add @tsparticles/astro
+yarn add astro-particles
 ```
 
 ## How to use
 
 ```astro
 ---
-import Particles from "@tsparticles/astro"
+import Particles from "astro-particles"
 import type { ISourceOptions } from "@tsparticles/engine";
 
 const options: ISourceOptions = {
@@ -37,6 +37,9 @@ const options: ISourceOptions = {
         zIndex: -1
     },
     particles: {
+        number: {
+            value: 100
+        },
         move: {
             enable: true
         }

components/astro/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@tsparticles/astro",
-  "version": "2.8.0",
+  "name": "astro-particles",
+  "version": "2.9.3",
   "description": "Official tsParticles Astro Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, React.js, Riot.js, Solid.js, Inferno.",
   "scripts": {
     "build": "echo build",
@@ -87,6 +87,6 @@
     ".": "./index.ts"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.0-alpha.1"
+    "tsparticles-engine": "^2.9.3"
   }
 }

components/astro/src/Particles.astro

@@ -1,31 +1,31 @@
 ---
-import type { Container, Engine, ISourceOptions } from "@tsparticles/engine";
+import type { Container, Engine, ISourceOptions } from "tsparticles-engine";
 
 export interface IParticlesProps {
     id: string;
     options?: ISourceOptions;
     url?: string;
 }
 
-const { id, options, url, particlesInit, particlesLoaded } = Astro.props as IParticlesProps;
+const { id, options, url } = Astro.props as IParticlesProps;
 ---
 <astro-particles data-id={id} data-options={JSON.stringify(options)} data-url={url}>
     <canvas></canvas>
 </astro-particles>
 
 <script>
-    import { tsParticles } from "@tsparticles/engine";
+    import { tsParticles } from "tsparticles-engine";
 
     class AstroParticles extends HTMLElement {
         constructor() {
             super();
 
             (async () => {
-                await tsParticles.load({
-                    id: this.dataset.id,
-                    options: JSON.parse(this.dataset.options),
-                    url: this.dataset.url
-                });
+                if (this.dataset.url) {
+                    await tsParticles.loadJSON(this.dataset.id, this.dataset.url);
+                } else if (this.dataset.options) {
+                    await tsParticles.load(this.dataset.id, JSON.parse(this.dataset.options));
+                }
             })();
         }
     }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@tsparticles/astro-workspace",
+  "name": "astro-particles-workspace",
   "version": "0.0.0",
   "private": true,
   "scripts": {