Rewrite the component to utilise tsParticles v3.4

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "plugins": ["prettier-plugin-astro"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

README.md

@@ -13,57 +13,67 @@ Official [tsParticles](https://github.com/matteobruni/tsparticles) Astro compone
 ## Installation
 
 ```shell
-npm install astro-particles
+npm install @tsparticles/astro
 ```
 
 or
 
 ```shell
-yarn add astro-particles
+pnpm add @tsparticles/astro
+```
+
+or
+
+```shell
+yarn add @tsparticles/astro
 ```
 
 ## How to use
 
 ```astro
 ---
-import Particles from "astro-particles"
-import type { ISourceOptions } from "tsparticles-engine";
+import Particles from "@tsparticles/astro";
+import type { ISourceOptions } from "@tsparticles/engine";
 
 const options: ISourceOptions = {
-    background: {
-        color: "#000"
+  background: {
+    color: "#000",
+  },
+  fullScreen: {
+    zIndex: -1,
+  },
+  particles: {
+    number: {
+      value: 100,
     },
-    fullScreen: {
-        zIndex: -1
+    move: {
+      enable: true,
     },
-    particles: {
-        number: {
-            value: 100
-        },
-        move: {
-            enable: true
-        }
-    }
+  },
 };
 ---
 
 <script>
-    import { type Container, type Engine, tsParticles } from "tsparticles-engine";
-    import { loadFull } from "tsparticles";
-
-    // the function name is the parameter passed to the init attribute
-    // required
-    // add the function to window is mandatory, it will be searched there
-    window.particlesInit = async function (engine: Engine) {
-        await loadFull(engine);
-    }
-
-    // the function name is the parameter passed to the loaded attribute
-    // optional
-    // add the function to window is mandatory, it will be searched there
-    window.particlesLoaded = function (container: Container) {
-        console.log("particlesLoaded callback");
-    }
+  import {
+    type Container,
+    type Engine,
+    tsParticles,
+  } from "@tsparticles/engine";
+  import { loadFull } from "tsparticles";
+
+  // the function name is the parameter passed to the init attribute
+  // required
+  // add the function to window is mandatory, it will be searched there
+  window.particlesInit = async function (engine: Engine) {
+    await loadFull(engine);
+  };
+
+  // the function name is the parameter passed to the loaded attribute
+  // optional
+  // add the function to window is mandatory, it will be searched there
+  window.particlesLoaded = function (container: Container) {
+    console.log("particlesLoaded callback");
+  };
 </script>
 
 <Particles id="tsparticles" options={options} init="particlesInit" />
@@ -72,7 +82,7 @@ const options: ISourceOptions = {
 ### Props
 
 | Prop    | Type   | Definition                                                             |
-|---------|--------|------------------------------------------------------------------------|
+| ------- | ------ | ---------------------------------------------------------------------- |
 | id      | string | The id of the element.                                                 |
 | init    | string | The name of the function to call when the particles instance is ready. |
 | loaded  | string | The name of the function to call when the particles are loaded.        |

apps/astro/package.json

@@ -12,9 +12,9 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@tsparticles/astro": "workspace:^",
+    "@tsparticles/engine": "^3.4.0",
     "astro": "^2.6.4",
-    "astro-particles": "workspace:^",
-    "tsparticles": "^2.10.1",
-    "tsparticles-engine": "^2.10.1"
+    "tsparticles": "^3.4.0"
   }
 }

apps/astro/src/env.d.ts

@@ -1 +1,11 @@
 /// <reference types="astro/client" />
+
+import type { Container, Engine } from "@tsparticles/engine";
+
+// add the init function type to the global window object
+declare global {
+  interface Window {
+    particlesInit: (engine: Engine) => Promise<void>;
+    particlesLoaded: (container: Container) => void;
+  }
+}