Skip to content

Commit b113721

Browse files
matteobrunimatteobruni
committed
build: try local component
1 parent 057debb commit b113721

File tree

13 files changed

+608
-574
lines changed

13 files changed

+608
-574
lines changed

‎apps/nuxt3/package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@
1919
"dependencies": {
2020
"@babel/core": "^7.22.9",
2121
"@babel/eslint-parser": "^7.22.9",
22-
"@commitlint/cli": "^17.6.6",
23-
"@commitlint/config-conventional": "^17.6.6",
22+
"@commitlint/cli": "^17.6.7",
23+
"@commitlint/config-conventional": "^17.6.7",
24+
"@nuxt/ui-templates": "npm:@nuxt/ui-templates-edge@1.1.1-28121008.b3ceabe",
2425
"@nuxtjs/eslint-config": "^12.0.0",
2526
"@nuxtjs/eslint-module": "^4.1.0",
2627
"@vue/reactivity": "^3.3.4",
@@ -33,12 +34,12 @@
3334
"eslint-plugin-nuxt": "^4.0.0",
3435
"eslint-plugin-vue": "^9.15.1",
3536
"lint-staged": "^13.2.3",
36-
"nuxt": "^3.6.2",
37+
"nuxt": "^3.6.5",
3738
"prettier": "^3.0.0",
38-
"tsparticles": "^2.11.0",
39+
"tsparticles": "^2.11.1",
3940
"typescript": "^5.1.6",
4041
"vue": "^3.3.4",
4142
"vue3-particles": "workspace:^",
42-
"webpack": "^5.88.1"
43+
"webpack": "^5.88.2"
4344
}
4445
}

‎apps/vue3/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,17 @@
1212
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
1313
},
1414
"dependencies": {
15-
"tsparticles": "^2.11.0",
16-
"tsparticles-demo-configs": "^2.11.0",
17-
"tsparticles-engine": "^2.11.0",
15+
"tsparticles": "^2.11.1",
16+
"tsparticles-demo-configs": "^2.11.1",
17+
"tsparticles-engine": "^2.11.1",
1818
"vue": "^3.3.4",
1919
"vue-router": "^4.2.4",
2020
"vue3-particles": "workspace:^"
2121
},
2222
"devDependencies": {
2323
"@rushstack/eslint-patch": "^1.3.2",
2424
"@tsconfig/node18": "^18.2.0",
25-
"@types/node": "^20.4.2",
25+
"@types/node": "^20.4.5",
2626
"@vitejs/plugin-vue": "^4.2.3",
2727
"@vitejs/plugin-vue-jsx": "^3.0.1",
2828
"@vue/eslint-config-prettier": "^8.0.0",
@@ -34,7 +34,7 @@
3434
"npm-run-all": "^4.1.5",
3535
"prettier": "^3.0.0",
3636
"typescript": "^5.1.6",
37-
"vite": "^4.4.4",
38-
"vue-tsc": "^1.8.5"
37+
"vite": "^4.4.7",
38+
"vue-tsc": "^1.8.6"
3939
}
4040
}

‎apps/vue3/src/App.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
<script setup lang="ts">
2-
import type { Engine } from "tsparticles-engine";
2+
import type { Container, Engine } from "tsparticles-engine";
33
import { loadFull } from "tsparticles";
44
import configs from "tsparticles-demo-configs";
55
66
import HelloWorld from "./components/HelloWorld.vue";
77
import TheWelcome from "./components/TheWelcome.vue";
88
99
const options = configs.basic;
10+
1011
const particlesInit = async (engine: Engine) => {
1112
await loadFull(engine);
13+
14+
console.log(engine);
15+
};
16+
17+
const particlesLoaded = async (container: Container) => {
18+
console.log(container);
1219
};
1320
</script>
1421

