feat: working for making it work and updating for v3, still not ready

tsparticles · Dec 21, 2023 · d3e75df · d3e75df
1 parent 8bb427c
commit d3e75df
Show file tree

Hide file tree

Showing 11 changed files with 3,427 additions and 1,190 deletions.
diff --git a/apps/vue2/package.json b/apps/vue2/package.json
@@ -21,41 +21,41 @@
     "url": "https://github.com/tsparticles/vue2/issues"
   },
   "dependencies": {
-    "@tsparticles/configs": "^3.0.0-beta.2",
-    "@tsparticles/engine": "^3.0.0-beta.2",
+    "@tsparticles/configs": "^3.0.2",
+    "@tsparticles/engine": "^3.0.2",
     "@tsparticles/vue": "workspace:^",
-    "tsparticles": "^3.0.0-beta.2",
-    "vue": "^2.7.14",
+    "tsparticles": "^3.0.2",
+    "vue": "^2.7.15",
     "vue-class-component": "^7.2.6",
     "vue-property-decorator": "^9.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.19",
+    "@babel/core": "^7.23.5",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.22.15",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
+    "@babel/plugin-proposal-decorators": "^7.23.5",
+    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-typescript": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
-    "babel-loader": "^8.3.0",
-    "eslint": "^8.49.0",
-    "eslint-config-prettier": "^9.0.0",
-    "fork-ts-checker-webpack-plugin": "^8.0.0",
-    "postcss": "^8.4.29",
-    "prettier": "^3.0.3",
-    "rollup": "^2.79.1",
+    "babel-loader": "^9.1.3",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
+    "postcss": "^8.4.32",
+    "prettier": "^3.1.0",
+    "rollup": "^4.7.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript": "^1.0.1",
-    "rollup-plugin-typescript2": "^0.35.0",
+    "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-vue": "^5.1.9",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "vue-loader": "^15.10.2",
-    "vue-template-compiler": "^2.7.14",
+    "vue-template-compiler": "^2.7.15",
     "webpack": "^4.46.0"
   }
 }
diff --git a/apps/vue2/src/App.vue b/apps/vue2/src/App.vue
@@ -1,22 +1,16 @@
 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png"/>
-    <vue-particles id="tsparticles" :options="options" :particlesInit="particlesInit"/>
+    <vue-particles id="tsparticles" :options="options"/>
   </div>
 </template>
 
 <script lang="ts">
 import { Vue } from "vue-property-decorator";
 import configs from "@tsparticles/configs";
-import type { Engine } from "@tsparticles/engine";
-import { loadFull } from "tsparticles";
 
 export default class App extends Vue {
   options = configs.basic;
-
-  async particlesInit(engine: Engine) {
-    await loadFull(engine);
-  }
 }
 </script>
 

diff --git a/apps/vue2/src/main.ts b/apps/vue2/src/main.ts
@@ -1,12 +1,20 @@
 import Vue from 'vue'
 import App from './App.vue'
 import Particles from "@tsparticles/vue";
+import { loadFull } from "tsparticles";
+import type { Engine } from '@tsparticles/engine';
 
 Vue.config.productionTip = false
 
 
-Vue.use(Particles);
+Vue.use(Particles, {
+    init: async (engine: Engine) => {
+        // you can initialize the tsParticles instance (main)
+        // here, adding custom shapes or presets
+        await loadFull(engine);
+    }
+});
 
 new Vue({
-  render: h => h(App),
+    render: h => h(App),
 }).$mount('#app')
diff --git a/apps/vue2/src/shims-vue.d.ts b/apps/vue2/src/shims-vue.d.ts
@@ -3,4 +3,4 @@ declare module '*.vue' {
   export default Vue
 }
 
-declare module "@tsparticles/vue";
+declare module "@tsparticles/vue";
diff --git a/apps/vue3/package.json b/apps/vue3/package.json
@@ -12,29 +12,29 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@tsparticles/configs": "^3.0.0-beta.2",
-    "@tsparticles/engine": "^3.0.0-beta.2",
+    "@tsparticles/configs": "^3.0.2",
+    "@tsparticles/engine": "^3.0.2",
     "@tsparticles/vue": "workspace:^",
-    "tsparticles": "^3.0.0-beta.2",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "tsparticles": "^3.0.2",
+    "vue": "^3.3.11",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.3.2",
-    "@tsconfig/node18": "^18.2.0",
-    "@types/node": "^20.4.7",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@rushstack/eslint-patch": "^1.6.0",
+    "@tsconfig/node18": "^18.2.2",
+    "@types/node": "^20.10.4",
+    "@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.46.0",
-    "eslint-plugin-vue": "^9.16.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-vue": "^9.19.2",
     "minimatch": "^9.0.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.1",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.8",
