Merge branch 'main' into dev

Author: matteobruni

.github/workflows/nodejs.yml

@@ -31,7 +31,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: '16'
-      - uses: pnpm/action-setup@v2.4.0
+      - uses: pnpm/action-setup@v3.0.0
         name: Install pnpm
         id: pnpm-install
         with:
@@ -73,7 +73,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: '16'
-      - uses: pnpm/action-setup@v2.4.0
+      - uses: pnpm/action-setup@v3.0.0
         name: Install pnpm
         id: pnpm-install
         with:

README.md

@@ -21,12 +21,12 @@ yarn add @tsparticles/vue3
 ```javascript
 import Particles from "@tsparticles/vue3";
 //import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
-import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
+import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
 
 createApp(App).use(Particles, {
   init: async engine => {
     // await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need it
-    await loadSlim(engine); // or you can load the slim version from "tsparticles-slim" if don't need Shapes or Animations
+    await loadSlim(engine); // or you can load the slim version from "@tsparticles/slim" if don't need Shapes or Animations
   },
 });
 ```

apps/nuxt3/.github/workflows/ci.yml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@master
 
       - name: Setup node env 🏗
-        uses: actions/setup-node@v3.5.1
+        uses: actions/setup-node@v4.0.1
         with:
           node-version: ${{ matrix.node }}
           check-latest: true
@@ -34,7 +34,7 @@ jobs:
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
       - name: Cache node_modules 📦
-        uses: actions/cache@v3.2.2
+        uses: actions/cache@v3.3.3
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}

components/vue3/README.md

@@ -21,12 +21,12 @@ yarn add @tsparticles/vue3
 ```javascript
 import Particles from "@tsparticles/vue3";
 //import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
-import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
+import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
 
 createApp(App).use(Particles, {
     init: async engine => {
         // await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need it
-        await loadSlim(engine); // or you can load the slim version from "tsparticles-slim" if don't need Shapes or Animations
+        await loadSlim(engine); // or you can load the slim version from "@tsparticles/slim" if don't need Shapes or Animations
     },
 });
 ```

components/vue3/src/components/vue-particles.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { type Container, type ISourceOptions, type Engine, tsParticles } from "@tsparticles/engine";
-import { nextTick, onMounted, onUnmounted } from "vue";
+import { nextTick, onMounted, onUnmounted, watch } from "vue";
 
 export type IParticlesProps = ISourceOptions;
 
@@ -14,19 +14,22 @@ const props = defineProps<{
     id: string;
     options?: IParticlesProps;
     url?: string;
+    theme?: string;
 }>();
 
 const emit = defineEmits<{
     (e: "particlesLoaded", container?: Container): void;
 }>();
 
-addEventListener("particlesInit", (e: Event) => {
+const initEventHandler = (e: Event) => {
     const evt = e as CustomEvent<Engine>;
 
     engine = evt.detail;
 
     loadParticles();
-});
+};
+
+addEventListener("particlesInit", initEventHandler);
 
 const loadParticles = async () => {
     if (!engine) {
@@ -60,5 +63,15 @@ onUnmounted(() => {
     container.destroy();
 
     container = undefined;
+
+    removeEventListener("particlesInit", initEventHandler);
 });
+
+watch(
+    () => props.theme,
+    () => {
+        container?.loadTheme(props.theme);
+    },
+    { immediate: true, deep: true },
+);
 </script>