@tsparticles/vue3 3.0.1 → 4.0.0-beta.12

package/README.md

@@ -2,153 +2,72 @@
 
 # @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) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![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 [tsParticles](https://github.com/matteobruni/tsparticles) VueJS 3.x component
-
-[![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
-
-[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") <a href="https://www.buymeacoffee.com/matteobruni"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00"></a>
+Official Vue 3 component wrapper for [tsParticles](https://github.com/matteobruni/tsparticles).
 
 ## Installation
 
-```shell script
-yarn add @tsparticles/vue3
+```bash
+pnpm add @tsparticles/vue3 @tsparticles/engine
 ```
 
 ## Usage
 
-```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.
-
-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
-    },
-});
-```
+Register the plugin once in your app and provide your own async `init` function.
 
-### Demo config
+```ts
+import { createApp } from "vue";
+import Particles from "@tsparticles/vue3";
+import type { Engine } from "@tsparticles/engine";
+import App from "./App.vue";
 
-```html
-<template>
-    <div id="app">
-        <vue-particles id="tsparticles" :particlesLoaded="particlesLoaded" url="http://foo.bar/particles.json" />
-
-        <vue-particles
-            id="tsparticles"
-            :particlesLoaded="particlesLoaded"
-            :options="{
-                    background: {
-                        color: {
-                            value: '#0d47a1'
-                        }
-                    },
-                    fpsLimit: 120,
-                    interactivity: {
-                        events: {
-                            onClick: {
-                                enable: true,
-                                mode: 'push'
-                            },
-                            onHover: {
-                                enable: true,
-                                mode: 'repulse'
-                            },
-                        },
-                        modes: {
-                            bubble: {
-                                distance: 400,
-                                duration: 2,
-                                opacity: 0.8,
-                                size: 40
-                            },
-                            push: {
-                                quantity: 4
-                            },
-                            repulse: {
-                                distance: 200,
-                                duration: 0.4
-                            }
-                        }
-                    },
-                    particles: {
-                        color: {
-                            value: '#ffffff'
-                        },
-                        links: {
-                            color: '#ffffff',
-                            distance: 150,
-                            enable: true,
-                            opacity: 0.5,
-                            width: 1
-                        },
-                        move: {
-                            direction: 'none',
-                            enable: true,
-                            outModes: 'bounce',
-                            random: false,
-                            speed: 6,
-                            straight: false
-                        },
-                        number: {
-                            density: {
-                                enable: true,
-                            },
-                            value: 80
-                        },
-                        opacity: {
-                            value: 0.5
-                        },
-                        shape: {
-                            type: 'circle'
-                        },
-                        size: {
-                            value: { min: 1, max: 5 }
-                        }
-                    },
-                    detectRetina: true
-                }"
-        />
-    </div>
-</template>
-```
+async function registerParticles(engine: Engine): Promise<void> {
+  const [{ loadSlim }] = await Promise.all([import("@tsparticles/slim")]);
 
-```javascript
-const particlesLoaded = async container => {
-    console.log("Particles container loaded", container);
-};
-```
+  await loadSlim(engine);
+}
 
-### TypeScript errors
+const app = createApp(App);
 
-If TypeScript returns error while importing/using Particles plugin try adding the following import before the previous
-code:
+app.use(Particles, {
+  init: registerParticles,
+});
 
-```typescript
-declare module "@tsparticles/vue3";
+app.mount("#app");
 ```
 
-## Demos
+Then use the component anywhere in the app:
 
-The demo website is [here](https://particles.js.org)
+```vue
+<template>
+  <vue-particles id="tsparticles" :options="options" @particles-loaded="particlesLoaded" />
+</template>
 
-<https://particles.js.org>
+<script setup lang="ts">
+import type { Container, ISourceOptions } from "@tsparticles/engine";
 
-There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)
+const options: ISourceOptions = {
+  particles: {
+    number: { value: 80 },
+    links: { enable: true },
+    move: { enable: true },
+  },
+};
 
-<https://codepen.io/collection/DPOage>
+function particlesLoaded(container?: Container): void {
+  console.log("Particles loaded", container);
+}
+</script>
+```
 
-## Migrating from Vue 2.x to Vue 3.x
+## How init works
 
-If you are migrating your project from Vue 2.x to 3.x you need to these steps:
+- `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.).
 
--   Change the dependency from `@tsparticles/vue2` to `@tsparticles/vue3`
--   Update the `node_modules` folder executing `npm install` or `yarn`
--   Change the `use` function from `Vue.use(Particles, { init: /* omissis */ })`
-    to `createApp(App).use(Particles, { init: /* omissis */ })`.
+## Nuxt support
 
-The `<vue-particles />` tag syntax remains the same, so you don't need to do any additional action.
+For Nuxt projects use [`@tsparticles/nuxt3`](../nuxt3/README.md) or [`@tsparticles/nuxt4`](../nuxt4/README.md), which wrap this package in a Nuxt module.

package/dist/particles.es.js

@@ -1,39 +1,65 @@
-import { defineComponent as l, onMounted as p, nextTick as u, onUnmounted as m, openBlock as f, createElementBlock as v } from "vue";
-import { tsParticles as o } from "@tsparticles/engine";
-const _ = ["id"], w = /* @__PURE__ */ l({
-  __name: "vue-particles",
-  props: {
-    id: {},
-    options: {},
-    url: {}
-  },
-  emits: ["particlesLoaded"],
-  setup(r, { emit: e }) {
-    let t, i;
-    const n = r, c = e;
-    addEventListener("particlesInit", (s) => {
-      i = s.detail, a();
-    });
-    const a = async () => {
-      i || (i = o), t = await i.load({
-        id: n.id,
-        url: n.url,
-        options: n.options
-      }), c("particlesLoaded", t);
-    };
-    return p(() => {
-      u(() => {
-        if (!n.id)
-          throw new Error("Prop 'id' is required!");
-        a();
-      });
-    }), m(() => {
-      t && (t.destroy(), t = void 0);
-    }), (s, d) => (f(), v("div", { id: s.id }, null, 8, _));
-  }
-}), P = (r, e) => {
-  r.component("vue-particles", w), (async () => (o.init(), e.init && await e.init(o), dispatchEvent(new CustomEvent("particlesInit", { detail: o }))))();
-};
-export {
-  P as default
+import { createElementBlock as e, defineComponent as t, inject as n, nextTick as r, onMounted as i, onUnmounted as a, openBlock as o, reactive as s, ref as c, watch as l } from "vue";
+import { tsParticles as u } from "@tsparticles/engine";
+//#region src/components/particles-provider.ts
+var d = Symbol("particles-provider"), f = "__tsparticles_vue3_init_state__";
+function p() {
+	let e = globalThis;
+	return e[f] ??= { loaded: !1 }, e[f];
+}
+function m() {
+	return s({ loaded: !1 });
+}
+function h(e, t, n) {
+	let r = p();
+	if (r.promise && r.callback !== n && !r.loaded) throw Error("@tsparticles/vue3 init callback must be stable across the app lifecycle.");
+	return r.loaded ? (t.loaded = !0, Promise.resolve()) : r.promise ? r.promise.then(() => {
+		t.loaded = !0;
+	}) : (r.callback = n, r.promise = (async () => {
+		n && await n(u), await u.init(), r.loaded = !0, t.loaded = !0;
+	})().catch((e) => {
+		throw r.promise = void 0, r.callback = void 0, r.loaded = !1, e;
+	}), r.promise);
+}
+function g() {
+	let e = n(d, void 0);
+	if (!e) throw Error("@tsparticles/vue3 plugin is required. Register it with app.use(Particles, { init }).");
+	return e;
+}
+//#endregion
+//#region src/components/vue-particles.vue?vue&type=script&setup=true&lang.ts
+var _ = ["id"], v = /* @__PURE__ */ t({
+	__name: "vue-particles",
+	props: {
+		id: {},
+		options: {},
+		url: {},
+		theme: {}
+	},
+	emits: ["particlesLoaded"],
+	setup(t, { emit: n }) {
+		let s, d = t, f = n, p = g(), m = c(!1), h = async () => {
+			s?.destroy(), s = await u.load({
+				id: d.id,
+				url: d.url,
+				options: d.options
+			}), f("particlesLoaded", s);
+		};
+		return i(() => {
+			r(() => {
+				if (!d.id) throw Error("Prop 'id' is required!");
+				m.value = !0;
+			});
+		}), a(() => {
+			s?.destroy(), s = void 0;
+		}), l(() => p.loaded, (e) => {
+			e && m.value && h();
+		}, { immediate: !0 }), l(() => m.value, (e) => {
+			e && p.loaded && h();
+		}, { immediate: !0 }), (n, r) => (o(), e("div", { id: t.id }, null, 8, _));
+	}
+}), y = (e, t) => {
+	let n = m();
+	e.provide(d, n), e.component("VueParticles", v), h(e, n, t?.init);
 };
+//#endregion
+export { y as default };

package/dist/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){"use strict";const a=["id"],l=e.defineComponent({__name:"vue-particles",props:{id:{},options:{},url:{}},emits:["particlesLoaded"],setup(o,{emit:n}){let i,s;const r=o,p=n;addEventListener("particlesInit",c=>{s=c.detail,d()});const d=async()=>{s||(s=t.tsParticles),i=await s.load({id:r.id,url:r.url,options:r.options}),p("particlesLoaded",i)};return e.onMounted(()=>{e.nextTick(()=>{if(!r.id)throw new Error("Prop 'id' is required!");d()})}),e.onUnmounted(()=>{i&&(i.destroy(),i=void 0)}),(c,u)=>(e.openBlock(),e.createElementBlock("div",{id:c.id},null,8,a))}});return(o,n)=>{o.component("vue-particles",l),(async()=>(t.tsParticles.init(),n.init&&await n.init(t.tsParticles),dispatchEvent(new CustomEvent("particlesInit",{detail:t.tsParticles}))))()}});
+(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/components/index.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+import { IParticlesProviderOptions } from './particles-provider';
+declare const VueParticles: (app: App, options?: IParticlesProviderOptions) => void;
+export default VueParticles;
+export type { IParticlesProviderContext, IParticlesProviderOptions, ParticlesPluginRegistrar, } from './particles-provider';

package/dist/src/components/particles-provider.d.ts

@@ -0,0 +1,13 @@
+import { Engine } from '@tsparticles/engine';
+import { App, InjectionKey } from 'vue';
+export type ParticlesPluginRegistrar = (engine: Engine) => Promise<void> | void;
+export interface IParticlesProviderOptions {
+    init?: ParticlesPluginRegistrar;
+}
+export interface IParticlesProviderContext {
+    loaded: boolean;
+}
+export declare const particlesProviderKey: InjectionKey<IParticlesProviderContext>;
+export declare function createParticlesProviderContext(): IParticlesProviderContext;
+export declare function initParticlesProvider(_app: App, context: IParticlesProviderContext, init?: ParticlesPluginRegistrar): Promise<void>;
+export declare function useParticlesProvider(): IParticlesProviderContext;

package/dist/src/components/vue-particles.vue.d.ts

@@ -0,0 +1,14 @@
+import { Container, ISourceOptions } from '@tsparticles/engine';
+export type IParticlesProps = ISourceOptions;
+type __VLS_Props = {
+    id: string;
+    options?: IParticlesProps;
+    url?: string;
+    theme?: string;
+};
+declare const _default: 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>;
+export default _default;

package/package.json

@@ -1,6 +1,15 @@
 {
   "name": "@tsparticles/vue3",
-  "version": "3.0.1",
+  "version": "4.0.0-beta.12",
+  "type": "module",
+  "main": "dist/particles.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/particles.es.js"
+    }
+  },
   "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.",
   "keywords": [
     "front-end",
@@ -65,16 +74,16 @@
     "prettify:readme": "prettier --write ./README.md",
     "preview": "vite preview --port 5050",
     "typecheck": "vue-tsc --noEmit",
-    "lint": "echo eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "lint": "eslint . --fix"
   },
   "files": [
     "dist",
     "README.md"
   ],
   "repository": {
-    "url": "https://github.com/tsparticles/vue3",
+    "url": "https://github.com/tsparticles/tsparticles.git",
     "type": "git",
-    "directory": "components/vue3"
+    "directory": "wrappers/vue3"
   },
   "author": "Matteo Bruni <matteo.bruni@me.com>",
   "license": "MIT",
@@ -101,31 +110,31 @@
     "access": "public"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.3",
-    "vue": "^3.3.13"
+    "@tsparticles/engine": "^4.0.0-beta.12",
+    "vue": "^3.5.32"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.6.1",
-    "@tsconfig/node18": "^18.2.2",
-    "@tsparticles/prettier-config": "^2.0.1",
-    "@types/node": "^20.10.5",
-    "@vitejs/plugin-vue": "^5.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/tsconfig": "^0.4.0",
-    "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.19.2",
-    "prettier": "^3.1.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10",
-    "vite-plugin-dts": "^3.7.0",
-    "vue-tsc": "^1.8.27"
+    "@eslint/js": "^10.0.1",
+    "@rushstack/eslint-patch": "^1.16.1",
+    "@tsconfig/node18": "^18.2.6",
+    "@tsparticles/prettier-config": "^3.4.6",
+    "@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"
   },
-  "main": "dist/particles.umd.js",
   "module": "dist/particles.es.js",
-  "types": "dist/index.d.ts",
-  "unpkg": "dist/particles.umd.min.js",
-  "jsdelivr": "dist/particles.umd.min.js",
-  "gitHead": "27afa842175cd217b4ab2f3941d34c4985ee8cc8"
+  "gitHead": "bdbc95716ce44665fbecfaca8757445e248b562d"
 }

package/dist/index.d.ts

@@ -1,6 +0,0 @@
-import type { App } from "vue";
-import { type Engine } from "@tsparticles/engine";
-declare const VueParticles: (app: App, options: {
-    init: (engine: Engine) => Promise<void>;
-}) => void;
-export default VueParticles;

package/dist/vue-particles.vue.d.ts

@@ -1,25 +0,0 @@
-import { type Container, type ISourceOptions } from "@tsparticles/engine";
-export type IParticlesProps = ISourceOptions;
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    id: string;
-    options?: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions> | undefined;
-    url?: string | undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    particlesLoaded: (container?: Container | undefined) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    id: string;
-    options?: import("@tsparticles/engine").RecursivePartial<import("@tsparticles/engine").IOptions> | undefined;
-    url?: string | undefined;
-}>>> & {
-    onParticlesLoaded?: ((container?: Container | undefined) => any) | undefined;
-}, {}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};