-    "vue-tsc": "^1.8.8"
+    "prettier": "^3.1.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.7",
+    "vue-tsc": "^1.8.25"
   }
 }
diff --git a/apps/vue3/src/App.vue b/apps/vue3/src/App.vue
@@ -1,14 +1,9 @@
 <script setup lang="ts">
 import configs from "@tsparticles/configs";
-import type { Container, Engine } from "@tsparticles/engine";
-import { loadFull } from "tsparticles";
+import type { Container } from "@tsparticles/engine";
 
 const options = configs.basic;
 
-const particlesInit = async (engine: Engine) => {
-  await loadFull(engine);
-};
-
 const particlesLoaded = async (container: Container) => {
   console.log(container);
 };
@@ -17,10 +12,9 @@ const particlesLoaded = async (container: Container) => {
 <template>
   <main>
     <vue-particles
-      id="tsparticles"
-      :options="options"
-      :particles-init="particlesInit"
-      @particles-loaded="particlesLoaded"
+        id="tsparticles"
+        :options="options"
+        @particles-loaded="particlesLoaded"
     />
   </main>
 </template>

diff --git a/apps/vue3/src/main.ts b/apps/vue3/src/main.ts
@@ -3,9 +3,23 @@ import Particles from "@tsparticles/vue";
 import App from "./App.vue";
 
 import "./assets/main.css";
+import { loadFull } from "tsparticles";
+import type { Engine } from "@tsparticles/engine";
 
 const app = createApp(App);
 
-app.use(Particles);
+app.use(Particles, {
+    init: async (engine: Engine) => {
+        // you can initialize the tsParticles instance (main)
+        // here, adding custom shapes or presets
+        await loadFull(engine);
+    }
+}); /*.use(Particles, {
+    init: async (engine: Engine) => {
+        // you can initialize the tsParticles instance (main)
+        // here, adding custom shapes or presets
+        await loadFull(engine);
+    }
+});*/
 
 app.mount("#app");
diff --git a/components/vue/package.json b/components/vue/package.json
@@ -92,29 +92,29 @@
     ],
     "prettier": "@tsparticles/prettier-config",
     "dependencies": {
-        "@tsparticles/engine": "^3.0.0-beta.2",
+        "@tsparticles/engine": "^3.0.2",
         "vue-demi": "^0.14.6"
     },
     "devDependencies": {
-        "@rushstack/eslint-patch": "^1.4.0",
+        "@rushstack/eslint-patch": "^1.6.0",
         "@tsconfig/node18": "^18.2.2",
-        "@tsparticles/prettier-config": "^1.12.0",
-        "@types/node": "^20.6.0",
-        "@vitejs/plugin-vue": "^4.3.4",
-        "@vitejs/plugin-vue-jsx": "^3.0.2",
+        "@tsparticles/prettier-config": "^2.0.0",
+        "@types/node": "^20.10.4",
+        "@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.49.0",
-        "eslint-plugin-vue": "^9.17.0",
-        "prettier": "^3.0.3",
-        "typescript": "^5.2.2",
+        "eslint": "^8.55.0",
+        "eslint-plugin-vue": "^9.19.2",
+        "prettier": "^3.1.0",
+        "typescript": "^5.3.3",
         "unbuild": "^2.0.0",
-        "vue-tsc": "^1.8.11"
+        "vue-tsc": "^1.8.25"
     },
     "peerDependencies": {
         "@vue/composition-api": "^1.7.2",
-        "vue": "^2.7.0 || >=3.3.0"
+        "vue": "^2.0.0 || >=3.0.0"
     },
     "peerDependenciesMeta": {
         "@vue/composition-api": {

diff --git a/components/vue/src/components/Particles.vue → ...ents/vue/src/components/vue-particles.vue b/components/vue/src/components/Particles.vue → ...ents/vue/src/components/vue-particles.vue
diff --git a/components/vue/src/index.ts b/components/vue/src/index.ts
@@ -1,10 +1,16 @@
 import type { App } from "vue-demi";
-import Particles from "./components/Particles.vue";
+import Particles from "./components/vue-particles.vue";
+import { type Engine, tsParticles } from "@tsparticles/engine";
 
 export const ParticlesPlugin = {
-    install(app: App): void {
-        app.component("Particles", Particles);
-        app.component("vue-particles", Particles);
+    install(app: App, options: { init?: (engine: Engine) => Promise<void> }): void {
+        (async () => {
+            if (options.init) {
+                await options.init(tsParticles);
+            }
+        })().then(() => {
+            app.component("vue-particles", Particles);
+        });
     },
 };