@@ -30,7 +37,8 @@ const particlesInit = async (engine: Engine) => {
3037
<main>
3138
<TheWelcome />
3239

33-
<vue-particles id="tsparticles" :options="options" :particlesInit="particlesInit" />
40+
<vue-particles id="tsparticles" :options="options" :particlesInit="particlesInit"
41+
:particlesLoaded="particlesLoaded" />
3442
</main>
3543
</template>
3644

‎apps/vue3/src/components/Particles/Particles.vue‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<div :id="id"></div>
3+
</template>
4+
5+
<script lang="ts">
6+
import { defineComponent, nextTick } from "vue";
7+
import type { PropType } from "vue";
8+
import { tsParticles } from "tsparticles-engine";
9+
import type { Container, ISourceOptions, Engine } from "tsparticles-engine";
10+
11+
export type IParticlesProps = ISourceOptions;
12+
export type IParticlesParams = IParticlesProps;
13+
14+
let container: Container | undefined;
15+
16+
export default defineComponent({
17+
props: {
18+
id: {
19+
type: String,
20+
required: true
21+
},
22+
options: {
23+
type: Object as PropType<IParticlesProps>
24+
},
25+
url: {
26+
type: String
27+
},
28+
particlesLoaded: {
29+
type: Function as PropType<(container: Container) => void>
30+
},
31+
particlesInit: {
32+
type: Function as PropType<(engine: Engine) => Promise<void>>
33+
}
34+
},
35+
mounted(): void {
36+
nextTick(async () => {
37+
if (!this.id) {
38+
throw new Error("Prop 'id' is required!");
39+
}
40+
41+
tsParticles.init();
42+
43+
if (this.particlesInit) {
44+
await this.particlesInit(tsParticles);
45+
}
46+
47+
container = await tsParticles.load({
48+
id: this.id,
49+
url: this.url,
50+
options: this.options
51+
});
52+
53+
if (this.particlesLoaded && container) {
54+
this.particlesLoaded(container);
55+
}
56+
});
57+
},
58+
unmounted(): void {
59+
if (container) {
60+
container.destroy();
61+
62+
container = undefined;
63+
}
64+
}
65+
});
66+
</script>

‎apps/vue3/src/components/Particles/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { App } from "vue";
2+
import particles from "./Particles.vue";
3+
4+
const VueParticles = (app: App) => {
5+
app.component("vue-particles", particles);
6+
app.component("Particles", particles);
7+
};
8+
9+
export { particles as ParticlesComponent };
10+
export default VueParticles;

‎apps/vue3/src/main.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { createApp } from "vue";
2-
import Particles from "vue3-particles";
2+
//import Particles from "vue3-particles";
3+
import Particles from "./components/Particles";
34
import App from "./App.vue";
45
import router from "./router";
56

‎components/vue3-alt/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,14 +94,14 @@
9494
],
9595
"prettier": "@tsparticles/prettier-config",
9696
"dependencies": {
97-
"tsparticles-engine": "^2.11.0",
97+
"tsparticles-engine": "^2.11.1",
9898
"vue": "^3.3.4"
9999
},
100100
"devDependencies": {
101101
"@rushstack/eslint-patch": "^1.3.2",
102102
"@tsconfig/node18": "^18.2.0",
103103
"@tsparticles/prettier-config": "^1.11.0",
104-
"@types/node": "^20.4.2",
104+
"@types/node": "^20.4.5",
105105
"@vitejs/plugin-vue": "^4.2.3",
106106
"@vitejs/plugin-vue-jsx": "^3.0.1",
107107
"@vue/eslint-config-prettier": "^8.0.0",
@@ -111,9 +111,9 @@
111111
"eslint-plugin-vue": "^9.15.1",
112112
"prettier": "^3.0.0",
113113
"typescript": "^5.1.6",
114-
"vite": "^4.4.4",
115-
"vite-plugin-dts": "^3.3.0",
116-
"vue-tsc": "^1.8.5"
114+
"vite": "^4.4.7",
115+
"vite-plugin-dts": "^3.3.1",
116+
"vue-tsc": "^1.8.6"
117117
},
118118
"main": "dist/particles.vue3.umd.js",
119119
"module": "dist/particles.vue3.es.js",

