@tsparticles/vue3 3.0.0 → 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.0",
+  "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,12 +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",
@@ -97,31 +110,31 @@
     "access": "public"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.2",
-    "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": "^4.5.2",
-    "@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.6.4",
-    "vue-tsc": "^1.8.26"
+    "@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": "b12cb584dde5f3875976eafe87ecb1b7154c14c1"
+  "gitHead": "bdbc95716ce44665fbecfaca8757445e248b562d"
 }

package/.eslintrc.cjs

@@ -1,15 +0,0 @@
-/* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
-
-module.exports = {
-  root: true,
-  extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/eslint-config-typescript/recommended",
-    "@vue/eslint-config-prettier",
-  ],
-  env: {
-    "vue/setup-compiler-macros": true,
-  },
-};

package/CHANGELOG.md

@@ -1,183 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [3.0.0](https://github.com/tsparticles/vue3/compare/v2.12.0...v3.0.0) (2023-12-22)
-
-
-### Bug Fixes
-
-* use event syntax for particlesLoaded ([5b4de3a](https://github.com/tsparticles/vue3/commit/5b4de3a411ede58c00517cf72fbab5bd5acfb882))
-
-
-### Features
-
-* updated for v3 ([c49ca9f](https://github.com/tsparticles/vue3/commit/c49ca9f1aec1f7ddaa0de7806291a5c4c78eb848))
-* updates for v3 ([c62d3d3](https://github.com/tsparticles/vue3/commit/c62d3d30dfcc5307490fb15f2ed132b36036f252))
-
-
-
-
-
-# [2.12.0](https://github.com/tsparticles/vue3/compare/v2.11.1...v2.12.0) (2023-08-04)
-
-**Note:** Version bump only for package vue3-particles
-
-
-
-
-
-## [2.11.1](https://github.com/tsparticles/vue3/compare/v2.11.0...v2.11.1) (2023-07-27)
-
-
-### Bug Fixes
-
-* fixed issue with engine not loading correctly, closes: [#26](https://github.com/tsparticles/vue3/issues/26) ([94e5215](https://github.com/tsparticles/vue3/commit/94e521546b7ed008d7b980e999ca30d0ce3d49db))
-
-
-
-
-
-# [2.11.0](https://github.com/tsparticles/vue3/compare/v2.10.1...v2.11.0) (2023-07-14)
-
-**Note:** Version bump only for package vue3-particles
-
-
-
-
-
-## 2.10.1 (2023-06-04)
-
-
-### Features
-
-* adding vue-particles tag ([8b12d56](https://github.com/tsparticles/vue3/commit/8b12d5654515d52729ea7902f5e16806ddd48422))
-
-
-
-
-
-## [2.9.3](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.9.2...vue3-particles@2.9.3) (2023-02-12)
-
-**Note:** Version bump only for package vue3-particles
-
-## [2.9.2](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.9.1...vue3-particles@2.9.2) (2023-02-12)
-
-**Note:** Version bump only for package vue3-particles
-
-## [2.9.1](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.9.0...vue3-particles@2.9.1) (2023-02-11)
-
-**Note:** Version bump only for package vue3-particles
-
-# [2.9.0](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.8.0...vue3-particles@2.9.0) (2023-02-10)
-
-**Note:** Version bump only for package vue3-particles
-
-# [2.8.0](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.7.1...vue3-particles@2.8.0) (2023-01-18)
-
-**Note:** Version bump only for package vue3-particles
-
-## [2.7.1](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.7.0...vue3-particles@2.7.1) (2022-12-25)
-
-**Note:** Version bump only for package vue3-particles
-
-# [2.7.0](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.6.0...vue3-particles@2.7.0) (2022-12-23)
-
-**Note:** Version bump only for package vue3-particles
-
-# [2.6.0](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.5.3...vue3-particles@2.6.0) (2022-12-06)
-
-**Note:** Version bump only for package vue3-particles
-
-## [2.5.3](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.5.2...vue3-particles@2.5.3) (2022-11-07)
-
-**Note:** Version bump only for package vue3-particles
-
-## [2.5.2](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.5.1...vue3-particles@2.5.2) (2022-11-07)
-
-**Note:** Version bump only for package vue3-particles
-
-## [2.5.1](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.5.0...vue3-particles@2.5.1) (2022-11-03)
-
-**Note:** Version bump only for package vue3-particles
-
-# [2.5.0](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.4.0...vue3-particles@2.5.0) (2022-11-02)
-
-**Note:** Version bump only for package vue3-particles
-
-# [2.4.0](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.3.3...vue3-particles@2.4.0) (2022-10-30)
-
-**Note:** Version bump only for package vue3-particles
-
-## [2.3.3](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.3.2...vue3-particles@2.3.3) (2022-09-30)
-
-**Note:** Version bump only for package vue3-particles
-
-## [2.3.2](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.3.1...vue3-particles@2.3.2) (2022-09-21)
-
-**Note:** Version bump only for package vue3-particles
-
-## [2.3.1](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.3.0...vue3-particles@2.3.1) (2022-09-13)
-
-**Note:** Version bump only for package vue3-particles
-
-# [2.3.0](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.2.4...vue3-particles@2.3.0) (2022-09-11)
-
-**Note:** Version bump only for package vue3-particles
-
-## [2.2.4](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.2.2...vue3-particles@2.2.4) (2022-08-26)
-
-**Note:** Version bump only for package vue3-particles
-
-## [2.2.3](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.2.2...vue3-particles@2.2.3) (2022-08-21)
-
-**Note:** Version bump only for package vue3-particles
-
-## [2.2.2](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.2.1...vue3-particles@2.2.2) (2022-08-16)
-
-### Bug Fixes
-
--   fixed double mouse events on mobile using pointer events, closes [#4622](https://github.com/matteobruni/tsparticles/issues/4622) ([1019fa4](https://github.com/matteobruni/tsparticles/commit/1019fa431f8a43cbd45d6adeb5adf94433e6e04b))
-
-## [2.2.1](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.2.0...vue3-particles@2.2.1) (2022-08-12)
-
-**Note:** Version bump only for package vue3-particles
-
-# [2.2.0](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.1.4...vue3-particles@2.2.0) (2022-08-11)
-
-### Bug Fixes
-
--   **deps:** update capacitor monorepo to v4 ([a63d3a0](https://github.com/matteobruni/tsparticles/commit/a63d3a005ff47dd38ca7924b29267f4796ffebdb))
--   **deps:** update dependency riot to v7 ([116fa3f](https://github.com/matteobruni/tsparticles/commit/116fa3f0808bb8e1e3df767513ebcb82c2f9e0e5))
--   fixed correctly both [#4031](https://github.com/matteobruni/tsparticles/issues/4031) and [#4385](https://github.com/matteobruni/tsparticles/issues/4385) ([6b57b69](https://github.com/matteobruni/tsparticles/commit/6b57b69585f931478118bd466dcdce9bbc90fa79))
-
-## [2.1.4](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.1.3...vue3-particles@2.1.4) (2022-07-28)
-
-### Bug Fixes
-
--   fixed issue with destroyed containers, fixes [#4385](https://github.com/matteobruni/tsparticles/issues/4385), fixes [#4413](https://github.com/matteobruni/tsparticles/issues/4413), fixes [#4534](https://github.com/matteobruni/tsparticles/issues/4534) ([4d22425](https://github.com/matteobruni/tsparticles/commit/4d22425210f64b937a5d1b7bf825624b3ed5f2b6)), closes [#4532](https://github.com/matteobruni/tsparticles/issues/4532)
-
-### Features
-
--   preparing react-particles and switching alternate packages ([49e749e](https://github.com/matteobruni/tsparticles/commit/49e749e90e076f0cb22eefe0f3399102f5b9fb35))
-
-## [2.1.3](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.1.2...vue3-particles@2.1.3) (2022-07-01)
-
-**Note:** Version bump only for package vue3-particles
-
-## [2.1.2](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.1.1...vue3-particles@2.1.2) (2022-07-01)
-
-**Note:** Version bump only for package vue3-particles
-
-## [2.1.1](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.1.0...vue3-particles@2.1.1) (2022-07-01)
-
-**Note:** Version bump only for package vue3-particles
-
-# [2.1.0](https://github.com/matteobruni/tsparticles/compare/vue3-particles@2.0.6...vue3-particles@2.1.0) (2022-06-18)
-
-### Bug Fixes
-
--   **deps:** update dependency @capacitor/core to v3.5.0 ([581bb7e](https://github.com/matteobruni/tsparticles/commit/581bb7e2f4f6aceb3535daf9223954a80f2daa81))
--   **deps:** update react monorepo to v18.1.0 ([6b45793](https://github.com/matteobruni/tsparticles/commit/6b457937c41d7681a2135dfcb6ff220e578f22bb))
--   fixed connect links options ([5eb3186](https://github.com/matteobruni/tsparticles/commit/5eb31866b3a9fe1328969c254f2fff0be995b1f5))

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;
-    };
-};

package/src/components/index.ts

@@ -1,19 +0,0 @@
-import type { App } from "vue";
-import particles from "./vue-particles.vue";
-import { type Engine, tsParticles } from "@tsparticles/engine";
-
-const VueParticles = (app: App, options: { init: (engine: Engine) => Promise<void> }) => {
-    app.component("vue-particles", particles);
-
-    (async () => {
-        tsParticles.init();
-
-        if (options.init) {
-            await options.init(tsParticles);
-        }
-
-        dispatchEvent(new CustomEvent("particlesInit", { detail: tsParticles }));
-    })();
-};
-
-export default VueParticles;

package/src/components/vue-particles.vue

@@ -1,63 +0,0 @@
-<template>
-    <div :id="id"></div>
-</template>
-
-<script setup lang="ts">
-import { nextTick, onMounted, onUnmounted } from "vue";
-import { type Container, type ISourceOptions, type Engine, tsParticles } from "@tsparticles/engine";
-
-export type IParticlesProps = ISourceOptions;
-
-let container: Container | undefined, engine: Engine | undefined;
-
-const props = defineProps<{
-    id: string;
-    options?: IParticlesProps;
-    url?: string;
-}>();
-
-const emit = defineEmits<{
-    (e: "particlesLoaded", container?: Container): void;
-}>();
-
-addEventListener("particlesInit", (e: Event) => {
-    const evt = e as CustomEvent<Engine>;
-
-    engine = evt.detail;
-
-    loadParticles();
-});
-
-const loadParticles = async () => {
-    if (!engine) {
-        engine = tsParticles;
-    }
-
-    container = await engine.load({
-        id: props.id,
-        url: props.url,
-        options: props.options,
-    });
-
-    emit("particlesLoaded", container);
-};
-
-onMounted(() => {
-    nextTick(() => {
-        if (!props.id) {
-            throw new Error("Prop 'id' is required!");
-        }
-
-        loadParticles();
-    });
-});
-
-onUnmounted(() => {
-    if (!container) {
-        return;
-    }
-
-    container.destroy();
-    container = undefined;
-});
-</script>

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "extends": [
-    "@vue/tsconfig/tsconfig.dom.json"//,
-    //"@vue/tsconfig/tsconfig.lib.json"
-  ],
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-
-  "references": [
-    {
-      "path": "./tsconfig.vite-config.json"
-    }
-  ]
-}

package/tsconfig.vite-config.json

@@ -1,16 +0,0 @@
-{
-  "extends": [
-    "@tsconfig/node18/tsconfig.json",
-    "@vue/tsconfig/tsconfig.dom.json"//,
-    //"@vue/tsconfig/tsconfig.lib.json"
-  ],
-  "include": [
-    "vite.config.*"
-  ],
-  "compilerOptions": {
-    "composite": true,
-    "types": [
-      "node"
-    ]
-  }
-}

package/typedoc.json

@@ -1,15 +0,0 @@
-{
-  "includes": "./markdown",
-  "entryPoints": [
-    "./src/"
-  ],
-  "entryPointStrategy": "expand",
-  "name": "tsParticles Vue 3.x Component",
-  "includeVersion": true,
-  "hideGenerator": true,
-  "out": "./docs",
-  "validation": {
-    "invalidLink": true,
-    "notDocumented": true
-  }
-}

package/vite.config.ts

@@ -1,34 +0,0 @@
-import { fileURLToPath, URL } from "url";
-import path from "path";
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import vueJsx from "@vitejs/plugin-vue-jsx";
-import dts from "vite-plugin-dts";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-    build: {
-        lib: {
-            entry: path.resolve(__dirname, "src/components/index.ts"),
-            name: "@tsparticles/vue3",
-            fileName: format => `particles.${format}.js`,
-        },
-        rollupOptions: {
-            external: [ "vue", "@tsparticles/engine" ],
-            output: {
-                // Provide global variables to use in the UMD build
-                // Add external deps here
-                globals: {
-                    vue: "Vue",
-                    "@tsparticles/engine": "tsParticles",
-                },
-            },
-        },
-    },
-    plugins: [ vue(), vueJsx(), dts() ],
-    resolve: {
-        alias: {
-            "@": fileURLToPath(new URL("./src", import.meta.url)),
-        },
-    },
-});