@tsparticles/vue3 4.0.5 → 4.1.0

package/package.json

@@ -1,16 +1,13 @@
 {
   "name": "@tsparticles/vue3",
-  "version": "4.0.5",
-  "type": "module",
-  "main": "dist/particles.es.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/particles.es.js"
-    }
-  },
+  "version": "4.1.0",
   "description": "Official tsParticles Vue.js 3.x 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, React, Vue.js 2.x, Angular, Svelte, jQuery, Preact, Riot.js, Solid.js, Inferno.",
+  "homepage": "https://particles.js.org",
+  "repository": {
+    "url": "git+https://github.com/tsparticles/tsparticles.git",
+    "type": "git",
+    "directory": "wrappers/vue3"
+  },
   "keywords": [
     "front-end",
     "frontend",
@@ -64,33 +61,12 @@
     "fireworksjs",
     "canvas-confetti"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "pnpm run prettify:src && pnpm run prettify:readme && vue-tsc --noEmit && vite build",
-    "build:ci": "pnpm run prettify:ci:src && pnpm run prettify:ci:readme && vue-tsc --noEmit && vite build",
-    "prettify:ci:src": "prettier --check ./src/*",
-    "prettify:ci:readme": "prettier --check ./README.md",
-    "prettify:src": "prettier --write ./src/*",
-    "prettify:readme": "prettier --write ./README.md",
-    "preview": "vite preview --port 5050",
-    "typecheck": "vue-tsc --noEmit",
-    "lint": "eslint . --fix"
-  },
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "repository": {
-    "url": "git+https://github.com/tsparticles/tsparticles.git",
-    "type": "git",
-    "directory": "wrappers/vue3"
-  },
   "author": "Matteo Bruni <matteo.bruni@me.com>",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/tsparticles/vue3/issues"
   },
-  "homepage": "https://particles.js.org",
+  "type": "module",
   "funding": [
     {
       "type": "github",
@@ -106,35 +82,19 @@
     }
   ],
   "prettier": "@tsparticles/prettier-config",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@tsparticles/engine": "^4.0.5",
-    "vue": "^3.5.32"
+  "types": "index.d.ts",
+  "module": "particles.es.js",
+  "main": "particles.es.js",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./particles.es.js"
+    }
   },
-  "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "@rushstack/eslint-patch": "^1.16.1",
-    "@tsconfig/node18": "^18.2.6",
-    "@tsparticles/prettier-config": "^4.0.5",
-    "@types/node": "^25.6.0",
-    "@typescript-eslint/parser": "^8.58.1",
-    "@vitejs/plugin-vue": "^6.0.5",
-    "@vitejs/plugin-vue-jsx": "^5.1.5",
-    "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.7.0",
-    "@vue/tsconfig": "^0.9.1",
-    "eslint": "^10.2.0",
-    "eslint-plugin-vue": "^10.8.0",
-    "globals": "^17.5.0",
-    "prettier": "^3.8.2",
-    "typescript": "^6.0.2",
-    "vite": "^8.0.8",
-    "vite-plugin-dts": "^4.5.4",
-    "vue-eslint-parser": "^10.4.0",
-    "vue-tsc": "^3.2.6"
+  "peerDependencies": {
+    "@tsparticles/engine": "4.1.0"
   },