‎components/vue3-alt/src/components/Particles.vue‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,23 @@ export type IParticlesParams = IParticlesProps;
1414
let container: Container | undefined;
1515
1616
export default defineComponent({
17-
name: "Particles",
1817
props: {
1918
id: {
2019
type: String,
21-
required: true,
20+
required: true
2221
},
2322
options: {
24-
type: Object as PropType<IParticlesProps>,
23+
type: Object as PropType<IParticlesProps>
2524
},
2625
url: {
27-
type: String,
26+
type: String
2827
},
2928
particlesLoaded: {
30-
type: Function as PropType<(container: Container) => void>,
29+
type: Function as PropType<(container: Container) => void>
3130
},
3231
particlesInit: {
33-
type: Function as PropType<(engine: Engine) => void>,
34-
},
32+
type: Function as PropType<(engine: Engine) => Promise<void>>
33+
}
3534
},
3635
mounted(): void {
3736
nextTick(async () => {
@@ -45,19 +44,15 @@ export default defineComponent({
4544
await this.particlesInit(tsParticles);
4645
}
4746
48-
const cb = (cbContainer?: Container) => {
49-
container = cbContainer;
50-
51-
if (this.particlesLoaded && container) {
52-
this.particlesLoaded(container);
53-
}
54-
};
47+
container = await tsParticles.load({
48+
id: this.id,
49+
url: this.url,
50+
options: this.options
51+
});
5552
56-
const loadedContainer = await (this.url
57-
? tsParticles.loadJSON(this.id, this.url)
58-
: tsParticles.load(this.id, this.options ?? {}));
59-
60-
cb(loadedContainer);
53+
if (this.particlesLoaded && container) {
54+
this.particlesLoaded(container);
55+
}
6156
});
6257
},
6358
unmounted(): void {
@@ -66,6 +61,6 @@ export default defineComponent({
6661
6762
container = undefined;
6863
}
69-
},
64+
}
7065
});
7166
</script>

‎components/vue3/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,14 +94,14 @@
9494
],
9595
"prettier": "@tsparticles/prettier-config",
9696
"dependencies": {
97-
"tsparticles-engine": "^2.11.0",
97+
"tsparticles-engine": "^2.11.1",
9898
"vue": "^3.3.4"
9999
},
100100
"devDependencies": {
101101
"@rushstack/eslint-patch": "^1.3.2",
102102
"@tsconfig/node18": "^18.2.0",
103103
"@tsparticles/prettier-config": "^1.11.0",
104-
"@types/node": "^20.4.2",
104+
"@types/node": "^20.4.5",
105105
"@vitejs/plugin-vue": "^4.2.3",
106106
"@vitejs/plugin-vue-jsx": "^3.0.1",
107107
"@vue/eslint-config-prettier": "^8.0.0",
@@ -111,9 +111,9 @@
111111
"eslint-plugin-vue": "^9.15.1",
112112
"prettier": "^3.0.0",
113113
"typescript": "^5.1.6",
114-
"vite": "^4.4.4",
115-
"vite-plugin-dts": "^3.3.0",
116-
"vue-tsc": "^1.8.5"
114+
"vite": "^4.4.7",
115+
"vite-plugin-dts": "^3.3.1",
116+
"vue-tsc": "^1.8.6"
117117
},
118118
"main": "dist/vue3-particles.umd.js",
119119
"module": "dist/vue3-particles.es.js",

‎components/vue3/src/components/Particles.vue‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,23 @@ export type IParticlesParams = IParticlesProps;
1414
let container: Container | undefined;
1515
1616
export default defineComponent({
17-
name: "Particles",
1817
props: {
1918
id: {
2019
type: String,
21-
required: true,
20+
required: true
2221
},
2322
options: {
24-
type: Object as PropType<IParticlesProps>,
23+
type: Object as PropType<IParticlesProps>
2524
},
2625
url: {
27-
type: String,
26+
type: String
2827
},
2928
particlesLoaded: {
30-
type: Function as PropType<(container: Container) => void>,
29+
type: Function as PropType<(container: Container) => void>
3130
},
3231
particlesInit: {
33-
type: Function as PropType<(engine: Engine) => void>,
34-
},
32+
type: Function as PropType<(engine: Engine) => Promise<void>>
33+
}
3534
},
3635
mounted(): void {
3736
nextTick(async () => {
@@ -45,19 +44,15 @@ export default defineComponent({
4544
await this.particlesInit(tsParticles);
4645
}
4746
48-
const cb = (cbContainer?: Container) => {
49-
container = cbContainer;
50-
51-
if (this.particlesLoaded && container) {
52-
this.particlesLoaded(container);
53-
}
54-
};
47+
container = await tsParticles.load({
48+
id: this.id,
49+
url: this.url,
50+
options: this.options
51+
});
5552
56-
const loadedContainer = await (this.url
57-
? tsParticles.loadJSON(this.id, this.url)
58-
: tsParticles.load(this.id, this.options ?? {}));
59-
60-
cb(loadedContainer);
53+
if (this.particlesLoaded && container) {
54+
this.particlesLoaded(container);
55+
}
6156
});
6257
},
6358
unmounted(): void {
@@ -66,6 +61,6 @@ export default defineComponent({
6661
6762
container = undefined;
6863
}
69-
},
64+
}
7065
});
7166
</script>

0 commit comments

Comments
 (0)