-  "module": "dist/particles.es.js",
-  "gitHead": "4d8b281f8097386714300e39b0004b903f9df87b"
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/{dist/particles.umd.js → particles.umd.js}

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?module.exports=t(require(`vue`),require(`@tsparticles/engine`)):typeof define==`function`&&define.amd?define([`vue`,`@tsparticles/engine`],t):(e=typeof globalThis<`u`?globalThis:e||self,e[`@tsparticles/vue3`]=t(e.Vue,e.tsParticles))})(this,function(e,t){var n=Symbol(`particles-provider`),r=`__tsparticles_vue3_init_state__`;function i(){let e=globalThis;return e[r]??={loaded:!1},e[r]}function a(){return(0,e.reactive)({loaded:!1})}function o(e,n,r){let a=i();if(a.promise&&a.callback!==r&&!a.loaded)throw Error(`@tsparticles/vue3 init callback must be stable across the app lifecycle.`);return a.loaded?(n.loaded=!0,Promise.resolve()):a.promise?a.promise.then(()=>{n.loaded=!0}):(a.callback=r,a.promise=(async()=>{r&&await r(t.tsParticles),await t.tsParticles.init(),a.loaded=!0,n.loaded=!0})().catch(e=>{throw a.promise=void 0,a.callback=void 0,a.loaded=!1,e}),a.promise)}function s(){let t=(0,e.inject)(n,void 0);if(!t)throw Error(`@tsparticles/vue3 plugin is required. Register it with app.use(Particles, { init }).`);return t}var c=[`id`],l=(0,e.defineComponent)({__name:`vue-particles`,props:{id:{},options:{},url:{},theme:{}},emits:[`particlesLoaded`],setup(n,{emit:r}){let i,a=n,o=r,l=s(),u=(0,e.ref)(!1),d=async()=>{i?.destroy(),i=await t.tsParticles.load({id:a.id,url:a.url,options:a.options}),o(`particlesLoaded`,i)};return(0,e.onMounted)(()=>{(0,e.nextTick)(()=>{if(!a.id)throw Error(`Prop 'id' is required!`);u.value=!0})}),(0,e.onUnmounted)(()=>{i?.destroy(),i=void 0}),(0,e.watch)(()=>l.loaded,e=>{e&&u.value&&d()},{immediate:!0}),(0,e.watch)(()=>u.value,e=>{e&&l.loaded&&d()},{immediate:!0}),(t,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{id:n.id},null,8,c))}});return(e,t)=>{let r=a();e.provide(n,r),e.component(`VueParticles`,l),o(e,r,t?.init)}});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?module.exports=t(require("vue"),require("@tsparticles/engine")):typeof define==`function`&&define.amd?define([`vue`,`@tsparticles/engine`],t):(e=typeof globalThis<`u`?globalThis:e||self,e[`@tsparticles/vue3`]=t(e.Vue,e.tsParticles))})(this,function(e,t){var n=Symbol(`particles-provider`),r=`__tsparticles_vue3_init_state__`;function i(){let e=globalThis;return e[r]??={loaded:!1},e[r]}function a(){return(0,e.reactive)({loaded:!1})}function o(e,n,r){let a=i();if(a.promise&&a.callback!==r&&!a.loaded)throw Error(`@tsparticles/vue3 init callback must be stable across the app lifecycle.`);return a.loaded?(n.loaded=!0,Promise.resolve()):a.promise?a.promise.then(()=>{n.loaded=!0}):(a.callback=r,a.promise=(async()=>{r&&await r(t.tsParticles),await t.tsParticles.init(),a.loaded=!0,n.loaded=!0})().catch(e=>{throw a.promise=void 0,a.callback=void 0,a.loaded=!1,e}),a.promise)}function s(){let t=(0,e.inject)(n,void 0);if(!t)throw Error(`@tsparticles/vue3 plugin is required. Register it with app.use(Particles, { init }).`);return t}var c=[`id`],l=(0,e.defineComponent)({__name:`vue-particles`,props:{id:{},options:{},url:{},theme:{}},emits:[`particlesLoaded`],setup(n,{emit:r}){let i,a=n,o=r,l=s(),u=(0,e.ref)(!1),d=async()=>{i?.destroy(),i=await t.tsParticles.load({id:a.id,url:a.url,options:a.options}),o(`particlesLoaded`,i)};return(0,e.onMounted)(()=>{(0,e.nextTick)(()=>{if(!a.id)throw Error(`Prop 'id' is required!`);u.value=!0})}),(0,e.onUnmounted)(()=>{i?.destroy(),i=void 0}),(0,e.watch)(()=>l.loaded,e=>{e&&u.value&&d()},{immediate:!0}),(0,e.watch)(()=>u.value,e=>{e&&l.loaded&&d()},{immediate:!0}),(t,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{id:n.id},null,8,c))}});return(e,t)=>{let r=a();e.provide(n,r),e.component(`VueParticles`,l),o(e,r,t?.init)}});

package/{dist/src → src}/components/vue-particles.vue.d.ts

@@ -6,9 +6,10 @@ type __VLS_Props = {
     url?: string;
     theme?: string;
 };
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     particlesLoaded: (container?: Container | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onParticlesLoaded?: ((container?: Container | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/README.md

@@ -1,73 +0,0 @@
-[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
-
-# @tsparticles/vue3
-
-[![npm](https://img.shields.io/npm/v/@tsparticles/vue3)](https://www.npmjs.com/package/@tsparticles/vue3)
-[![npm](https://img.shields.io/npm/dm/@tsparticles/vue3)](https://www.npmjs.com/package/@tsparticles/vue3)
-
-Official Vue 3 component wrapper for [tsParticles](https://github.com/matteobruni/tsparticles).
-
-## Installation
-
-```bash
-pnpm add @tsparticles/vue3 @tsparticles/engine
-```
-
-## Usage
-
-Register the plugin once in your app and provide your own async `init` function.
-
-```ts
-import { createApp } from "vue";
-import Particles from "@tsparticles/vue3";
-import type { Engine } from "@tsparticles/engine";
-import App from "./App.vue";
-
-async function registerParticles(engine: Engine): Promise<void> {
-  const [{ loadSlim }] = await Promise.all([import("@tsparticles/slim")]);
-
-  await loadSlim(engine);
-}
-
-const app = createApp(App);
-
-app.use(Particles, {
-  init: registerParticles,
-});
-
-app.mount("#app");
-```
-
-Then use the component anywhere in the app:
-
-```vue
-<template>
-  <vue-particles id="tsparticles" :options="options" @particles-loaded="particlesLoaded" />
-</template>
-
-<script setup lang="ts">
-import type { Container, ISourceOptions } from "@tsparticles/engine";
-
-const options: ISourceOptions = {
-  particles: {
-    number: { value: 80 },
-    links: { enable: true },
-    move: { enable: true },
-  },
-};
-
-function particlesLoaded(container?: Container): void {
-  console.log("Particles loaded", container);
-}
-</script>
-```
-
-## How init works
-
-- `init` is called once per Vue app instance.
-- Components wait for `init` completion before loading.
-- You choose what to import inside `init` (`@tsparticles/slim`, `tsparticles`, custom plugins, etc.).
-
-## Nuxt support
-
-For Nuxt projects use [`@tsparticles/nuxt3`](../nuxt3/README.md) or [`@tsparticles/nuxt4`](../nuxt4/README.md), which wrap this package in a Nuxt module.